/* Portal de cliente · tokens y componentes calcados de scripts/build_onepage.py.
   Mismos hex, mismas familias, mismos botones e inputs que la web publica. */

:root{
  --bg:#141211; --panel:#1F1B18; --ivory:#FAF7F2; --muted:#A69C92; --rose:#FFE0E9;
  --line:rgba(250,247,242,.15); --line-soft:rgba(250,247,242,.07);
  --titulo:'Fraunces',Georgia,serif;
  --cursiva:'Bodoni Moda',Didot,'Bodoni MT',Georgia,serif;
  --cuerpo:'Archivo','Segoe UI',sans-serif;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ivory); font-family:var(--cuerpo);
  font-weight:400; font-size:clamp(0.9375rem,0.25vw + 0.88rem,1.0625rem); line-height:1.7;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--titulo); font-weight:300; line-height:1.14; letter-spacing:-0.02em;
  text-wrap:balance; margin:0 0 .4em}
h1{font-size:clamp(1.8rem,4.5vw,2.6rem)}
h2{font-size:clamp(1.35rem,3vw,1.9rem)}
h3{font-size:clamp(1.05rem,1.5vw,1.3rem); font-weight:400}
i,.it{font-family:var(--cursiva); font-style:italic; font-weight:400; color:var(--rose); font-size:1.04em}
.label{font-family:var(--cuerpo); font-weight:500; font-size:.68rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--muted); margin:0 0 1rem}
.lead{color:var(--muted); max-width:60ch}
p{margin:0 0 1em; max-width:62ch}

.btn{display:inline-block; font-family:var(--cuerpo); font-weight:500; background:var(--ivory); color:#1C1A18;
  border:1px solid var(--ivory); padding:14px 30px; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; cursor:pointer; transition:all .25s}
.btn:hover{background:var(--rose); border-color:var(--rose)}
.btn.ghost{background:transparent; color:var(--ivory); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--rose); color:var(--rose); background:transparent}
.btn.full{width:100%; text-align:center}
.btn:disabled{opacity:.45; cursor:default}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible{outline:2px solid var(--rose); outline-offset:2px}

.micro{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.link{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid var(--rose); padding-bottom:3px; cursor:pointer; background:none;
  border-top:none; border-left:none; border-right:none; color:var(--ivory); font-family:var(--cuerpo)}
/* area tactil minima para controles pequenos en movil */
.tap{display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; min-width:36px; padding:8px 10px}

/* formularios, identicos a la one page */
.form{background:var(--panel); border:1px solid var(--line-soft); padding:26px}
.form label,.campo label{display:block; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin:14px 0 5px}
.form input,.form select,.form textarea,
.campo input,.campo select,.campo textarea{width:100%; background:transparent; border:none;
  border-bottom:1px solid var(--line); padding:9px 2px; color:var(--ivory);
  font-family:var(--cuerpo); font-size:.95rem}
.form select option,.campo select option{background:var(--panel)}
.form input::placeholder,.campo input::placeholder,.campo textarea::placeholder{color:rgba(250,247,242,.34)}
.form input:focus,.form select:focus,.form textarea:focus,
.campo input:focus,.campo select:focus,.campo textarea:focus{border-bottom-color:var(--rose)}
.form input:focus:not(:focus-visible),.form select:focus:not(:focus-visible),
.form textarea:focus:not(:focus-visible),.campo input:focus:not(:focus-visible),
.campo select:focus:not(:focus-visible),.campo textarea:focus:not(:focus-visible){outline:none}
textarea{resize:vertical; min-height:70px}

/* tarjetas, como .opt y .pl de la one page */
.tarjeta{border:1px solid var(--line-soft); background:var(--panel)}
.tarjeta img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.tarjeta h3{font-size:.98rem; padding:14px 14px 2px; margin:0}
.tarjeta p{padding:0 14px 14px; margin:0; color:var(--muted); font-size:.9em}
.tarjeta.elegible{cursor:pointer; transition:border-color .25s}
.tarjeta.elegible:hover{border-color:var(--rose)}
.tarjeta.elegida{border:1px solid var(--rose)}
.hueco{border:1px dashed var(--line); aspect-ratio:4/3; display:flex; align-items:center;
  justify-content:center; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rose); opacity:.85; text-align:center; padding:10px}

