/* Cortinas de ingreso y de compra de la portada «Lo que ve tu cliente».
   El bloque del medio está CORTADO de index-5.html (lab/armar-portada-pantallas.py): no editar acá.
   Arriba, el puente de variables; abajo, los ajustes para que hablen el idioma de esta página. */
:root{
  --sc-font-display:var(--fd); --sc-font-text:var(--ft); --neo-mono:var(--ft);
  --sc-ink:var(--hueso); --sc-accent:var(--ambar); --neo-cyan:var(--ambar);
}

/* --- el velo: difumina la landing pero la deja legible detras --------- */
.neo-velo{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.52);backdrop-filter:blur(7px) saturate(.9);
  opacity:0;visibility:hidden;transition:opacity .32s ease,visibility 0s .32s;
}
/* El estado abierto lo comparten los dos cajones (ingreso y compra). El que no
   esta en uso sigue con [hidden], y display:none le gana a todo esto. */
body.neo-ingreso-abierto .neo-velo,
body.neo-compra-abierta  .neo-velo{opacity:1;visibility:visible;transition:opacity .32s ease}

/* --- la cortina ------------------------------------------------------- */
.neo-cortina{
  position:fixed;top:0;right:0;bottom:0;z-index:901;
  width:min(452px,100vw);
  display:flex;flex-direction:column;
  background:#05070A;border-left:1px solid #1B212B;
  box-shadow:-30px 0 80px -40px rgba(0,0,0,.95),
             inset 1px 0 0 rgba(242,163,60,.16);
  transform:translateX(100%);visibility:hidden;
  transition:transform .42s cubic-bezier(.22,1,.36,1),visibility 0s .42s;
  overflow-y:auto;overscroll-behavior:contain;
}
body.neo-ingreso-abierto .neo-cortina,
body.neo-compra-abierta  .neo-cortina{
  transform:none;visibility:visible;
  transition:transform .42s cubic-bezier(.22,1,.36,1)}

.neo-cortina__cab{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,3vh,26px) clamp(22px,4vw,34px) 0}
.neo-cortina__m{font-family:var(--sc-font-display);font-weight:900;
  font-size:15px;letter-spacing:.14em;color:var(--sc-ink)}
.neo-cortina__m b{color:var(--sc-accent)}
.neo-cerrar{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  background:transparent;border:1px solid #1B212B;border-radius:9px;
  color:#8B96A6;font-size:17px;line-height:1;cursor:pointer;
  transition:border-color .18s ease,color .18s ease}
