/**
 * Sorteo Neckhangers — landing.
 *
 * Maquetación del Figma "Sorteo Neckhanger Alimentación". Los colores están
 * muestreados del comp: marrón #3F2314 y rosa #FDE5DA son el 76% de la pieza.
 *
 * La landing se sirve con su propia plantilla (frontend/plantilla-landing.php),
 * sin la cabecera ni el pie del theme, así que .sorteo cuelga directamente de
 * <body> y ocupa el ancho completo sin trucos.
 *
 * ⚠️ Al editar este fichero hay que subir SORTEO_VERSION en sorteo/sorteo.php.
 */

/*
 * Reckless Neue Thin, la del titular del hero.
 *
 * El theme ya la declara en style.css, pero con URL absoluta a
 * www.vallformosa.com: desde cualquier otro dominio (Desarrollo, local) es otro
 * origen y el navegador puede bloquear la fuente por CORS, con lo que el
 * titular cae a Georgia sin avisar. Con ruta relativa se sirve siempre del
 * propio tema. Nombre propio para no pisar la declaración del theme.
 */
@font-face {
    font-family: 'Sorteo Reckless';
    src: url('../../fonts/reckless-neue-thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

.sorteo {
    /* Paleta, muestreada del diseño */
    --s-marron: #3F2314;
    --s-marron-osc: #301709;
    --s-rosa: #FDE5DA;
    --s-crema: #FFFAEE;

    /* Tipografía: las del theme. Reckless para display, Poppins para texto. */
    --s-serif: 'Sorteo Reckless', 'Reckless Neue', Georgia, 'Times New Roman', serif;
    --s-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /*
     * Ancho completo SIN el truco de 100vw.
     *
     * `width:100vw` incluye el ancho de la barra de scroll vertical, así que
     * en escritorio la página acababa siendo ~15px más ancha que el viewport
     * y aparecía una barra de scroll horizontal. Con la plantilla propia
     * (frontend/plantilla-landing.php) .sorteo cuelga directamente de <body>,
     * así que un 100% normal ya da el ancho completo y no desborda.
     */
    width: 100%;
    max-width: 100%;
    margin: 0;

    font-family: var(--s-sans);
    font-size: 16px;             /* el <body> del theme va a 2.5vh: sin esto, el cuerpo base dependería del ALTO de la pantalla */
    color: var(--s-marron);
    line-height: 1.45;
}

/* El <body> del theme fuerza su color de fondo con !important. */
body.sorteo-landing {
    margin: 0;
    background-color: #3F2314 !important;
}

/*
 * Contenedores de WPBakery.
 *
 * La plantilla propia quita el envoltorio del theme (#primary > #content >
 * article > .the-content), pero estos otros salen de the_content() y se
 * quedan pase lo que pase:
 *
 *   .wpb-content-wrapper > .vc_row > .vc_column_container >
 *   .vc_column-inner > .wpb_wrapper > .sorteo
 *
 * Traen los -15px/+15px del sistema de rejilla de WPBakery, que en una
 * landing a sangre se ven como una franja clara a los lados. Se anulan solo
 * en esta página, por la clase del <body>.
 */
body.sorteo-landing .wpb-content-wrapper,
body.sorteo-landing .vc_row,
body.sorteo-landing .wpb_column,
body.sorteo-landing .vc_column_container,
body.sorteo-landing .vc_column_container > .vc_column-inner,
body.sorteo-landing .wpb_wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.sorteo *,
.sorteo *::before,
.sorteo *::after {
    box-sizing: border-box;
}

/* =======================================================================
 * Defensa frente al CSS del theme
 *
 * style.css del theme hijo fija estilos sobre selectores de ELEMENTO que
 * alcanzan a toda la landing:
 *
 *   h1, h2, h5 { color: var(--primary-color-dark); font-family: ...; }
 *   p, li      { font-family: var(--font-body) !important; color: ...; }
 *   button     { background-color: var(--cta-color); border-radius: 5px;
 *                box-shadow: ...; padding: ...; }
 *
 * El color es el que más se notaba: los titulares no declaraban color propio
 * y heredaban el crema del bloque, y la herencia pierde contra CUALQUIER
 * regla explícita. Por eso "Un Buen Plan. Un Premio" salía marrón sobre
 * marrón.
 *
 * Se neutraliza con :where(), que aporta especificidad CERO: el bloque
 * entero pesa (0,1,0) —solo .sorteo—, lo justo para ganar a los (0,0,1) del
 * theme y lo bastante poco para que mis propias clases, que van después y
 * pesan lo mismo, sigan mandando por orden de aparición.
 *
 * El único !important es el de font-family, porque el del theme también lo
 * lleva y contra !important solo vale otro !important.
 * ==================================================================== */

/*
 * Los elementos de sección entran aquí por el theme PADRE
 * (naked-wordpress-master/style.css), que trae:
 *
 *     header { padding: 20px 0; background: transparent; margin: 20px auto; }
 *     footer { text-align: center; padding-bottom: 40px; font-size: 12px; }
 *     article { margin-bottom: 80px; border-bottom: 1px solid #dddddd; }
 *
 * Ese `margin: 20px auto` del header era el que dejaba dos franjas de 20px
 * del color del <body> encima y debajo del hero: .s-hero redefinía el padding
 * pero no el margen, y el margen se escapaba por colapso.
 */
.sorteo :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, span, label, figure,
               header, footer, section, article, aside, nav, main) {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;     /* inherit, no normal: el -5 % del diseño va en el bloque y lo heredan sus <li>/<span> */
    text-transform: none;
}

.sorteo :where(p, li, input, select, textarea, button, label) {
    font-family: var(--s-sans) !important;
}

.sorteo :where(ul, ol) {
    list-style: none;
}

.sorteo :where(a) {
    text-decoration: none;
}

/*
 * Los encabezados heredan la tipografía de título del theme
 * (`h1, h2 { font-family: var(--font-title) }` = Reckless, serif). En esta
 * landing solo el titular del hero va en serif; el resto son sans en negrita.
 * Se pone aquí, en la defensa, para que .s-hero__titulo pueda volver a la
 * serif más abajo: empatan en especificidad y gana el que va después.
 */
.sorteo :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--s-sans);
}

/*
 * El hero es un <header>, y el theme trae:
 *
 *     header nav ul li a,
 *     header * { color: var(--primary-color-dark) !important; }
 *
 * `!important` gana a lo que no lo es por mucha especificidad que tenga, así
 * que la defensa de arriba no bastaba: el titular salía en #321505 sobre el
 * marrón del hero, es decir, invisible. Solo afectaba al hero porque es el
 * único bloque que es un <header>; no hay regla equivalente para <footer>.
 *
 * Se responde con !important y (0,2,0) contra su (0,0,1). Todo el hero es
 * crema, así que forzar el color en bloque no quita nada.
 */
