/* ============================================================
   SISTEMA — fuente única de verdad
   Todo lo que se ve en /entregas sale de aquí. Si una pantalla
   se ve distinta al /lab, la pantalla está mal.

   Dirección: limpio, blanco y brillante, como las referencias
   de la categoría (Freshify, Calii, Bfresh). Comercio amable,
   no editorial.

   SOLO CLARO. Nada de dark mode: estas pantallas se ven en la
   cocina, en la calle y en pantallas de gama media, y el blanco
   es el que aguanta.

   La paleta es PROVISIONAL: la marca todavía no existe, es lo
   que se está cotizando. Lo que sí está decidido es la estructura.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

:root {
  color-scheme: light;

  /* superficie */
  --papel:      #FFFFFF;   /* fondo de página */
  --lienzo:     #F4F7F3;   /* bloques y zonas de descanso */
  --linea:      #E2E8E2;

  /* texto */
  --tinta:      #16201A;
  --apagado:    #62726A;

  /* acento */
  --acento:     #2E9E5B;
  --acento-osc: #237A46;   /* hover */
  --acento-txt: #1C6B3E;   /* texto sobre fondo suave */
  --acento-sv:  #E7F4EC;

  /* segundo acento: la yema. Se usa poquito, para señalar. */
  --yema:       #F2A81D;
  --yema-sv:    #FEF3DC;
  --yema-txt:   #8A5D02;

  /* semánticos */
  --exito:      #25A15A;
  --peligro:    #C4392B;

  /* forma: esquinas suaves, como las referencias */
  --r-chico:    6px;
  --r:          12px;
  --r-grande:   16px;
  --sombra:     0 1px 2px rgba(16, 32, 22, .04), 0 2px 8px rgba(16, 32, 22, .04);
  --sombra-alta:0 2px 4px rgba(16, 32, 22, .05), 0 8px 24px rgba(16, 32, 22, .07);

  /* espaciado, base 4 */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
}

/* ---------- 2. BASE ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  /* Helvetica Neue es el interim de sopa. Base 17px: el público son
     mujeres de 40 a 60, la letra chica no es una opción de diseño. */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.contenedor       { max-width: 640px; margin: 0 auto; padding: 0 var(--e5) var(--e7); }
.contenedor-ancho { max-width: 900px; margin: 0 auto; padding: 0 var(--e5) var(--e7); }

/* ---------- 3. TEXTO ---------- */

.titulo    { font-size: 34px; line-height: 1.12; letter-spacing: -.025em; font-weight: 700; margin: 0 0 var(--e4); text-wrap: balance; }
.subtitulo { font-size: 20px; line-height: 1.25; letter-spacing: -.015em; font-weight: 700; margin: 0; }
.cuerpo    { font-size: 17px; margin: 0 0 var(--e3); }
.apoyo     { font-size: 15px; color: var(--apagado); margin: 0; }
.mini      { font-size: 13.5px; color: var(--apagado); margin: 0; }

.marca {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acento-txt); background: var(--acento-sv);
  padding: 6px 12px; border-radius: 999px; margin: 0;
}

.regla { height: 1px; background: var(--linea); border: 0; margin: var(--e6) 0 0; }

/* ---------- 4. BOTÓN ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 17.5px; font-weight: 700; letter-spacing: -.01em;
  padding: 17px 24px; border: none; border-radius: var(--r);
  cursor: pointer; text-decoration: none;
  transition: background .14s, transform .08s;
}
.btn-ancho { width: 100%; }

.btn-acento        { background: var(--acento); color: #fff; }
.btn-acento:hover  { background: var(--acento-osc); }
.btn-wa            { background: var(--exito); color: #fff; }
.btn-wa:hover      { background: var(--acento-osc); }
.btn-claro         { background: var(--lienzo); color: var(--tinta); border: 1px solid var(--linea); }
.btn-claro:hover   { border-color: var(--tinta); }

.btn:active        { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.btn svg           { width: 21px; height: 21px; flex: none; }

/* ---------- 5. OPCIÓN (chip) ----------
   Chips que se acomodan solos en el renglón, no filas de ancho completo:
   una lista de 8 opciones cabe en tres renglones en vez de ocho.
   El input nativo mide 13px y el pulgar no le atina, por eso va escondido
   y el chip completo es el área tocable (46px de alto, arriba del mínimo). */

