/* Estilo rápido solo para probar que los iconos dinámicos funcionan en tu nueva grilla */
        .icon-test {
            width: 32px;
            height: 32px;
            background-color: currentColor;
            /* Asegúrate de que la ruta coincida con la que dejamos limpia */
            mask-image: url('assets/icons/solid/atm-outline-icon-al-paso.svg');
            -webkit-mask-image: url('assets/icons/solid/atm-outline-icon-al-paso.svg');
            mask-size: cover;
            -webkit-mask-size: cover;
        }

        /* Variable de prueba usando el color de Abastible */
        .text-brand {
            color: #FF6600;
        }

        /* --- Estilos Estructurales del Header --- */
        .hero-section,
        .form-section,
        .prizes-section,
        .steps-section,
        .faq-section,
        .winners-section {
            padding-left: var(--grid-margin-horizontal, 16px) !important;
            padding-right: var(--grid-margin-horizontal, 16px) !important;
            box-sizing: border-box;
        }

        .main-header {
            position: sticky;
            top: 0;
            z-index: 1020;
            border-bottom-width: 1px;
            border-bottom-style: solid;
        }

        .header-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: var(--base-units-64);
        }

        .header-logo {
            display: block;
            height: 32px;
            width: auto;
            transition: height 0.3s ease;
        }

        @media (min-width: 768px) {
            .header-container {
                justify-content: flex-start;
                height: var(--base-units-80);
            }

            .header-logo {
                height: 48px;
            }
        }

        /* --- Estilos Estructurales del Hero --- */
        .hero-section {
            background-image: url('assets/images/hero-image-desktop.png');
            background-size: cover;
            background-position: center;
            min-height: 80vh;
            display: flex;
            width: 100%;
            margin: 0;
        }

        .hero-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
        }

        .hero-text-container {
            padding-top: var(--grid-margin-vertical, 40px);
            padding-bottom: var(--grid-margin-vertical, 40px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: stretch;
            min-height: 501px;
        }

        .hero-top-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-m, 24px);
        }

        .hero-title {
            color: var(--color-text-neutral-inverse, #ffffff);
            text-align: center;
            font-family: var(--typography-font-family-family), sans-serif;
            font-size: var(--typography-font-size-text-3xl, 28px);
            font-weight: 700;
            line-height: var(--typography-line-height-text-3xl, 36px);
            letter-spacing: -0.56px;
            margin: 0;
        }

        .hero-subtitle {
            color: var(--color-text-neutral-inverse, #ffffff);
            text-align: center;
            font-family: var(--typography-font-family-family), sans-serif;
            font-size: var(--typography-font-size-text-lg, 18px);
            font-weight: 400;
            line-height: normal;
            margin: 0;
        }

        .hero-subtitle strong {
            font-weight: 700;
        }

        .hero-bottom-actions {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-s, 16px);
            width: 100%;
        }

        .hero-btn-solid {
            border: none;
        }

        .hero-btn-outline {
            border-width: 2px;
            border-style: solid;
        }

        .hero-btn-solid,
        .hero-btn-outline {
            padding: var(--base-units-16) var(--base-units-32);
            cursor: pointer;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            text-decoration: none;
        }

        @media (min-width: 768px) {
            .hero-bottom-actions {
                flex-direction: row;
                justify-content: center;
                width: auto;
            }

            .hero-btn-solid,
            .hero-btn-outline {
                width: auto;
            }
        }

        /* --- Wrapper Desktop Promo --- */
        .desktop-promo-wrapper {
            display: flex;
            flex-direction: column;
        }

        @media (min-width: 992px) {
            .desktop-promo-wrapper {
                width: 100%;
                max-width: none;
                background-image: url('assets/images/hero-image-desktop.png');
                background-size: cover;
                background-position: center;
                margin: 0;
                padding: 0;
            }

            .desktop-promo-inner {
                display: grid;
                grid-template-columns: 1fr 1fr;
                align-items: center;
                max-width: var(--grid-max-width-content, 1184px);
                margin: 0 auto;
                gap: var(--spacing-4xl, 48px);
                padding-top: var(--spacing-6xl, 80px);
                padding-bottom: var(--spacing-6xl, 80px);
                padding-left: 0;
                padding-right: 0;
                min-height: 750px;
                /* Mantiene la altura del hero fija */
            }

            .hero-section {
                background-image: none !important;
                min-height: auto;
            }

            .hero-text-container {
                min-height: auto;
                justify-content: center;
                padding: 0;
                gap: var(--spacing-4xl, 48px);
            }

            .form-section {
                background-color: var(--color-fill-background-white);
                border-radius: var(--border-radius-xl, 24px);
                padding: var(--spacing-xl, 32px);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                max-width: 444px;
            }
        }

        /* --- Estilos Estructurales del Formulario Wizard --- */
        .form-section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--spacing-xl);
            /* Ajustamos el padding y le damos el ancho máximo aquí */
            padding: var(--spacing-xl, 32px) var(--spacing-l, 24px); 
            width: 100%;
            max-width: 444px; 
            margin: 0 auto;
            box-sizing: border-box;
        }

        /* Stepper */
        .wizard-stepper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            width: 100%;
            max-width: 100%; /* Cambiado de 444px a 100% */
            padding: 0 var(--base-units-16);
            box-sizing: border-box;
            margin-bottom: 10px;
        }

        .wizard-stepper::before {
            content: '';
            position: absolute;
            top: 20px;
            /* middle of 40px circle */
            left: var(--base-units-48);
            right: var(--base-units-48);
            height: 2px;
            background-color: var(--color-border-emphasis-base);
            z-index: 1;
        }

        .wizard-form {
            width: 100%;
            max-width: 100%; /* Cambiado de 444px a 100% */
        }

        .wizard-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 2;
            gap: var(--base-units-8);
            position: relative;
            background-color: var(--color-fill-background-white);
            padding: 0 var(--base-units-8);
        }

        .wizard-step-circle {
            width: 40px;
            height: 40px;
            border-radius: var(--border-radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--typography-font-size-text-lg);
            font-weight: var(--typography-font-weight-bold, 700);
            border-width: 2px;
            border-style: solid;
        }

        /* Inactive Step */
        .wizard-step.inactive .wizard-step-circle {
            background-color: var(--color-colores-basic-white);
            border-color: var(--color-border-emphasis-base);
            color: var(--color-text-emphasis-base);
        }

        .wizard-step.inactive .wizard-step-label {
            color: var(--color-text-emphasis-base);
        }

        /* Active Step */
        .wizard-step.active .wizard-step-circle {
            background-color: var(--color-colores-basic-white);
            border-color: var(--color-fill-identity-main-orange);
            color: var(--color-fill-identity-main-orange);
        }

        .wizard-step.active .wizard-step-label {
            color: var(--color-text-identity-main-orange);
            font-weight: var(--typography-font-weight-bold, 700);
        }

        /* Completed Step */
        .wizard-step.completed .wizard-step-circle {
            background-color: var(--color-fill-identity-main-orange);
            border-color: var(--color-fill-identity-main-orange);
            color: var(--color-colores-basic-white);
        }

        .wizard-step.completed .wizard-step-label {
            color: var(--color-text-neutral-primary);
        }

        .wizard-step.completed:hover .wizard-step-circle {
            opacity: 0.8;
            transform: scale(1.05);
            transition: all 0.15s ease;
        }

        .wizard-step-label {
            font-size: var(--typography-font-size-text-xs);
            font-weight: var(--typography-font-weight-semibold, 600);
        }

        .form-header {
            text-align: center;
            margin-bottom: var(--base-units-32);
        }

        .form-header h2 {
            margin-bottom: var(--base-units-8);
            margin-top: 0;
        }

        /* ── Tipografía Mobile First para todos los H2 de sección ──
           Especificación Figma: heading/m/bold (24px / 32px / -0.48px)
           Las reglas de Desktop sobreescribirán en @media (min-width: 992px) */
        .prizes-header h2,
        .steps-header h2,
        .faq-header h2,
        .winners-header h2,
        .form-header h2 {
            color: var(--color-text-neutral-primary, #232323);
            text-align: center;
            font-family: var(--typography-font-family-family, "Ubuntu Sans"), sans-serif;
            font-size: var(--typography-font-size-text-2xl, 24px);
            font-style: normal;
            font-weight: 700;
            line-height: var(--typography-line-height-text-2xl, 32px);
            letter-spacing: -0.48px;
            margin: 0 0 var(--base-units-8, 8px) 0;
        }

        /* Abastible Input Groups y Inputs */
        .abastible-input-group {
            margin-bottom: var(--base-units-24);
            display: flex;
            flex-direction: column;
            gap: var(--base-units-4);
        }

        .form-label {
            font-weight: var(--typography-font-weight-semibold, 600);
            font-size: var(--typography-font-size-text-sm);
            color: var(--color-text-neutral-primary);
        }

        .abastible-input {
            width: 100%;
            height: 48px;
            padding: 0 var(--base-units-16, 16px);
            border: 1px solid #D4D4D4; /* Borde Default */
            border-radius: var(--border-radius-s, 8px);
            font-family: var(--typography-font-family-family, "Ubuntu Sans"), sans-serif;
            font-size: var(--typography-font-size-text-base, 16px);
            color: var(--color-text-neutral-primary, #232323);
            background-color: #FFFFFF; /* Relleno Default */
            box-sizing: border-box;
            transition: border-color 0.2s ease, color 0.2s ease;
        }

        /* Bloquear flecha residual en inputs normales */
        input.abastible-input {
            background-image: none !important;
            padding-right: var(--base-units-16, 16px) !important;
        }

        /* Proteger la flecha SOLO en el dropdown */
        select.abastible-input {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important;
            background-position: calc(100% - var(--base-units-16, 16px)) center !important;
            background-size: 20px !important;
            padding-right: 48px !important;
        }

        /* --- Estado HOVER --- */
        .abastible-input:hover:not(:disabled) {
            border-color: #4C8DFF;
        }

        /* --- Estado FOCUS / FILLED (Azul UI Kit) --- */
        .abastible-input:focus,
        .abastible-input:focus-visible,
        .abastible-input.filled {
            outline: none;
            border-color: #0766FF;
        }

        /* --- Estado ERROR --- */
        .abastible-input.error {
            border-color: #EE3428;
            color: #EE3428;
        }

        .abastible-input.error::placeholder {
            color: #EE3428;
            opacity: 0.8;
        }

        .input-error-message {
            color: #EE3428;
            font-size: 12px;
            margin-top: 4px;
            display: none;
        }

        /* --- Estado DISABLED (Mantener lógica neutra) --- */
        .abastible-input:disabled {
            background-color: #F8F9FA;
            border-color: #CCCCCC;
            color: #999999;
            cursor: not-allowed;
            opacity: 0.7;
        }

        /* Celular Flex Group */
        .phone-group {
            display: flex;
            gap: var(--base-units-8);
            width: 100%;
        }

        .phone-prefix {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-fill-background-gray);
            border-width: 1px;
            border-style: solid;
            border-color: var(--color-border-emphasis-base);
            border-radius: var(--border-radius-s);
            padding: 0 var(--base-units-16);
            height: var(--base-units-48);
            font-weight: var(--typography-font-weight-semibold, 600);
            color: var(--color-text-neutral-primary);
            flex-shrink: 0;
            box-sizing: border-box;
        }

        .phone-input {
            flex-grow: 1;
        }

        /* Select Options / Tabs visuales */
        .gas-tabs {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--base-units-8);
            width: 100%;
        }

        .gas-tab-btn {
            flex: 1;
            height: var(--base-units-48);
            border: 1px solid var(--color-border-identity-main-orange);
            background-color: var(--color-colores-abastible-orange-50);
            color: var(--color-text-identity-main-orange);
            border-radius: var(--border-radius-s);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-weight: var(--typography-font-weight-semibold, 600);
            background-image: none;
            appearance: none;
            -webkit-appearance: none;
        }

        .gas-tab-btn.active {
            background-color: var(--color-fill-identity-main-orange);
            color: var(--color-colores-basic-white);
        }

        /* Input con Icono (Dirección) */
        .input-icon-right {
            position: relative;
            width: 100%;
        }

        .input-icon-right .abastible-input {
            padding-right: var(--base-units-40);
        }

        .input-icon-svg {
            position: absolute;
            right: var(--base-units-12);
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            fill: var(--color-fill-neutral-quaternary, #ccc);
        }

        /* Caja de Código */
        .code-box {
            border-width: 2px;
            border-style: dashed;
            border-color: var(--color-border-identity-main-orange);
            border-radius: var(--border-radius-m);
            padding: var(--base-units-12);
            margin-bottom: var(--base-units-32);
        }

        .code-box-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--base-units-16);
        }

        .code-title {
            margin: 0;
        }

        .code-link {
            font-size: var(--typography-font-size-text-sm);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: var(--base-units-4);
        }

        .code-input {
            width: 100%;
            border-width: 1px;
            border-style: solid;
            border-color: var(--color-border-identity-main-orange);
            border-radius: var(--border-radius-s);
            height: var(--base-units-48);
            padding: 0 var(--base-units-16);
            font-size: var(--typography-font-size-text-xl);
            font-weight: var(--typography-font-weight-bold, 700);
            text-align: center;
            background-color: var(--color-colores-basic-white);
            outline: none;
            box-sizing: border-box;
        }

        .code-input::placeholder {
            color: var(--color-text-identity-main-orange, #ff6600);
            opacity: 0.5;
        }

        .code-helper-right {
            display: table;
            text-align: right;
            font-size: var(--typography-font-size-text-xs);
            margin-top: var(--base-units-8);
            background-color: var(--color-colores-abastible-orange-100);
            margin-left: auto;
            padding: 4px 8px;
            border-radius: 10px;
        }

        /* Caja de Consentimientos */
        .consent-group {
            display: flex;
            align-items: flex-start;
            gap: var(--base-units-8, 8px);
            margin-bottom: var(--base-units-8, 8px);
        }
        .consent-group:last-child {
            margin-bottom: 0;
        }
        .terms-checkbox {
            width: 16px;
            height: 16px;
            cursor: pointer;
            flex-shrink: 0;
            margin-top: 2px;
            accent-color: #0766FF;
        }
        .terms-text {
            font-size: 11px;
            line-height: 1.3;
            margin: 0;
        }

        /* Sub-grupo canales de marketing */
        .consent-subgroup {
            padding-left: var(--base-units-28, 28px);
            margin-top: calc(var(--base-units-16, 16px) * -0.5);
        }

        /* Links dentro de textos de consentimiento */
        .consent-link {
            color: var(--color-fill-identity-main-orange, #FE5000);
            text-decoration: underline;
            cursor: pointer;
        }
        .consent-link:hover {
            opacity: 0.8;
        }

        /* Botones Acción Steps */
        .step-actions {
            display: flex;
            gap: var(--base-units-16);
            margin-top: var(--base-units-32);
        }

        .btn-solid:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .form-hint {
            font-size: 12px;
            color: var(--color-text-neutral-tertiary, #888);
            margin: 4px 0 0;
        }

        .btn-solid {
            border: none;
            padding: 0 var(--base-units-32);
            height: var(--base-units-48);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--typography-font-family-Family, "Ubuntu Sans");
            font-style: normal;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            flex: 1;
            white-space: nowrap;
            gap: 8px;
        }

        .btn-outline {
            background-color: transparent;
            border: 2px solid var(--color-border-identity-main-orange);
            padding: 0 var(--base-units-32);
            height: var(--base-units-48);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--typography-font-size-text-md);
            cursor: pointer;
            box-sizing: border-box;
            flex: 1;
            white-space: nowrap;
        }

        .form-step {
            display: none;
        }

        .form-step.active {
            display: block;
        }

        /* --- Sección Premios --- */
        .prizes-container {
            /* Eliminamos el padding heredado de .container para evitar el doble margen */
            padding-left: 0 !important;
            padding-right: 0 !important;
            /* Aseguramos que el ancho sea total para que mande el padding de la sección madre */
            width: 100%;
            max-width: var(--grid-max-width-content, 1184px) !important;
            margin: 0 auto;
        }

        .prizes-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-l, 24px);
            padding-top: var(--grid-margin-vertical, 40px);
            padding-bottom: var(--grid-margin-vertical, 40px);
        }

        .prizes-header {
            text-align: center;
            margin-bottom: var(--spacing-m, 16px);
            width: 100%;
        }


        .prizes-header p {
            margin: 0 0 var(--base-units-16) 0;
            color: var(--color-text-neutral-secondary, #666);
            font-size: var(--typography-font-size-text-md);
        }

        .prizes-subtitle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--base-units-8);
            font-weight: var(--typography-font-weight-bold, 700);
            font-size: var(--typography-font-size-text-lg);
            color: var(--color-text-neutral-primary);
        }

        .prizes-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--grid-gutter, 16px);
            width: 100%;
        }

        @media (min-width: 768px) {
            .prizes-grid {
                max-width: 800px;
                margin: 0 auto;
            }
        }

        .prize-card {
            position: relative;
            overflow: hidden;
            border-radius: var(--border-radius-xl, 24px);
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            min-height: 280px;
        }

        .prize-card.card-large {
            grid-column: 1 / -1;
            min-height: 350px;
        }

        .prize-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
            z-index: 1;
        }

        .prize-badge {
            position: absolute;
            top: 0;
            right: 0;
            background-color: var(--color-fill-identity-main-orange);
            color: var(--color-colores-basic-white);
            border-bottom-left-radius: var(--border-radius-m, 12px);
            padding: var(--base-units-12, 12px) var(--base-units-16, 16px);
            font-weight: var(--typography-font-weight-bold, 700);
            font-size: var(--typography-font-size-text-xs);
            z-index: 2;
        }

        .prize-content {
            position: relative;
            z-index: 2;
            padding: var(--spacing-s, 12px) !important;
            color: var(--color-colores-basic-white);
            width: 100%;
            box-sizing: border-box;
        }

        .prize-content h3 {
            font-size: var(--typography-font-size-text-base, 16px);
            /* 16px para mobile */
            font-weight: 700;
            margin: 0 0 4px 0;
        }

        .prize-content p {
            font-size: var(--typography-font-size-text-sm, 14px);
            /* 14px para mobile */
            font-weight: 500;
            line-height: normal;
            margin: 0;
        }

        .auto-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            background-color: var(--color-fill-identity-main-orange);
            color: var(--color-colores-basic-white);
            border-radius: var(--border-radius-m, 12px);
            padding: var(--base-units-12, 12px) 0;
            margin-top: var(--base-units-16, 16px);
            border: none;
        }

        .auto-btn strong {
            font-size: var(--typography-font-size-heading-xl, 36px);
            line-height: 1;
        }

        .auto-btn span {
            font-size: var(--typography-font-size-text-xs);
            opacity: 0.9;
            margin-top: var(--base-units-4, 4px);
        }

        /* --- Sección Pasos para Participar --- */
        .steps-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: var(--grid-margin-vertical, 40px);
            padding-bottom: var(--grid-margin-vertical, 40px);
            gap: var(--spacing-xl, 32px);
            background-color: var(--color-fill-background-white, #ffffff);
        }

        .steps-header {
            text-align: center;
        }


        .steps-header p {
            margin: 0;
            color: var(--color-text-neutral-secondary, #666);
            font-size: var(--typography-font-size-text-md, 16px);
        }

        .steps-container {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-m, 24px);
            width: 100%;
            max-width: var(--grid-max-width-content, 1024px);
        }

        .step-card {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: var(--spacing-s, 16px);
            padding: var(--spacing-s, 16px);
            border: 1px solid var(--color-border-emphasis-subtle, #e0e0e0);
            border-radius: var(--border-radius-l, 20px);
            background-color: var(--color-fill-background-white, #fff);
        }

        .step-icon-box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 77px;
            height: 77px;
            flex-shrink: 0;
            border-radius: var(--border-radius-m, 16px);
        }

        .step-icon-svg {
            width: 32px;
            height: 32px;
            stroke-width: 1.5;
        }

        .step-text-content {
            display: flex;
            flex-direction: column;
            gap: var(--base-units-4, 4px);
            flex-grow: 1;
        }

        .step-title {
            margin: 0;
            font-weight: var(--typography-font-weight-bold, 700);
            font-size: var(--typography-font-size-text-lg, 18px);
            color: var(--color-text-neutral-primary);
        }

        .step-desc {
            margin: 0;
            font-size: var(--typography-font-size-text-sm, 14px);
            color: var(--color-text-neutral-secondary);
            line-height: var(--typography-line-height-text-sm, 1.4);
        }

        /* Ajustes Desktop para Pasos */
        @media (min-width: 992px) {
            .steps-section {
                padding-top: var(--spacing-6xl);
                padding-bottom: var(--spacing-6xl);
            }

            .steps-container {
                flex-direction: row;
                justify-content: center;
                gap: var(--spacing-m, 24px);
                max-width: var(--grid-max-width-content, 1184px);
            }

            /* Cada tarjeta usa un poco más de un tercio y altura igualada */
            .step-card {
                flex: 1;
                flex-direction: column;
                text-align: center;
                align-items: center;
                padding: var(--spacing-xl, 32px) var(--spacing-m, 24px);
            }

            /* 5. Ícono centrado */
            .step-icon-box {
                margin: 0 auto var(--spacing-m, 16px);
            }

            .gas-tabs{
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* --- Sección Preguntas Frecuentes --- */
        .faq-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: var(--grid-margin-vertical, 40px);
            padding-bottom: var(--grid-margin-vertical, 40px);
            gap: var(--spacing-l, 24px);
            width: 100%;
            box-sizing: border-box;
        }

        .faq-header {
            text-align: center;
        }


        .faq-header p {
            margin: 0;
            color: var(--color-text-neutral-secondary, #666);
            font-size: var(--typography-font-size-text-md, 16px);
        }

        .faq-container {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-m, 24px);
            width: 100%;
            max-width: var(--grid-max-width-content, 1024px);
        }

        .faq-item {
            background-color: var(--color-fill-background-accordion, #fff);
            border-radius: var(--border-radius-m, 16px);
            padding: var(--spacing-m, 24px);
            transition: all 0.3s ease;
        }

        .faq-summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-weight: var(--typography-font-weight-bold, 700);
            list-style: none;
            color: var(--color-text-neutral-primary);
            transition: color 0.3s ease;
        }

        .faq-summary::-webkit-details-marker {
            display: none;
        }

        .faq-chevron {
            transition: transform 0.3s ease;
            color: var(--color-fill-identity-main-orange);
            flex-shrink: 0;
        }

        .faq-item[open] .faq-summary {
            color: var(--color-fill-identity-main-orange);
            border-bottom: 1px solid var(--color-border-emphasis-subtle, #e0e0e0);
            padding-bottom: var(--spacing-m, 24px);
            margin-bottom: var(--spacing-m, 24px);
        }

        .faq-item[open] .faq-chevron {
            transform: rotate(180deg);
        }

        .faq-content {
            color: var(--color-text-neutral-secondary, #666);
            font-size: var(--typography-font-size-text-md, 16px);
            line-height: var(--typography-line-height-text-md, 1.5);
        }

        /* --- Últimos Ganadores --- */
        .winners-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: var(--grid-margin-vertical, 40px);
            padding-bottom: var(--grid-margin-vertical, 40px);
            gap: var(--spacing-xl, 32px);
        }

        .winners-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-s, 12px);
            text-align: center;
            width: 100%;
        }


        .winners-list {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-m, 24px);
            width: 100%;
            max-width: 600px;
        }

        .winner-card {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: var(--spacing-xs, 8px) var(--spacing-s, 16px) var(--spacing-xs, 8px) var(--spacing-xs, 8px);
            gap: var(--spacing-s, 16px);
        }

        .winner-icon-box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--base-units-48, 48px);
            height: var(--base-units-48, 48px);
            flex-shrink: 0;
            border-radius: var(--border-radius-m, 16px);
        }

        .winner-name {
            flex-grow: 1;
            margin: 0;
            font-weight: var(--typography-font-weight-bold, 700);
            font-size: var(--typography-font-size-text-md, 16px);
            color: var(--color-text-neutral-primary);
        }

        .winner-prize {
            font-size: var(--typography-font-size-text-sm, 14px);
            font-weight: var(--typography-font-weight-medium, 500);
            text-align: right;
        }

        /* --- Footer --- */
        .main-footer {
            width: 100%;
        }

        /* Zona naranja: wrapper full-width, contenido centrado */
        .footer-top {
            width: 100%;
        }

        .footer-top-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-xl, 32px);
            padding: var(--spacing-xl, 32px) var(--grid-margin-horizontal, 16px);
        }

        .footer-social-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-m, 16px);
        }

        .footer-social-text {
            font-size: var(--typography-font-size-text-lg, 18px);
            font-weight: var(--typography-font-weight-bold, 700);
            color: var(--color-colores-basic-white, #fff);
            margin: 0;
        }

        .footer-social-icons {
            display: flex;
            gap: var(--spacing-s, 12px);
            flex-wrap: wrap;
            justify-content: center;
        }

        /* Divisor vertical — oculto en mobile */
        .footer-divider {
            display: none;
        }

        .footer-action {
            display: flex;
            justify-content: center;
        }

        /* íonos de redes sociales */
        .social-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--base-units-40, 40px);
            height: var(--base-units-40, 40px);
            border-radius: var(--border-radius-full, 9999px);
            transition: transform 0.2s ease;
            text-decoration: none;
        }

        .social-icon:hover {
            transform: scale(1.1);
        }

        .social-icon svg {
            width: 20px;
            height: 20px;
        }

        /* Botón CTA del footer */
        .btn-terms {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: var(--spacing-s, 12px) var(--spacing-xl, 32px);
            text-decoration: none;
            font-size: var(--typography-font-size-text-lg, 18px);
            font-weight: var(--typography-font-weight-bold, 700);
            border-radius: var(--border-radius-full, 9999px);
            transition: opacity 0.2s ease;
            white-space: nowrap;
        }

        .btn-terms:hover {
            opacity: 0.9;
        }

        /* Zona blanca inferior: telefónos */
        .footer-bottom {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-m, 16px);
            padding: var(--spacing-m, 16px) var(--grid-margin-horizontal, 16px);
        }

        .footer-bottom-text {
            color: var(--color-text-neutral-primary, #333333);
            font-size: var(--typography-font-size-text-sm, 14px);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* --- Ajustes Exclusivos Desktop (>992px) --- */
        @media (min-width: 992px) {

            /* 1. Hero Section */
            .hero-top-content {
                align-items: flex-start;
                text-align: left;
                gap: var(--spacing-m, 24px);
            }

            .hero-title {
                text-align: left;
                font-size: var(--typography-font-size-text-6xl, 48px);
                line-height: var(--typography-line-height-text-6xl, 56px);
                letter-spacing: -0.96px;
            }

            .hero-subtitle {
                text-align: left;
                font-size: var(--typography-font-size-text-xl, 20px);
                line-height: var(--typography-line-height-text-xl, 28px);
            }

            .hero-bottom-actions {
                flex-direction: row;
                justify-content: flex-start;
                width: auto;
                gap: var(--spacing-m);
            }

            /* 2. Hero Componentes Reemplazados Arriba */

            /* 3. Sección Premios */
            .prizes-section {
                /* Solo padding vertical — el centrado lo maneja el contenedor interno */
                padding: var(--spacing-6xl, 80px) 0;
            }

            /* Grilla 3 columnas en 1 fila: las 2 primeras iguales, la 3ra más ancha */
            .prizes-grid {
                display: grid;
                grid-template-columns: 1fr 1fr 2.2fr;
                gap: var(--spacing-m, 16px);
                width: 100%;
                max-width: var(--grid-max-width-content, 1184px);
                margin: 0 auto;
            }

            /* Todas las tarjetas: altura fija, ancho controlado por el grid */
            .prize-card {
                height: 400px;
                width: auto;
            }

            /* Gran Premio: columna propia (2.2fr) — sin span, sin width fijo */
            .prize-card.card-large {
                grid-column: auto;
                width: 100%;
                height: 400px;
            }

            /* Padding interno generoso */
            .prize-content {
                padding: var(--spacing-xl, 32px);
            }

            /* Tipografía desktop */
            .prize-content h3 {
                font-size: var(--typography-font-size-text-2xl, 24px);
                /* Se mantiene en 24px para desktop */
            }

            .prize-content p {
                font-size: var(--typography-font-size-text-base, 16px);
                /* Se mantiene en 16px para desktop */
            }

            /* 4. Contenedores — steps-container ya gestionado en su bloque propio arriba */

            /* Sección FAQ: padding en desktop */
            .faq-section {
                padding-top: var(--spacing-6xl, 80px);
                padding-bottom: var(--spacing-6xl, 80px);
            }

            /* Acordeón: ancho completo del content area */
            .faq-container {
                max-width: var(--grid-max-width-content, 1184px);
                width: 100%;
                margin: 0 auto;
            }

            /* 5. Últimos Ganadores — Desktop */
            .winners-section {
                padding-top: var(--spacing-6xl, 80px);
                padding-bottom: var(--spacing-6xl, 80px);
            }

            /* Lista: fila horizontal, ancho completo del content area */
            .winners-list {
                flex-direction: row;
                gap: var(--spacing-xl, 32px);
                max-width: var(--grid-max-width-content, 1184px);
                width: 100%;
                margin: 0 auto;
            }

            /* Tarjetas: distribución equitativa en la fila */
            .winner-card {
                flex: 1;
                padding: var(--spacing-xs, 8px) var(--spacing-s, 12px) var(--spacing-xs, 8px) var(--spacing-xs, 8px);
            }

            /* Ícono: más grande en desktop */
            .winner-icon-box {
                width: 64px;
                height: 64px;
                border-radius: var(--border-radius-m, 16px);
            }

            /* Nombre del ganador: tipografía legible */
            .winner-name {
                font-size: var(--typography-font-size-text-lg, 18px);
            }

            /* Premio: alineado a la derecha */
            .winner-prize {
                text-align: right;
            }

            /* 6. Footer Desktop */
            .footer-top-content {
                flex-direction: row;
                justify-content: center;
                gap: var(--spacing-4xl, 56px);
                padding: var(--spacing-4xl, 56px) 0;
                max-width: var(--grid-max-width-content, 1184px);
                margin: 0 auto;
            }

            .footer-social-wrapper {
                flex-direction: row;
                align-items: center;
                gap: var(--spacing-l, 24px);
            }

            /* Divisor vertical visible en desktop */
            .footer-divider {
                display: block;
                width: 1px;
                height: 32px;
                background-color: var(--color-fill-background-white, #fff);
                opacity: 0.5;
                flex-shrink: 0;
            }

            .footer-bottom {
                flex-direction: row;
                justify-content: center;
                gap: var(--spacing-3xl, 48px);
                padding: var(--spacing-l, 24px) 0;
                max-width: var(--grid-max-width-content, 1184px);
                margin: 0 auto;
            }
        }