.sorteo .s-hero,
.sorteo .s-hero * {
    color: var(--s-crema) !important;
}

.sorteo :where(button, input[type="submit"]) {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/*
 * Red de seguridad para el caso en que la landing acabe DENTRO del envoltorio
 * de page.php (alguien desactiva el filtro con `sorteo_usar_plantilla_propia`,
 * o coloca el shortcode en otra página).
 *
 * Ahí entra en juego `article .the-content p { color: ... }`, que pesa (0,1,2)
 * y le gana a la defensa de arriba (0,1,0): el texto volvería a salir marrón
 * sobre marrón. Este selector pesa (0,2,0) y sí le gana.
 *
 * Solo se activa dentro de .the-content, así que en el camino normal —con la
 * plantilla propia— no existe y mis clases de componente siguen mandando. En
 * el camino de respaldo se pierden los grises secundarios, pero todo el texto
 * queda legible, que es lo que importa.
 */
.the-content .sorteo :where(h1, h2, h3, h4, h5, h6, p, li, a, span, label) {
    color: inherit;
}

/* Wordmark: el tamaño lo pone cada bloque (hero, pie, popup). */
.s-logo {
    display: block;
    height: auto;
}

/* --- Hero ------------------------------------------------------------- */

/*
 * Medidas del Figma "Sorteo Neckhanger Alimentación": frame de escritorio a
 * 1440 (nodos 0:121-0:130) y frame móvil a 390 (0:40 y 0:131).
 *
 *                          390        1440
 *   margen superior         25          70     hasta el wordmark
 *   wordmark (ancho)        92         334     alto = ancho x 50/334
 *   SORTEO (cuerpo)      13,48       28,97     Poppins Light, -0,02em
 *   margen lateral          33         156     hasta SORTEO
 *   wordmark -> titular     19          38
 *   titular (cuerpo)     57,98      144,96     Reckless Thin, -0,09em
 *   interlineado          0,81        0,94
 *   margen inferior         25          37
 *
 * Cada medida es la recta que pasa por los dos puntos (a 390 y a 1440 da el
 * valor exacto del Figma) con tope en el de escritorio. El mínimo queda algo
 * por debajo del de móvil para que en un teléfono de 320 siga cabiendo
 * "Un Buen Plan." sin partirse.
 *
 * El alto no se fija: sale del contenido. Con el titular en dos líneas mide
 * 177 a 390 (igual que el Figma) y ~468 a 1440 (el Figma, en catalán y en una
 * línea, mide 331).
 */
.s-hero {
    --s-hero-logo: clamp(72px, calc(2.11px + 23.048vw), 334px);

    position: relative;
    margin: 0;                       /* mata el `margin: 20px auto` del theme padre */
    padding-block:
        clamp(20px, calc(8.29px + 4.2857vw), 70px)
        clamp(20px, calc(20.54px + 1.1429vw), 37px);
    background: var(--s-marron-osc);
    color: var(--s-crema);
    overflow: hidden;
}

/*
 * Foto + degradado del Figma (nodo 0:123): blanco arriba a #321505 abajo en
 * modo multiply, es decir, deja la foto intacta arriba y la oscurece hacia el
 * titular. El multiply va solo en la capa del degradado; si fuera también en
 * la de la foto, esta se multiplicaría con el background-color y saldría casi
 * negra.
 *
 * Encuadre: en los dos frames la foto empieza en la misma fila del original,
 * así que img/hero.jpg ya va recortada por ahí (ver img/README.md) y aquí se
 * ancla arriba. El ancho es el de página, salvo en móvil, donde el Figma la
 * amplía a 548px sobre 390 para que se vea el plato.
 */
.s-hero__foto {
    position: absolute;
    inset: 0;
    background-color: var(--s-marron-osc);
    background-image:
        linear-gradient(180deg, #FFFFFF 0%, #321505 100%),
        url('img/hero.jpg');
    background-blend-mode: multiply, normal;
    background-size: 100% 100%, max(100%, 548px) auto;
    background-position: 0 0, center top;
    background-repeat: no-repeat;
}

.s-hero__contenido {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: clamp(20px, calc(11.714vw - 12.69px), 156px);
}

/*
 * En el Figma la línea base de SORTEO cae justo en el pie del wordmark, no
 * centrada con él. El SVG no tiene línea base propia, así que en flex se usa
 * su borde inferior: `baseline` los alinea exactamente así.
 *
 * El alto de la barra es el del wordmark y SORTEO desborda hacia abajo por
 * sus descendentes: así el hueco hasta el titular se mide desde el logo, que
 * es como está medido en el Figma.
 */
.s-hero__barra {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    height: calc(var(--s-hero-logo) * 50 / 334);
    margin-bottom: clamp(16px, calc(11.94px + 1.8095vw), 38px);
}

.s-hero__barra .s-hero__logo {
    flex: none;
    width: var(--s-hero-logo);
    height: auto;
}

/* Solo el del hero: los kickers de los demás bloques no se han medido aún. */
.s-hero__barra .s-kicker {
    font-size: clamp(12px, calc(7.72px + 1.4759vw), 28.973px);
    font-weight: 300;
    line-height: normal;
    letter-spacing: -.02em;
    opacity: 1;
}

.s-hero__titulo {
    margin: 0;
    font-family: var(--s-serif);
    font-weight: 100;
    font-size: clamp(40px, calc(25.68px + 8.283vw), 144.958px);
    line-height: .81;
    letter-spacing: -.09em;
    text-align: center;
}

@media (min-width: 1024px) {
    .s-hero__titulo { line-height: .94; }
}

/* =======================================================================
 * Secciones (intro, 001, 002, 003, pie y popup)
 *
 * Medidas del Figma: frame de escritorio a 1440 (0:7 y los nodos sueltos
 * encima) y frame móvil a 390 (0:40). Igual que en el hero, cada medida es
 * la recta que pasa por los dos valores del diseño: a 390 y a 1440 sale el
 * valor exacto, y entre medias escala. El mínimo es el valor a 320.
 *
 * La maquetación cambia a 1024: por debajo, la del frame móvil (que en el
 * Figma va a DOS columnas, no apilada); por encima, la de escritorio.
 *
 * Tipografía del diseño, toda Poppins salvo el asterisco de los números:
 *   titulares        SemiBold 600, -6 %, interlineado .96
 *   texto            Light 300 / Medium 500, -5 %, interlineado .96
 *   números 001…     Light 300, -5 %
 *   asterisco        Reckless Neue Thin 100, -9 %, interlineado .94
 * ==================================================================== */

.sorteo {
    --s-marron-texto: #321505;   /* texto sobre rosa en intro y popup */
    --s-legal: #6F5446;          /* casillas legales */

    /* Márgenes de página: el contenido va de x=146 a x=1284 en escritorio
       y de x=40 a x=371 en móvil. Las etiquetas (2026, SORTEO) van más
       pegadas al borde: x=156 / x=20. */
    --s-pl: clamp(32.93px, calc(0.63px + 10.1vw), 146px);
    --s-pr: clamp(9.87px, calc(-31.89px + 13.05vw), 156px);
    --s-kl: clamp(10.93px, calc(-30.51px + 12.95vw), 156px);
    --s-kr: clamp(9.87px, calc(-31.89px + 13.05vw), 156px);
}

.s-marco {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: var(--s-pl) var(--s-pr);
}

.s-solo-escritorio { display: none; }

.s-kicker {
    font-size: clamp(16.04px, calc(12.34px + 1.16vw), 29px);
    font-weight: 300;
    line-height: normal;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.s-kicker--izq,
.s-kicker--der {
    position: absolute;
    top: var(--s-kt, 0);
}

.s-kicker--izq { left: var(--s-kl); }
.s-kicker--der { right: var(--s-kr); }

/* Número de bloque: "*001". El asterisco cuelga a la izquierda del número,
   fuera de la columna, como en el diseño (x=73 frente a x=146). */
.s-num {
    position: relative;
    margin: 0;
    font-size: clamp(42.61px, calc(27.24px + 4.8vw), 96.4px);
    font-weight: 300;
    line-height: .96;
    letter-spacing: -.05em;
}

.s-num__ast {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: clamp(-0.93px, calc(-5.2px + 1.33vw), 14px);
    font-family: var(--s-serif);
    font-size: clamp(48.57px, calc(21.02px + 8.61vw), 145px);
    font-weight: 100;
    line-height: .94;
    letter-spacing: -.09em;
    color: var(--s-rosa);
}

/* El titular empieza 54px (móvil) / 147px (escritorio) por debajo del
   número; se resta la caja del número (.96 de su cuerpo). */
.s-titular {
    margin: clamp(6.9px, calc(-6.69px + 4.25vw), 54.46px) 0 0;
    font-size: clamp(20.53px, calc(4.91px + 4.88vw), 75.2px);
    font-weight: 600;
    line-height: .96;
    letter-spacing: -.06em;
}

.s-bloque {
    position: relative;
}

/* 001 y 002 son un solo lienzo marrón: en el Figma las fotos del 001 se
   meten por debajo del "002". El fondo va en el envoltorio para que el 002
   pueda subir sobre el 001 sin taparlo. */
.s-lienzo {
    background: var(--s-marron);
    color: var(--s-crema);
    overflow-x: clip;
}

/* --- Intro ------------------------------------------------------------ */

/*
 * En móvil NO se sigue el frame 0:40 en este bloque: está a medio montar (sin
 * el párrafo, con óvalos y un trazo que con texto real se comían las letras)
 * y quedaba un hueco sin nada entre el titular y las columnas. Se compone
 * como en escritorio, a su escala: titular, párrafo con los "**" y las tres
 * columnas con su asterisco.
 */
.s-intro {
    padding-block: clamp(22.07px, calc(13.23px + 2.76vw), 53px) 28px;       /* escritorio: abajo clamp(28px…40px) */
    background: var(--s-rosa);
    color: var(--s-marron-texto);
    text-align: center;
}

.s-intro .s-marco {
    padding-inline: var(--s-kl) var(--s-kr);
}

.s-intro__titulo {
    max-width: 8.5em;                /* móvil: en dos líneas. Escritorio: 965px */
    margin: 0 auto;
    font-size: clamp(32.96px, calc(20.89px + 3.77vw), 75.2px);
    font-weight: 600;
    line-height: .96;
    letter-spacing: -.06em;
    text-wrap: balance;
}

.s-intro__fila {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(8.67px, calc(2.57px + 1.9vw), 30px);
    margin-top: clamp(15.07px, calc(10.8px + 1.33vw), 30px);
}

.s-intro__ast {
    flex: none;
    width: clamp(12.6px, calc(6.2px + 2vw), 35px);
    height: auto;
    margin-top: .15em;
}

.s-intro__texto {
    max-width: 992px;
    font-size: clamp(15.65px, calc(9.46px + 1.93vw), 37.3px);
    font-weight: 300;
    line-height: 1.15;               /* escritorio: .96, como el Figma */
    letter-spacing: -.04em;
}

/* Columnas. En móvil, como el frame 0:40: sin asteriscos, centradas en
   vertical, con un óvalo alrededor del "12" y del "6" y un trazo sobre
   "¡Participa ya!". En escritorio (ver media query) van alineadas arriba
   con su asterisco. */
.s-reclamos {
    display: grid;
    grid-template-columns: 115fr 119fr 117fr;
    align-items: center;
    margin: 28px 0 0;                /* escritorio: clamp(20px…32px) */
    padding: 0;
    list-style: none;
}

.s-reclamos__item {
    position: relative;
    display: grid;
    justify-items: center;
    row-gap: clamp(3.73px, calc(2.51px + 0.38vw), 8px);
    padding-inline: 4px;
    font-size: clamp(13.19px, calc(6.31px + 2.15vw), 37.3px);
    font-weight: 600;
    line-height: 1.072;              /* 15,7px sobre 14,7 en el Figma móvil; 40 sobre 37,3 en escritorio */
    letter-spacing: -.05em;
}

.s-reclamos__item--menus {
    font-size: clamp(12.65px, calc(6px + 2.08vw), 35.9px);
    line-height: .96;
    letter-spacing: -.07em;
}

.s-reclamos__texto {
    position: relative;
    display: block;
}

/* En el Figma esta columna va en minúsculas y partida en ~3-4 líneas. */
.s-reclamos__item--menus .s-reclamos__texto {
    max-width: 8.3em;
    text-transform: lowercase;
}

/* Óvalo a mano alrededor de la cifra (23x20 en el Figma, a 14,7px). */
.s-cifra {
    position: relative;
    display: inline-block;
}

.s-cifra__ovalo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.6em;
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Trazo sobre "¡Participa ya!": 54px de ancho, 28px por encima del texto. */
.s-reclamos__trazo {
    position: absolute;
    bottom: calc(100% + 1.75em);
    left: 50%;
    width: 3.67em;
    height: auto;
    transform: translateX(-50%);
}

.s-reclamos__icono {
    align-self: end;
    height: auto;
}

.s-reclamos__item--menus .s-reclamos__icono     { width: .84em; }
.s-reclamos__item--ganadores .s-reclamos__icono { width: .75em; }
.s-reclamos__item--participa .s-reclamos__icono { width: .8em; }

/* Móvil: el Figma pone "Ganadores" a la izquierda y los menús en medio. */
.s-reclamos__item--ganadores { order: -1; }

/* Filetes verticales a los dos lados de la columna central: 1px y 51px de
   alto, centrados, como en el frame móvil. */
.s-reclamos__item--menus::before,
.s-reclamos__item--menus::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 1px;
    height: 51.4px;
    background: var(--s-marron);
    transform: translateY(-50%);
}

.s-reclamos__item--menus::before { left: 0; }
.s-reclamos__item--menus::after  { right: 0; }

/* --- 001 Pasos -------------------------------------------------------- */

.s-pasos {
    --s-kt: clamp(-31px, calc(11.51px - 2.95vw), 2.07px);          /* 2026: a la altura del paso 01 en móvil, 31px sobre el 001 en escritorio */
    padding-top: clamp(10px, calc(-8.29px + 5.71vw), 74px);
}

.s-pasos .s-kicker { color: var(--s-crema); }

.s-pasos__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 155fr) minmax(0, 176fr);
    /*
     * El paso 03 ocupa dos filas para que las fotos arranquen justo tras el
     * 02, que es el que tienen encima. Y las fotos llegan hasta una última
     * fila flexible (1fr): la rejilla vuelca ahí su alto, así que no empujan
     * "¡Y ya está!", que va justo tras el 03 como en el Figma.
     */
    grid-template-areas:
        "cab    paso1"
        "paso2  paso3"
        "fotos  paso3"
        "fotos  cierre"
        "fotos  .";
    grid-template-rows: auto auto auto auto 1fr;
}

