/*
Theme Name: Cromatico Noir - Prepagos Colombia
Theme URI: https://prepagoscolombia.com
Author: jaguardluz
Author URI: https://prepagoscolombia.com
Description: Custom WordPress theme built with a luxury Cromatico Noir aesthetic, EB Garamond serif typography, sharp 0px corners, and dynamic color logic for VIP and Verified profiles.
Version: 1.0.0
Text Domain: prepagos-theme
*/

/* --- Design System Tokens --- */
:root {
    --void: #070707;
    --surface: #121413;
    --surface-low: #1a1c1b;
    --surface-container: #1e201f;
    --surface-high: #282a29;
    --surface-highest: #333534;
    --on-surface: #e2e2e1;
    --on-surface-variant: #c4c7c7;
    --outline: #222222;
    --outline-variant: #444748;
    --primary: #c9c6c5;
    --vip-gold: #C9943A;
    --crimson: #CC0019;
    --whatsapp: #CC0019;
    --whatsapp-dark: #960012;
    --available: #25D366;
    --unavailable: #CC0019;
}

.text-available { color: var(--available) !important; }
.bg-available { background-color: var(--available) !important; }
.text-unavailable { color: var(--unavailable) !important; }
.bg-unavailable { background-color: var(--unavailable) !important; }

/* --- Global Base Styles --- */
body {
    background-color: var(--void);
    color: var(--on-surface);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* --- Layout & Spacing Rules --- */
.container-noir {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: var(--margin-mobile, 24px);
    padding-right: var(--margin-mobile, 24px);
}

@media (min-width: 768px) {
    .container-noir {
        padding-left: var(--margin-desktop, 80px);
        padding-right: var(--margin-desktop, 80px);
    }
}

/* --- Typography System --- */
h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    color: #efefed;
}

.text-display-lg {
    font-size: 72px;
    line-height: 80px;
    letter-spacing: -0.02em;
}

.text-display-sm {
    font-size: 48px;
    line-height: 56px;
    letter-spacing: -0.01em;
}

.text-headline-lg {
    font-size: 32px;
    line-height: 40px;
}

.text-title-md {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.text-label-caps {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
}

.text-body-lg {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 28px;
}

.text-body-sm {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22px;
}

/* --- Shape Language & Elements --- */
.sharp, .sharp * {
    border-radius: 0px !important;
}

/* Custom interactive inputs styling */
input:focus, textarea:focus, select:focus {
    border-color: var(--vip-gold) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Accordion active states animation */
.accordion-content {
    transition: max-height 0.3s ease-out;
}

/* --- Custom Card Variants Normalizadas --- */
.card-modelo-base {
    background-color: var(--surface-low);
    border: 1px solid var(--outline);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0px;
}

/* Solo aplicar traslación si el dispositivo soporta hover real */
@media (hover: hover) {
    .card-modelo-base:hover {
        transform: translateY(-4px);
    }
}

/* Tarjeta VIP (Dorado) */
.card-style-vip, .card-style-a, .card-style-c {
    background-color: var(--void);
    border: 1px solid rgba(201, 148, 58, 0.3);
    box-shadow: inset 0 0 40px rgba(201, 148, 58, 0.15), 0 0 20px rgba(201, 148, 58, 0.05);
}

@media (hover: hover) {
    .card-style-vip:hover, .card-style-a:hover, .card-style-c:hover {
        border-color: var(--vip-gold);
        box-shadow: inset 0 0 40px rgba(201, 148, 58, 0.25), 0 10px 40px -10px rgba(201, 148, 58, 0.35);
    }
}

/* Tarjeta Standard / Verificada (Rojizo/Crimson) */
.card-style-standard, .card-style-b, .card-style-d {
    background-color: var(--surface-low);
    border: 1px solid var(--outline-variant);
}

@media (hover: hover) {
    .card-style-standard:hover, .card-style-b:hover, .card-style-d:hover {
        border-color: var(--crimson);
        box-shadow: 0 10px 40px -10px rgba(204, 0, 25, 0.35);
    }
}

/* --- Desactivación de Animaciones Pesadas en Móvil (< 768px) --- */
@media (max-width: 767px) {
    .card-modelo-base,
    .card-modelo-base *,
    .group:hover img,
    .group-hover\:scale-105 {
        transform: none !important;
        transition: none !important;
        box-shadow: none !important;
    }
}

/* --- Color Borders for Color-Coded Categories --- */
.border-category-vip {
    border-top: 4px solid var(--vip-gold) !important;
}

.border-category-verified {
    border-top: 4px solid var(--crimson) !important;
}

.border-category-standard {
    border-top: 4px solid var(--outline-variant) !important;
}

/* --- Micro-animations --- */
.animate-whatsapp-pulse {
    box-shadow: 0 0 0 0 rgba(204, 0, 25, 0.5);
    animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(204, 0, 25, 0.6);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(204, 0, 25, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(204, 0, 25, 0);
    }
}

/* --- Premium Floating WhatsApp Button (Circular & Gold Border/Glow) --- */
.floating-whatsapp-btn {
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--crimson-hover) 0%, var(--crimson) 50%, var(--crimson-deep) 100%) !important;
    color: #ffffff !important;
    border: 2px solid var(--vip-gold) !important;
    box-shadow: 0 8px 32px rgba(204, 0, 25, 0.4), inset 0 0 10px rgba(204, 0, 25, 0.2), 0 0 0 0 rgba(204, 0, 25, 0.4) !important;
    transition: all var(--transition-base);
    animation: crimson-pulse 2s infinite;
}

