/* ========================================================================
   ELENIA — acceso (alta de cuenta y bienvenida)
   Se carga DESPUÉS de styles.css y hereda sus tokens, .btn y .brand.
   Aquí solo vive lo que la landing no tenía: campos de formulario, estados
   de error y el par de pantallas de acceso.
   ======================================================================== */

:root{
  /* Estado, no marca. El acento de la marca sigue siendo uno solo: el verde.
     Estos dos son señalética de error y cumplen AA sobre fondo claro. */
  --rojo:       #b42318;
  --rojo-suave: #fef3f2;
  --rojo-linea: #f3c2bd;
}

/* Varios elementos de esta hoja usan display:flex, que gana contra el atributo
   hidden y deja cajas vacías pintadas en pantalla. Se corta acá, una vez. */
[hidden]{ display:none !important; }

/* ==================================================================== shell */
.auth{
  min-height:100dvh;
  display:grid;
  grid-template-columns:1fr;
  background:var(--fondo);
}

.auth__main{
  display:flex; flex-direction:column;
  padding:clamp(22px,5vw,52px) var(--pad) clamp(40px,7vh,72px);
}

/* Mismo ancho y mismo centrado que el cuerpo: si no, la marca queda pegada al
   borde de la columna y el formulario centrado, y los dos bordes izquierdos no
   coinciden con nada. */
.auth__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; width:100%; max-width:452px; margin:0 auto clamp(30px,6vh,60px);
}
.auth__top .brand{ display:inline-flex; align-items:center; gap:10px; color:var(--ink); }
.auth__top .brand__mark{ width:26px; height:26px; }
.auth__top .brand__word{ font-family:var(--font-d); font-weight:800; font-size:1.24rem; letter-spacing:-.03em; }
.auth__back{
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  font-size:.9rem; color:var(--ink-3); transition:color .2s;
}
.auth__back:hover{ color:var(--verde); }
.auth__back svg{ width:15px; height:15px; }

.auth__body{ width:100%; max-width:452px; margin:0 auto; flex:1; }
.auth__kicker{ margin-bottom:.9rem; }
/* El piso baja a 1.75rem: a 390px el titular tiene que caber en dos lineas.
   Cuatro lineas de display en un celular se comen la pantalla entera. */
.auth__title{ font-size:clamp(1.75rem,4.6vw,2.5rem); }
.auth__sub{ margin-top:.85rem; color:var(--ink-3); font-size:1.02rem; max-width:38ch; }

/* ================================================================== aside */
/* Debajo de 960px el panel desaparece por completo. En un celular la primera
   pantalla tiene que ser el formulario, no una foto que lo empuja hacia abajo. */
.auth__aside{ display:none; }

