/* GOURMETIA · login común del ecosistema (inicio, Compras, TPV, Reservas, panel de carta, Pedidos).
   Mismo estilo que GOURMETIA Cards (wallet.gourmetia.app): foto a la izquierda con el logo y el
   título de la app; a la derecha Acceso / Registro (prueba gratuita en 2 pasos, con aprobación manual).
   En móvil la foto queda arriba y el formulario debajo. Se monta encima de la app (#gmAuth). */
.gma{
  --gma-ink:#1c1917; --gma-muted:#78716c; --gma-faint:#a8a29e; --gma-line:#e7e5e4; --gma-line-2:#d6d3d1;
  --gma-gold:#C1A368; --gma-gold-d:#9C7F45; --gma-gold-tint:#F7F0E1; --gma-ok:#16a34a; --gma-err:#dc2626;
  position:fixed; inset:0; z-index:9000; display:grid; grid-template-columns:1.05fr 1fr;
  background:#fff; color:var(--gma-ink); overflow:auto; -webkit-overflow-scrolling:touch;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:15px; line-height:1.4;
  -webkit-font-smoothing:antialiased; text-align:left; letter-spacing:normal; text-transform:none;
  animation:gma-in .25s ease-out;
}
@keyframes gma-in{from{opacity:0}to{opacity:1}}
.gma *,.gma *::before,.gma *::after{box-sizing:border-box}
.gma button{font:inherit;color:inherit;letter-spacing:normal;text-transform:none}
.gma a{color:var(--gma-gold-d);text-decoration:none}

/* ---- foto + marca ---- */
.gma-hero{position:sticky; top:0; height:100vh; height:100dvh; padding:44px; display:flex; flex-direction:column;
  background-color:#23201d; background-size:cover; background-position:center; color:#fff}
.gma-hero::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,17,15,.30) 0%,rgba(20,17,15,.12) 40%,rgba(20,17,15,.70) 100%)}
.gma-hero>*{position:relative}
.gma-logo{height:34px; width:auto; max-width:210px; display:block; margin-bottom:auto; align-self:flex-start; flex:0 0 auto; object-fit:contain; object-position:left center}
.gma-title{font-size:40px; line-height:1.12; font-weight:700; letter-spacing:-.02em; margin:24px 0 0; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.28)}
.gma-app{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#fff;
  background:rgba(193,163,104,.92); border-radius:999px; padding:5px 12px; margin-top:18px; align-self:flex-start}

