/*
 * Tema FAW Trucks — azul #24377B, fondo foto al 25 % sobre azul.
 * Medidas tomadas de "Editable web ruleta Faw.ai" y "Editable ganadores web ruleta Faw.ai"
 * (en unidades "u" de la estructura base: móvil 390, tablet 820, desktop 1920).
 *
 * Tipografía: el diseño usa Gilroy (comercial, sin licencia en el proyecto) y Montserrat.
 * Gilroy se sustituye por Figtree (OFL, misma familia geométrica). Si se consigue la licencia
 * de Gilroy, basta con agregar los archivos en fonts/ y cambiar --faw-font.
 * Este archivo se carga DESPUÉS de ruleta.css: en la pantalla de ruleta cada bloque
 * (móvil / tablet / desktop) redefine todas las propiedades que toca.
 */
@font-face {
    font-family: 'Figtree';
    src: url('fonts/Figtree.ttf') format('truetype');
    font-weight: 300 900;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --faw-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --faw-font-alt: 'Montserrat', var(--faw-font);
    --faw-blue: #24377B;
    --act-font: var(--faw-font);
    --act-dark: #24377B;
    --act-wheel-dark: #08141E;
    --act-overlay: rgba(36, 55, 123, .75);
    --act-panel: rgba(8, 20, 30, .30);
    --act-field-bg: rgba(8, 20, 30, .25);
    --act-button-text: #24377B;
    --act-pointer-top: #FFFFFF;
    --act-pointer-bottom: #DADFEE;
    --act-pointer-stroke: #08141E;
}

/* ---------- Fondo: foto al 25 % sobre azul (encuadre exacto de cada mesa de trabajo) ---------- */
.act .act-bg {
    background-color: #24377B;
    background-image: url('img/bg.jpg');
    background-size: auto 101.2%;
    background-position: 65.6% 56.4%;
}
.act .act-bg::after { background: var(--act-overlay); }

/* ---------- Tipografía general ---------- */
.act-headline { font-weight: 900; line-height: 1.18; letter-spacing: 0; }
.wh-intro { font-weight: 500; }
.wh-intro strong { font-weight: 800; }
.wh-footer { font-weight: 400; }
.act-btn { font-weight: 800; }
.act-legal { font-weight: 300; opacity: .55; }
.reg-label { font-weight: 600; }
.reg-subtitle strong { font-weight: 800; }

/* =========================================================
   RULETA · móvil (390 × 844)
   ========================================================= */