.s-pasos__cuerpo > * {
    position: relative;
    z-index: 1;
}

.s-pasos .s-cab   { grid-area: cab; margin-top: clamp(0px, calc(53.49px - 3.71vw), 41.6px); }
.s-pasos__lista   { display: contents; }
.s-paso--1        { grid-area: paso1; margin-top: clamp(2.36px, calc(-6.97px + 2.91vw), 35px); }
.s-paso--2        { grid-area: paso2; margin: clamp(31.16px, calc(30.06px + 0.34vw), 35px) 0 0 clamp(2px, calc(3.78px - 0.12vw), 3.39px); }
.s-paso--3        { grid-area: paso3; margin-top: clamp(8px, calc(40.09px - 2.23vw), 32.96px); }
.s-pasos__fotos   { grid-area: fotos; }
.s-pasos__cierre  { grid-area: cierre; }

.s-pasos .s-num { color: var(--s-crema); }

.s-paso {
    position: relative;
    z-index: 1;                  /* el <ol> es display:contents: sin esto, las fotos se pintan encima del texto */
    list-style: none;
}

.s-paso__num {
    position: relative;
    display: block;              /* bloque y no inline-block: sin línea de texto alrededor que meta hueco encima */
    width: fit-content;
    font-size: clamp(23.37px, calc(16.65px + 2.1vw), 46.9px);
    font-weight: 300;
    line-height: .96;
    letter-spacing: -.05em;
}