@media (min-width:960px){
  .auth{ grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); }
  .auth__aside{
    display:flex; flex-direction:column; justify-content:flex-end;
    /* Sticky y de la altura exacta de la ventana. Sin esto el panel se estira
       a lo alto de la columna del formulario, que es más larga que la pantalla,
       y el texto anclado abajo queda fuera de vista para siempre. */
    position:sticky; top:0; align-self:start;
    height:100dvh; overflow:clip;
    background:var(--verde-deep); color:#eaf1ec;
    padding:clamp(34px,4vw,58px);
  }
  /* La foto es el argumento de la pantalla, no una textura: se deja legible.
     El degradado oscurece solo donde va el texto, no la imagen entera. */
  .auth__aside img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:50% 30%; opacity:.72;
  }
  .auth__aside::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,
      rgba(12,61,32,.16) 0%,
      rgba(12,61,32,.48) 46%,
      rgba(12,61,32,.90) 76%,
      rgba(12,61,32,.97) 100%);
  }
  .auth__note{ position:relative; z-index:1; max-width:34ch; }
  .auth__note-t{ font-family:var(--font-d); font-weight:700; font-size:clamp(1.3rem,1.9vw,1.62rem); line-height:1.24; letter-spacing:-.02em; color:#fff; }
  .auth__note-s{ margin-top:1rem; font-size:.94rem; line-height:1.6; color:#a9bcb0; }
}

/* Plan que la persona eligio en la landing antes de llegar acá. */
.planpick{
  display:flex; align-items:center; gap:9px;
  margin-top:1.1rem; padding:11px 15px;
  background:var(--verde-suave); border-radius:var(--r-sm);
  font-size:.89rem; line-height:1.5; color:var(--verde-deep);
}
.planpick svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.planpick b{ font-weight:700; }
.planpick a{ color:var(--verde); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* Objeciones resueltas antes del formulario. No es decoracion: precio, comida y
   compromiso son las tres dudas con las que llega la gente a esta pantalla. */
.calma{
  list-style:none; margin:clamp(22px,3.5vh,30px) 0 0; padding:0;
  display:grid; gap:9px;
}
.calma li{
  display:flex; align-items:flex-start; gap:9px;
  font-size:.89rem; line-height:1.5; color:var(--ink-2);
}
.calma svg{
  width:15px; height:15px; flex:none; margin-top:4px;
  fill:none; stroke:var(--verde); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ================================================================== campos */
.form{ margin-top:clamp(26px,4.5vh,38px); }

.fld{ margin-bottom:19px; }
.fld__label{
  display:block; font-family:var(--font-d); font-weight:600;
  font-size:.88rem; color:var(--ink); margin-bottom:6px;
}
.fld__label .opt{ font-family:var(--font-b); font-weight:400; color:var(--ink-3); font-size:.85em; }

/* La regla se dice ANTES de escribir, no después de fallar. */
.fld__hint{ font-size:.81rem; color:var(--ink-3); margin:0 0 8px; line-height:1.45; }

.fld__wrap{ position:relative; display:flex; align-items:stretch; }

.fld__input{
  width:100%; min-height:52px;
  padding:.86em 1em;
  font-family:var(--font-b); font-size:1rem; font-weight:500; color:var(--ink);
  background:var(--white);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  outline:0;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.fld__input::placeholder{ color:#9aa8a0; }
.fld__input:hover{ border-color:#bccdc3; }
.fld__input:focus-visible{
  border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(22,101,52,.16);
}

/* prefijo +51: es dato fijo, no algo que la persona deba escribir */
.fld__pre{
  display:flex; align-items:center; gap:7px;
  padding:0 .78em 0 1em;
  font-weight:600; font-size:1rem; color:var(--ink-2);
  background:#f1f5f2;
  border:1px solid var(--line-2); border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  white-space:nowrap;
}
.fld__wrap--tel .fld__input{ border-radius:0 var(--r-sm) var(--r-sm) 0; }

/* ver / ocultar contraseña */
.fld__wrap--pass .fld__input{ padding-right:3.4em; }
.fld__peek{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:46px; height:46px; display:grid; place-items:center;
  color:var(--ink-3); border-radius:10px; transition:color .18s, background .18s;
}
.fld__peek:hover{ color:var(--verde); background:#f1f5f2; }
.fld__peek:focus-visible{ outline:2px solid var(--verde); outline-offset:1px; }
.fld__peek svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* señal de que la regla ya se cumple, mientras se escribe */
.fld__ok{
  display:flex; align-items:center; gap:6px;
  margin-top:7px; font-size:.81rem; font-weight:600; color:var(--verde);
}
.fld__ok svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

/* error: debajo del campo al que pertenece, nunca en un aviso genérico arriba */
.fld__err{
  display:flex; align-items:flex-start; gap:7px;
  margin-top:8px; font-size:.85rem; font-weight:500; color:var(--rojo); line-height:1.45;
}
.fld__err svg{ width:15px; height:15px; flex:none; margin-top:2px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.fld.is-bad .fld__input,
.fld.is-bad .fld__pre{ border-color:var(--rojo-linea); }
.fld.is-bad .fld__input{ background:var(--rojo-suave); }
.fld.is-bad .fld__input:focus-visible{ box-shadow:0 0 0 3px rgba(180,35,24,.14); }
.fld.is-bad .fld__hint{ display:none; }

/* ------------------------------------------------- opciones (radio) */
/* Tarjetas en vez de un <select>: cinco niveles de actividad hay que poder
   compararlos de un vistazo, no abriendo una lista de uno en uno. */
fieldset.fld{ border:0; padding:0; margin:0 0 19px; }
fieldset.fld legend{ padding:0; }

.opts{ display:grid; gap:9px; }
.opts--fila{ grid-template-columns:repeat(3,1fr); }

.opt{ position:relative; display:block; cursor:pointer; }
.opt input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.opt > span{
  display:block; min-height:52px; padding:14px 16px;
  background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-size:.95rem; font-weight:500; color:var(--ink);
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.opts--fila .opt > span{ display:grid; place-items:center; text-align:center; padding:14px 8px; }
.opt--ancho > span{ display:block; }
.opt--ancho b{ display:block; font-weight:700; }
.opt--ancho i{ display:block; margin-top:2px; font-style:normal; font-size:.85rem; color:var(--ink-3); line-height:1.45; }

.opt:hover > span{ border-color:#bccdc3; }
.opt input:checked + span{
  border-color:var(--verde); background:var(--verde-suave);
  box-shadow:0 0 0 1px var(--verde) inset;
}
.opt input:focus-visible + span{ outline:2px solid var(--verde); outline-offset:2px; }
.fld.is-bad .opt > span{ border-color:var(--rojo-linea); }

/* -------------------------------------------------- sufijo en el campo */
.fld__wrap--suf{ position:relative; }
.fld__wrap--suf .fld__input{ padding-right:3.2em; }
.fld__suf{
  position:absolute; right:1em; top:50%; transform:translateY(-50%);
  font-size:.95rem; font-weight:600; color:var(--ink-3); pointer-events:none;
}
/* Las flechitas del number roban espacio y nadie las usa en un celular. */
.fld__input[type="number"]{ appearance:textfield; -moz-appearance:textfield; }
.fld__input[type="number"]::-webkit-outer-spin-button,
.fld__input[type="number"]::-webkit-inner-spin-button{ appearance:none; margin:0; }

/* ================================================== cabecera de avance */
/* Sin esto un embudo es un pasillo a oscuras: la persona no sabe si le quedan
   dos preguntas o veinte, y esa incertidumbre es la que hace abandonar. */
.pasos{ margin-bottom:clamp(22px,4vh,32px); }
.pasos__txt{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:8px; }
.pasos__txt b{
  font-family:var(--font-d); font-weight:700; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--verde);
}
.pasos__txt span{ font-size:.86rem; color:var(--ink-3); }
.pasos__barra{ height:4px; border-radius:100px; background:var(--line); overflow:hidden; }
.pasos__barra i{ display:block; height:100%; background:var(--verde); border-radius:100px;
  transition:width .5s var(--ease); }
@media (prefers-reduced-motion: reduce){ .pasos__barra i{ transition:none; } }

/* ============================================================== agenda */
.cita__h2{ font-size:1.02rem; margin:clamp(26px,4vh,34px) 0 12px; }
/* Card 714: donde había dos opciones ahora hay un hecho. */
.cita__modo{ color:var(--ink-2); line-height:1.6; }

/* Los dias en una fila que se arrastra: siete botones apilados serian media
   pantalla, y la eleccion de dia se hace comparando, no leyendo. */
.dias{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.dias::-webkit-scrollbar{ height:0; }
.dia{
  flex:0 0 auto; scroll-snap-align:start;
  display:grid; gap:1px; place-items:center;
  min-width:60px; min-height:72px; padding:10px 8px;
  background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .18s, background .18s;
}
.dia i{ font-style:normal; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.dia b{ font-family:var(--font-d); font-weight:800; font-size:1.25rem; color:var(--ink); line-height:1.1; }
.dia u{ text-decoration:none; font-size:.72rem; color:var(--ink-3); }
.dia:hover{ border-color:#bccdc3; }
.dia.is-on{ background:var(--verde); border-color:var(--verde); }
.dia.is-on i, .dia.is-on b, .dia.is-on u{ color:#fff; }
.dia:focus-visible{ outline:2px solid var(--verde); outline-offset:2px; }

.horas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:9px; }
.hora{
  min-height:48px; padding:12px 10px;
  background:var(--white); border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-family:var(--font-d); font-weight:600; font-size:.98rem; color:var(--ink);
  transition:border-color .18s, background .18s, color .18s;
}
.hora:hover{ border-color:#bccdc3; }
.hora.is-on{ background:var(--verde); border-color:var(--verde); color:#fff; }
.hora:focus-visible{ outline:2px solid var(--verde); outline-offset:2px; }

/* Cuando la persona no eligio profesional, cada hora dice de quien es. Seis
   botones identicos que en realidad asignan a personas distintas es una
   eleccion tomada a escondidas. */
.hora--con{ display:grid; gap:1px; place-items:center; padding:9px 8px; }
.hora--con b{ font-weight:600; }
.hora--con i{ font-style:normal; font-size:.74rem; font-weight:500; color:var(--ink-3); }
.hora--con.is-on i{ color:rgba(255,255,255,.86); }

/* Estado vacio con salida. Un dia sin cupos no puede dejar la pantalla muerta. */
.vacio{
  padding:18px 19px; background:#eef4f0; border-radius:var(--r-sm);
  font-size:.9rem; line-height:1.6; color:var(--ink-2);
}
.vacio b{ display:block; color:var(--ink); font-family:var(--font-d); margin-bottom:3px; }
.vacio p{ margin-bottom:13px; }

/* ---------------------------------------------- el momento de confirmar
   La celebracion usa la geometria de la marca: el anillo de progreso que ES la
   "e" de Elenia se completa, y el check se dibuja dentro. Marca el momento sin
   confeti, que en un producto de salud para gente que ya fracasó suena a
   felicitar a alguien por hacer lo mínimo. El tamaño de la celebración tiene
   que igualar el tamaño de lo logrado: reservó una llamada. */
.exito{ position:relative; width:64px; height:64px; margin-bottom:20px; }
.exito > svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ex-track{ fill:none; stroke:var(--verde-suave); stroke-width:6; }
.ex-fill{
  fill:none; stroke:var(--verde); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:176; stroke-dashoffset:176;   /* 2·pi·28 */
}
.ex-check{ position:absolute; inset:0; display:grid; place-items:center; }
.ex-check svg{ width:26px; height:26px; }
.ex-check path{
  fill:none; stroke:var(--verde); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26;
}
.exito.is-on .ex-fill{ animation:ex-anillo .75s var(--ease) forwards; }
.exito.is-on .ex-check path{ animation:ex-check .32s var(--ease) .5s forwards; }
@keyframes ex-anillo{ to{ stroke-dashoffset:0; } }
@keyframes ex-check{ to{ stroke-dashoffset:0; } }

/* Al volver a entrar ya esta hecho: se ve completo y no se vuelve a animar. */
.exito.sin-animar .ex-fill,
.exito.sin-animar .ex-check path{ animation:none; stroke-dashoffset:0; }

@media (prefers-reduced-motion: reduce){
  .exito.is-on .ex-fill, .exito.is-on .ex-check path{ animation:none; stroke-dashoffset:0; }
}

.cita__bravo{
  margin-top:.9rem; font-family:var(--font-d); font-weight:600;
  font-size:1.02rem; color:var(--verde); line-height:1.5; max-width:36ch;
}

/* El recordatorio. No es un boton y vale mas que los dos que lo siguen: la
   reserva no sirve de nada si la persona no aparece. */
.cita__aviso{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:16px; padding:14px 16px;
  background:#eef4f0; border-radius:var(--r-sm);
  font-size:.89rem; line-height:1.55; color:var(--ink-2);
}
.cita__aviso svg{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--verde); }

.cita__cuando{
  margin-top:14px; font-family:var(--font-d); font-weight:800;
  font-size:clamp(1.4rem,5vw,1.9rem); letter-spacing:-.02em; color:var(--ink); line-height:1.15;
}

/* =============================================================== planes */
/* Se llaman .opcion y no .plan a proposito: styles.css YA define .plan para
   las tarjetas de precios de la landing, y como se carga antes, mis tarjetas
   heredaban su fondo y su padding y salian con doble borde. */
.auth__body--ancho{ max-width:560px; }
.planes{ display:grid; gap:11px; margin-top:clamp(22px,4vh,30px); }
.opcion{ position:relative; display:block; cursor:pointer; }
.opcion input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.opcion__cuerpo{
  display:block; padding:19px 20px;
  background:var(--white); border:1px solid var(--line-2); border-radius:var(--r);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.opcion:hover .opcion__cuerpo{ border-color:#bccdc3; }
.opcion input:checked + .opcion__cuerpo{
  border-color:var(--verde); background:var(--verde-suave);
  box-shadow:0 0 0 1px var(--verde) inset;
}
.opcion input:focus-visible + .opcion__cuerpo{ outline:2px solid var(--verde); outline-offset:2px; }
.opcion__rec{
  display:inline-block; margin-bottom:7px; padding:3px 9px; border-radius:100px;
  background:var(--verde); color:#fff; font-style:normal;
  font-family:var(--font-d); font-weight:700; font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.opcion__nom{ display:block; font-family:var(--font-d); font-weight:700; font-size:1.08rem; color:var(--ink); }
.opcion__precio{ display:block; margin-top:5px; font-size:.92rem; color:var(--ink-3); }
.opcion__precio em{ font-style:normal; font-family:var(--font-d); font-weight:800;
  font-size:1.7rem; letter-spacing:-.03em; color:var(--ink); margin-right:5px; }
.opcion__nota{ display:block; margin-top:4px; font-size:.86rem; color:var(--ink-3); }
.opcion__ahorro{
  display:inline-block; margin-top:9px; padding:3px 10px; border-radius:100px;
  background:var(--verde-suave); color:var(--verde-deep);
  font-family:var(--font-d); font-weight:700; font-size:.76rem;
}
.opcion input:checked + .opcion__cuerpo .opcion__ahorro{ background:var(--white); }

/* ==================================================== objetivo diario */
/* La cifra, su etiqueta y quien la reemplaza viven en el MISMO bloque. Si este
   bloque se reutiliza en otra pantalla, la etiqueta viaja con el numero. */
.obj{
  margin-top:clamp(20px,3.5vh,28px); padding:clamp(22px,4vw,30px);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.obj__badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:100px;
  background:#fff3d1; color:#7a5c04;
  font-family:var(--font-d); font-weight:700; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.obj__badge--real{ background:var(--verde-suave); color:var(--verde-deep); }
.obj__num{ display:flex; align-items:baseline; gap:10px; margin-top:14px; flex-wrap:wrap; }
.obj__num b{
  font-family:var(--font-d); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(3rem,12vw,4.4rem); line-height:.95; color:var(--ink);
}
.obj__num span{ font-size:1.02rem; color:var(--ink-3); font-weight:500; }
/* PARA QUE ES ESE NUMERO. La cifra contesta cuanto; esto contesta para que, que
   es lo que ella acaba de elegir dos pantallas antes. Sin esta linea el objetivo
   aparece sin decir de donde sale su intencion, y «mantener» y «bajar de peso»
   producen numeros distintos sin nada en pantalla que explique por que. */
.obj__para{ margin-top:10px; font-size:.95rem; line-height:1.5; color:var(--ink-2); }
.obj__para b{ font-family:var(--font-d); font-weight:700; color:var(--ink); }

.obj__quien{ margin-top:13px; font-size:.9rem; line-height:1.55; color:var(--ink-2); max-width:44ch; }

.obj--real{ border-color:var(--verde); }

.obj__piso, .obj__cambio{
  margin-top:14px; padding:15px 17px; border-radius:var(--r-sm);
  font-size:.88rem; line-height:1.6;
}
.obj__piso{ background:#fff8e6; border:1px solid #f0dca6; color:#5c4708; }
.obj__cambio{ background:var(--verde-suave); color:var(--verde-deep); }
.obj__piso b, .obj__cambio b{ display:block; font-family:var(--font-d); margin-bottom:3px; }
.obj__piso p, .obj__cambio p{ margin-top:2px; }

.obj__h2{ font-size:1.05rem; margin:clamp(28px,4.5vh,38px) 0 12px; }
.obj__desglose{ list-style:none; margin:0; padding:0; }
.obj__desglose li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line);
  font-size:.92rem; color:var(--ink-2);
}
.obj__desglose li b{ font-family:var(--font-d); color:var(--ink); white-space:nowrap; }
.obj__desglose li.es-total{ border-bottom:0; padding-top:14px; }
.obj__desglose li.es-total span{ color:var(--ink); font-weight:600; }
.obj__desglose li.es-total b{ color:var(--verde); font-size:1.08rem; }
.obj__formula{ margin-top:10px; font-size:.8rem; color:var(--ink-3); line-height:1.55; }

.obj__aviso{
  margin-top:clamp(24px,4vh,32px); padding:16px 18px;
  background:#eef4f0; border-radius:var(--r-sm);
  font-size:.87rem; line-height:1.6; color:var(--ink-2);
}
.obj__aviso b{ display:block; color:var(--ink); font-family:var(--font-d); margin-bottom:4px; }

/* Mujer / Hombre / Otro caben de sobra en una fila a 390px. Solo se apilan
   en las pantallas de verdad estrechas. */
@media (max-width:339px){ .opts--fila{ grid-template-columns:1fr; } }

/* ============================================================== casilla */
.check{
  display:flex; align-items:flex-start; gap:12px;
  margin:24px 0 6px; cursor:pointer;
  font-size:.88rem; line-height:1.55; color:var(--ink-2);
}
.check input{
  appearance:none; flex:0 0 auto;
  width:26px; height:26px; margin-top:1px;
  border:2px solid var(--line-2); border-radius:7px; background:var(--white);
  cursor:pointer; position:relative; transition:.18s;
}
/* Son las dos únicas casillas que nadie puede saltarse y ambas tienen peso
   legal: el dedo tiene que acertar. La caja se ve de 26 px y el área que
   responde al toque mide 44, sin mover un pixel de la maqueta. */
.check input::before{
  content:""; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.check input:checked{ background:var(--verde); border-color:var(--verde); }
.check input:checked::after{
  content:""; position:absolute; left:8px; top:3px;
  width:5px; height:11px;
  border:2px solid #fff; border-top:0; border-left:0;
  transform:rotate(45deg);
}
.check input:focus-visible{ outline:2px solid var(--verde); outline-offset:2px; }
.check a{ color:var(--verde); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.check a:hover{ color:var(--verde-deep); }
.check.is-bad input{ border-color:var(--rojo); }

.form__err--check{ margin:2px 0 0 38px; }

/* ================================================================ envío */
.form__send{ margin-top:22px; }
/* La tranquilidad va pegada al boton, que es donde se paga el costo. */
.form__calma{ margin-top:11px; text-align:center; font-size:.83rem; color:var(--ink-3); }
.form__send .btn{ min-height:54px; }
.btn[aria-busy="true"]{ opacity:.82; pointer-events:none; }

/* Apagado pero vivo. Con aria-disabled en vez del atributo disabled sigue
   siendo enfocable y se puede pulsar, para poder explicar qué falta. */
.btn[aria-disabled="true"]{
  background:#dfe6e1; color:#7d8b83; box-shadow:none; cursor:default;
}
.btn[aria-disabled="true"]:hover{ background:#dfe6e1; transform:none; box-shadow:none; }
.form__calma.is-bad{ color:var(--rojo); font-weight:600; }

/* Etiqueta solo para lectores de pantalla. */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.spin{
  width:17px; height:17px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spin{ animation-duration:1.6s; } }

/* Aviso general. Solo para lo que no pertenece a ningún campo: red caída,
   servidor roto, o un error del backend que no supimos ubicar. */
.form__alert{
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:20px; padding:14px 16px;
  background:var(--rojo-suave); border:1px solid var(--rojo-linea);
  border-radius:var(--r-sm);
  font-size:.9rem; line-height:1.5; color:#7a1c14;
}
.form__alert svg{ width:18px; height:18px; flex:none; margin-top:1px; stroke:var(--rojo); fill:none; stroke-width:2; stroke-linecap:round; }
.form__alert b{ display:block; color:var(--rojo); font-family:var(--font-d); margin-bottom:2px; }

.form__fine{ margin-top:18px; font-size:.83rem; color:var(--ink-3); line-height:1.55; }
.form__alt{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-size:.93rem; color:var(--ink-3); }
.form__alt a{ color:var(--verde); font-weight:600; }
.form__alt a:hover{ color:var(--verde-deep); }

/* descargo médico: se lee antes de decidir, no escondido en el pie */
.disclaim{
  margin-top:20px; padding:13px 15px;
  background:#eef4f0; border-radius:var(--r-sm);
  font-size:.82rem; line-height:1.55; color:var(--ink-2);
}

/* ============================================================ bienvenida */
.welc{ max-width:560px; }
.welc__ring{ width:76px; height:76px; position:relative; margin-bottom:26px; }
.welc__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.welc__ring .wr-track{ fill:none; stroke:var(--verde-suave); stroke-width:7; }
.welc__ring .wr-fill{
  fill:none; stroke:var(--verde); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:270; stroke-dashoffset:216;   /* 1 de 5 pasos */
}
.welc__ring b{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-d); font-size:.86rem; color:var(--verde);
}

.welc__state{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:1.4rem; padding:9px 15px;
  background:var(--verde-suave); border-radius:100px;
  font-size:.86rem; font-weight:600; color:var(--verde-deep);
}
.welc__state svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }

.steps{ margin-top:clamp(28px,4.5vh,40px); display:grid; gap:14px; }
.step{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  padding:19px 20px; min-height:44px;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-sm);
  transition:border-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
a.step:hover{ border-color:var(--verde); transform:translateY(-2px); box-shadow:var(--shadow); }
.step__ic{
  width:42px; height:42px; display:grid; place-items:center;
  background:var(--verde-suave); border-radius:12px; color:var(--verde);
}
.step__ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.step h3{ font-size:1rem; font-weight:700; }
.step p{ margin-top:3px; font-size:.87rem; color:var(--ink-3); line-height:1.5; }
.step__go{ color:var(--ink-3); }
.step__go svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
a.step:hover .step__go{ color:var(--verde); }

.step--wait{ background:transparent; box-shadow:none; border-style:dashed; }

/* El siguiente paso disponible. Sin esto, dos pasos vivos con el mismo peso
   dejan a la persona eligiendo por dónde empezar cuando no debería tener que. */
.step--next{ border-color:var(--verde); box-shadow:0 2px 0 var(--verde) inset, var(--shadow-sm); }
.step__kcal{ display:block; font-family:var(--font-d); font-weight:800; font-size:1.3rem; color:var(--ink); letter-spacing:-.02em; }
.step__prov{ display:block; margin-top:2px; font-size:.83rem; color:var(--ink-3); }
.step__marca{
  display:inline-block; margin-bottom:5px;
  font-family:var(--font-d); font-weight:700; font-size:.68rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--verde);
}

/* Paso ya hecho: se queda a la vista, apagado, con el check. Desaparecerlo
   borra la prueba de avance justo donde el avance es el mensaje. */
.step--done{ background:var(--verde-suave); border-color:transparent; box-shadow:none; }
.step--done .step__ic{ background:var(--verde); color:#fff; }
.step--done .step__go svg{ display:none; }
.step--wait .step__ic{ background:#eef2ef; color:var(--ink-3); }
.step--wait h3{ color:var(--ink-2); }

/* Cierre del documento legal. Un texto largo tiene que terminar en algun lado
   y ofrecer a donde ir; antes terminaba en nada. */
.legal__fin{
  margin-top:clamp(44px,7vh,72px); padding-top:clamp(30px,5vh,44px);
  border-top:1px solid var(--line);
}
.legal__fin > p{ font-family:var(--font-d); font-weight:700; font-size:1.14rem; color:var(--ink); }
.legal__fin-acc{ display:flex; flex-wrap:wrap; gap:11px; margin-top:18px; }
.legal__fin-acc .btn{ flex:1 1 200px; }

/* ============================================== atajo a la decision (movil)
   El documento es largo a proposito y en un celular llegar al final cuesta.
   Esta pildora SOLO mueve la pantalla: no acepta nada, no habilita nada, y la
   casilla sigue exigiendo su marca. Por eso es gris oscuro y no verde: no debe
   competir ni confundirse con el boton que si consiente. */
.tobottom{
  position:fixed; left:50%; z-index:80;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  display:inline-flex; align-items:center; gap:8px;
  min-height:48px; padding:12px 20px;
  /* Opaca a proposito: backdrop-filter sobre position:fixed parpadea en iOS. */
  background:var(--ink); color:#fff;
  font-family:var(--font-d); font-weight:600; font-size:.92rem;
  border-radius:100px; white-space:nowrap;
  box-shadow:0 6px 18px rgba(12,20,16,.28), 0 18px 40px rgba(12,20,16,.18);
  opacity:0; transform:translate(-50%, 14px); pointer-events:none;
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.tobottom.is-on{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.tobottom:focus-visible{ outline:2px solid var(--verde-vivo); outline-offset:3px; }
.tobottom svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* Cuando esta la cinta de demostracion, la pildora se sube para no taparla. */
body:has(.demo) .tobottom{ bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }

/* Solo las que se marcan como de movil desaparecen en pantallas anchas: en un
   formulario, arriba de 768px el destino ya cuesta poco. Las de documentos
   largos se quedan, porque ocho pantallas de texto cansan en cualquier ancho. */
@media (min-width:769px){ .tobottom--movil{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .tobottom{ transition:opacity .01s; transform:translate(-50%, 0); }
}

/* ====================================================== cinta de demo */
/* Aparece solo si api.js no encontró backend y sirvió una respuesta simulada.
   Que nadie confunda una demostración con un alta real. */
.demo{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 16px;
  background:#3a2d05; color:#ffe9a3;
  font-size:.82rem; font-weight:600; text-align:center;
}
.demo svg{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
/* La cinta es fija: sin este colchón tapa la última línea de la página. */
body:has(.demo) .auth__main,
body:has(.demo) .cons,
body:has(.demo) .legal{ padding-bottom:96px; }

/* ====================================================== consentimiento */
/* Una sola columna, ancho de lectura. Sin foto: un documento legal al lado de
   una imagen de marketing invita a firmarlo sin leerlo. */
.cons{ max-width:680px; margin:0 auto; padding:0 var(--pad) clamp(70px,11vh,120px); }
.cons__top{ max-width:680px; margin:0 auto clamp(24px,5vh,44px); width:100%; }
.cons__title{ font-size:clamp(1.75rem,4.4vw,2.5rem); margin-top:.4rem; }
.cons__lead{ margin-top:1.1rem; color:var(--ink-2); font-size:1.02rem; line-height:1.65; max-width:60ch; }

.cons__load{ display:flex; align-items:center; gap:11px; margin-top:2.4rem; color:var(--ink-3); font-size:.95rem; }
.spin--dark{ border-color:rgba(22,101,52,.22); border-top-color:var(--verde); }

/* El documento. Hereda de .legal para no inventar una segunda tipografía de
   texto largo, pero se separa del resto con una regla y un fondo propio. */
.cons__doc{
  max-width:none; padding:clamp(22px,3.5vw,32px);
  margin:clamp(26px,4vh,38px) 0 0;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r);
}
.cons__doc h2{
  font-size:1.06rem; margin:clamp(24px,3.5vh,32px) 0 2px;
  padding-top:clamp(20px,3vh,26px); border-top:1px solid var(--line);
}
.cons__doc > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.cons__doc p{ margin-top:9px; font-size:.95rem; line-height:1.68; }
.cons__doc ul{ margin:9px 0 0 19px; }
.cons__doc li{ margin-top:6px; font-size:.95rem; line-height:1.6; }

.cons__ver{ margin-top:13px; font-size:.82rem; color:var(--ink-3); }

.cons__act{ margin-top:clamp(24px,4vh,34px); }
.cons__act .check{ align-items:flex-start; font-size:.92rem; color:var(--ink); }

/* Qué pasa si NO consiente. Va visible junto a la decisión, no escondido:
   una decisión informada incluye saber qué pasa si dices que no. */
.cons__no{
  margin-top:clamp(24px,4vh,32px); padding:15px 17px;
  background:#eef4f0; border-radius:var(--r-sm);
  font-size:.88rem; line-height:1.6; color:var(--ink-2);
}
.cons__no b{ display:block; color:var(--ink); font-family:var(--font-d); margin-bottom:3px; }

.cons__ok{ margin-top:clamp(30px,6vh,52px); }
.cons__ok-ic{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:20px;
  background:var(--verde-suave); color:var(--verde); border-radius:50%;
}
.cons__ok-ic svg{ width:24px; height:24px; }
.cons__ok h2{ font-size:clamp(1.5rem,3.4vw,2rem); }
.cons__ok p{ margin-top:.8rem; color:var(--ink-3); font-size:1rem; line-height:1.6; max-width:52ch; }

/* ============================================================= legal.html */
.legal{ max-width:760px; margin:0 auto; padding:clamp(30px,6vh,60px) var(--pad) clamp(70px,11vh,120px); }
.legal__warn{
  display:flex; align-items:flex-start; gap:12px;
  margin-bottom:clamp(30px,5vh,48px); padding:17px 19px;
  background:#fff8e6; border:1px solid #f0dca6; border-radius:var(--r);
  font-size:.9rem; line-height:1.6; color:#5c4708;
}
.legal__warn svg{ width:19px; height:19px; flex:none; margin-top:2px; stroke:#a37b05; fill:none; stroke-width:2; stroke-linecap:round; }
.legal__warn b{ display:block; color:#7a5c04; font-family:var(--font-d); margin-bottom:3px; }
.legal h1{ font-size:clamp(1.9rem,4.4vw,2.6rem); }
.legal h2{ font-size:clamp(1.3rem,2.6vw,1.7rem); margin:clamp(38px,6vh,60px) 0 4px; padding-top:clamp(30px,5vh,44px); border-top:1px solid var(--line); }
.legal h3{ font-size:1.02rem; margin:26px 0 6px; }
.legal p, .legal li{ color:var(--ink-2); font-size:.97rem; line-height:1.72; }
.legal p{ margin-top:11px; max-width:68ch; }
.legal ul{ margin:11px 0 0 20px; max-width:66ch; }
.legal li{ margin-top:7px; }
.legal__meta{ margin-top:12px; font-size:.86rem; color:var(--ink-3); }
/* Dato que solo el titular del negocio puede completar. Se marca para que
   nadie publique la página creyendo que ya está lista. */
.legal mark{
  background:#fff3d1; color:#5c4708; padding:1px 6px;
  border-radius:5px; font-weight:600; font-size:.94em;
}
.legal__toc{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.legal__toc a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  background:var(--white); border:1px solid var(--line-2); border-radius:100px;
  font-size:.89rem; font-weight:600; color:var(--ink-2); transition:.2s;
}
.legal__toc a:hover{ border-color:var(--verde); color:var(--verde); }