/* ---- formulario ---- */
.gma-side{position:relative; display:flex; flex-direction:column; align-items:center; padding:56px 40px 20px; min-height:100vh; min-height:100dvh}
.gma-inner{width:100%; max-width:360px; margin:auto 0}
.gma-tabs{display:flex; gap:34px; justify-content:center; margin-bottom:30px}
.gma-tabs button{background:none; border:0; font-size:20px; font-weight:600; color:var(--gma-faint); cursor:pointer; padding:6px 0; position:relative}
.gma-tabs button.on{color:var(--gma-ink)}
.gma-tabs button.on::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--gma-gold); border-radius:2px}
.gma-head{text-align:center; font-size:15px; font-weight:600; margin:0 0 24px}
.gma-f{position:relative; margin-bottom:20px}
.gma-in{width:100%; border:0; border-bottom:1px solid var(--gma-line-2); border-radius:0; background:transparent; padding:8px 2px; font:inherit; font-size:16px; color:var(--gma-ink); outline:none; -webkit-appearance:none; appearance:none; box-shadow:none; height:auto}
.gma-in:focus{border-bottom-color:var(--gma-gold)}
.gma-f label{position:absolute; left:2px; top:9px; font-size:15px; color:var(--gma-faint); pointer-events:none; transition:.15s}
.gma-in:focus+label,.gma-in:not(:placeholder-shown)+label{top:-12px; font-size:12px; color:var(--gma-muted)}
.gma-f .req{color:var(--gma-gold); margin-left:2px}
.gma-eye{position:absolute; right:0; top:4px; background:none; border:0; cursor:pointer; color:var(--gma-muted); padding:4px; line-height:0}
.gma-eye svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.gma-f.pw .gma-in{padding-right:30px}
.gma-phone{display:flex; align-items:flex-end; gap:10px}
.gma-phone .cc{font-size:15px; color:var(--gma-muted); border-bottom:1px solid var(--gma-line-2); padding:8px 4px; white-space:nowrap}
.gma-phone .gma-f{flex:1; margin-bottom:0}
.gma-row2{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end}
.gma-sel{width:100%; border:0; border-bottom:1px solid var(--gma-line-2); background:transparent; padding:8px 2px; font:inherit; font-size:16px; color:var(--gma-ink); outline:none; border-radius:0; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 2px center; background-size:16px}
.gma-lab{display:block; font-size:12px; color:var(--gma-muted); margin:0 0 8px}
.gma-btn{display:block; width:100%; background:var(--gma-ink); color:#fff !important; border:0; border-radius:10px; padding:14px; font-size:15px; font-weight:600; cursor:pointer; margin-top:6px; text-align:center}
.gma-btn:hover{background:#000}
.gma-btn[disabled]{opacity:.55; pointer-events:none}
.gma-link{display:block; width:100%; text-align:center; background:none; border:0; color:var(--gma-ink); font-size:14px; cursor:pointer; margin-top:20px; padding:4px}
.gma-link.dim{color:var(--gma-muted); font-size:13.5px; margin-top:12px}
.gma-small{text-align:center; font-size:12.5px; color:var(--gma-muted); margin:14px 0 0; line-height:1.5}
.gma-msg{font-size:13.5px; margin:10px 0 0; min-height:0; line-height:1.45}
.gma-msg:empty{display:none}
.gma-msg.err{color:var(--gma-err)} .gma-msg.ok{color:var(--gma-ok)}
.gma-steps{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:26px}
.gma-step{border-top:3px solid var(--gma-line); padding-top:10px; display:flex; flex-direction:column}
.gma-step.on{border-top-color:var(--gma-gold)}
.gma-step b{font-size:14px; font-weight:600}
.gma-step.on b{color:var(--gma-gold-d)}
.gma-step span{font-size:12px; color:var(--gma-faint)}
.gma-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.gma-chip{border:1px solid var(--gma-line-2); background:#fff; border-radius:999px; padding:8px 13px; font-size:13.5px; cursor:pointer; color:var(--gma-ink); transition:.12s}
.gma-chip.on{border-color:var(--gma-gold); background:var(--gma-gold-tint); color:#6f5524; font-weight:600}
.gma-check{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--gma-muted); margin:4px 0 18px; line-height:1.45; cursor:pointer}
.gma-check input{width:18px; height:18px; margin:0; flex:0 0 auto; accent-color:var(--gma-gold)}
.gma-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0}
.gma-done{text-align:center}
.gma-done .ic{width:64px; height:64px; border-radius:50%; background:var(--gma-gold-tint); color:var(--gma-gold-d); display:grid; place-items:center; margin:0 auto 18px}
.gma-done .ic svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.gma-done h2{font-size:22px; margin:0 0 10px; letter-spacing:-.01em}
.gma-done p{color:var(--gma-muted); font-size:14.5px; line-height:1.55; margin:0 0 10px}
.gma-spin{display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:gma-sp .7s linear infinite; vertical-align:-3px}
@keyframes gma-sp{to{transform:rotate(360deg)}}
.gma-foot{margin-top:32px; text-align:center; font-size:12px; color:var(--gma-faint)}
.gma-foot a{color:var(--gma-faint); text-decoration:underline}

/* ---- móvil / tablet vertical: foto arriba, formulario debajo ---- */
@media (max-width:860px){
  .gma{grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .gma-hero{position:relative; height:auto; min-height:300px; padding:calc(26px + env(safe-area-inset-top,0px)) 24px 26px}
  .gma-logo{height:26px}
  .gma-title{font-size:28px; margin-top:40px}
  .gma-app{margin-top:12px}
  .gma-side{min-height:0; padding:30px 22px calc(18px + env(safe-area-inset-bottom,0px))}
  .gma-inner{margin:0}
  .gma-tabs{margin-bottom:24px}
}
@media (prefers-reduced-motion:reduce){.gma{animation:none}}