/* Círculo dibujado a mano alrededor del número (0:158 / 0:159 / 0:160).
   Cada uno tiene su tamaño en el Figma; en em para que escale con el
   número. */
.s-paso__circulo {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    color: var(--s-rosa);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.s-paso--1 .s-paso__circulo { width: 1.183em; }
.s-paso--2 .s-paso__circulo { width: 1.535em; }
.s-paso--3 .s-paso__circulo { width: 1.407em; }
.s-paso--1 .s-paso__circulo--movil { width: 1.406em; }

.s-paso__lead {
    margin: clamp(10.61px, calc(8.13px + 0.77vw), 19.28px) 0 0;
    font-size: clamp(14.09px, calc(10.03px + 1.27vw), 28.3px);
    font-weight: 300;
    line-height: .96;
    letter-spacing: -.05em;
}

.s-paso__texto {
    max-width: 359px;
    margin: clamp(7.64px, calc(5.44px + 0.69vw), 15.33px) 0 0;
    font-size: clamp(18.59px, calc(13.25px + 1.67vw), 37.3px);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.05em;
}

.s-pasos__cierre-titulo {
    white-space: nowrap;         /* una línea, como el Figma */
    font-size: calc(clamp(37.44px, calc(26.65px + 3.37vw), 75.2px) * .9);   /* móvil: un 10% menor para que quepa en su columna a 360 */
    font-weight: 600;
    line-height: .96;
    letter-spacing: -.06em;
}

.s-pasos__cierre-texto {
    max-width: 359px;
    margin-top: clamp(6.53px, calc(4.4px + 0.67vw), 14px);
    font-size: clamp(18.59px, calc(13.25px + 1.67vw), 37.3px);
    font-weight: 300;
    line-height: .96;
    letter-spacing: -.05em;
}

/*
 * Las dos fotos circulares solapadas. La caja mide lo que ocupan fotos y
 * destellos en el Figma (móvil 199x210, escritorio 513x494) y sobresale por
 * la izquierda del margen, como en el diseño. Las fotos van por debajo del
 * texto (z-index 0): en el Figma se meten bajo el titular y bajo el "002".
 */
.s-pasos__fotos {
    z-index: 0;
    align-self: start;           /* si la estira la rejilla, pierde la proporción */
    width: clamp(178.07px, calc(82.37px + 29.9vw), 513px);
    aspect-ratio: 199 / 210;
    margin: 14px 0 0 clamp(-111px, calc(-46.54px - 4.48vw), -60.87px);   /* móvil: 14px bajo el paso 02. Escritorio: se mete bajo el titular */
}

.s-pasos__foto {
    position: absolute;
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
}

.s-pasos__foto--1 { top: 0;      left: 0;      width: 62.76%; }
.s-pasos__foto--2 { top: 33.24%; left: 35.03%; width: 64.92%; }

.s-pasos__destellos {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--s-rosa);
}

.s-pasos__cierre { margin-top: clamp(27.47px, calc(25.03px + 0.76vw), 36px); }

/* --- 002 Productos ---------------------------------------------------- */

.s-productos {
    --s-kt: clamp(-3.13px, calc(-17.46px + 4.48vw), 47px);
    margin-top: 16px;            /* el frame móvil lo pega a las fotos (-8px) y con texto real se tocaban */
    padding-bottom: clamp(15.07px, calc(1.66px + 4.19vw), 62px);
}

.s-productos .s-kicker--der { color: var(--s-crema); }

.s-kicker--abajo {
    position: absolute;
    right: var(--s-kr);
    bottom: 0;
    color: var(--s-crema);
}

/* 003: 19px sobre el final del bloque rosa, bajo el botón PARTICIPAR (el
   marco acaba donde el botón; el bloque, 60px más abajo). */
.s-kicker--abajo-izq {
    right: auto;
    bottom: calc(19px - clamp(56.93px, calc(42.91px + 4.38vw), 106px));
    left: var(--s-kl);
    color: var(--s-marron);
}

/* En móvil el Figma no pone SORTEO en este bloque. */
.s-productos .s-kicker--der { display: none; }

.s-productos__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 144fr) minmax(0, 187fr);
    grid-template-areas:
        "cab      listas"
        "botellas listas";
}

.s-productos .s-cab {
    grid-area: cab;
    position: relative;
    z-index: 2;
}

.s-productos .s-num,
.s-productos .s-titular { color: var(--s-rosa); }