/* chips de estado */
.chip{display:inline-block; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line-soft); padding:4px 10px; color:var(--muted); white-space:nowrap}
.chip.rosa{border-color:var(--rose); color:var(--rose)}
.chip.hueso{border-color:var(--ivory); color:var(--ivory)}

/* estructura */
.pantalla{padding:26px 20px 90px; max-width:860px; margin:0 auto; outline:none}
.fila{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:700px){ .grid3{grid-template-columns:1fr 1fr} }
@media(max-width:460px){ .grid2{grid-template-columns:1fr} }
.bloque{border:1px solid var(--line-soft); background:var(--panel); padding:20px; margin:0 0 18px}
.separado{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}

/* barra superior */
.topbar{position:sticky; top:0; z-index:30; background:rgba(20,18,17,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft); padding:14px 20px; display:flex;
  justify-content:space-between; align-items:center; gap:10px}
.topbar .logo svg{width:auto; height:54px; max-width:56vw; display:block}
#logoAcceso svg{width:min(340px, 78vw); height:auto; display:block; margin:0 auto}
.estrella{background:none; border:none; cursor:pointer; color:var(--rose); font-size:1.15rem; line-height:1; padding:2px 4px}
.estrella:hover{opacity:.8}
.topbar .fecha{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-align:right}
.topbar .fecha b{color:var(--rose); font-weight:500}

/* navegacion inferior en movil, superior en escritorio */
.nav{position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex; justify-content:space-around;
  background:rgba(20,18,17,.96); border-top:1px solid var(--line-soft); padding:10px 4px
  calc(10px + env(safe-area-inset-bottom))}
.nav a{font-size:11px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  color:var(--muted); padding:12px 6px; min-height:44px; display:flex; align-items:center;
  text-align:center; line-height:1.2}
.nav a.activa{color:var(--rose)}
@media(min-width:860px){
  .nav{position:sticky; top:65px; bottom:auto; justify-content:center; gap:26px;
    border-top:none; border-bottom:1px solid var(--line-soft)}
  .pantalla{padding-bottom:40px}
}

/* acordeon */
.acordeon{border:1px solid var(--line-soft); background:var(--panel); margin-bottom:14px}
.acordeon>button{width:100%; background:none; border:none; color:var(--ivory); font-family:var(--cuerpo);
  font-weight:500; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; padding:16px 18px;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center}
.acordeon>button .mas{color:var(--rose); font-size:1rem; transition:transform .3s}
.acordeon.abierto>button .mas{transform:rotate(45deg)}
.acordeon>.contenido{display:none; padding:0 18px 18px}
.acordeon.abierto>.contenido{display:block}

/* progreso de la checklist */
.progreso{height:2px; background:var(--line-soft); margin:8px 0 22px}
.progreso>div{height:100%; background:var(--rose); transition:width .4s}

/* avisos */
.aviso{position:fixed; left:50%; transform:translateX(-50%); bottom:76px; z-index:40;
  background:var(--panel); border:1px solid var(--rose); color:var(--ivory); padding:10px 22px;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; opacity:0; transition:opacity .3s;
  pointer-events:none}
.aviso.visible{opacity:1}
@media(min-width:860px){ .aviso{bottom:30px} }
.banner{border:1px solid var(--rose); padding:14px 18px; margin:0 0 18px; color:var(--muted); font-size:.9em}

.guardado{font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rose);
  opacity:0; transition:opacity .3s}
.guardado.visible{opacity:.9}

.lista-item{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  border-bottom:1px solid var(--line-soft); padding:12px 0}
.lista-item:last-child{border-bottom:none}
.lista-item .titulo{font-size:.95em}
.lista-item .sub{color:var(--muted); font-size:.8em}
.respuesta-isa{border-left:1px solid var(--rose); padding:6px 0 6px 14px; margin-top:8px;
  color:var(--muted); font-size:.9em}
.respuesta-isa b{color:var(--rose); font-weight:500; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; display:block; margin-bottom:3px}

.spotify{width:100%; height:152px; border:none; margin:8px 0}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }
@media print{
  .nav,.topbar,.btn,.aviso{display:none !important}
  body{background:#fff; color:#111}
  .bloque,.tarjeta{border-color:#ccc; background:#fff}
  .label,.lead,.sub{color:#555}
}