.floating-whatsapp-btn:hover {
    background: linear-gradient(135deg, #ff1a35 0%, var(--crimson-hover) 50%, var(--crimson) 100%) !important;
    box-shadow: 0 12px 40px rgba(204, 0, 25, 0.6), inset 0 0 15px rgba(204, 0, 25, 0.3), 0 0 15px rgba(201, 148, 58, 0.3) !important;
    transform: translateY(-4px) scale(1.1) !important;
}

.floating-whatsapp-btn svg {
    fill: #ffffff !important;
}

@keyframes crimson-pulse {
    0% {
        box-shadow: 0 8px 32px rgba(204, 0, 25, 0.4), inset 0 0 10px rgba(204, 0, 25, 0.2), 0 0 0 0 rgba(204, 0, 25, 0.4);
    }
    70% {
        box-shadow: 0 8px 32px rgba(204, 0, 25, 0.4), inset 0 0 10px rgba(204, 0, 25, 0.2), 0 0 0 15px rgba(204, 0, 25, 0);
    }
    100% {
        box-shadow: 0 8px 32px rgba(204, 0, 25, 0.4), inset 0 0 10px rgba(204, 0, 25, 0.2), 0 0 0 0 rgba(204, 0, 25, 0);
    }
}

/* --- Support Styles from head inline style removal --- */
.sharp-border { border: 1px solid #222222; }
.gold-border { border: 1px solid #C9943A; }
.crimson-border { border-bottom: 1px solid #CC0019; }
.glass-overlay { background: rgba(7,7,7,0.4); backdrop-filter: blur(20px); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ==========================================================================
   --- Ajustes de Espaciado y Compensación para Menú Fixed (JAGUAR) ---
   ========================================================================== */

/* Compensación para todas las páginas internas (etiqueta main) */
main {
    padding-top: 192px !important; /* Altura de TopNavBar Desktop + Separación libre Premium */
}

@media (max-width: 767px) {
    main {
        padding-top: 88px !important; /* Altura de TopNavBar Móvil (64px) + Separación elegante (24px) */
    }
}

/* Ajuste específico para el Hero en la página de inicio (front-page.php) */
header.min-h-\[921px\] {
    padding-top: 192px !important;
}

@media (max-width: 767px) {
    header.min-h-\[921px\] {
        padding-top: 88px !important;
    }
}

/* ==========================================================================
   --- Estilos de Responsividad y UX para Menú Móvil Overlay ---
   ========================================================================== */

/* Eliminación de marcadores por defecto en <details> */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

/* Transición suave para icono de rotación en acordeones */
details summary .mobile-chevron {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
details[open] summary .mobile-chevron {
    transform: rotate(180deg);
}

/* Tarjetas táctiles de cuadrícula para Zonas de Bogotá */
.zona-touch-card {
    background: rgba(26, 28, 27, 0.6);
    border: 1px solid rgba(68, 71, 72, 0.4);
    transition: all 0.2s ease-in-out;
}
.zona-touch-card:active, .zona-touch-card:hover {
    background: rgba(201, 148, 58, 0.12);
    border-color: rgba(201, 148, 58, 0.6);
    transform: scale(0.98);
}

/* Garantizar opacidad, solidez absoluta y z-index máximo en el Drawer Móvil */
#mobile-menu {
    background-color: #070707 !important;
    z-index: 999999 !important;
}

#mobile-menu-header {
    background-color: #070707 !important;
    z-index: 1000000 !important;
}



/* ==========================================================================
   --- Escalamiento Premium para Pantallas Ultra Grandes (JAGUAR) ---
   ========================================================================== */

@media (min-width: 1600px) {
    /* 1. Escalado de la tipografía base de diseño editorial Noir */
    .text-display-lg,
    .font-display-lg {
        font-size: 84px !important;
        line-height: 92px !important;
    }
    
    .text-display-sm,
    .font-display-sm {
        font-size: 56px !important;
        line-height: 64px !important;
    }
    
    .text-headline-lg,
    .font-headline-lg {
        font-size: 38px !important;
        line-height: 48px !important;
    }
    
    .text-title-md,
    .font-title-md {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    
    .text-body-lg,
    .font-body-lg {
        font-size: 18px !important;
        line-height: 32px !important;
    }
    
    .text-body-sm,
    .font-body-sm {
        font-size: 15px !important;
        line-height: 24px !important;
    }

    /* 2. Ampliación y desahogo de contenedores principales */
    .container-noir {
        max-width: 1600px !important;
    }
    
    main.max-w-7xl,
    main.max-w-\[1440px\] {
        max-width: 1600px !important;
    }
    
    /* Ampliación proporcional del Hero de la página de inicio */
    header.max-w-\[1440px\] {
        max-width: 1600px !important;
    }
    
    section.max-w-\[1440px\] {
        max-width: 1600px !important;
    }
    
    /* Ampliación de columnas de texto de lectura para conservar confort visual */
    main.max-w-3xl {
        max-width: 960px !important;
    }
}

@media (min-width: 2000px) {
    /* 3. Escalamiento premium superior para pantallas gigantes 4K */
    .text-display-lg,
    .font-display-lg {
        font-size: 96px !important;
        line-height: 104px !important;
    }
    
    .text-display-sm,
    .font-display-sm {
        font-size: 64px !important;
        line-height: 72px !important;
    }
    
    .text-body-lg,
    .font-body-lg {
        font-size: 20px !important;
        line-height: 36px !important;
    }
    
    .container-noir {
        max-width: 1800px !important;
    }
    
    main.max-w-7xl,
    main.max-w-\[1440px\],
    header.max-w-\[1440px\],
    section.max-w-\[1440px\] {
        max-width: 1800px !important;
    }
}