/* Móvil: "participantes" es más largo que el "participants" del Figma y
   llegaba justo hasta las listas. Un 8% menor deja ~12px de aire. */
.s-productos .s-titular { font-size: calc(clamp(20.53px, calc(4.91px + 4.88vw), 75.2px) * .92); }

.s-productos__ast {
    grid-area: listas;
    align-self: start;
    width: clamp(10.28px, calc(6.99px + 1.03vw), 21.8px);
    height: auto;
    margin: clamp(0.53px, calc(-10.74px + 3.52vw), 40px) 0 0 clamp(5.73px, calc(4.51px + 0.38vw), 10px);
    color: var(--s-rosa);
}

.s-productos__listas {
    grid-area: listas;
    position: relative;
    z-index: 2;
    margin-top: clamp(41.07px, calc(9.37px + 9.9vw), 152px);
    color: var(--s-crema);
}

.s-marca + .s-marca { margin-top: clamp(32.87px, calc(23.11px + 3.05vw), 67px); }

.s-marca__nombre {
    margin-bottom: clamp(12.2px, calc(8.54px + 1.14vw), 25px);
    font-size: clamp(18.59px, calc(13.25px + 1.67vw), 37.3px);
    font-weight: 300;
    line-height: .96;
    letter-spacing: -.05em;
}

.s-marca__lista {
    margin: 0;
    white-space: nowrap;
    padding: 0;
    list-style: none;
    font-size: clamp(18.59px, calc(13.25px + 1.67vw), 37.3px);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.05em;
}

/*
 * Collage de botellas. Mide el 48,2 % del ancho de página en los dos frames
 * (188/390 y 695/1440), así que el ancho va en vw. Cada botella se coloca
 * en % de la caja con las posiciones del Figma, distintas en móvil y en
 * escritorio. El orden de apilado lo da el HTML.
 */
.s-productos__botellas {
    grid-area: botellas;
    position: relative;
    z-index: 1;
    /* Móvil: llega justo hasta la columna derecha, sobresaliendo por la
       izquierda lo mismo que en el Figma (37 de 390). */
    width: calc(100% + 11.28vw);   /* 188 a 390, como el Figma: entra 7px en la columna de las listas */
    aspect-ratio: 188 / 269;
    margin-top: 14px;                /* el frame las pega al titular y se tocaban */
    margin-left: -9.49vw;
}

.s-botella {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: auto;
    aspect-ratio: 1 / 2;
}

.s-botella--masia-freye-xarello-chardonnay  { --x: .53%;   --y: .37%;   --w: 38.99%; }
.s-botella--masia-freye-syrah-sumoll        { --x: 21.81%; --y: 0%;     --w: 38.99%; }
.s-botella--masia-freye-syrah-tempranillo   { --x: 60.64%; --y: 0%;     --w: 38.99%; }
.s-botella--masia-freye-parellada-muscat    { --x: 0%;     --y: 45.35%; --w: 38.99%; }
.s-botella--vallformosa-classic-brut        { --x: 38.83%; --y: 47.96%; --w: 35.96%; }
.s-botella--vallformosa-classic-brut-nature { --x: 60.64%; --y: 47.96%; --w: 35.96%; }

.s-productos__garabatos {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--s-rosa);
    pointer-events: none;
}

/* --- 003 Participa + formulario --------------------------------------- */

.s-participa {
    --s-kt: clamp(-17.07px, calc(-35.66px + 5.81vw), 48px);
    padding-block: clamp(32.4px, calc(25.09px + 2.29vw), 58px) clamp(56.93px, calc(42.91px + 4.38vw), 106px);   /* abajo, en móvil, sitio para el 2026 bajo el botón */
    background: var(--s-rosa);
    color: var(--s-marron);
}

.s-participa .s-num__ast { color: var(--s-marron); }

.s-participa__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 144fr) minmax(0, 187fr);
    /* Los campos llegan a una fila flexible: así su alto no estira la fila
       del titular y las casillas legales van justo bajo el subtítulo. */
    /* PARTICIPAR va en su propia fila, a todo el ancho y centrado: en la
       columna de los campos quedaba justo bajo "SUBIR ARCHIVO", dos píldoras
       iguales apiladas, y el botón principal no destacaba. */
    grid-template-areas:
        "cab      campos"
        "legal    campos"
        ".        campos"
        "acciones acciones";
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
}

.s-participa .s-cab {
    grid-area: cab;
    position: relative;
    padding-right: 12px;         /* móvil: "¡Participa ya!" tocaba la línea de "Nombre"; así va en dos líneas, como el Figma */
}

.s-participa__sub {
    max-width: clamp(94.67px, calc(15.43px + 24.76vw), 372px);
    margin-top: clamp(13.2px, calc(9.54px + 1.14vw), 26px);   /* el Figma da 10/8, pero en castellano la "y" de "ya!" baja y tocaba */
    font-size: clamp(18.59px, calc(13.25px + 1.67vw), 37.3px);
    font-weight: 300;
    line-height: .96;
    letter-spacing: -.05em;
}

.s-participa__ast {
    grid-area: campos;
    width: clamp(11.67px, calc(8.77px + 0.9vw), 21.8px);
    height: auto;
    margin: clamp(-16.27px, calc(-40.34px + 7.52vw), 68px) 0 0 clamp(-0.67px, calc(-3.71px + 0.95vw), 10px);
}

/* El <form> no pinta caja: sus tres piezas entran en la rejilla del bloque. */
.s-form { display: contents; }

.s-form__rejilla {
    grid-area: campos;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(29.2px, calc(25.54px + 1.14vw), 42px);
    column-gap: 58px;
    --s-input-h: clamp(28.27px, calc(18.06px + 3.19vw), 64px);          /* alto del campo (de la etiqueta a la línea) */
    margin-top: clamp(18.67px, calc(-19.43px + 11.9vw), 152px);
}

.s-campo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.s-campo--ancho { grid-column: 1 / -1; }

.s-campo__label {
    /* 32px a 1440 y no los 37,3 del Figma: a ese cuerpo, en castellano,
       "Fecha de la compra*" y "Supermercado donde has hecho la compra*" no
       caben en su campo y se partían. En móvil se queda el del Figma. */
    font-size: clamp(16.21px, calc(11.7px + 1.41vw), 32px);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.05em;
}

.s-campo__req { margin-left: 0; }

/* La línea del diseño es el borde inferior del input: 1px negro, a 47px
   (móvil) / 100px (escritorio) del arranque de la etiqueta. */
/*
 * La línea del Figma, y nada más.
 *
 * Selector reforzado a propósito (0,3,1): el theme padre y WooCommerce traen
 * reglas tipo `input[type="text"], input[type="email"] { border; border-radius;
 * padding; height… }` (0,1,1) que convertían los campos en cajas con borde
 * redondeado. Solo "Teléfono" salía bien porque esas reglas no incluyen
 * `type="tel"`. Aquí se redefine todo lo que un theme suele tocar, también en
 * :hover y :focus, que suelen traer su propio borde o sombra.
 */
