/*
Theme Name: Abriguemos Sorteos
Theme URI: https://abriguemossorteoscr.com
Author: Wolk Software
Author URI: https://wolksoftware.com
Description: Tema custom para Abriguemos Sorteos Costa Rica - Asociación comprometida con brindar apoyo integral a personas en situación de vulnerabilidad.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abriguemos
*/

/* ==========================================================================
   TABLA DE CONTENIDOS
   ==========================================================================
   1. Variables CSS (Colores, Tipografía, Espaciado)
   2. Reset & Base
   3. Utilidades
   4. Tipografía
   5. Botones
   6. Header
   7. Menú Mobile (Sidebar)
   8. Hero / Banner
   9. Sección Propósito
   10. Sección Términos
   11. Sección FAQ
   12. Footer
   13. Formularios
   14. Cards
   15. WooCommerce Overrides
   16. Páginas de Usuario (Login, Mi Cuenta, Boletas)
   17. Selección de Números
   18. Animaciones
   19. Media Queries
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES CSS
   ========================================================================== */
:root {
    /* -------------------------
       Paleta de Colores
       ------------------------- */
    --color-primary: #0056A6;           /* Azul principal */
    --color-primary-dark: #003d75;      /* Azul oscuro */
    --color-primary-light: #1a6fc2;     /* Azul claro */
    --color-secondary: #DC3545;         /* Rojo */
    --color-secondary-dark: #b02a37;    /* Rojo oscuro */
    --color-accent: #FFD700;            /* Dorado/Amarillo */
    --color-white: #FFFFFF;
    --color-light: #F5F5F5;
    --color-gray: #6c757d;
    --color-gray-light: #e9ecef;
    --color-dark: #1a1a1a;
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    
    /* -------------------------
       Tipografía
       ------------------------- */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Bebas Neue', 'Impact', sans-serif;
    
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */
    --font-size-4xl: 2.5rem;    /* 40px */
    --font-size-5xl: 3rem;      /* 48px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* -------------------------
       Espaciado
       ------------------------- */
    --spacing-xs: 0.25rem;      /* 4px */
    --spacing-sm: 0.5rem;       /* 8px */
    --spacing-md: 1rem;         /* 16px */
    --spacing-lg: 1.5rem;       /* 24px */
    --spacing-xl: 2rem;         /* 32px */
    --spacing-2xl: 3rem;        /* 48px */
    --spacing-3xl: 4rem;        /* 64px */
    --spacing-4xl: 6rem;        /* 96px */
    
    /* -------------------------
       Bordes y Sombras
       ------------------------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    
    /* -------------------------
       Transiciones
       ------------------------- */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    
    /* -------------------------
       Z-Index
       ------------------------- */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
    
    /* -------------------------
       Contenedor
       ------------------------- */
    --container-max: 1200px;
    --container-padding: 20px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

/**
 * Box-sizing universal
 * Incluye padding y border en el cálculo del ancho/alto
 */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/**
 * HTML base
 * Scroll suave para anclas
 */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

/**
 * Body
 * Configuración base del documento
 */
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-dark);
    background-color: var(--color-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/**
 * Links base
 */
a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

/**
 * Imágenes responsivas
 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/**
 * Listas sin estilo por defecto
 */
ul, ol {
    list-style: none;
}

/**
 * Tablas
 */
table {
    border-collapse: collapse;
    width: 100%;
}

/**
 * Formularios - Reset básico
 */
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/**
 * Focus visible para accesibilidad
 */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   3. UTILIDADES
   ========================================================================== */

/**
 * Contenedor principal
 * Centra el contenido con ancho máximo
 */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/**
 * Contenedor fluido (100% ancho)
 */
.container-fluid {
    width: 100%;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/**
 * Screen reader only
 * Oculta visualmente pero mantiene accesibilidad
 */
.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;
}

/**
 * Flex utilities
 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/**
 * Text utilities
 */
.text-center { text-align: center; }
.text-white { color: var(--color-white); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }

/**
 * Background utilities
 */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-white { background-color: var(--color-white); }
.bg-light { background-color: var(--color-light); }

/* ==========================================================================
   4. TIPOGRAFÍA
   ========================================================================== */

/**
 * Headings
 * Estilos para títulos h1-h6
 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-dark);
    margin-bottom: var(--spacing-md);
}

h1, .h1 { font-size: var(--font-size-5xl); }
h2, .h2 { font-size: var(--font-size-4xl); }
h3, .h3 { font-size: var(--font-size-3xl); }
h4, .h4 { font-size: var(--font-size-2xl); }
h5, .h5 { font-size: var(--font-size-xl); }
h6, .h6 { font-size: var(--font-size-lg); }

/**
 * Títulos estilo display (Bebas Neue)
 * Usado en banners y secciones principales
 */
.display-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/**
 * Título de sección
 * Estilo consistente para títulos de secciones
 */
.section-title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--spacing-xl);
}

