:root{
  --c-surface:#fff; --c-border:#e8e6e1; --c-border-2:#dcd9d3; --c-surface-3:#f1efeb;
  --c-text:#1a1816; --c-text-2:#4b4842; --c-text-3:#807c75; --c-text-4:#a6a29a;
  --c-wine:#7a1f2b; --c-wine-hover:#6a1923; --c-wine-press:#5a141d;
  --c-danger:#b3261e; --c-info:#1f5fae; --c-success:#1f7a4d;
  --f-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-ctrl:9px;
}
*{box-sizing:border-box} html,body{height:100%}
button,input{font:inherit;color:inherit} a{color:inherit;text-decoration:none}

/* ===== Hero fotografico: foto oficial a pantalla completa + tarjeta de vidrio a la derecha ===== */
body.hero{
  margin:0; min-height:100vh; position:relative;
  display:flex; align-items:center; justify-content:flex-end;
  padding:40px clamp(20px, 7vw, 120px);
  font-family:var(--f-sans); color:var(--c-text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    /* scrim inferior para ocultar la letra chica del banner */
    linear-gradient(0deg, rgba(20,5,8,.7) 0%, rgba(20,5,8,.15) 12%, transparent 22%),
    /* scrim superior */
    linear-gradient(180deg, rgba(20,5,8,.45) 0%, transparent 16%),
    /* velo: claro a la izquierda (foto visible), vino opaco a la derecha (cubre el texto promo) */
    linear-gradient(100deg, rgba(20,5,8,.30) 0%, rgba(20,5,8,.14) 24%, rgba(40,10,16,.74) 56%, rgba(54,13,20,.95) 78%, rgba(58,15,21,.97) 100%),
    url("/img/brand/Vinotempo-Bnr-Home-03.webp") left center/cover no-repeat fixed,
    linear-gradient(120deg,#2a0a10,#5a141d);
}
/* viñeteado suave para profundidad y contraste del logo */
body.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 18% 30%, transparent 40%, rgba(0,0,0,.28) 100%);
}

.hero-brand{position:absolute; top:32px; left:clamp(20px,7vw,120px); z-index:3; display:block}
.hero-brand img{height:66px; width:auto; filter:drop-shadow(0 8px 26px rgba(0,0,0,.75)) drop-shadow(0 2px 5px rgba(0,0,0,.7))}

.stage{position:relative; z-index:2; width:100%; max-width:430px; display:flex; justify-content:flex-end}

/* tarjeta de vidrio */
.card{
  width:100%;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(255,255,255,.65);
  border-radius:20px;
  box-shadow:0 28px 80px rgba(18,4,7,.5), 0 2px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
  padding:40px 36px;
}
.card h2{margin:0 0 6px; font-size:25px; font-weight:600; letter-spacing:-.015em; font-family:var(--f-sans)}
.card .sub{margin:0 0 26px; font-size:13.5px; color:var(--c-text-3)}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:15px}
.field label{font-size:12.5px; font-weight:500; color:var(--c-text-2)}
.input-wrap{position:relative}
.input{width:100%; height:44px; padding:0 12px 0 40px; border-radius:var(--r-ctrl);
  border:1px solid var(--c-border-2); background:#fff; color:var(--c-text); font-size:14px;
  transition:border-color 150ms ease, box-shadow 150ms ease}
.input:focus{outline:none; border-color:var(--c-wine); box-shadow:0 0 0 3px rgba(122,31,43,.13)}
.input.pwd{padding-right:44px}
.input-wrap > svg.lead{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--c-text-3); pointer-events:none}
.input-wrap .trail{position:absolute; right:7px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:transparent; border:0; cursor:pointer; color:var(--c-text-3)}
.input-wrap .trail:hover{background:var(--c-surface-3); color:var(--c-text)}
.input-wrap .trail svg{width:17px; height:17px}

.row{display:flex; align-items:center; gap:8px} .row.sb{justify-content:space-between}
.check{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--c-text-2); cursor:pointer; user-select:none}
.check input{position:absolute; opacity:0; pointer-events:none}
.check .box{width:17px; height:17px; border-radius:5px; border:1.5px solid var(--c-border-2); background:#fff; display:grid; place-items:center; transition:background 150ms ease, border-color 150ms ease}
.check .box svg{width:11px; height:11px; color:#fff; opacity:0}
.check input:checked + .box{background:var(--c-wine); border-color:var(--c-wine)}
.check input:checked + .box svg{opacity:1}

.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; height:46px; padding:0 16px; border-radius:var(--r-ctrl); border:1px solid var(--c-wine); background:var(--c-wine); color:#fff; font-size:14.5px; font-weight:600; cursor:pointer; transition:background 150ms ease, transform 60ms ease, box-shadow 150ms ease; box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px rgba(90,20,29,.32)}
.btn:hover{background:var(--c-wine-hover); border-color:var(--c-wine-hover)}
.btn:active{background:var(--c-wine-press); transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--c-info); outline-offset:2px}
.btn.loading{pointer-events:none; opacity:.85} .btn.loading .lbl{visibility:hidden}
.btn .spinner{display:none; position:absolute; width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin 700ms linear infinite}
.btn.loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.alert{padding:10px 12px; border-radius:var(--r-ctrl); font-size:13px; margin-bottom:16px; display:flex; align-items:flex-start; gap:8px}
.alert.err{background:#fbe9e7; border:1px solid #f1c2bd; color:var(--c-danger)}
.alert.ok{background:#e6f4ec; border:1px solid #b9dec8; color:var(--c-success)}
.alert svg{width:16px; height:16px; flex:0 0 16px; margin-top:1px}

.login-foot{margin-top:22px; text-align:center; font-size:12.5px; color:var(--c-text-3)}
.app-foot{position:absolute; bottom:18px; left:0; right:0; text-align:center; font-size:12px; color:rgba(255,255,255,.82); text-shadow:0 1px 4px rgba(0,0,0,.5); z-index:1}
.app-foot a{color:#fff; font-weight:500}

@media (max-width:760px){
  body.hero{justify-content:center; padding:80px 18px 56px}
  .stage{max-width:420px; justify-content:center}
  .hero-brand{left:50%; transform:translateX(-50%)}
  body.hero{background:
    linear-gradient(180deg, rgba(20,5,8,.55), rgba(40,10,16,.78)),
    url("/img/brand/Vinotempo-Bnr-Home-03.webp") center/cover no-repeat fixed,
    linear-gradient(120deg,#2a0a10,#5a141d);}
}