.sorteo .s-form input.s-campo__input,
.sorteo .s-form input.s-campo__input:hover,
.sorteo .s-form input.s-campo__input:focus {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 0;
    margin: 0;
    box-shadow: none;
    line-height: normal;
    text-indent: 0;
    height: var(--s-input-h);
    padding: 0;
    font: inherit;
    font-size: max(16px, clamp(13.2px, calc(9.54px + 1.14vw), 26px)); /* < 16px hace que iOS haga zoom al enfocar */
    font-weight: 300;
    color: inherit;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #000;
    border-radius: 0;
    appearance: none;
}

/* En móvil la línea del campo mide 157px pero la etiqueta puede ser más
   ancha (en el Figma "Supermercat on has fet la compra*" mide 163): así las
   etiquetas en castellano no se parten en tres líneas. */
.sorteo .s-form__rejilla input.s-campo__input { max-width: 84%; }   /* 157 de 187 */

.sorteo .s-form input.s-campo__input:focus { outline: none; }

.sorteo .s-form input.s-campo__input:focus-visible {
    outline: 2px solid var(--s-marron);
    outline-offset: 3px;
}

.sorteo .s-form input.s-campo__input.is-error { border-bottom-color: #B3261E; }

.s-campo__ayuda {
    white-space: nowrap;         /* "Formatos admitidos…" en una línea; puede asomar unos px al margen */
    margin-top: clamp(4.13px, calc(2.46px + 0.52vw), 10px);
    font-size: clamp(9.35px, calc(6.4px + 0.92vw), 19.7px);
    font-weight: 300;
    line-height: .96;
    letter-spacing: -.05em;
}

.s-campo__estado {
    margin-top: 8px;
    font-size: 12px;
}

.s-campo__error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.3;
    color: #B3261E;
}

.s-campo__error:empty { display: none; }

/* Campo de ticket: el input real se oculta pero sigue siendo focalizable. */
.s-form__file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Píldora del Figma (0:8): 310x67, radio 33,5, marrón con texto rosa. */
.s-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: clamp(154.27px, calc(109.77px + 13.9vw), 310px);
    height: clamp(33.29px, calc(23.66px + 3.01vw), 67px);
    padding: 0 1em;
    font: inherit;
    font-size: clamp(9.78px, calc(6.95px + 0.89vw), 19.7px);
    font-weight: 300;
    line-height: .96;
    letter-spacing: -.05em;
    color: var(--s-rosa);
    background: var(--s-marron);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .18s ease;
}

.s-boton:hover { background: var(--s-marron-osc); }

.s-boton--ticket {
    align-self: flex-start;
    margin-top: clamp(17.53px, calc(15.4px + 0.67vw), 25px);
}

.s-form__file:focus-visible + .s-boton--ticket,
.s-boton:focus-visible {
    outline: 2px solid var(--s-marron);
    outline-offset: 3px;
}

.s-boton[disabled] {
    opacity: .55;
    cursor: progress;
}

.s-form__legal {
    grid-area: legal;
    margin-top: clamp(30.53px, calc(23.83px + 2.1vw), 54px);
    padding-right: 12px;         /* móvil: que "privacidad.*" no toque las etiquetas de la derecha */
    color: var(--s-legal);
}

.s-check + .s-check { margin-top: clamp(0px, calc(17.69px - 1.23vw), 13.76px); }

.s-check__label {
    display: flex;
    gap: .3em;
    align-items: flex-start;
    font-size: clamp(11.89px, calc(7.25px + 1.45vw), 28.1px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.05em;
    cursor: pointer;
}

/* La casilla es el "☐" del diseño: cuadrado de trazo fino del color del
   texto legal, sin el control del sistema. */
.s-check__label input {
    flex: none;
    box-sizing: border-box;
    width: .62em;
    min-width: 0;
    padding: 0;
    font-size: inherit;          /* los <input> no heredan: sin esto, .62em de 13px */
    height: .62em;
    margin: .17em 0 0;
    border: .08em solid currentColor;
    border-radius: 0;
    background: transparent;
    appearance: none;
    cursor: pointer;
}

.s-check__label input:checked {
    background:
        linear-gradient(currentColor, currentColor) center / 55% 55% no-repeat;
}

.s-check__label input:focus-visible {
    outline: 2px solid var(--s-marron);
    outline-offset: 2px;
}

.s-check__label a {
    color: inherit;
    text-decoration: underline;
}

/* Móvil: PARTICIPAR es la acción principal de la landing y medía lo mismo
   que "SUBIR ARCHIVO" (164x35). Más grande destaca y se pulsa mejor con el
   dedo (48px de alto, por encima de los 44 recomendados). */
.s-boton--enviar {
    width: 260px;
    max-width: 100%;
    height: 48px;
    font-size: 15px;
}

.s-form__acciones {
    grid-area: acciones;
    justify-self: center;            /* escritorio: alineado con el formulario */
    margin-top: 36px;
    text-align: center;
}

/* Fechas de la promoción, bajo PARTICIPAR. Mismo tono que las casillas
   legales: es letra pequeña, no compite con el botón. */
.sorteo .s-form__vigencia {
    margin: 12px 0 0;
    color: var(--s-legal);
    font-size: clamp(12px, calc(10.51px + 0.381vw), 16px);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -.02em;
    text-wrap: balance;          /* móvil: dos líneas parejas, sin "2026." suelto */
}

.s-form__error-global { font-size: 13px; }

/* --- Aviso (próximamente / finalizada) -------------------------------- */

.s-aviso {
    padding-block: clamp(35.6px, calc(15.49px + 6.29vw), 106px);
    background: var(--s-rosa);
    color: var(--s-marron);
    text-align: center;
}

.s-aviso__ast {
    display: block;
    width: clamp(15.2px, calc(11.54px + 1.14vw), 28px);
    height: auto;
    margin: 0 auto;
}

.s-aviso__texto {
    max-width: 30em;
    margin: clamp(11.2px, calc(7.54px + 1.14vw), 24px) auto 0;
    font-size: clamp(18.59px, calc(13.25px + 1.67vw), 37.3px);
    font-weight: 300;
    line-height: .96;
    letter-spacing: -.05em;
}

/* --- Pie -------------------------------------------------------------- */

/* El theme padre pone `footer { text-align: center; font-size: 12px }`. */
.s-pie {
    padding-block: clamp(25.07px, calc(11.66px + 4.19vw), 72px) clamp(42.53px, calc(35.83px + 2.1vw), 66px);   /* abajo, en móvil, sitio justo para el botón flotante de cookies de la web */
    background: var(--s-marron);
    color: var(--s-rosa);
    font-size: clamp(10.74px, calc(8.18px + 0.8vw), 19.7px);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.05em;
}

.s-pie__cuerpo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "anyo-izq logo  anyo-der"
        "legal    legal legal"
        "web      web   red";
    align-items: center;
    padding-inline: clamp(18px, calc(-18.57px + 11.43vw), 146px) clamp(16.27px, calc(-23.66px + 12.48vw), 156px);
}