/**
 * Párrafos
 */
p {
    margin-bottom: var(--spacing-md);
}

p:last-child {
    margin-bottom: 0;
}

/**
 * Lead text (texto destacado)
 */
.lead {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   5. BOTONES
   ========================================================================== */

/**
 * Botón base
 * Estilos compartidos por todos los botones
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 12px 24px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    transition: all var(--transition-normal);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/**
 * Botón con icono
 */
.btn svg,
.btn img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/**
 * Botón primario
 */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

/**
 * Botón secundario (Rojo)
 */
.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

/**
 * Botón outline (contorno)
 */
.btn-outline {
    background-color: transparent;
    border-color: var(--color-white);
    color: var(--color-white);
}

.btn-outline:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

/**
 * Botón CTA (Call to Action)
 * Estilo especial para el botón principal de compra
 */
.btn-cta {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    border: 3px solid var(--color-accent);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    padding: 14px 28px;
    font-size: var(--font-size-sm);
}

.btn-cta:hover {
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
    color: var(--color-white);
}

/**
 * Botón imagen (para botón de compra con imagen)
 */
.btn-image {
    padding: 0;
    border: none;
    background: none;
    display: inline-block;
}

.btn-image img {
    height: 50px;
    width: auto;
    transition: transform var(--transition-normal);
}

.btn-image:hover img {
    transform: scale(1.05);
}

/**
 * Tamaños de botón
 */
.btn-sm {
    padding: 8px 16px;
    font-size: var(--font-size-xs);
}

.btn-lg {
    padding: 16px 32px;
    font-size: var(--font-size-base);
}

/* ==========================================================================
   6. HEADER
   ========================================================================== */

/**
 * Header principal
 * Barra de navegación fija en la parte superior
 */
.site-header {
    background-color: var(--color-primary);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-md);
}

/**
 * Contenedor del header
 * Flex para distribuir elementos
 */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

/**
 * Sección izquierda del header
 * Contiene: hamburguesa, carrito, login
 */
.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/**
 * Sección derecha del header
 * Contiene: botón CTA, logos
 */
.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/**
 * Botón de menú hamburguesa
 */
.menu-toggle {
    background-color: var(--color-white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: transform var(--transition-normal);
    border: none;
}

.menu-toggle:hover {
    transform: scale(1.05);
}

/* Líneas del hamburguesa */
.menu-toggle span {
    display: block;
    width: 22px;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: all var(--transition-normal);
}

/* Animación cuando está abierto */
.menu-toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/**
 * Icono del carrito
 */
.cart-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    padding: 8px;
    transition: transform var(--transition-normal);
}

.cart-icon:hover {
    transform: scale(1.1);
    color: var(--color-white);
}

.cart-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

/* Contador de items en carrito */
.cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/**
 * Logos del header (JPS y Abriguemos)
 */
.header-logos {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.logo-jps img,
.logo-abriguemos img {
    height: 55px;
    width: auto;
    transition: transform var(--transition-normal);
}

.logo-jps img:hover,
.logo-abriguemos img:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   7. MENÚ MOBILE (SIDEBAR)
   ========================================================================== */

/**
 * Overlay oscuro detrás del menú
 */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.mobile-menu-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/**
 * Panel del menú lateral
 */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100vh;
    background-color: var(--color-white);
    z-index: var(--z-modal);
    overflow-y: auto;
    transition: left var(--transition-normal);
    box-shadow: var(--shadow-xl);
}

.mobile-menu.is-open {
    left: 0;
}

/**
 * Header del menú mobile
 */
.mobile-menu-header {
    background-color: var(--color-primary);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-menu-logo img {
    height: 40px;
    width: auto;
}

/**
 * Botón de cerrar menú
 */
.mobile-menu-close {
    background-color: var(--color-white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.mobile-menu-close:hover {
    transform: scale(1.1);
}

/**
 * Navegación del menú mobile
 */
.mobile-nav {
    padding: var(--spacing-lg);
}

.mobile-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.mobile-nav li {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mobile-nav a {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.mobile-nav a:hover,
.mobile-nav a.active,
.mobile-nav .current-menu-item a {
    background-color: var(--color-light);
    color: var(--color-primary);
}

.mobile-nav svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}

/**
 * Submenú mobile
 */
.mobile-nav .sub-menu {
    padding-left: var(--spacing-xl);
    margin-top: var(--spacing-xs);
}

.mobile-nav .sub-menu a {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}

.mobile-nav .sub-menu a::before {
    content: '★';
    font-size: 10px;
    color: var(--color-primary);
}

/* ==========================================================================
   8. HERO / BANNER
   ========================================================================== */

/**
 * Sección hero principal
 * Contiene el carrusel de banners
 */
.hero-section {
    position: relative;
    background-color: var(--color-primary);
    overflow: hidden;
}

/**
 * Contenedor del carrusel
 */
.hero-carousel {
    position: relative;
    width: 100%;
}

/**
 * Slide individual
 */
.hero-slide {
    position: relative;
    width: 100%;
    display: none;
}

.hero-slide.is-active {
    display: block;
}

/**
 * Video/Imagen del banner
 */
.hero-slide video,
.hero-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-slide video {
    object-fit: cover;
}

/**
 * Indicadores del carrusel (dots)
 */
.hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--spacing-sm);
    z-index: 10;
}

.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.hero-dot:hover,
.hero-dot.is-active {
    background-color: var(--color-white);
    transform: scale(1.2);
}

/**
 * Botón CTA flotante sobre el banner
 */
.hero-cta {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* ==========================================================================
   9. SECCIÓN PROPÓSITO
   ========================================================================== */

/**
 * Contenedor de la sección propósito
 */
.section-proposito {
    padding: var(--spacing-4xl) 0;
    background-color: var(--color-white);
}

/**
 * Grid de la sección
 */
.proposito-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

/**
 * Contenido de texto
 */
.proposito-content {
    padding-right: var(--spacing-xl);
}

.proposito-content .section-title {
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
}

.proposito-content p {
    font-size: var(--font-size-base);
    color: var(--color-gray);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-lg);
}

/**
 * Galería de imágenes del propósito
 */
.proposito-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 150px);
    gap: var(--spacing-md);
}

.proposito-gallery-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.proposito-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.proposito-gallery-item:hover img {
    transform: scale(1.05);
}

/* Item grande que ocupa 2 columnas */
.proposito-gallery-item.large {
    grid-column: span 2;
}

/* ==========================================================================
   10. SECCIÓN TÉRMINOS Y CONDICIONES
   ========================================================================== */

/**
 * Contenedor de términos
 */
.section-terminos {
    padding: var(--spacing-4xl) 0;
    background-color: var(--color-light);
}

/**
 * Grid de términos
 */
.terminos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

/**
 * Lista de términos
 */
.terminos-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/**
 * Item de término individual
 */
.termino-item {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.termino-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.termino-text {
    padding-top: var(--spacing-sm);
    color: var(--color-gray);
    line-height: var(--line-height-relaxed);
}

/**
 * CTA de términos
 */
.terminos-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-2xl);
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   11. SECCIÓN FAQ
   ========================================================================== */

/**
 * Contenedor FAQ
 */
.section-faq {
    padding: var(--spacing-4xl) 0;
    background-color: var(--color-white);
}

/**
 * Lista de preguntas
 */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/**
 * Item de pregunta
 */
.faq-item {
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition-normal);
}

.faq-item:hover {
    box-shadow: var(--shadow-md);
}

/**
 * Pregunta (botón expandible)
 */
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: var(--color-white);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.faq-question:hover {
    background-color: var(--color-light);
}

.faq-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
}

.faq-text {
    flex: 1;
}

.faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    transition: transform var(--transition-normal);
}

.faq-item.is-open .faq-icon {
    transform: rotate(180deg);
}

/**
 * Respuesta (contenido expandible)
 */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.faq-item.is-open .faq-answer {
    max-height: 500px;
}

.faq-answer-content {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    color: var(--color-gray);
    line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

/**
 * Footer principal
 */
.site-footer {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding-top: var(--spacing-4xl);
    position: relative;
}

/**
 * Curva decorativa superior (roja)
 */
.site-footer::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: var(--color-secondary);
    clip-path: ellipse(60% 100% at 50% 100%);
}

/**
 * Contenedor del footer
 */
.footer-container {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto;
    gap: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

/**
 * Logo del footer
 */
.footer-logo img {
    height: 100px;
    width: auto;
}

/**
 * Secciones del footer (Contacto, Enlaces)
 */
.footer-section h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-lg);
    color: var(--color-white);
}

.footer-section ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-section a {
    color: rgba(255, 255, 255, 0.85);
    transition: all var(--transition-fast);
}

