/*
 * Tema Autocom — Montserrat, gris #3C3C3B, rojo #CC0001.
 * Medidas tomadas de "Editable web ruleta ATC.ai" y "Editable Ganadores web ruleta ATC.ai"
 * (en unidades "u" de la estructura base: móvil 390, tablet 820, desktop 1920).
 * 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: 'Montserrat';
    src: url('fonts/Montserrat.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --act-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --act-dark: #1D1D1B;
    --act-wheel-dark: #3C3C3B;
    --act-overlay: rgba(0, 0, 0, .45);
    --act-panel: rgba(0, 0, 0, .30);
    --act-button-text: #1D1D1B;
    --act-pointer-top: #E4342A;
    --act-pointer-bottom: #CC0001;
    --act-pointer-stroke: #FFFFFF;
}

/* ---------- Fondo (encuadre exacto de cada mesa de trabajo) ---------- */
.act .act-bg {
    background-image: url('img/bg.jpg');
    background-size: auto 118.3%;
    background-position: 49.5% 57.6%;
}
.act .act-bg::after { background: rgba(0, 0, 0, .55); }

/* ---------- Tipografía general ---------- */
.act-headline { font-weight: 800; line-height: 1.137; letter-spacing: 0; }
.wh-intro, .res-label, .res-order-label, .act-legal { font-weight: 300; }
.wh-intro strong { font-weight: 700; }
.wh-footer { font-weight: 600; }
.act-btn { font-weight: 700; }
.reg-label { font-weight: 600; }
.reg-subtitle strong { font-weight: 700; }

/* =========================================================
   RULETA · móvil (390 × 844)
   ========================================================= */
.wh-logo { margin-top: calc(16.7 * var(--u)); width: calc(134 * var(--u)); }
.wh .act-headline { margin-top: calc(19.6 * var(--u)); font-size: calc(34.3 * var(--u)); max-width: calc(330 * var(--u)); }
.wh-intro { margin-top: calc(21 * var(--u)); width: calc(352 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.21; }
.wheel { --d: calc(320 * var(--u)); margin-top: calc(22.7 * var(--u)); }
.wh-cta { margin-top: calc(35 * var(--u)); }
.wh .act-btn { width: calc(242.7 * var(--u)); height: calc(53.3 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(24.5 * var(--u)); }
.wh-footer { margin: calc(30.8 * var(--u)) 0 0; width: calc(330 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.15; }
.wh .act-legal { margin: calc(36 * var(--u)) 0 calc(30 * var(--u)); font-size: calc(9.5 * 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 131.7%; background-position: 51.7% 58.9%; }

    .wh-logo { margin-top: calc(19.5 * var(--u)); width: calc(201 * var(--u)); }
    .wh .act-headline { margin-top: calc(25.2 * var(--u)); font-size: calc(45 * var(--u)); max-width: none; }
    .wh-intro { margin-top: calc(23.3 * var(--u)); width: calc(760 * var(--u)); font-size: calc(18.6 * var(--u)); line-height: 1.29; }
    .wheel { --d: calc(560 * var(--u)); margin-top: calc(27 * var(--u)); }
    .wh-cta { margin-top: calc(41 * var(--u)); }
    .wh .act-btn { width: calc(364 * var(--u)); height: calc(80 * var(--u)); border-radius: calc(18 * var(--u)); font-size: calc(36.8 * var(--u)); }
    .wh-footer { margin: calc(42 * var(--u)) 0 0; width: calc(500 * var(--u)); font-size: calc(19.5 * var(--u)); line-height: 1.18; }
    .wh .act-legal { margin: calc(33 * var(--u)) 0 calc(16 * var(--u)); font-size: calc(14 * 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-size: 130.3% auto; background-position: 53.1% 52.8%; }
    .act--wheel .act-bg::after { background: rgba(0, 0, 0, .62); }

    .wh-copy { left: calc(74 * var(--u)); top: calc(125.3 * var(--u)); width: calc(1000 * var(--u)); }
    .wh .act-headline { margin: 0; font-size: calc(64.4 * var(--u)); max-width: none; }
    .wh-intro { margin-top: calc(46.6 * var(--u)); width: calc(870 * var(--u)); font-size: calc(31.7 * var(--u)); line-height: 1.2; }
    .wh-cta { margin-top: calc(51 * var(--u)); }
    .wh .act-btn { width: calc(524 * var(--u)); height: calc(115 * var(--u)); border-radius: calc(26 * var(--u)); font-size: calc(52.8 * var(--u)); }
    .wh-footer { margin: calc(71.5 * var(--u)) 0 0; width: calc(860 * var(--u)); font-size: calc(23.5 * var(--u)); line-height: 1.19; }
    .wh .act-legal { left: calc(86 * var(--u)); top: calc(1029 * var(--u)); margin: 0; font-size: calc(16 * var(--u)); }
    .wh-logo-bottom { left: calc(86 * var(--u)); top: calc(739 * var(--u)); width: calc(350 * var(--u)); }
    .wheel { --d: calc(828.4 * var(--u)); left: calc(1040 * var(--u)); top: calc(131.4 * 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::after { background: rgba(0, 0, 0, .55); }
.res-logo { margin-top: calc(74 * var(--u)); width: calc(134 * var(--u)); }
.res-title { margin-top: calc(46.2 * var(--u)); font-weight: 800; font-size: calc(34.3 * var(--u)); line-height: 1.137; text-transform: uppercase; }
.res-label { margin-top: calc(27.7 * var(--u)); font-size: calc(12 * var(--u)); }
.res-card {
    min-height: calc(164.7 * var(--u));
    margin-top: calc(21.3 * var(--u));
    padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u));
    justify-content: center;
    background: #3C3C3B;
    border: calc(1.5 * var(--u)) solid #FFFFFF;
    border-radius: calc(11.7 * var(--u));
}
.res-won { display: none; } /* El diseño de Autocom no usa "Ganaste:" */
.res-prize { margin-top: 0; font-weight: 700; font-size: calc(20.5 * var(--u)); line-height: 1.22; text-transform: uppercase; }
.res-prize-sub { font-weight: 300; font-size: calc(16.7 * var(--u)); line-height: 1.2; text-transform: uppercase; }
.res-icon { margin-top: calc(16 * var(--u)); height: calc(52 * var(--u)); }
.res-card--noicon .res-prize { font-weight: 800; font-size: calc(35.7 * var(--u)); line-height: 1.12; }
.res-card--noicon .res-prize-sub { font-size: calc(18 * var(--u)); }
.res-order-label { margin-top: calc(44 * var(--u)); font-size: calc(12 * var(--u)); }
.res-order {
    min-height: calc(69.3 * var(--u));
    margin-top: calc(37 * var(--u));
    background: #3C3C3B;
    border: calc(1.5 * var(--u)) solid #FFFFFF;
    border-radius: calc(11.7 * var(--u));
    font-weight: 700;
    font-size: calc(24 * var(--u) * var(--fit, 1));
}
.res .act-legal { font-size: calc(9.5 * var(--u)); padding-top: calc(112 * var(--u)); }
.res-card .act-sup { display: none; } /* el diseño de Autocom no lleva asterisco en el premio */

/* Registro / acceso: misma estructura que la base, tipografía de la marca */
.act--register .act-bg::after, .act--login .act-bg::after { background: rgba(0, 0, 0, .50); }
.reg .act-headline { font-size: calc(32 * var(--u)); }