.s-pie__logo       { grid-area: logo; justify-self: center; color: var(--s-crema); }
.s-pie__logo .s-logo { display: block; width: clamp(170.93px, calc(138.63px + 10.1vw), 284px); height: auto; }
.s-pie__anyo--izq  { grid-area: anyo-izq; align-self: end; }
.s-pie__anyo--der  { grid-area: anyo-der; justify-self: end; align-self: end; }
.s-pie__web        { grid-area: web; justify-self: start; color: inherit; text-decoration: none; }
.s-pie__red        { grid-area: red; justify-self: end; white-space: nowrap; }

.s-pie__legal {
    grid-area: legal;
    justify-self: center;
    max-width: clamp(239.27px, calc(181.06px + 18.19vw), 443px);
    margin: clamp(0px, calc(31.54px - 2.19vw), 24.53px) auto 28px;   /* escritorio: 0 */
    font-size: clamp(11.7px, calc(9.41px + 0.71vw), 19.7px);
    font-weight: 300;
    text-align: center;
}

.s-pie__legal p + p { margin-top: .96em; }

.s-pie__legal a {
    color: inherit;
    text-decoration: underline;
}

.s-pie__titulo {
    margin-bottom: clamp(10.87px, calc(10.26px + 0.19vw), 13px);
    font-weight: 500;
}

/* --- Popup ------------------------------------------------------------ */

/*
 * Popup del Figma (0:288): 1024x530, fondo #FFF8EB, sin radio. Todo se mide
 * en cqw sobre el propio popup, así que en móvil encoge entero en proporción
 * en vez de reordenarse.
 */
.s-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 16px 16px;         /* arriba, sitio para la ✕, que va fuera de la caja */
    overflow-y: auto;
    background: rgba(48, 23, 9, .72);
}

.s-overlay[hidden] { display: none; }

.s-modal {
    position: relative;
    container-type: inline-size;
    width: 100%;
    max-width: 1024px;
    aspect-ratio: 1024 / 530;        /* proporción del Figma; si el texto necesita más, crece */
    margin: auto 0;
    text-align: center;
    color: var(--s-marron);
    background: #FFF8EB;
}

/* Fuera de la caja, sobre el fondo oscuro: dentro pisaría el SORTEO de la
   esquina, que en móvil queda a 16px del borde. */
.s-modal__cerrar {
    position: absolute;
    top: -44px;
    right: 0;
    width: 40px;
    height: 40px;
    font-size: 30px;
    line-height: 1;
    color: var(--s-crema);
    background: none;
    border: 0;
    cursor: pointer;
}

.s-modal__esquina {
    position: absolute;
    font-size: max(9px, 2.832cqw);
}

.s-modal__esquina--1 { top: 3.906cqw;    left: 5.664cqw; }
.s-modal__esquina--2 { top: 3.906cqw;    right: 4.492cqw; }
.s-modal__esquina--3 { bottom: 3.906cqw; left: 5.664cqw; }
.s-modal__esquina--4 { bottom: 3.906cqw; right: 4.492cqw; }

.s-modal__logo {
    position: absolute;
    top: 3.906cqw;
    left: 50%;
    width: 20.7cqw;
    height: auto;
    transform: translateX(-50%);
}

.s-modal__titulo {
    margin: 12.89cqw auto 0;
    white-space: nowrap;             /* una línea como el Figma; escala con el popup, así que cabe */
    font-size: 9.053cqw;
    font-weight: 600;
    line-height: .96;
    letter-spacing: -.08em;
}

.s-modal__texto {
    width: 77.25cqw;
    margin: 2.73cqw auto 0;
    padding-bottom: 10.84cqw;
    font-size: max(14px, 4.15cqw);
    font-weight: 300;
    line-height: .96;
    letter-spacing: -.05em;
    color: var(--s-marron-texto);
}

.s-modal__texto strong { font-weight: 500; }

/* Dos textos en el popup (dentro y fuera de plazo); solo se ve uno. */
.s-modal [data-sorteo-popup-variante][hidden] { display: none; }

body.sorteo-modal-abierto { overflow: hidden; }

.sorteo .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* =======================================================================
 * Escritorio (la maquetación del frame de 1440)
 * ==================================================================== */

