/**
 * Quiz Cruïlla — estilos.
 * Landing full-screen: cada paso ocupa el viewport con su color de fondo y el
 * contenido centrado (móvil y desktop). Solo se ve UN paso a la vez.
 *
 * Muchos !important son DEFENSIVOS: el theme fuerza color en p/h2/section y
 * pisaba los textos (quedaban oscuros sobre fondo oscuro = invisibles).
 */

/* Fuentes self-hosted desde /fonts del theme. Rutas relativas a este archivo
   (cruilla/assets/ → ../../fonts/) para servirlas del MISMO dominio: no depende
   de Google Fonts ni de la URL absoluta a producción del @font-face del theme. */
@font-face {
    font-family: 'Reckless Neue';
    src: url('../../fonts/reckless-neue-thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Reckless Neue';
    src: url('../../fonts/reckless-neue-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
/* Fuente específica de Cruïlla (la que usa el diseño para los textos serif). */
@font-face {
    font-family: 'Reckless Cruilla';
    src: url('../../fonts/RecklessNeue-Thin-cruilla.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-200.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-300.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* La página del quiz es un landing a pantalla completa: evitamos el scroll
   horizontal que provoca el full-bleed (ancho de la barra de scroll vertical).
   quiz.css solo se encola en la página del quiz, así que es seguro. */
html, body {
    overflow-x: hidden !important;
}

.cruilla-quiz {
    /* Colores EXACTOS del diseño (extraídos del SVG del intro). */
    --cru-dark:  #2e1708;
    --cru-light: #fdf8ed;
    --cru-rosa:  #f5d7c8;
    /* Serif del diseño de Cruïlla. Poppins se referencia aparte donde toca. */
    --cru-serif: 'Reckless Cruilla', 'Reckless Neue', serif;
    /* Full-bleed: rompe el ancho del contenedor del theme y ocupa el viewport. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: auto;
    font-family: var(--font-body, 'Poppins', sans-serif);
}

/* ---- Pasos: uno a la vez, a pantalla completa ----
   Controlamos la visibilidad con nuestras reglas (no confiamos en [hidden],
   que el theme pisaba). */
.cruilla-step {
    display: none;
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 48px 20px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

/* Marco decorativo (CRUÏLLA / ✳ / 2026) repetido en cada pantalla. Hereda el
   color del paso, así contrasta solo sobre cada fondo. */
.cruilla-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: inherit;
}
.cruilla-frame__item {
    position: absolute;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 200;
    color: inherit !important;
    opacity: .9;
}
.cruilla-frame__tl { top: 22px; left: 24px; }
.cruilla-frame__tc { top: 16px; left: 50%; transform: translateX(-50%); }
.cruilla-star { display: block; width: 24px; height: 24px; color: var(--cru-rosa); }
/* Logo Vallformosa (SVG) en el centro del marco de preguntas/resultado. */
.cruilla-frame__tc .cruilla-logo { width: 96px; margin: 0; display: block; }
.cruilla-frame__tr { top: 22px; right: 24px; }
/* Footer subido para que despeje el icono flotante de cookies (abajo-izq). */
.cruilla-frame__bl { bottom: 60px; left: 24px; }
.cruilla-frame__br { bottom: 60px; right: 24px; }
.cruilla-step:not([hidden]) {
    display: flex;
}
.cruilla-step[hidden] {
    display: none !important;
}

/* Fondo + color de texto por paso (llenando la pantalla) */
.cruilla-step--intro,
.cruilla-step--email {
    background: var(--cru-dark) !important;
    color: var(--cru-light) !important;
}
.cruilla-step--pregunta {
    background: var(--cru-light) !important;
    color: var(--cru-dark) !important;
    /* Contenido alineado ARRIBA con hueco bajo la cabecera del marco
       (CRUÏLLA/VALLFORMOSA/2026 a ~9vh) para que PAS 1 DE 3 no lo pise. */
    align-items: flex-start;
    padding-top: 13vh;
    padding-bottom: 11vh;
}
.cruilla-step--resultat {
    background: var(--cru-light) !important; /* crema por defecto */
    color: var(--cru-dark) !important;
}
/* El fondo del paso (zonas laterales al contenedor) sigue el color del
   resultado, así no se ven barras de otro tono. */
.cruilla-step--resultat.is-rosa {
    background: #f3d3c3 !important;
}

/* ---- Intro reproducido 1:1 de Figma (frame 38×84.4) ----
   Contenedor con la proporción del frame, escalado a la altura del viewport.
   container-type: size → las tipografías usan cqw (1cqw = 1% del ancho). */
.cruilla-step--intro-fig {
    padding: 0 !important;
}
.cru-intro {
    container-type: size;
    position: relative;
    height: 100vh;
    height: 100dvh;
    aspect-ratio: 38 / 84.4;
    max-width: 100%;
    margin: 0 auto;
    background: var(--cru-dark);
    overflow: hidden;
    font-family: var(--font-body, 'Poppins', sans-serif);
}
.cru-intro-txt {
    position: absolute;
    text-align: center;
    color: var(--cru-light);
    font-weight: 200;
    margin: 0;
}
.cru-nw { white-space: nowrap; }
.cru-intro-title {
    color: #fef8ed;
    font-family: var(--cru-serif) !important;
    font-weight: 100;
    letter-spacing: -0.06em;
}
.cru-intro-star {
    position: absolute;
    color: var(--cru-rosa);
    font-family: var(--cru-serif);
    line-height: 1;
}
.cru-fig-logo {
    position: absolute;
    display: block;
}
.cru-fig-deco {
    position: absolute;
    display: block;
    min-width: 1.5px;
    min-height: 1.5px;
    pointer-events: none;
}
/* Corchetes de "[Només…minut.]" con border (los trazos de Figma eran degenerados). */
.cru-fig-brk {
    position: absolute;
    box-sizing: border-box;
    border: 1.5px solid var(--cru-light);
    pointer-events: none;
}
.cru-fig-brk--l { border-right: 0; }
.cru-fig-brk--r { border-left: 0; }
.cru-intro-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cru-rosa);
    color: var(--cru-dark);
    border: 0;
    border-radius: 999px;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-weight: 300;
    cursor: pointer;
    padding: 0;
}

/* ---- Email 1:1 (reusa .cru-intro): descripción + input + botón + error ----
   En el diseño la descripción, el input y el botón van en la serif (Reckless),
   NO en Poppins (solo las esquinas CRUÏLLA/2026 quedan en Poppins). */
.cru-email-desc {
    font-family: var(--cru-serif) !important;
    font-weight: 400;
    letter-spacing: 0;
}
/* Punto del "!" (bajo el trazo trazado51), en crema como el trazo. */
.cru-email-excl-dot {
    position: absolute;
    background: var(--cru-light);
    border-radius: 50%;
    pointer-events: none;
}
.cru-email-input {
    position: absolute;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid var(--cru-light);
    border-radius: 999px !important; /* pill completo; !important vence al theme */
    color: var(--cru-light) !important; /* texto escrito en crema (vence al theme) */
    text-align: left;
    font-family: var(--cru-serif);
    font-weight: 400;
    padding: 0 1em !important; /* pequeño hueco a izq/der, vence al theme */
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.cru-email-input::placeholder { color: var(--cru-light); opacity: .8; text-align: left; }
.cru-email-btn {
    font-family: var(--cru-serif) !important;
    font-weight: 600 !important; /* "Enviar" un poco más grueso */
}
/* Estado cargando del botón Enviar: oculta el texto y muestra un spinner. */
.cru-intro-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: absolute; /* ya lo es; refuerza el contexto del ::after */
}
.cru-intro-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1em;
    height: 1.1em;
    margin: -0.55em 0 0 -0.55em;
    border: 2px solid rgba(46, 23, 8, 0.30);
    border-top-color: var(--cru-dark);
    border-radius: 50%;
    animation: cru-spin 0.7s linear infinite;
}
@keyframes cru-spin { to { transform: rotate(360deg); } }

/* ---- Resultado 1:1 (reusa .cru-intro; fondo claro, texto oscuro) ---- */
.cru-intro.cru-resultat {
    background: var(--cru-light); /* crema por defecto */
    color: var(--cru-dark);
}
.cru-intro.cru-resultat.is-rosa {
    background: #f3d3c3; /* rosa del diseño */
}
.cru-res-logo {
    position: absolute;
    color: var(--cru-dark);
}
.cru-res-logo .cruilla-logo {
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
    display: block;
    color: inherit;
}
.cru-res-corner,
.cru-res-label,
.cru-res-notes,
.cru-res-match,
.cru-res-footer {
    position: absolute;
    margin: 0;
    color: inherit;
}
.cru-res-corner {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-weight: 200;
    text-align: center;
    line-height: 1;
}
.cru-res-label {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-weight: 500;
    letter-spacing: 0;
    text-align: center;
    line-height: 1;
}
.cru-res-notes {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-weight: 500;
    text-align: center;
}
.cru-res-match {
    font-family: var(--font-body, 'Poppins', sans-serif);
    text-align: left;
}
.cru-res-vi { display: block; font-weight: 500; }
.cru-res-desc { display: block; font-weight: 300; }
.cru-res-img {
    position: absolute;
    object-fit: cover; /* rellena el hueco como el diseño (sin aire arriba/abajo) */
    object-position: center;
    pointer-events: none;
}
/* Esquina decorativa en "L" con punto (bajo la descripción). */
.cru-res-deco {
    position: absolute;
    box-sizing: border-box;
    border-right: 1.5px solid var(--cru-dark);
    border-bottom: 1.5px solid var(--cru-dark);
    pointer-events: none;
}
.cru-res-deco::before {
    content: "";
    position: absolute;
    left: -2px;
    bottom: -2px;
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: var(--cru-dark);
}
.cru-res-divider {
    position: absolute;
    background: var(--cru-dark);
    pointer-events: none;
}
.cru-res-footer {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-weight: 300;
    text-align: center;
}
.cru-res-footer__b { font-weight: 500; }
.cru-email-error {
    font-family: var(--cru-serif) !important;
    color: var(--cru-rosa) !important;
    font-weight: 400;
    opacity: .95;
}
/* Paréntesis "(correu)" y corchetes "[quin]" inline (pegados a la palabra). */
.cru-email-parens,
.cru-email-brk {
    position: relative;
    white-space: nowrap;
}
.cru-email-parens::before,
.cru-email-parens::after,
.cru-email-brk::before,
.cru-email-brk::after {
    color: inherit;
    font-weight: 300;
    opacity: .85;
}
.cru-email-parens::before { content: "("; margin-right: .04em; }
.cru-email-parens::after  { content: ")"; margin-left: .04em; }
/* Subrayado del email pegado a SU texto (no a la línea de abajo). */
.cru-email-desc .cru-deco--underline {
    margin-top: 0;
    height: 0.3em;
}
/* Corchetes más altos/finos, como el diseño. */
.cru-email-brk::before,
.cru-email-brk::after {
    display: inline-block;
    transform: scaleY(1.35);
}
.cru-email-brk::before { content: "["; margin-right: .06em; }
.cru-email-brk::after  { content: "]"; margin-left: .06em; }

/* ---- Marco de pantalla CONSISTENTE (mismo tamaño/posición que el intro) ----
   Contenedor con la proporción del frame de Figma (38×84.4) a altura de
   viewport, centrado. Así CRUÏLLA/2026 caen igual en todas las pantallas. */
.cru-frame-stage {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100vh;
    height: 100dvh;
    aspect-ratio: 38 / 84.4;
    max-width: 100%;
    container-type: size;
    pointer-events: none;
    z-index: 2;
}
.cru-frame {
    position: absolute;
    inset: 0;
    color: inherit;
}
.cru-frame__i,
.cru-frame__c {
    position: absolute;
    transform: translateX(-50%);
}
.cru-frame__i {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-weight: 200;
    color: inherit !important;
    white-space: nowrap;
    line-height: 1;
}
.cru-frame__c .cruilla-logo {
    width: 18cqw;
    max-width: none; /* anula el .cruilla-logo{max-width:62%} que lo recortaba */
    height: auto;
    margin: 0 auto;
    display: block;
    color: inherit;
}
.cru-frame__star {
    display: block;
    font-family: var(--cru-serif);
    color: var(--cru-rosa);
    font-size: 19.72cqw;
    line-height: 1;
}

/* ---- Contenedor de contenido centrado (columna tipo mobile) ---- */
.cruilla-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background: transparent !important;
    color: inherit;
}

/* ---- Decoraciones "a mano" (círculos, flechas, subrayados) ----
   Unidades em → escalan con el tamaño de fuente de cada texto. */
.cru-mark {
    position: relative;
    display: inline-block;
}
.cru-deco {
    color: inherit;
    pointer-events: none;
    overflow: visible;
}
.cru-deco--circle {
    position: absolute;
    left: -0.3em;
    top: -0.08em;
    width: calc(100% + 0.6em);
    height: calc(100% + 0.22em);
}
.cru-deco--underline {
    position: absolute;
    left: -0.1em;
    top: 100%;
    margin-top: 0.1em;
    width: calc(100% + 0.2em);
    height: 0.5em;
}
/* Flechas: tamaño fijo pequeño; posición distinta para "Vi" y "forma". */
.cru-arrow {
    position: absolute;
    width: 20px;
    height: 24px;
}
.cru-mark--vi .cru-arrow {
    left: -0.15em;
    top: 96%;
}
.cru-mark--forma .cru-arrow {
    left: -24px;
    top: 6%;
}
.cru-paren {
    font-family: var(--cru-serif);
    font-weight: 100;
    font-size: 1.25em;
    line-height: 1;
    margin-right: 1px;
}

/* Los textos heredan el color del paso (venciendo al color que el theme
   fuerza en p/h2). */
.cruilla-brand,
.cruilla-title,
.cruilla-text,
.cruilla-note,
.cruilla-pag,
.cruilla-pregunta,
.cruilla-resultat__label,
.cruilla-resultat__notes,
.cruilla-resultat__vi,
.cruilla-resultat__desc,
.cruilla-resultat__barra {
    color: inherit !important;
}

/* Logo Vallformosa (wordmark). currentColor = color heredado del paso. */
.cruilla-logo {
    display: block;
    width: 188px;
    max-width: 62%;
    height: auto;
    margin: 0 auto 30px;
}

.cruilla-brand {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 3px;
    margin: 0 0 24px;
}
.cruilla-title {
    font-family: var(--cru-serif) !important;
    font-weight: 100;
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin: 0 0 22px;
}
.cruilla-text {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-weight: 200;
    font-size: 16px;
    line-height: 1.55;
    max-width: 270px;
    margin: 0 auto 20px;
}
.cruilla-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 12.5px;
    opacity: .85;
    margin: 0 0 32px;
}
.cru-note-txt {
    max-width: 185px;
    line-height: 1.45;
}
/* Corchetes altos y finos alrededor de [Només…] (como el diseño). */
.cru-brk {
    font-family: var(--cru-serif);
    font-weight: 100;
    font-size: 40px;
    line-height: 0.7;
    opacity: .9;
}

/* ---- Preguntas ---- */
.cruilla-pag {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 1px;
    /* Mismo ancho que la barra (300px) y centrado como bloque. El padding por
       paso (abajo) reduce el área de texto a UN segmento y lo centra encima
       del segmento activo. */
    max-width: 300px;
    margin: 0 auto 9px;
    box-sizing: border-box;
    text-align: center;
    opacity: .9;
}
/* Centrado del PAS sobre el segmento del paso actual (barra de 300px,
   3 segmentos de ~95px). */
[data-cruilla-step="q1"] .cruilla-pag { padding: 0 205px 0 0; }
[data-cruilla-step="q2"] .cruilla-pag { padding: 0 102px; }
[data-cruilla-step="q3"] .cruilla-pag { padding: 0 0 0 205px; }
/* Progreso segmentado: una cápsula por paso; la activa rellena. */
.cruilla-progress {
    display: flex;
    gap: 7px;
    justify-content: center;
    max-width: 300px;
    margin: 0 auto 34px;
}
.cruilla-progress__seg {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    border: 1.5px solid var(--cru-dark);
    background: transparent;
}
.cruilla-progress__seg.is-active {
    background: var(--cru-dark);
}
/* Cápsulas de pasos ya alcanzados: clicables para volver atrás. */
.cruilla-progress__seg.is-nav {
    cursor: pointer;
}
.cruilla-progress__seg.is-nav:not(.is-active):hover {
    background: rgba(50, 22, 5, 0.18);
}
.cruilla-pregunta {
    font-family: var(--cru-serif) !important;
    font-weight: 100;
    font-size: 40px;
    line-height: 0.98;
    letter-spacing: -0.5px;
    margin: 0 0 28px;
}
.cruilla-opcions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---- Botones / opciones (pastilla) ---- */
.cruilla-opcio,
.cruilla-btn {
    font-family: var(--font-body, 'Poppins', sans-serif) !important;
    font-size: 16px;
    border-radius: 999px !important;
    padding: 15px 24px !important;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
    box-sizing: border-box;
    line-height: 1.2;
}
.cruilla-opcio {
    background: transparent !important;
    color: var(--cru-dark) !important;
    border: 1px solid var(--cru-dark) !important;
    width: 100%;
    font-family: var(--font-body, 'Poppins', sans-serif) !important;
    font-weight: 200;
    font-size: 16px;
    padding: 13px 24px !important;
}
.cruilla-opcio:hover,
.cruilla-opcio.is-selected {
    background: var(--cru-dark) !important;
    color: var(--cru-light) !important;
}
.cruilla-btn {
    border: 1.5px solid var(--cru-dark) !important;
    background: var(--cru-dark) !important;
    color: var(--cru-light) !important;
    font-family: var(--font-body, 'Poppins', sans-serif) !important;
    font-weight: 200;
    font-size: 20px;
    padding: 15px 44px !important;
    margin-top: 8px;
    min-width: 210px;
}
.cruilla-btn:hover { opacity: .9; }
/* Botón del intro/email: pastilla ROSA con texto oscuro (como el diseño). */
.cruilla-btn--light {
    background: var(--cru-rosa) !important;
    color: var(--cru-dark) !important;
    border-color: var(--cru-rosa) !important;
}
.cruilla-btn--light:hover {
    opacity: .92;
}
.cruilla-btn:disabled { opacity: .5; cursor: default; }

/* ---- Email ---- */
.cruilla-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.cruilla-input {
    width: 100%;
    padding: 15px 18px !important;
    border-radius: 999px !important;
    border: 1.5px solid var(--cru-light) !important;
    background: var(--cru-light) !important;
    color: var(--cru-dark) !important;
    font-size: 16px;
    box-sizing: border-box;
    text-align: center;
}
.cruilla-error {
    color: #ffd2c2 !important;
    font-size: 13px;
    margin: 4px 0 0;
}

/* ---- Resultado ---- */
.cruilla-resultat__label {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 12px;
    opacity: .8;
}
.cruilla-resultat__notes {
    font-family: var(--font-title, serif) !important;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.15;
    margin: 0 0 20px;
}
.cruilla-resultat__img {
    max-height: 240px;
    width: auto;
    margin: 0 auto 16px;
    display: block;
}
.cruilla-resultat__vi {
    font-weight: 600;
    font-size: 17px;
    margin: 0 0 8px;
}
.cruilla-resultat__desc {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 24px;
}
.cruilla-resultat__cupo {
    background: var(--cru-dark) !important;
    color: var(--cru-light) !important;
    border-radius: 14px;
    padding: 16px;
    margin: 0 0 20px;
}
.cruilla-resultat__cupo-label,
.cruilla-resultat__cupo-codi {
    color: var(--cru-light) !important;
}
.cruilla-resultat__cupo-label {
    display: block;
    font-size: 13px;
    opacity: .85;
    margin-bottom: 6px;
}
.cruilla-resultat__cupo-codi {
    font-size: 20px;
    letter-spacing: 1px;
}

/* ---- Desktop: card algo más ancho y tipografía un punto mayor ---- */
@media (min-width: 768px) {
    .cruilla-card { max-width: 480px; }
    .cruilla-logo { width: 208px; }
    .cruilla-title { font-size: 48px; }
    .cruilla-pregunta { font-size: 46px; }
    .cruilla-opcio { font-size: 18px; }
    .cruilla-resultat__notes { font-size: 34px; }
}