.neo-cerrar:hover{border-color:#46525F;color:var(--sc-ink)}
.neo-cerrar:focus-visible{outline:2px solid var(--neo-cyan);outline-offset:2px}

.neo-cortina__cuerpo{margin-block:auto;padding:clamp(26px,5vh,44px) clamp(22px,4vw,34px) clamp(24px,4vh,34px)}
.neo-cortina__ojo{margin:0 0 10px;font-family:var(--neo-mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#7E8899}
.neo-cortina__t{margin:0;font-family:var(--sc-font-display);font-weight:900;
  font-size:clamp(1.5rem,3.4vw,1.95rem);line-height:1.04;letter-spacing:-.015em;
  color:var(--sc-ink)}
.neo-cortina__d{margin:12px 0 0;font-size:.92rem;line-height:1.55;color:#98A3B4}

/* --- campos ----------------------------------------------------------- */
.neo-campo{margin:22px 0 0}
.neo-campo > label{display:block;margin:0 0 7px;font-family:var(--neo-mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8B96A6}
.neo-campo__caja{position:relative;display:flex;align-items:center}
.neo-campo input{
  width:100%;box-sizing:border-box;
  background:#0B0D10;border:1px solid #1B212B;border-radius:10px;
  padding:13px 15px;color:var(--sc-ink);
  font-family:var(--sc-font-text);font-size:1rem;line-height:1.2;
  transition:border-color .18s ease,box-shadow .18s ease}
.neo-campo input::placeholder{color:#7E8899}
.neo-campo input:focus{outline:none;border-color:#F2A33C;
  box-shadow:0 0 0 3px rgba(242,163,60,.14)}
.neo-campo input:disabled{opacity:.55}
.neo-campo--clave input{padding-right:46px}
.neo-ojo{
  position:absolute;right:6px;width:34px;height:34px;display:grid;place-items:center;
  background:transparent;border:0;border-radius:8px;cursor:pointer;
  color:#7E8899;transition:color .18s ease}
.neo-ojo:hover{color:var(--sc-ink)}
.neo-ojo:focus-visible{outline:2px solid var(--neo-cyan);outline-offset:1px}
.neo-ojo svg{width:19px;height:19px;display:block}

/* --- aviso: el mismo bloque sirve para el error y para el acuse ------- */
.neo-aviso{margin:18px 0 0;padding:11px 13px;border-radius:9px;
  font-size:.88rem;line-height:1.45;display:none}
.neo-aviso[data-tipo="mal"]{display:block;background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.42);color:#FCA5A5}
.neo-aviso[data-tipo="bien"]{display:block;background:rgba(45,212,191,.09);
  border:1px solid rgba(45,212,191,.4);color:#5EEAD4}

.neo-enviar{
  width:100%;margin:24px 0 0;padding:14px 16px;
  background:#F2A33C;border:1px solid #F2A33C;border-radius:10px;
  color:#0A0806;font-family:var(--sc-font-text);font-weight:700;font-size:1rem;
  cursor:pointer;transition:background .18s ease,border-color .18s ease}
.neo-enviar:hover:not(:disabled){background:#FFBE5C;border-color:#FFBE5C}
.neo-enviar:focus-visible{outline:2px solid var(--neo-cyan);outline-offset:3px}
.neo-enviar:disabled{opacity:.62;cursor:progress}

.neo-pieza{margin:20px 0 0;font-size:.87rem;line-height:1.6;color:#7E8899}
.neo-pieza--cuenta{margin-top:22px;padding-top:20px;border-top:1px solid #14181F}
.neo-pieza a,.neo-link{color:#98A3B4;text-decoration:none;
  border-bottom:1px solid #2A3240;transition:color .18s ease,border-color .18s ease}
.neo-pieza a:hover,.neo-link:hover{color:var(--sc-ink);border-bottom-color:#F2A33C}
.neo-link{background:none;border-top:0;border-left:0;border-right:0;padding:0;
  font:inherit;cursor:pointer}
.neo-link:focus-visible{outline:2px solid var(--neo-cyan);outline-offset:2px}
.neo-cortina__pie{margin-top:auto;padding:0 clamp(22px,4vw,34px) clamp(22px,4vh,30px);
  font-family:var(--neo-mono);font-size:10px;letter-spacing:.1em;color:#7E8899}

/* Lo que solo aparece en un modo: el codigo del segundo factor y el paso de
   recuperar la clave. Se muestran desde el JS con el atributo data-modo. */
[data-solo]{display:none}
.neo-cortina[data-modo="login"]  [data-solo="login"],
.neo-cortina[data-modo="2fa"]    [data-solo="2fa"],
.neo-cortina[data-modo="olvide"] [data-solo="olvide"],
.neo-cortina[data-modo="login"]  [data-solo="clave"],
.neo-cortina[data-modo="2fa"]    [data-solo="clave"]{display:block}
/* El atributo hidden y una clase empatan en especificidad, asi que sin
   esto .neo-cortina{display:flex} le gana y la cortina existe para el
   lector de pantalla antes de abrirse. */
.neo-cortina[hidden],.neo-velo[hidden]{display:none}

@media (max-width:520px){
  .neo-cortina{width:100vw;border-left:0}
  .neo-entrar{padding:8px 13px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .neo-velo,.neo-cortina{transition:opacity .01s,visibility .01s}
  .neo-entrar,.neo-enviar,.neo-cerrar,.neo-campo input{transition:none}
}
/* =======================================================================
   COMPRA  ·  la cortina hermana del ingreso
   Mismo cajon, mismo velo, misma curva: lo unico que cambia es lo que hay
   adentro. El que llega decidido desde la publicidad elige el plan, deja
   sus datos y sale para MercadoPago sin irse nunca de la portada.
   ======================================================================= */
.neo-cortina--compra{width:min(496px,100vw)}
/* El cuerpo del ingreso se centra vertical (margin-block:auto). Aca hay
   boleta + extras + formulario: si se centrara, en pantallas bajas el
   encabezado quedaria arriba del scroll y no se podria alcanzar. */
.neo-cortina--compra .neo-cortina__cuerpo{margin-block:0}

/* El boton de la tarjeta de plan ahora abre la cortina, asi que es un
   <button>: hay que devolverle la pinta que tenia como <a>. */
button.pl__cta{width:100%;font-family:var(--sc-font-text);background:transparent;cursor:pointer}
button.pl__cta:focus-visible{outline:2px solid var(--neo-cyan);outline-offset:3px}

/* --- la boleta: que esta comprando, con el numero grande a la vista --- */
.neo-boleta{margin:22px 0 0;padding:16px 16px 14px;border:1px solid #1B212B;
  border-radius:12px;background:#0B0D10}
.neo-boleta__t{margin:0;font-family:var(--sc-font-display);font-weight:900;
  font-size:1.12rem;line-height:1.1;color:var(--sc-ink)}
.neo-boleta__target{margin:6px 0 0;font-size:.82rem;line-height:1.4;color:#94A0B4}
.neo-boleta__l{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:13px 0 0;font-size:.85rem;color:#94A0B4}
.neo-boleta__l > span:first-child{display:flex;align-items:center;gap:8px}
.neo-boleta__l b{font-family:var(--neo-mono);font-size:.95rem;color:var(--sc-ink);
  white-space:nowrap}
.neo-boleta__antes{font-family:var(--neo-mono);font-size:.82rem;color:#7E8899;
  text-decoration:line-through;white-space:nowrap}
.neo-boleta__off{padding:2px 7px;border-radius:999px;background:#F2A33C;
  color:#0A0806;font-family:var(--neo-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.neo-boleta__total{margin-top:14px;padding-top:13px;border-top:1px solid #171D26;
  color:var(--sc-ink)}
.neo-boleta__total b{font-size:1.32rem;color:#F2A33C}
.neo-boleta__pie{margin:12px 0 0;font-size:.79rem;line-height:1.5;color:#7E8899}
/* Una clase con display:flex le gana al [hidden] del navegador, igual que
   arriba con la cortina: sin esto la fila de extras se ve vacia. */
.neo-boleta__l[hidden]{display:none}

/* --- extras: plegados, para que el plan siga siendo el protagonista ---- */
.neo-extras{margin:16px 0 0;border:1px solid #1B212B;border-radius:12px;
  background:#0B0D10}
.neo-extras > summary{list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;font-family:var(--neo-mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#8B96A6}
.neo-extras > summary::-webkit-details-marker{display:none}
.neo-extras > summary:hover{color:var(--sc-ink)}
.neo-extras > summary:focus-visible{outline:2px solid var(--neo-cyan);
  outline-offset:-2px;border-radius:12px}
.neo-extras__mas{width:16px;height:16px;flex:none;position:relative}
.neo-extras__mas::before,.neo-extras__mas::after{content:"";position:absolute;
  left:50%;top:50%;width:11px;height:1.5px;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .2s ease}
.neo-extras__mas::after{transform:translate(-50%,-50%) rotate(90deg)}
.neo-extras[open] .neo-extras__mas::after{transform:translate(-50%,-50%) rotate(0)}
.neo-extras__in{padding:0 12px 12px;display:grid;gap:8px}
.neo-ex{display:grid;grid-template-columns:auto 1fr auto;gap:10px;
  align-items:start;padding:10px 11px;border:1px solid #171D26;border-radius:9px;
  cursor:pointer;transition:border-color .18s ease,background .18s ease}
.neo-ex:hover{border-color:#2A3240;background:#0D1014}
.neo-ex:has(input:checked){border-color:color-mix(in oklab,#F2A33C 46%,transparent)}
.neo-ex input{width:16px;height:16px;margin:2px 0 0;accent-color:#F2A33C;cursor:pointer}
.neo-ex input:focus-visible{outline:2px solid var(--neo-cyan);outline-offset:2px}
.neo-ex__t{display:block;font-size:.86rem;line-height:1.3;color:var(--sc-ink)}
.neo-ex__d{display:block;margin:4px 0 0;font-size:.76rem;line-height:1.4;color:#7E8899}
.neo-ex__p{font-family:var(--neo-mono);font-size:.78rem;color:#94A0B4;white-space:nowrap}

/* --- terminos: obligatorio del lado del server, asi que va sin vueltas -- */
.neo-tos{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  margin:20px 0 0;font-size:.83rem;line-height:1.5;color:#94A0B4;cursor:pointer}
.neo-tos input{width:16px;height:16px;margin:2px 0 0;accent-color:#F2A33C;cursor:pointer}
.neo-tos input:focus-visible{outline:2px solid var(--neo-cyan);outline-offset:2px}
.neo-tos a{color:#94A0B4;text-decoration:none;border-bottom:1px solid #2A3240}
.neo-tos a:hover{color:var(--sc-ink);border-bottom-color:#F2A33C}

/* --- el aviso de la compra lleva acciones adentro (ingresar, recuperar) -- */
.neo-aviso__acc{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:16px}
.neo-aviso__acc button,.neo-aviso__acc a{
  font:inherit;font-size:.85rem;color:inherit;background:none;padding:0;
  border:0;border-bottom:1px solid currentColor;cursor:pointer;text-decoration:none}
.neo-aviso__acc button:focus-visible,.neo-aviso__acc a:focus-visible{
  outline:2px solid var(--neo-cyan);outline-offset:3px}

/* Nina vive en z-index 2.147.483.000 para no pelearse con la landing, asi que
   con un cajon abierto queda ENCIMA del formulario y le tapa los campos.
   Mientras la cortina esta abierta se la manda detras del velo: sigue ahi,
   difuminada con el resto de la pagina, y vuelve sola al cerrar. */
body.neo-compra-abierta #nina-root,
body.neo-ingreso-abierto #nina-root{z-index:880}

.neo-compra__nota{margin:14px 0 0;font-family:var(--neo-mono);font-size:10px;
  letter-spacing:.08em;color:#7E8899;text-align:center}

@media (prefers-reduced-motion:reduce){
  .neo-ex,.neo-extras__mas::before,.neo-extras__mas::after{transition:none}
}

/* ───────── ajustes de «Lo que ve tu cliente» ───────── */
.neo-cortina{background:#060d10;border-left-color:rgba(236,231,220,.1);
  box-shadow:-30px 0 80px -40px rgba(0,0,0,.95),inset 1px 0 0 rgba(242,195,0,.16)}
.neo-velo{background:rgba(2,8,10,.58)}
.neo-cortina__m{font-family:var(--fb);font-size:14px}
.neo-cortina__t,.neo-boleta__t{font-weight:800;letter-spacing:-.022em}
.neo-cortina__ojo,.neo-campo > label,.neo-extras > summary,.neo-cortina__pie,.neo-compra__nota{font-weight:600}
.neo-boleta__l b,.neo-boleta__antes,.neo-ex__p{font-variant-numeric:tabular-nums;font-weight:600}
.neo-campo input{background:#0a1418;border-color:rgba(236,231,220,.14);border-radius:12px}
.neo-campo input:focus{border-color:var(--ambar);box-shadow:0 0 0 3px rgba(242,195,0,.16)}
.neo-boleta,.neo-extras{background:#0a1418;border-color:rgba(236,231,220,.12)}
.neo-enviar{background:var(--ambar);border-color:var(--ambar);border-radius:12px;color:#0a0b0d;font-weight:600}
.neo-enviar:hover:not(:disabled){background:#FFD53D;border-color:#FFD53D}
.neo-boleta__off{background:var(--ambar)}
.neo-boleta__total b{color:var(--ambar)}
.neo-ex input,.neo-tos input{accent-color:var(--ambar)}
.neo-ex:has(input:checked){border-color:color-mix(in oklab,var(--ambar) 46%,transparent)}
.neo-pieza a:hover,.neo-link:hover,.neo-tos a:hover{border-bottom-color:var(--ambar)}
/* el botón del plan es un <button>: conserva la pinta del enlace */
button.pl__cta{font:600 13.5px var(--ft)}
/* Celular: el saludo de Nina tapaba media lista de las herramientas durante 8 segundos. Acá queda sólo
   su botón, y la lista se aprieta un poco para que el renglón que lo esquiva (cortinas.js) no se caiga. */
@media (max-width:760px){
  #nina-root #ninaTeaser{display:none !important}
  /* [2026-10-01] En el celular Nina es un botón redondo chico en la esquina (antes una tarjeta de 92 px que tapaba
     las tarjetas de los paquetes). La portada no tiene botón flotante de WhatsApp (está en la barra): puede ir abajo. */
  /* «html body» le gana a nina-widget.css, que se carga DESPUÉS con la misma especificidad */
  html body #nina-root{right:12px;bottom:14px}
  html body #nina-root .nina-pod{width:60px;height:60px;border-radius:50%}
  html body #nina-root .nina-ring{border-radius:50%}
  html body #nina-root .nina-pod .nina-badge{display:none}
  /* En el primer pantallazo del celular están las seis baldosas hasta abajo: Nina aparece apenas se baja un poco
     (cortinas.js pone html.nina-arriba mientras la página está arriba de todo). */
  html body #nina-root .nina-pod{transition:opacity .3s,transform .3s}
  html.nina-arriba body #nina-root:not(.nina-open) .nina-pod{opacity:0;transform:scale(.8);pointer-events:none}
}