.wh-logo { margin-top: calc(24.6 * var(--u)); width: calc(120.7 * var(--u)); }
.wh .act-headline { margin-top: calc(13 * var(--u)); font-size: calc(33.3 * var(--u)); max-width: calc(330 * var(--u)); }
.wh-intro { margin-top: calc(17.5 * var(--u)); width: calc(340 * var(--u)); font-size: calc(12.9 * var(--u)); line-height: 1.225; }
.wheel { --d: calc(320 * var(--u)); margin-top: calc(22 * var(--u)); }
.wh-cta { margin-top: calc(35 * var(--u)); }
.wh .act-btn { width: calc(242.3 * var(--u)); height: calc(53.1 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(25.5 * var(--u)); }
.wh-footer { margin: calc(2 * var(--u)) 0 0; width: calc(360 * var(--u)); font-size: calc(12.9 * var(--u)); line-height: 1.19; }
.wh .act-legal { margin: calc(37 * var(--u)) 0 calc(30 * var(--u)); font-size: calc(8.6 * var(--u)); }

/* =========================================================
   RULETA · tablet (820 × 1180)
   ========================================================= */
@media (min-width: 700px) and (orientation: portrait), (min-width: 700px) and (max-width: 959px) and (min-height: 521px) {
    .act .act-bg { background-size: auto 122.2%; background-position: 50% 40.4%; }

    .wh-logo { margin-top: calc(22.75 * var(--u)); width: calc(190.4 * var(--u)); }
    .wh .act-headline { margin-top: calc(17 * var(--u)); font-size: calc(48.5 * var(--u)); max-width: none; white-space: nowrap; }
    .wh-intro { margin-top: calc(20 * var(--u)); width: calc(730 * var(--u)); font-size: calc(19.4 * var(--u)); line-height: 1.175; }
    .wheel { --d: calc(559.4 * var(--u)); margin-top: calc(32.8 * var(--u)); }
    .wh-cta { margin-top: calc(41.6 * var(--u)); }
    .wh .act-btn { width: calc(363.4 * var(--u)); height: calc(79.6 * var(--u)); border-radius: calc(18 * var(--u)); font-size: calc(38.3 * var(--u)); }
    .wh-footer { margin: calc(8 * var(--u)) 0 0; width: calc(560 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.14; }
    .wh .act-legal { margin: calc(34 * var(--u)) 0 calc(16 * var(--u)); font-size: calc(13 * var(--u)); }
}

/* =========================================================
   RULETA · desktop (1920 × 1080) — también iPad y celular en horizontal
   ========================================================= */
@media (min-width: 960px) and (orientation: landscape), (min-width: 600px) and (max-height: 520px) and (orientation: landscape) {
    .act .act-bg { background-image: url('img/bg-wide.jpg'); background-size: 141.1% auto; background-position: 53.7% 51.3%; }

    .wh-copy { left: calc(74.5 * var(--u)); top: calc(122.7 * var(--u)); width: calc(1000 * var(--u)); }
    .wh .act-headline { margin: 0; font-size: calc(59 * var(--u)); max-width: none; }
    .wh-intro { margin-top: calc(46.3 * var(--u)); width: calc(840 * var(--u)); font-size: calc(31.5 * var(--u)); line-height: 1.18; }
    .wh-cta { margin-top: calc(60 * var(--u)); }
    .wh .act-btn { width: calc(523.4 * var(--u)); height: calc(114.6 * var(--u)); border-radius: calc(26 * var(--u)); font-size: calc(55 * var(--u)); }
    .wh-footer { margin: calc(33 * var(--u)) 0 0; width: calc(860 * var(--u)); font-size: calc(23.5 * var(--u)); line-height: 1.17; font-weight: 500; }
    .wh .act-legal { left: calc(95 * var(--u)); top: calc(1028 * var(--u)); margin: 0; font-size: calc(15 * var(--u)); }
    .wh-logo-bottom { left: calc(85.6 * var(--u)); top: calc(761.7 * var(--u)); width: calc(325.1 * var(--u)); }
    .wheel { --d: calc(828.4 * var(--u)); left: calc(1038.8 * var(--u)); top: calc(125.8 * var(--u)); margin: 0; }
    .wheel-pointer { top: calc(var(--d) * -0.035); }
}
@media (min-width: 600px) and (max-height: 520px) and (orientation: landscape) {
    .wh-intro, .wh-footer { font-size: calc(38 * var(--u)); }
    .wh .act-legal { font-size: calc(26 * var(--u)); }
}

/* =========================================================
   RESULTADO (base 390; en tablet/desktop solo cambia la escala --u)
   ========================================================= */
.act--result .act-bg { background-image: url('img/bg.jpg'); background-size: auto 101.2%; background-position: 65.6% 56.4%; }
.res-logo { margin-top: calc(71 * var(--u)); width: calc(140.7 * var(--u)); }
.res-title { margin-top: calc(21.8 * var(--u)); font-family: var(--faw-font-alt); font-weight: 800; font-size: calc(33.9 * var(--u)); line-height: 1.156; text-transform: uppercase; }
.res-label { margin-top: calc(42.1 * var(--u)); font-weight: 500; font-size: calc(12.9 * var(--u)); }
.res-card {
    width: calc(293 * var(--u));
    height: calc(163 * var(--u));
    margin-top: calc(22.6 * var(--u));
    padding: calc(14.6 * var(--u)) calc(28 * var(--u)) calc(19.9 * var(--u));
    justify-content: flex-start;
    background: #FFFFFF;
    border: calc(3 * var(--u)) solid var(--faw-blue);
    border-radius: calc(11.25 * var(--u));
    color: var(--faw-blue);
    font-family: var(--faw-font-alt);
}
.res-won { display: none; } /* el diseño de FAW no usa "Ganaste:" */
.res-prize { margin-top: 0; font-weight: 700; font-size: calc(20.7 * var(--u)); line-height: 1.19; text-transform: uppercase; }
.res-prize-sub { font-weight: 500; font-size: calc(16.9 * var(--u)); line-height: 1.15; text-transform: uppercase; }
/* Todos los íconos comparten el mismo marco (240 × 232 en el .ai) anclado al pie de la tarjeta */
.res-icon { margin-top: auto; height: calc(77.3 * var(--u)); width: auto; }
.res-card--noicon { justify-content: center; padding-bottom: calc(17 * var(--u)); }
.res-card--noicon .res-prize { font-weight: 700; font-size: calc(34 * var(--u)); line-height: 1.19; }
.res-card--noicon .res-prize-sub { font-size: calc(18 * var(--u)); }
.res-order-label { margin-top: calc(59 * var(--u)); font-weight: 500; font-size: calc(12.9 * var(--u)); }
.res-order {
    width: calc(293 * var(--u));
    min-height: calc(67.4 * var(--u));
    margin-top: calc(24.8 * var(--u));
    background: #FFFFFF;
    border: calc(3 * var(--u)) solid var(--faw-blue);
    border-radius: calc(11.25 * var(--u));
    color: var(--faw-blue);
    font-family: var(--faw-font-alt);
    font-weight: 700;
    font-size: calc(25.5 * var(--u) * var(--fit, 1));
}
.res .act-legal { font-size: calc(8.6 * var(--u)); padding-top: calc(116.5 * var(--u)); }
.res-card .act-sup { display: none; } /* el diseño de FAW no lleva asterisco en el premio */

/* Registro / acceso: misma estructura que la base, tipografía y colores de la marca */
.reg .act-headline { font-size: calc(32 * var(--u)); }
.reg-terms input::after { border-color: var(--faw-blue); }