.opciones { display: flex; flex-wrap: wrap; gap: var(--e2); }

.opcion {
  display: inline-flex; align-items: center; gap: var(--e2);
  background: var(--papel); border: 1.5px solid var(--linea); border-radius: 999px;
  padding: 12px 18px; cursor: pointer;
  transition: border-color .14s, background .14s, color .14s;
}
.opcion:hover { border-color: var(--acento); background: var(--acento-sv); }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion .txt  { font-size: 16px; line-height: 1.25; }

/* Sin palomita: el relleno verde con texto blanco ya dice "seleccionado".
   Se probó reservarle lugar a un ícono y deja un hueco que parece error. */
.opcion.activa       { background: var(--acento); border-color: var(--acento); color: #fff; }
.opcion:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- 6. CAMPO ---------- */

.campo input, .campo textarea {
  width: 100%; font-family: inherit; font-size: 16.5px; color: var(--tinta);
  padding: 14px 15px; background: var(--papel);
  border: 1.5px solid var(--linea); border-radius: var(--r);
  transition: border-color .14s;
}
.campo input::placeholder, .campo textarea::placeholder { color: #9AA79F; }
.campo textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.campo input:focus-visible, .campo textarea:focus-visible {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-sv);
}
.campo .mal { border-color: var(--peligro); }
.error { color: var(--peligro); font-size: 15px; margin: var(--e3) 0 0; min-height: 1px; }

/* ---------- 7. BLOQUE DE PREGUNTA ----------
   El número no es adorno: la encuesta es una secuencia y le dice
   a la persona cuánto le falta. */

.pregunta     { padding: var(--e6) 0 0; }
.pregunta-cab { display: flex; gap: var(--e3); align-items: baseline; margin-bottom: var(--e2); }
.num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--acento); color: #fff;
  font-size: 14px; font-weight: 700; display: grid; place-items: center;
  align-self: flex-start; margin-top: 1px;
}
.sangria { margin-left: 40px; }
.pregunta .apoyo { margin: 0 0 var(--e4) 40px; }

/* ---------- 7b. WIZARD ----------
   Una pregunta por pantalla. Se usa cuando hay preguntas condicionales:
   como el número de pantallas depende de lo que conteste cada quien,
   la barra avanza por proporción y nunca promete "faltan N". */

.progreso {
  position: sticky; top: 0; z-index: 5;
  height: 4px; background: var(--linea);
}
.progreso span {
  display: block; height: 100%; width: 0;
  background: var(--acento); transition: width .28s ease;
}

.paso { display: none; }
.paso.activo { display: block; animation: entra .22s ease both; }

@keyframes entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.nav {
  display: flex; align-items: center; gap: var(--e3);
  margin-top: var(--e6); padding-top: var(--e5);
  border-top: 1px solid var(--linea);
}
.nav .btn { flex: 1; }

.btn-fantasma {
  background: none; color: var(--apagado); border: none;
  font-family: inherit; font-size: 16px; font-weight: 600;
  padding: 17px 8px; cursor: pointer; flex: none !important;
}
.btn-fantasma:hover { color: var(--tinta); }
.btn-fantasma:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: var(--r-chico); }

/* Repaso final: etiqueta y valor, para revisar antes de enviar. */
.repaso { width: 100%; border-collapse: collapse; }
.repaso th {
  text-align: left; vertical-align: top; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--apagado);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 9px var(--e4) 9px 0; width: 1%;
}
.repaso td { padding: 9px 0; font-size: 16px; }
.repaso tr + tr th, .repaso tr + tr td { border-top: 1px solid var(--linea); }

/* ---------- 8. TARJETA Y PÍLDORA ---------- */

.tarjeta {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-grande); padding: var(--e5); box-shadow: var(--sombra);
}
.panel { background: var(--lienzo); border-radius: var(--r-grande); padding: var(--e5); }

.pildora {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--yema-txt); background: var(--yema-sv);
  border-radius: 999px; padding: 5px 11px;
}

/* ---------- 9. RESPONSIVE ----------
   En celular se quita la sangría: el ancho vale más que la alineación. */

@media (max-width: 460px) {
  body { font-size: 16.5px; }
  .titulo { font-size: 28px; }
  .sangria, .pregunta .apoyo { margin-left: 0; }
  .contenedor, .contenedor-ancho { padding-left: var(--e4); padding-right: var(--e4); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }