/* ============================================================================
   La encuesta del cliente.

   Pensada primero para un teléfono sostenido con una mano mientras la otra
   sujeta un helado. De ahí tres decisiones:

     - Una pregunta por pantalla, sin desplazamiento en la mayoría de los casos.
     - Los botones de avance van abajo, al alcance del pulgar, no arriba.
     - Las opciones son filas anchas de 60px y no radios de 20px: se aciertan
       sin mirar.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   El fondo de marca
   ----------------------------------------------------------------------------
   La carta de Gelatos es un degradado de cian a magenta lleno de burbujas. Con
   esa fuerza detrás no se puede leer nada, así que aquí está el mismo gesto
   bajado de intensidad: un degradado muy claro y cuatro manchas difusas en los
   tres colores del logo.

   Se midió antes de ponerlo. El titular de cada pregunta y el texto de apoyo
   van directamente encima del fondo, no sobre una tarjeta, así que se calculó
   el contraste en el peor punto —la mancha magenta sobre la parada rosada— y
   da 4,67:1 con el texto de apoyo, por encima del mínimo de 4,5. El titular,
   que es lo que más importa, no baja de 13:1 en ningún punto.

   Va todo en un pseudoelemento fijo: no se desplaza con la página, el navegador
   lo pinta una sola vez y no cuesta nada al hacer scroll.
   ---------------------------------------------------------------------------- */

.fondo-marca {
    /* Respaldo liso, por si un navegador antiguo no entiende los radiales. */
    background: var(--background);
}

.fondo-marca::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 28% at 12% 10%, rgba(41, 171, 226, 0.14), transparent 70%),
        radial-gradient(34% 24% at 88% 20%, rgba(236, 0, 140, 0.10), transparent 70%),
        radial-gradient(30% 22% at 82% 70%, rgba(141, 198, 63, 0.14), transparent 70%),
        radial-gradient(36% 26% at 14% 86%, rgba(236, 0, 140, 0.08), transparent 70%),
        linear-gradient(170deg, #E8F6FD 0%, #FFF7FB 45%, #FFEDF6 100%);
}

/* El contenido va por encima del fondo.
   Se usa `z-index` positivo en el contenido en lugar de negativo en el fondo:
   un pseudoelemento en -1 se esconde detrás del propio fondo del `body` en
   cuanto este tiene alguno, y el fallo solo se ve en algunos navegadores. */
.fondo-marca > * {
    position: relative;
    z-index: 1;
}

.encuesta {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;   /* descuenta la barra del navegador móvil */
    max-width: 560px;
    margin-inline: auto;
    padding-inline: var(--e5);
}

/* --- Cabecera ------------------------------------------------------------- */

.encuesta__cabecera {
    padding-block: var(--e6) var(--e4);
    text-align: center;
}

/* El logo va con alto fijo y ancho automático: así no depende de la proporción
   exacta del archivo, que puede cambiar si algún día lo reexportan. */
.encuesta__logo {
    height: 64px;
    width: auto;
    margin-inline: auto;
}

.encuesta__marca {
    font-family: var(--fuente-titulo);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.encuesta__lema {
    margin-top: var(--e1);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* --- Progreso ------------------------------------------------------------- */

.progreso__texto {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--e2);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.progreso__pista {
    height: 6px;
    border-radius: var(--radio-full);
    background: var(--primary-velo);
    overflow: hidden;
}

.progreso__barra {
    height: 100%;
    width: 0;
    border-radius: var(--radio-full);
    background: var(--primary-grafico);
    /* Solo se anima el ancho de una barra ya pintada: es una propiedad que el
       navegador puede componer sin recalcular el resto de la página. */
    transition: width var(--transicion-lenta);
}

/* --- Pantalla de pregunta ------------------------------------------------- */

.encuesta__cuerpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-block: var(--e6);

    /* Centrado vertical, pero «seguro».
       Una pregunta corta queda bonita centrada. Una larga —la rejilla de nueve
       productos, o los cinco campos opcionales del final— es más alta que la
       pantalla, y con `center` a secas el contenido se desborda por arriba y
       por abajo a la vez, quedando parte inalcanzable. `safe` hace que, en ese
       caso, se alinee arriba y la página se desplace con normalidad. */
    justify-content: center;
    justify-content: safe center;

    /* Sitio para que la barra de navegación, que va pegada abajo, no tape la
       última fila cuando hay que desplazarse. */
    padding-bottom: calc(var(--e16) + env(safe-area-inset-bottom));
}

.paso { display: none; }
.paso[data-activo] { display: block; }

/* Entrada y salida (sección 23): 20px de desplazamiento y opacidad, 200-350ms,
   ease-out. Nunca bloquean: si el usuario toca rápido, la siguiente pregunta
   ya está ahí. */
@keyframes paso-entra {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes paso-entra-atras {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.paso[data-activo]              { animation: paso-entra 280ms ease-out both; }
.paso[data-activo][data-atras]  { animation: paso-entra-atras 280ms ease-out both; }

.paso__titulo {
    font-size: clamp(1.5rem, 5vw, 1.875rem);
    margin-bottom: var(--e2);
}

.paso__apoyo {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-bottom: var(--e6);
}

/* --- Opciones ------------------------------------------------------------- */

.opciones {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    list-style: none;
    padding: 0;
}

.opcion {
    display: flex;
    align-items: center;
    gap: var(--e4);
    width: 100%;
    min-height: 60px;
    padding: var(--e3) var(--e5);
    text-align: left;
    background: var(--surface);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-lg);
    cursor: pointer;
    /* `transform` y `box-shadow` se componen en la GPU; animar `top` o `height`
       obligaría a recalcular el diseño en cada fotograma. */
    transition: border-color var(--transicion), background-color var(--transicion),
                transform var(--transicion), box-shadow var(--transicion);
}

.opcion:hover { border-color: var(--borde-fuerte); }

.opcion[aria-checked="true"] {
    border-color: var(--primary);
    border-width: 2px;
    background: var(--primary-tenue);
    transform: translateY(-2px);
    box-shadow: var(--sombra);
}

.opcion:active { transform: scale(0.99); }

.opcion__icono {
    flex-shrink: 0;
    width: 26px; height: 26px;
    color: var(--text-secondary);
    transition: color var(--transicion);
}
.opcion[aria-checked="true"] .opcion__icono { color: var(--primary); }

.opcion__texto { flex: 1; font-weight: 500; }

.opcion__nota {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* La marca de selección. Es lo que hace que la opción elegida se distinga sin
   percibir color: hay una forma nueva donde antes no había nada. */
.opcion__marca {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border: 1.5px solid var(--borde-fuerte);
    border-radius: var(--radio-full);
    color: transparent;
    transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.opcion[aria-checked="true"] .opcion__marca {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverso);
}

.opcion__marca--visible {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- Rejilla de categorías (pregunta 1a) ---------------------------------- */

.categorias-rejilla {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e3);
    list-style: none;
    padding: 0;
}

.categoria-tarjeta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e2);
    width: 100%;
    padding: var(--e3) var(--e2) var(--e4);
    text-align: center;
    background: var(--surface);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-lg);
    cursor: pointer;
    /* Se anima solo lo que la GPU puede componer. */
    transition: border-color var(--transicion), background-color var(--transicion),
                transform var(--transicion), box-shadow var(--transicion);
}

.categoria-tarjeta:hover { border-color: var(--borde-fuerte); }

.categoria-tarjeta[aria-checked="true"] {
    border-color: var(--primary);
    border-width: 2px;
    background: var(--primary-tenue);
    transform: translateY(-2px);
    box-shadow: var(--sombra);
}

.categoria-tarjeta:active { transform: scale(0.99); }

/* La foto se recorta en círculo: las imágenes vienen de piezas de publicidad
   con encuadres distintos, y un círculo del mismo tamaño las iguala sin que se
   note que unas son más anchas que otras. */
.categoria-tarjeta__foto {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: var(--radio-full);
    overflow: hidden;
    background: var(--surface-suave);
}

.categoria-tarjeta__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.categoria-tarjeta__icono {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--primary-grafico);
}

.categoria-tarjeta__nombre {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    /* Los nombres largos —«Especialidades de Café»— tienen que caber en dos
       líneas sin descuadrar la fila. */
    text-wrap: balance;
}

/* Miniatura del producto dentro de una fila de opción. */
.opcion__foto {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--radio);
    object-fit: cover;
}

/* --- Escala NPS ----------------------------------------------------------- */

.nps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--e2);
}

.nps__boton {
    min-height: 52px;
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 1.0625rem;
    background: var(--surface);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio);
    transition: border-color var(--transicion), background-color var(--transicion),
                color var(--transicion), transform var(--transicion);
}

.nps__boton:hover { border-color: var(--borde-fuerte); }

.nps__boton[aria-checked="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverso);
    transform: translateY(-2px);
}

.nps__extremos {
    display: flex;
    justify-content: space-between;
    gap: var(--e4);
    margin-top: var(--e3);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* --- Campos de texto ------------------------------------------------------ */

.campo { margin-bottom: var(--e5); }

.campo__etiqueta {
    display: block;
    margin-bottom: var(--e2);
    font-size: 0.875rem;
    font-weight: 600;
}

.campo__control,
.campo textarea,
.campo input {
    width: 100%;
    padding: var(--e3) var(--e4);
    /* 16px exactos: por debajo, Safari en iOS hace zoom al enfocar y descoloca
       toda la pantalla. */
    font-size: 16px;
    background: var(--surface);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio);
    transition: border-color var(--transicion);
}

.campo textarea { min-height: 120px; resize: vertical; }

.campo__control:focus,
.campo textarea:focus,
.campo input:focus { border-color: var(--primary); outline-offset: 1px; }

.campo__contador {
    margin-top: var(--e2);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.campo__contador[data-lleno] { color: var(--danger); font-weight: 600; }

.campo__casilla {
    display: flex;
    align-items: flex-start;
    gap: var(--e3);
    padding: var(--e3) 0;
    cursor: pointer;
}
.campo__casilla input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; accent-color: var(--primary); }

.aviso-opcional {
    display: flex;
    gap: var(--e3);
    padding: var(--e4);
    margin-bottom: var(--e5);
    background: var(--accent-tenue);
    border-radius: var(--radio);
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* --- Navegación inferior --------------------------------------------------- */

.encuesta__pie {
    position: sticky;
    bottom: 0;
    z-index: var(--z-pegado);
    display: flex;
    gap: var(--e3);
    padding-block: var(--e4);
    /* Respeta la franja del gesto de inicio en los iPhone sin botón. */
    padding-bottom: max(var(--e4), env(safe-area-inset-bottom));

    /* Un velo desenfocado en vez de un degradado a color fijo.
       Antes se fundía hacia el crema del fondo; con el fondo de marca, ese
       crema ya no coincide con lo que hay detrás y se veía una costura. El
       desenfoque funciona sobre cualquier color. */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    margin-inline: calc(var(--e5) * -1);
    padding-inline: var(--e5);
}

/* Donde no hay `backdrop-filter` —navegadores viejos— el velo translúcido
   dejaría ver el contenido pasando por detrás. Ahí se vuelve opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .encuesta__pie { background: var(--surface); }
}

/* Padding más corto que el de un botón suelto: aquí el ancho lo marca la
   pantalla, y con el relleno por defecto «Enviar encuesta» se parte en dos
   líneas en un teléfono estrecho. */
.encuesta__pie .boton { flex: 1; padding-inline: var(--e3); }
.encuesta__pie .boton--fantasma { flex: 0 0 34%; }

/* --- Error --------------------------------------------------------------- */

.error-envio {
    display: flex;
    gap: var(--e3);
    padding: var(--e4);
    margin-bottom: var(--e4);
    background: var(--danger-tenue);
    border: 1px solid var(--danger);
    border-radius: var(--radio);
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 500;
}
.error-envio[hidden] { display: none; }

/* --- Pantalla final ------------------------------------------------------- */

.gracias {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e4);
    min-height: 70vh;
    text-align: center;
}

.gracias__medalla {
    display: grid;
    place-items: center;
    width: 88px; height: 88px;
    border-radius: var(--radio-full);
    background: var(--primary-tenue);
    color: var(--primary);
    animation: medalla 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

@keyframes medalla {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

.gracias__texto { max-width: 42ch; color: var(--text-secondary); }

/* El confeti (sección 25): breve y discreto. Se dibuja en un canvas para no
   crear cien nodos en el DOM. */
#confeti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-superpuesto);
}

/* --- Pantallas grandes ---------------------------------------------------- */

@media (min-width: 640px) {
    .categorias-rejilla { grid-template-columns: repeat(3, 1fr); }
    .nps { grid-template-columns: repeat(11, 1fr); }
    .nps__boton { min-height: 56px; font-size: 1rem; }
}

/* Por debajo de 360px —hay teléfonos así todavía— los números del NPS se
   aprietan demasiado en seis columnas, y la foto de categoría no deja sitio
   al nombre. */
@media (max-width: 359px) {
    .nps { grid-template-columns: repeat(4, 1fr); }
    .encuesta { padding-inline: var(--e4); }
    .categoria-tarjeta__foto { width: 68px; height: 68px; }
    .categoria-tarjeta__nombre { font-size: 0.8125rem; }
}