.footer-section a:hover {
    color: var(--color-white);
    padding-left: 5px;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--spacing-sm);
}

/**
 * Logo JPS en footer
 */
.footer-jps {
    display: flex;
    align-items: flex-start;
}

.footer-jps img {
    height: 80px;
    width: auto;
}

/**
 * Línea inferior del footer
 */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--spacing-lg) 0;
    text-align: center;
}

.footer-bottom p {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* ==========================================================================
   13. FORMULARIOS
   ========================================================================== */

/**
 * Contenedor de formulario
 */
.form-container {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    margin: 0 auto;
}

.form-title {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xl);
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    text-transform: uppercase;
}

/**
 * Grupo de campo
 */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

/**
 * Inputs y selects
 */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: var(--font-size-base);
    color: var(--color-dark);
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-light);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 86, 166, 0.1);
}

.form-input::placeholder {
    color: var(--color-gray);
}

/**
 * Textarea
 */
.form-textarea {
    min-height: 120px;
    resize: vertical;
}

/**
 * Checkbox y Radio
 */
.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.form-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

/**
 * Fila de campos (2 columnas)
 */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

/**
 * Link dentro de formulario
 */
.form-link {
    display: block;
    text-align: center;
    margin-top: var(--spacing-lg);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.form-link:hover {
    text-decoration: underline;
}

/**
 * Mensajes de error
 */
.form-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

.form-input.has-error {
    border-color: var(--color-danger);
}

/* ==========================================================================
   14. CARDS
   ========================================================================== */

/**
 * Card base
 */
.card {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.card-image {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-body {
    padding: var(--spacing-lg);
}

.card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    margin-bottom: var(--spacing-sm);
}

.card-text {
    color: var(--color-gray);
    font-size: var(--font-size-sm);
}

/**
 * Card de estadísticas (Mi cuenta)
 */
.stat-card {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: var(--shadow-md);
}

.stat-card-title {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

.stat-card-value {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--spacing-md);
}

.stat-card.danger .stat-card-title,
.stat-card.danger .stat-card-value {
    color: var(--color-secondary);
}

/* ==========================================================================
   15. WOOCOMMERCE OVERRIDES
   ========================================================================== */

/**
 * Botones de WooCommerce
 */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius-full) !important;
    padding: 12px 24px !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: all var(--transition-normal) !important;
}

.woocommerce .button:hover,
.woocommerce button.button:hover {
    background-color: var(--color-primary-dark) !important;
}

/**
 * Mensajes de WooCommerce
 */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--color-primary) !important;
}

.woocommerce-message::before {
    color: var(--color-primary) !important;
}

.woocommerce-error {
    border-top-color: var(--color-danger) !important;
}

/**
 * Formularios de checkout
 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
    padding: 14px 16px !important;
    border: 2px solid var(--color-gray-light) !important;
    border-radius: var(--radius-md) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 166, 0.1) !important;
}

/**
 * Tabla de carrito
 */
.woocommerce table.cart {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.woocommerce table.cart th {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-md) !important;
}

/* ==========================================================================
   16. PÁGINAS DE USUARIO
   ========================================================================== */

/**
 * Layout de página con sidebar
 */
.user-page-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: calc(100vh - 200px);
}

/**
 * Sidebar del usuario
 */
.user-sidebar {
    background-color: var(--color-primary);
    padding: var(--spacing-xl);
}

.user-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.user-nav a {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    color: var(--color-white);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.user-nav a:hover,
.user-nav a.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

.user-nav svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/**
 * Contenido principal del usuario
 */
.user-content {
    background-color: var(--color-secondary);
    padding: var(--spacing-2xl);
}

.user-content-inner {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    min-height: 100%;
}

/**
 * Header de mi cuenta
 */
.account-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

/**
 * Tabla de boletas
 */
.boletas-table {
    width: 100%;
    border-collapse: collapse;
}

.boletas-table th {
    background-color: var(--color-light);
    padding: var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    border-bottom: 2px solid var(--color-gray-light);
}

.boletas-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-light);
    color: var(--color-gray);
}

.boletas-table tr:hover {
    background-color: var(--color-light);
}

.boletas-table .btn {
    padding: 8px 16px;
    font-size: var(--font-size-xs);
}

/* ==========================================================================
   17. SELECCIÓN DE NÚMEROS
   ========================================================================== */

/**
 * Página de selección de números
 */
.numeros-page {
    padding: var(--spacing-xl);
    background-color: var(--color-light);
    min-height: 100vh;
}

/**
 * Barra de estado (timer, total)
 */
.numeros-status-bar {
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-lg);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-md);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-xl);
}

.numeros-timer {
    background-color: var(--color-dark);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-family: monospace;
    font-size: var(--font-size-sm);
}

/**
 * Layout de selección
 */
.numeros-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-xl);
}

/**
 * Panel de sorteo (izquierda)
 */
.sorteo-panel {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
}

.sorteo-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
}

.sorteo-title {
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

.sorteo-premio {
    text-align: center;
    color: var(--color-success);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xl);
}

/**
 * Control de serie
 */
.serie-control {
    background-color: var(--color-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.serie-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    transition: background-color var(--transition-fast);
}

.serie-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.serie-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    min-width: 80px;
    text-align: center;
}

/**
 * Grid de números
 */
.numeros-grid-container {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
}

.numeros-grid-header {
    margin-bottom: var(--spacing-lg);
}

.numeros-legend {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-gray);
}

.legend-dot {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
}

.legend-dot.disponible {
    background-color: var(--color-white);
    border: 2px solid var(--color-gray-light);
}

.legend-dot.seleccionado {
    background-color: var(--color-secondary);
}

.legend-dot.vendido {
    background-color: var(--color-gray-light);
}

/**
 * Grid de números
 */
.numeros-grid {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: var(--spacing-sm);
}

.numero-btn {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: 2px solid var(--color-gray-light);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.numero-btn:hover:not(.vendido):not(.seleccionado) {
    border-color: var(--color-primary);
    background-color: rgba(0, 86, 166, 0.1);
}

.numero-btn.seleccionado {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.numero-btn.vendido {
    background-color: var(--color-gray-light);
    border-color: var(--color-gray-light);
    color: var(--color-gray);
    cursor: not-allowed;
}

/**
 * Selección actual
 */
.numeros-selection {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-gray-light);
}

.selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.selection-clear {
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.selection-clear:hover {
    text-decoration: underline;
    color: var(--color-secondary);
}

.numeros-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.numeros-actions .btn {
    flex: 1;
}

/* ==========================================================================
   18. ANIMACIONES
   ========================================================================== */

/**
 * Fade in desde abajo
 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/**
 * Fade in
 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease forwards;
}

/**
 * Pulse (para elementos destacados)
 */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/**
 * Bounce (para CTAs)
 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-bounce {
    animation: bounce 2s infinite;
}

/* ==========================================================================
   19. MEDIA QUERIES
   ========================================================================== */

/**
 * Tablet (max-width: 992px)
 */
@media (max-width: 992px) {
    /* Header */
    .btn-cta span {
        display: none;
    }
    
    .header-logos .logo-jps {
        display: none;
    }
    
    /* Propósito */
    .proposito-grid {
        grid-template-columns: 1fr;
    }
    
    .proposito-content {
        padding-right: 0;
        text-align: center;
    }
    
    /* Términos */
    .terminos-grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
    
    /* User pages */
    .user-page-layout {
        grid-template-columns: 1fr;
    }
    
    .user-sidebar {
        display: none;
    }
    
    /* Números */
    .numeros-layout {
        grid-template-columns: 1fr;
    }
    
    .numeros-grid {
        grid-template-columns: repeat(10, 1fr);
    }
}

/**
 * Mobile (max-width: 768px)
 */
@media (max-width: 768px) {
    /* Tipografía */
    :root {
        --font-size-5xl: 2.25rem;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.5rem;
    }
    
    /* Header */
    .header-container {
        gap: var(--spacing-sm);
    }
    
    .btn-outline {
        padding: 8px 12px;
        font-size: var(--font-size-xs);
    }
    
    .logo-abriguemos img {
        height: 40px;
    }
    
    /* Footer */
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-logo,
    .footer-jps {
        justify-content: center;
        display: flex;
    }
    
    .site-footer::before {
        top: -30px;
        height: 60px;
    }
    
    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-container {
        padding: var(--spacing-lg);
    }
    
    /* Stats */
    .account-stats {
        grid-template-columns: 1fr;
    }
    
    /* Números grid */
    .numeros-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/**
 * Mobile pequeño (max-width: 480px)
 */
@media (max-width: 480px) {
    /* General */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Header */
    .cart-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .menu-toggle {
        width: 44px;
        height: 44px;
    }
    
    /* Secciones */
    .section-proposito,
    .section-terminos,
    .section-faq {
        padding: var(--spacing-2xl) 0;
    }
    
    /* Galería propósito */
    .proposito-gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 120px);
    }
    
    .proposito-gallery-item.large {
        grid-column: span 1;
    }
}

/* ==========================================================================
   FIN DEL ARCHIVO
   ========================================================================== */