@media (min-width: 1024px) {
    .s-solo-escritorio { display: block; }
    .s-solo-movil      { display: none; }

    /* Rejilla de tres columnas del diseño: x=146 | 548 | 922 → 1284. */
    .s-pasos__cuerpo,
    .s-productos__cuerpo,
    .s-participa__cuerpo {
        grid-template-columns: minmax(0, 402fr) minmax(0, 374fr) minmax(0, 362fr);
    }

    /* --- Intro --- */

    .s-intro__texto { line-height: .96; letter-spacing: -.05em; }

    .s-intro__titulo { max-width: 965px; }

    .s-intro__fila {
        justify-content: center;
        max-width: none;
        margin: 30px 0 0;
    }

    /* Más aire que el Figma alrededor de las tres columnas: en el diseño
       van pegadas al párrafo (0px) y al borde marrón (10px), y en pantalla
       se leía apretado. */
    .s-intro { padding-bottom: clamp(28px, 2.78vw, 40px); }

    /* Como en el Figma: las columnas arrancan arriba y cada asterisco se
       apoya en la misma línea (la caja del más alto, 42px a 37,3px), así
       los textos empiezan a la misma altura aunque tengan distinto número
       de líneas. Centradas, "¡Participa ya!" bajaba con su asterisco. */
    .s-reclamos {
        grid-template-columns: 349fr 431fr 348fr;
        align-items: start;
        margin-top: clamp(20px, 2.22vw, 32px);
    }

    .s-reclamos__item {
        display: grid;
        grid-template-rows: 1.13em auto;
        justify-items: center;
    }

    .s-reclamos__icono { align-self: end; }

    .s-reclamos__item--ganadores { order: 0; }

    .s-reclamos__item--menus::before,
    .s-reclamos__item--menus::after { content: none; }

    .s-reclamos__item--ganadores::before,
    .s-reclamos__item--ganadores::after {
        content: "";
        position: absolute;
        top: 0;                      /* arrancan a la altura de los asteriscos, como en el Figma */
        width: 4px;
        height: clamp(46.29px, calc(22.95px + 7.3vw), 128px);
        background: var(--s-marron);
    }

    .s-reclamos__item--ganadores::before { left: 0; }
    .s-reclamos__item--ganadores::after  { right: 0; }

    /* --- 001 ---
     *
     *     *001            |  01          |  02
     *     ¿Cómo puedes    |              |
     *     participar?     |  03          |  ¡Y ya está!
     *     (fotos)         |              |
     */
    .s-pasos__cuerpo {
        grid-template-areas:
            "cab    paso1  paso2"
            "fotos  paso3  cierre";
        grid-template-rows: auto auto;
        row-gap: 29px;
    }

    .s-paso--2 { margin-left: 2px; }

    .s-pasos__cierre { margin-top: 36px; }

    .s-paso--1,
    .s-paso--2 { margin-top: 35px; }

    .s-paso--3 { margin-top: 8px; }

    .s-pasos__fotos {
        aspect-ratio: 513 / 494;
        margin-top: max(-96px, -6.67vw);   /* se mete bajo el titular, como en el Figma */
    }

    /* El 002 sube 53px sobre el final del 001: las fotos pasan por debajo
       del "002". */
    .s-productos { margin-top: max(-53px, -3.68vw); }

    .s-pasos__foto--1 { width: 60.16%; }
    .s-pasos__foto--2 { top: 34.9%; left: 33.61%; width: 62.26%; }

    /* Flecha que baja de "¡Y ya está!" hacia las botellas (0:264). */
    .s-pasos__flecha {
        position: absolute;
        top: min(17.15vw, 247px);
        left: max(-2.36vw, -34px);
        width: min(7.23vw, 104px);
        height: auto;
        color: var(--s-rosa);
    }

    /* --- 002 --- */

    .s-productos .s-kicker--der { display: block; }

    .s-productos .s-titular { font-size: clamp(20.53px, calc(4.91px + 4.88vw), 75.2px); }

    .s-pasos__cierre-titulo { font-size: clamp(37.44px, calc(26.65px + 3.37vw), 75.2px); }

    .s-productos__cuerpo {
        grid-template-areas:
            "cab      ast      listas"
            "botellas botellas listas";
    }

    .s-productos__ast { grid-area: ast; }

    /* El collage arranca a 47px del número y a 109px del margen, y pasa por
       debajo del titular, que queda encima. */
    /* Ocupa las tres columnas a efectos de rejilla: con su ancho (695 + 109
       de margen) no cabe en dos y empujaría las listas. Visualmente llega a
       x=950, como en el Figma. */
    .s-productos__botellas {
        grid-row: 1 / span 2;
        grid-column: 1 / -1;
        justify-self: start;
        align-self: start;
        width: min(48.2vw, 695px);
        aspect-ratio: 695 / 634;
        margin: min(3.26vw, 47px) 0 0 min(7.57vw, 109px);
    }

    .s-productos__listas { grid-row: 1 / span 2; }

    .s-botella--masia-freye-syrah-tempranillo   { --x: 17.84%; --y: 45.9%;  --w: 23.94%; }
    .s-botella--masia-freye-parellada-muscat    { --x: .86%;   --y: 45.74%; --w: 23.94%; }
    .s-botella--masia-freye-xarello-chardonnay  { --x: 53.38%; --y: 2.52%;  --w: 23.94%; }
    .s-botella--vallformosa-classic-brut-nature { --x: 69.67%; --y: 48.58%; --w: 22.1%;  }
    .s-botella--vallformosa-classic-brut        { --x: 36.26%; --y: 48.58%; --w: 22.1%;  }
    .s-botella--masia-freye-syrah-sumoll        { --x: 69.5%;  --y: .95%;   --w: 23.94%; }

    /* --- 003 --- */

    .s-participa__cuerpo {
        grid-template-areas:
            "cab  ast      ast"
            "cab  campos   campos"
            "cab  legal    legal"
            "cab  acciones acciones";
        grid-template-rows: auto auto auto auto;
    }

    .s-participa__ast { grid-area: ast; }

    /* En escritorio la etiqueta escala en proporción al ancho, igual que
       las columnas: con la recta móvil→escritorio quedaba más grande que su
       campo entre 1024 y 1440 y volvía a partirse. */
    .s-campo__label { font-size: min(2.222vw, 32px); }

    /* En el Figma la píldora "SUBIR ARCHIVO" arranca a la altura de la línea
       de "Fecha de la compra" (las dos en y=3005). La celda del ticket
       reserva bajo la etiqueta el mismo alto que un campo; "Formatos
       admitidos…" va dentro de ese hueco y el botón empieza justo debajo,
       así coinciden a cualquier ancho. El input real es absolute y no ocupa
       fila. */
    .s-campo--ticket {
        display: grid;
        grid-template-rows: auto var(--s-input-h) auto auto auto;
        align-items: start;
    }

    .s-campo--ticket .s-boton--ticket {
        justify-self: start;
        margin-top: 0;
    }

    .s-form__rejilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 694px;
        margin-top: 0;
    }

    .sorteo .s-form__rejilla input.s-campo__input {
        max-width: none;
    }

    /* El asterisco va a 68px del número y los campos a 152: la fila del
       asterisco ocupa la diferencia. */
    .s-participa__ast { margin-bottom: min(4.3vw, 62px); }

    .s-participa__flecha {
        position: absolute;
        top: min(29.24vw, 421px);
        left: min(3.68vw, 53px);
        width: min(11.67vw, 168px);
        height: auto;
        color: var(--s-marron);
    }

    .s-form__legal { padding-right: 0; }

    .s-participa .s-cab { padding-right: 0; }

    .s-boton--enviar {
        width: clamp(154.27px, calc(109.77px + 13.9vw), 310px);
        height: clamp(33.29px, calc(23.66px + 3.01vw), 67px);
        font-size: clamp(9.78px, calc(6.95px + 0.89vw), 19.7px);
    }

    .s-form__acciones {
        justify-self: start;
        margin-top: 40px;
        text-align: left;
    }

    /* --- Pie ---
     *
     *     VALLFORMOSA  |  Bases legales     |       2026
     *                  |  texto…            |
     *                  |                    |  @Vallformosa
     *                  |                    |  www.vallformosa.com
     */
    .s-pie__cuerpo {
        grid-template-columns: minmax(0, 402fr) minmax(0, 374fr) minmax(0, 362fr);
        grid-template-rows: auto 1fr auto auto;
        grid-template-areas:
            "logo legal anyo-der"
            ".    legal ."
            ".    legal red"
            ".    legal web";
        align-items: start;
        padding-inline: var(--s-pl) var(--s-pr);
    }

    .s-pie__logo    { justify-self: start; }
    .s-pie__anyo--izq { display: none; }
    .s-pie__anyo--der { align-self: start; }
    .s-pie__anyo--der,
    .s-pie__red,
    .s-pie__web     { justify-self: end; }
    .s-pie__web     { margin-top: 0; }

    .s-pie__legal {
        grid-area: auto;
        grid-column: 2 / span 2;
        grid-row: 1 / -1;
        justify-self: start;
        width: 443px;
        max-width: none;
        margin: 0;
        text-align: left;
    }
}

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .sorteo * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}