/* ============================================
   THEME V2 - WHITE BACKGROUND WITH BLACK ACCENTS
   Inspirado en "The Homepage" del PDF
   ============================================ */

:root {
    /* Colores Base - Tema Blanco/Negro */
    --v2-bg-white: #FFFFFF;
    --v2-bg-light: #FAFAFA;
    --v2-bg-gray: #F5F5F5;
    --v2-bg-dark: #111111;
    --v2-bg-black: #000000;
    
    /* Texto */
    --v2-text-dark: #111111;
    --v2-text-gray: #666666;
    --v2-text-muted: #999999;
    --v2-text-light: #FFFFFF;
    
    /* Acentos */
    --v2-accent-black: #111111;
    --v2-accent-gray: #E5E5E5;
    --v2-accent-border: #CCCCCC;
    --v2-accent-hover: #333333;
    
    /* Bordes */
    --v2-border-light: #E5E5E5;
    --v2-border: #CCCCCC;
    --v2-border-dark: #333333;
    
    /* Sombras */
    --v2-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --v2-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --v2-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
    
    /* Espaciado */
    --v2-border-radius: 12px;
    --v2-border-radius-lg: 24px;
    
    /* Transiciones */
    --v2-transition: all 0.3s ease;
    
    /* ============================================
       SISTEMA TIPOGRÁFICO RESPONSIVE CON CLAMP()
       Mobile-first: se ajusta automáticamente sin media queries
       ============================================ */
    
    /* Headings - Fórmula: clamp(min-mobile, fluid, max-desktop) - REDUCIDOS */
    --v2-h1: clamp(1.4rem, 1rem + 2vw, 2.8rem);              /* 22.4px → 44.8px (reducido ~20%) */
    --v2-h2: clamp(1.2rem, 0.85rem + 1.6vw, 2.2rem);         /* 19.2px → 35.2px (reducido ~20%) */
    --v2-h3: clamp(1rem, 0.75rem + 1.2vw, 1.6rem);           /* 16px → 25.6px (reducido ~20%) */
    --v2-h4: clamp(0.9rem, 0.7rem + 0.8vw, 1.2rem);          /* 14.4px → 19.2px (reducido ~20%) */
    --v2-h5: clamp(0.85rem, 0.65rem + 0.65vw, 1rem);         /* 13.6px → 16px (reducido ~20%) */
    --v2-h6: clamp(0.8rem, 0.6rem + 0.5vw, 0.9rem);          /* 12.8px → 14.4px (reducido ~20%) */
    
    /* Body text - REDUCIDO */
    --v2-body-large: clamp(0.9rem, 0.8rem + 0.5vw, 1.05rem); /* 14.4px → 16.8px (reducido ~20%) */
    --v2-body: clamp(0.8rem, 0.7rem + 0.35vw, 0.9rem);       /* 12.8px → 14.4px (reducido ~20%) */
    --v2-body-small: clamp(0.75rem, 0.65rem + 0.25vw, 0.8rem); /* 12px → 12.8px (reducido ~20%) */
    --v2-small: clamp(0.7rem, 0.6rem + 0.2vw, 0.75rem);      /* 11.2px → 12px (reducido ~20%) */
    
    /* Botones - REDUCIDO */
    --v2-button: clamp(0.8rem, 0.7rem + 0.25vw, 0.85rem);    /* 12.8px → 13.6px (reducido ~20%) */
    --v2-button-large: clamp(0.85rem, 0.75rem + 0.35vw, 0.9rem); /* 13.6px → 14.4px (reducido ~20%) */
    
    /* Line heights responsive */
    --v2-lh-tight: 1.2;
    --v2-lh-normal: 1.5;
    --v2-lh-relaxed: 1.7;
    --v2-lh-loose: 1.9;
    
    /* Letter spacing */
    --v2-ls-tight: -0.02em;
    --v2-ls-normal: 0;
    --v2-ls-wide: 0.05em;
}

/* ============================================
   BODY Y TIPOGRAFÍA BASE
   TODO ESTÁ SCOPADO A body.v2 PARA EVITAR COLISIONES CON LEGACY
   ============================================ */

body.v2 {
    font-family: 'Inter', sans-serif;
    background-color: var(--v2-bg-white);
    color: var(--v2-text-dark);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Solo para casos extremos, no para ocultar bugs */
}

/* ============================================
   CONTENEDOR RESPONSIVO - MOBILE-FIRST
   Clase utilitaria para asegurar max-width y padding correcto
   ============================================ */

body.v2 .v2-container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* Tablet */
@media (min-width: 768px) {
    body.v2 .v2-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    body.v2 .v2-container {
        padding-left: 40px;
        padding-right: 40px;
        max-width: 1600px;
    }
}

/* ============================================
   FIXES MOBILE-FIRST PARA PREVENIR OVERFLOW-X
   ============================================ */

/* Asegurar que imágenes, videos e iframes no causen overflow */
body.v2 img,
body.v2 video,
body.v2 iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Asegurar que todos los elementos respeten box-sizing */
body.v2 *,
body.v2 *::before,
body.v2 *::after {
    box-sizing: border-box;
}

/* ============================================
   TIPOGRAFÍA RESPONSIVE CON CLAMP()
   Aplicando variables CSS a todos los elementos
   ============================================ */

body.v2 h1, 
body.v2 h2, 
body.v2 h3, 
body.v2 h4, 
body.v2 h5, 
body.v2 h6 {
    font-weight: 800;
    letter-spacing: var(--v2-ls-tight);
    color: var(--v2-text-dark);
    margin-top: 0;
}

body.v2 h1 {
    font-size: var(--v2-h1);
    line-height: var(--v2-lh-tight);
    margin-bottom: 1.25rem;
}

body.v2 h2 {
    font-size: var(--v2-h2);
    line-height: var(--v2-lh-tight);
    margin-bottom: 1.5rem;
}

body.v2 h3 {
    font-size: var(--v2-h3);
    line-height: var(--v2-lh-normal);
    margin-bottom: 1rem;
}

body.v2 h4 {
    font-size: var(--v2-h4);
    line-height: var(--v2-lh-normal);
    margin-bottom: 0.875rem;
}

body.v2 h5 {
    font-size: var(--v2-h5);
    line-height: var(--v2-lh-normal);
    margin-bottom: 0.75rem;
}

body.v2 h6 {
    font-size: var(--v2-h6);
    line-height: var(--v2-lh-normal);
    margin-bottom: 0.625rem;
}

body.v2 p {
    font-size: var(--v2-body);
    line-height: var(--v2-lh-relaxed);
    letter-spacing: var(--v2-ls-normal);
    color: var(--v2-text-gray);
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Párrafos grandes (intro, hero, etc) */
body.v2 .v2-text-large,
body.v2 .text-large {
    font-size: var(--v2-body-large);
    line-height: var(--v2-lh-relaxed);
}

/* Texto pequeño (captions, meta info) */
body.v2 .v2-text-small,
body.v2 .text-small,
body.v2 small {
    font-size: var(--v2-body-small);
    line-height: var(--v2-lh-normal);
}

/* Texto muy pequeño (legal, footnotes) */
body.v2 .v2-text-xs {
    font-size: var(--v2-small);
    line-height: var(--v2-lh-normal);
}

body.v2 a {
    color: var(--v2-text-dark);
    text-decoration: none;
    transition: var(--v2-transition);
}

body.v2 a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ============================================
   SECCIONES ALTERNADAS
   ============================================ */

body.v2 section {
    padding: 100px 5%;
    position: relative;
}

/* Sección con fondo blanco (default) */
body.v2 .v2-section-white {
    background-color: var(--v2-bg-white);
    color: var(--v2-text-dark);
}

/* Sección con fondo gris claro */
body.v2 .v2-section-light {
    background-color: var(--v2-bg-light);
    color: var(--v2-text-dark);
}

/* Sección con fondo negro - CONTRASTE MEJORADO */
body.v2 .v2-section-dark {
    background-color: var(--v2-bg-dark);
    color: var(--v2-text-light);
}

body.v2 .v2-section-dark h1,
body.v2 .v2-section-dark h2,
body.v2 .v2-section-dark h3,
body.v2 .v2-section-dark h4,
body.v2 .v2-section-dark h5,
body.v2 .v2-section-dark h6 {
    color: var(--v2-text-light) !important;
    /* Blanco puro para máximo contraste */
}

body.v2 .v2-section-dark p {
    color: rgba(255, 255, 255, 0.9) !important;
    /* Mayor contraste - 90% mínimo */
}

body.v2 .v2-section-dark a {
    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    text-underline-offset: 3px;
}

body.v2 .v2-section-dark a:hover {
    color: var(--v2-text-light) !important;
    text-decoration-color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   BOTONES
   ============================================ */

/* Botón Primario - Negro con texto blanco */
body.v2 .v2-btn-primary,
body.v2 .homev2-hero-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    background-color: var(--v2-bg-dark);
    color: var(--v2-text-light);
    border: 2px solid var(--v2-bg-dark);
    border-radius: 50px;
    font-weight: 600;
    font-size: var(--v2-button);
    line-height: 1.2;
    letter-spacing: var(--v2-ls-normal);
    text-decoration: none;
    transition: var(--v2-transition);
    cursor: pointer;
    white-space: nowrap;
}

body.v2 .v2-btn-primary:hover,
body.v2 .homev2-hero-cta-primary:hover {
    background-color: var(--v2-accent-hover);
    border-color: var(--v2-accent-hover);
    color: var(--v2-text-light);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--v2-shadow-md);
}

/* Botón Secundario - Borde negro con fondo blanco */
body.v2 .v2-btn-secondary,
body.v2 .homev2-hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    background-color: var(--v2-bg-white);
    color: var(--v2-text-dark);
    border: 2px solid var(--v2-bg-dark);
    border-radius: 50px;
    font-weight: 600;
    font-size: var(--v2-button);
    line-height: 1.2;
    letter-spacing: var(--v2-ls-normal);
    text-decoration: none;
    transition: var(--v2-transition);
    cursor: pointer;
    white-space: nowrap;
}

body.v2 .v2-btn-secondary:hover,
body.v2 .homev2-hero-cta-secondary:hover {
    background-color: var(--v2-bg-light);
    border-color: var(--v2-accent-hover);
    color: var(--v2-text-dark);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--v2-shadow-sm);
}

/* Botón Outline - Transparente con borde */
body.v2 .v2-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 30px;
    background-color: transparent;
    color: var(--v2-text-dark);
    border: 2px solid var(--v2-border-dark);
    border-radius: 50px;
    font-weight: 600;
    font-size: var(--v2-button);
    line-height: 1.2;
    letter-spacing: var(--v2-ls-normal);
    text-decoration: none;
    transition: var(--v2-transition);
    cursor: pointer;
}

body.v2 .v2-btn-outline:hover {
    background-color: var(--v2-bg-dark);
    color: var(--v2-text-light);
    text-decoration: none;
    transform: translateY(-2px);
}

/* Botón en secciones oscuras - CONTRASTE MEJORADO */
body.v2 .v2-section-dark .v2-btn-secondary,
body.v2 .v2-section-dark .homev2-hero-cta-secondary {
    background-color: var(--v2-bg-white);
    color: var(--v2-text-dark);
    border-color: var(--v2-bg-white);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

body.v2 .v2-section-dark .v2-btn-secondary:hover,
body.v2 .v2-section-dark .homev2-hero-cta-secondary:hover {
    background-color: var(--v2-bg-light);
    border-color: var(--v2-bg-light);
    color: var(--v2-text-dark);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25);
}

body.v2 .v2-section-dark .v2-btn-primary,
body.v2 .v2-section-dark .homev2-hero-cta-primary {
    background-color: var(--v2-bg-white);
    color: var(--v2-text-dark);
    border-color: var(--v2-bg-white);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

body.v2 .v2-section-dark .v2-btn-primary:hover,
body.v2 .v2-section-dark .homev2-hero-cta-primary:hover {
    background-color: var(--v2-bg-light);
    border-color: var(--v2-bg-light);
    color: var(--v2-text-dark);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25);
}

/* ============================================
   CARDS - BLANCAS CON BORDE GRIS
   ============================================ */

body.v2 .v2-card,
body.v2 .homev2-glass-panel {
    background-color: var(--v2-bg-white);
    border: 1px solid var(--v2-border-light);
    border-radius: var(--v2-border-radius);
    padding: 30px;
    box-shadow: var(--v2-shadow-sm);
    transition: var(--v2-transition);
}

body.v2 .v2-card:hover,
body.v2 .homev2-glass-panel:hover {
    box-shadow: var(--v2-shadow-md);
    transform: translateY(-4px);
}

body.v2 .v2-card-dark {
    background-color: var(--v2-bg-dark);
    border: 1px solid var(--v2-border-dark);
    color: var(--v2-text-light);
}

body.v2 .v2-card-dark h3,
body.v2 .v2-card-dark h4 {
    color: var(--v2-text-light);
}

body.v2 .v2-card-dark p {
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   HEADER - BLANCO QUE SE MANTIENE EN SCROLL
   ============================================ */

body.v2 .v2-header,
body.v2 .homev2-header {
    background-color: var(--v2-bg-white);
    border-bottom: 1px solid var(--v2-border-light);
    transition: var(--v2-transition);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Header transparente NO debe tener fondo blanco - debe sobrescribir el estilo anterior */
/* Completamente transparente - sin fondo blanco visible */
/* Usa position: fixed para no ocupar espacio y estar sobre el hero */
body.v2 .homev2-header.homev2-header-transparent {
    position: fixed !important;
    background-color: transparent !important;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body.v2 .v2-header.scrolled,
body.v2 .homev2-header.scrolled {
    background-color: var(--v2-bg-white);
    box-shadow: var(--v2-shadow-md);
}

body.v2 .v2-navbar,
body.v2 .homev2-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 5%;
    max-width: 1600px;
    margin: 0 auto;
}

body.v2 .v2-nav-links a,
body.v2 .homev2-nav-links-desktop a {
    color: var(--v2-text-dark);
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    transition: var(--v2-transition);
    border-radius: 8px;
}

body.v2 .v2-nav-links a:hover,
body.v2 .homev2-nav-links-desktop a:hover {
    background-color: var(--v2-bg-light);
    text-decoration: none;
}

body.v2 .v2-logo img,
body.v2 .homev2-logo img {
    height: 50px;
    width: auto;
}

/* Header transparente sobre hero (opcional) */
body.v2 .v2-header-transparent,
body.v2 .homev2-header-transparent {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body.v2 .v2-header-transparent.scrolled,
body.v2 .homev2-header-transparent.scrolled {
    position: sticky !important;
    background-color: var(--v2-bg-white) !important;
    border-bottom: 1px solid var(--v2-border-light) !important;
    box-shadow: var(--v2-shadow-md) !important;
}

body.v2 .v2-header-transparent .v2-nav-links a,
body.v2 .v2-header-transparent .homev2-nav-links-desktop a,
body.v2 .v2-header-transparent .v2-logo,
body.v2 .v2-header-transparent .homev2-logo {
    color: var(--v2-text-light);
}

body.v2 .v2-header-transparent.scrolled .v2-nav-links a,
body.v2 .v2-header-transparent.scrolled .homev2-nav-links-desktop a,
body.v2 .v2-header-transparent.scrolled .v2-logo,
body.v2 .v2-header-transparent.scrolled .homev2-logo {
    color: var(--v2-text-dark);
}

/* ============================================
   LINKS
   ============================================ */

body.v2 .v2-link,
body.v2 a {
    color: var(--v2-text-dark);
    text-decoration: none;
    transition: var(--v2-transition);
    border-bottom: 2px solid transparent;
}

body.v2 .v2-link:hover,
body.v2 a:hover {
    color: var(--v2-text-dark);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    border-bottom-color: var(--v2-text-dark);
}

/* Links en secciones oscuras - CONTRASTE MEJORADO */
body.v2 .v2-section-dark .v2-link,
body.v2 .v2-section-dark a:not(.v2-btn-primary):not(.v2-btn-secondary):not(.homev2-hero-cta-primary):not(.homev2-hero-cta-secondary) {
    color: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: transparent;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 3px;
}

body.v2 .v2-section-dark .v2-link:hover,
body.v2 .v2-section-dark a:not(.v2-btn-primary):not(.v2-btn-secondary):not(.homev2-hero-cta-primary):not(.homev2-hero-cta-secondary):hover {
    color: var(--v2-text-light) !important;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.9);
    border-bottom-color: var(--v2-text-light);
}

/* ============================================
   FOOTER
   ============================================ */

body.v2 .v2-footer,
body.v2 .homev2-footer {
    background-color: var(--v2-bg-dark);
    color: var(--v2-text-light);
    padding: 80px 5% 40px;
    border-top: 1px solid var(--v2-border-dark);
}

body.v2 .v2-footer a,
body.v2 .homev2-footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--v2-transition);
}

body.v2 .v2-footer a:hover,
body.v2 .homev2-footer a:hover {
    color: var(--v2-text-light);
    text-decoration: underline;
}

body.v2 .v2-footer h4,
body.v2 .homev2-footer h4 {
    color: var(--v2-text-light);
    margin-bottom: 20px;
}

body.v2 .v2-footer p,
body.v2 .homev2-footer p {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   FORMULARIOS - REGLAS GLOBALES PARA TODOS LOS INPUTS
   ============================================ */

/* Reglas globales para todos los inputs en páginas v2 - SCOPED A body.v2 */
body.v2 input[type="text"],
body.v2 input[type="email"],
body.v2 input[type="tel"],
body.v2 input[type="number"],
body.v2 input[type="password"],
body.v2 input[type="search"],
body.v2 input[type="url"],
body.v2 input[type="date"],
body.v2 input[type="time"],
body.v2 input[type="datetime-local"],
body.v2 input[type="month"],
body.v2 input[type="week"],
body.v2 input[type="color"],
body.v2 textarea,
body.v2 select {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    border: 1px solid var(--v2-border-light, #E5E5E5) !important;
    border-radius: 8px;
    color: var(--v2-text-dark, #111111) !important;
    font-size: 16px; /* ✅ MOBILE: Mínimo 16px para evitar zoom en iOS */
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    transition: var(--v2-transition, all 0.3s ease);
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Placeholder gris */
body.v2 input::placeholder,
body.v2 textarea::placeholder {
    color: var(--v2-text-muted, #999999) !important;
    opacity: 1;
}

/* Focus: borde negro y shadow suave */
body.v2 input:focus,
body.v2 textarea:focus,
body.v2 select:focus {
    outline: none !important;
    border-color: var(--v2-bg-dark, #111111) !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1) !important;
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    color: var(--v2-text-dark, #111111) !important;
}

/* Autocomplete hack para Chrome/Safari - evita fondo amarillo/oscuro - SCOPED A body.v2 */
body.v2 input:-webkit-autofill,
body.v2 input:-webkit-autofill:hover,
body.v2 input:-webkit-autofill:focus,
body.v2 input:-webkit-autofill:active,
body.v2 textarea:-webkit-autofill,
body.v2 textarea:-webkit-autofill:hover,
body.v2 textarea:-webkit-autofill:focus,
body.v2 textarea:-webkit-autofill:active,
body.v2 select:-webkit-autofill,
body.v2 select:-webkit-autofill:hover,
body.v2 select:-webkit-autofill:focus,
body.v2 select:-webkit-autofill:active {
    -webkit-text-fill-color: var(--v2-text-dark, #111111) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--v2-bg-white, #FFFFFF) inset !important;
    box-shadow: 0 0 0px 1000px var(--v2-bg-white, #FFFFFF) inset !important;
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    border: 1px solid var(--v2-border-light, #E5E5E5) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Cuando el autocomplete está en focus */
body.v2 input:-webkit-autofill:focus,
body.v2 textarea:-webkit-autofill:focus,
body.v2 select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--v2-text-dark, #111111) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--v2-bg-white, #FFFFFF) inset, 0 0 0 3px rgba(17, 17, 17, 0.1) !important;
    box-shadow: 0 0 0px 1000px var(--v2-bg-white, #FFFFFF) inset, 0 0 0 3px rgba(17, 17, 17, 0.1) !important;
    border-color: var(--v2-bg-dark, #111111) !important;
}

/* Disabled: fondo gris claro, texto gris, borde gris */
body.v2 input:disabled,
body.v2 textarea:disabled,
body.v2 select:disabled {
    background-color: var(--v2-bg-light, #FAFAFA) !important;
    color: var(--v2-text-muted, #999999) !important;
    border-color: var(--v2-border-light, #E5E5E5) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Readonly: fondo blanco, texto negro, borde gris */
body.v2 input:read-only,
body.v2 textarea:read-only,
body.v2 select:read-only {
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    color: var(--v2-text-dark, #111111) !important;
    border-color: var(--v2-border-light, #E5E5E5) !important;
    cursor: default;
}

/* Checkbox y Radio buttons */
body.v2 input[type="checkbox"],
body.v2 input[type="radio"] {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    border: 2px solid var(--v2-border-dark, #333333) !important;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--v2-transition, all 0.3s ease);
}

body.v2 input[type="checkbox"]:checked,
body.v2 input[type="radio"]:checked {
    background-color: var(--v2-bg-dark, #111111) !important;
    border-color: var(--v2-bg-dark, #111111) !important;
}

body.v2 input[type="checkbox"]:focus,
body.v2 input[type="radio"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1) !important;
}

body.v2 input[type="checkbox"]:disabled,
body.v2 input[type="radio"]:disabled {
    background-color: var(--v2-bg-light, #FAFAFA) !important;
    border-color: var(--v2-border-light, #E5E5E5) !important;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Range input */
body.v2 input[type="range"] {
    width: 100%;
    height: 8px;
    background-color: var(--v2-bg-light, #FAFAFA) !important;
    border: none;
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
}

body.v2 input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: var(--v2-bg-dark, #111111) !important;
    border-radius: 50%;
    cursor: pointer;
}

body.v2 input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background-color: var(--v2-bg-dark, #111111) !important;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* File input */
body.v2 input[type="file"] {
    padding: 8px;
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    border: 1px solid var(--v2-border-light, #E5E5E5) !important;
    border-radius: 8px;
    color: var(--v2-text-dark, #111111) !important;
    cursor: pointer;
}

body.v2 input[type="file"]:focus {
    border-color: var(--v2-bg-dark, #111111) !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1) !important;
}

/* Clase helper para inputs */
body.v2 .v2-input {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    border: 1px solid var(--v2-border-light, #E5E5E5) !important;
    border-radius: 8px;
    color: var(--v2-text-dark, #111111) !important;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: var(--v2-transition, all 0.3s ease);
}

body.v2 .v2-input:focus {
    outline: none !important;
    border-color: var(--v2-bg-dark, #111111) !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1) !important;
}

/* ===== BOTONES DE SUBMIT - FULL WIDTH EN MOBILE ===== */
body.v2 button[type="submit"],
body.v2 input[type="submit"],
body.v2 .v2-btn-submit,
body.v2 .submit-btn,
body.v2 .registration-submit-btn {
    width: 100%; /* ✅ MOBILE: Full width por defecto */
    padding: 14px 24px;
    min-height: 48px; /* ✅ MOBILE: Tap-friendly */
    background-color: var(--v2-bg-dark, #111111);
    color: var(--v2-text-light, #FFFFFF);
    border: 2px solid var(--v2-bg-dark, #111111);
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px; /* ✅ MOBILE: Evitar zoom */
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Desktop: puede ser auto width */
@media (min-width: 768px) {
    body.v2 button[type="submit"],
    body.v2 input[type="submit"],
    body.v2 .v2-btn-submit,
    body.v2 .submit-btn,
    body.v2 .registration-submit-btn {
        width: auto;
        min-width: 200px;
    }
}

body.v2 button[type="submit"]:hover,
body.v2 input[type="submit"]:hover,
body.v2 .v2-btn-submit:hover,
body.v2 .submit-btn:hover,
body.v2 .registration-submit-btn:hover {
    background-color: var(--v2-accent-hover, #333333);
    border-color: var(--v2-accent-hover, #333333);
    transform: translateY(-2px);
    box-shadow: var(--v2-shadow-md);
}

body.v2 button[type="submit"]:disabled,
body.v2 input[type="submit"]:disabled,
body.v2 .v2-btn-submit:disabled,
body.v2 .submit-btn:disabled,
body.v2 .registration-submit-btn:disabled {
    background-color: var(--v2-bg-light, #FAFAFA);
    color: var(--v2-text-muted, #999999);
    border-color: var(--v2-border-light, #E5E5E5);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

body.v2 .v2-label,
body.v2 label {
    display: block;
    margin-bottom: 8px;
    color: var(--v2-text-dark, #111111) !important;
    font-weight: 500;
    font-size: 0.95rem;
}

/* ============================================
   HERO SECTION
   ============================================ */

body.v2 .v2-hero,
body.v2 .homev2-hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 100px 5% 80px;
    background-size: cover;
    background-position: center;
}

body.v2 .v2-hero-content,
body.v2 .homev2-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1600px;
    width: 100%;
    text-align: center;
}

body.v2 .v2-hero-content h1,
body.v2 .homev2-hero-content h1 {
    color: var(--v2-text-light);
    font-size: var(--v2-h1);
    line-height: var(--v2-lh-tight);
    letter-spacing: var(--v2-ls-tight);
    margin-bottom: 1.25rem;
}

body.v2 .v2-hero-content p,
body.v2 .homev2-hero-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--v2-body-large);
    line-height: var(--v2-lh-relaxed);
    letter-spacing: var(--v2-ls-normal);
    margin-bottom: 1.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

body.v2 .v2-hero-overlay,
body.v2 .homev2-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
}

/* ============================================
   UTILIDADES
   ============================================ */

body.v2 .v2-text-muted {
    color: var(--v2-text-muted);
}

body.v2 .v2-text-gray {
    color: var(--v2-text-gray);
}

body.v2 .v2-text-dark {
    color: var(--v2-text-dark);
}

body.v2 .v2-text-light {
    color: var(--v2-text-light);
}

body.v2 .v2-bg-white {
    background-color: var(--v2-bg-white);
}

body.v2 .v2-bg-light {
    background-color: var(--v2-bg-light);
}

body.v2 .v2-bg-dark {
    background-color: var(--v2-bg-dark);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    body.v2 section {
        padding: 80px 4%;
    }
    
    body.v2 h1 {
        font-size: 2.8rem;
    }
    
    body.v2 h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    body.v2 section {
        padding: 60px 4%;
    }
    
    body.v2 h1 {
        font-size: 2.2rem;
    }
    
    body.v2 h2 {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }
    
    body.v2 .v2-btn-primary,
    body.v2 .v2-btn-secondary,
    body.v2 .homev2-hero-cta-primary,
    body.v2 .homev2-hero-cta-secondary {
        padding: 12px 24px;
        font-size: 0.95rem;
    }
}

@media (max-width: 600px) {
    body.v2 section {
        padding: 40px 4%;
    }
    
    body.v2 h1 {
        font-size: 1.8rem;
    }
    
    body.v2 h2 {
        font-size: 1.5rem;
    }
}

/* ============================================
   MODALES BLANCOS - V2
   Estilos reutilizables para todos los modales
   ============================================ */

/* Overlay oscuro semitransparente - SCOPED A body.v2 */
body.v2 .v2-modal-overlay,
body.v2 .calendar-modal,
body.v2 .event-detail-modal,
body.v2 .homev2-calendar-modal,
body.v2 .homev2-event-detail-modal,
body.v2 #calendarModal,
body.v2 #eventDetailModal,
body.v2 #registrationModal,
body.v2 #registrationSuccessModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 3000;
    overflow-y: auto;
    padding: 40px 20px;
    align-items: center;
    justify-content: center;
}

body.v2 .v2-modal-overlay.active,
body.v2 .v2-modal-overlay.homev2-active,
body.v2 .calendar-modal.active,
body.v2 .calendar-modal.homev2-active,
body.v2 .event-detail-modal.active,
body.v2 .event-detail-modal.homev2-active,
body.v2 .homev2-calendar-modal.active,
body.v2 .homev2-calendar-modal.homev2-active,
body.v2 .homev2-event-detail-modal.active,
body.v2 .homev2-event-detail-modal.homev2-active,
body.v2 #calendarModal.active,
body.v2 #calendarModal.homev2-active,
body.v2 #eventDetailModal.active,
body.v2 #eventDetailModal.homev2-active,
body.v2 #registrationModal.active,
body.v2 #registrationModal.homev2-active,
body.v2 #registrationSuccessModal.active,
body.v2 #registrationSuccessModal.homev2-active {
    display: flex !important;
    flex-direction: column;
}

/* Contenido del modal - fondo blanco - SCOPED A body.v2 */
body.v2 .v2-modal,
body.v2 .calendar-modal-content,
body.v2 .registration-modal-content,
body.v2 .homev2-calendar-modal-content,
body.v2 .homev2-event-detail-content {
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    border: 1px solid var(--v2-border-light, #E5E5E5) !important;
    border-radius: var(--v2-border-radius, 12px);
    padding: 40px;
    padding-top: 70px;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--v2-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.16));
    color: var(--v2-text-dark, #111111) !important;
}

/* Excluir eventDetailModal del estilo anterior - tiene su propio estilo en home_v2.css */
body.v2 #eventDetailModal .event-detail-content {
    /* Los estilos se definen en home_v2.css para coincidir con v2-calendar-modal-content */
}

body.v2 #eventDetailModal #detailEventContent {
    /* El contenido ahora usa la clase v2-calendar-mount, estilos en home_v2.css */
    background: transparent !important;
    /* padding: 0 !important; Eliminado para evitar conflictos */
    border: none !important;
    box-shadow: none !important;
}

body.v2 .v2-modal h1,
body.v2 .v2-modal h2,
body.v2 .v2-modal h3,
body.v2 .v2-modal h4,
body.v2 .calendar-modal-content h1,
body.v2 .calendar-modal-content h2,
body.v2 .calendar-modal-content h3,
body.v2 .calendar-modal-content h4,
body.v2 .event-detail-content h1,
body.v2 .event-detail-content h2,
body.v2 .event-detail-content h3,
body.v2 .event-detail-content h4,
body.v2 .registration-modal-content h1,
body.v2 .registration-modal-content h2,
body.v2 .registration-modal-content h3,
body.v2 .registration-modal-content h4 {
    color: var(--v2-text-dark, #111111);
}

body.v2 .v2-modal p,
body.v2 .v2-modal span,
body.v2 .v2-modal li,
body.v2 .calendar-modal-content p,
body.v2 .calendar-modal-content span,
body.v2 .calendar-modal-content li,
body.v2 .event-detail-content p,
body.v2 .event-detail-content span,
body.v2 .event-detail-content li,
body.v2 .registration-modal-content p,
body.v2 .registration-modal-content span,
body.v2 .registration-modal-content li {
    color: var(--v2-text-gray, #666666);
}

/* Botón cerrar - negro con hover gris - SCOPED A body.v2 */
body.v2 .v2-modal-close,
body.v2 .close-calendar-btn,
body.v2 .event-detail-close,
body.v2 .homev2-close-calendar-btn,
body.v2 .homev2-event-detail-close {
    background: transparent;
    border: none;
    color: var(--v2-text-dark, #111111);
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--v2-transition, all 0.3s ease);
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    flex-shrink: 0;
}

body.v2 .v2-modal-close:hover,
body.v2 .close-calendar-btn:hover,
body.v2 .event-detail-close:hover,
body.v2 .homev2-close-calendar-btn:hover,
body.v2 .homev2-event-detail-close:hover {
    background-color: var(--v2-bg-light, #FAFAFA);
    color: var(--v2-accent-hover, #333333);
    transform: rotate(90deg);
}

/* Header del modal */
body.v2 .v2-modal-header,
body.v2 .calendar-modal-header,
body.v2 .event-detail-header,
body.v2 .homev2-calendar-modal-header,
body.v2 .homev2-event-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-shrink: 0;
}

/* Header específico del modal de registro */
body.v2 .registration-modal-content .event-detail-header {
    padding: 24px 40px;
    border-bottom: 1px solid var(--v2-border-light, #E5E5E5);
    margin-bottom: 0;
    background: var(--v2-bg-white, #FFFFFF);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

body.v2 .registration-modal-content .event-detail-header .event-detail-title {
    color: var(--v2-text-dark, #111111);
    font-size: 1.5rem;
    font-weight: 700;
}

body.v2 .registration-modal-content .event-detail-header .event-detail-close {
    color: var(--v2-text-dark, #111111);
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

body.v2 .registration-modal-content .event-detail-header .event-detail-close:hover {
    background: var(--v2-bg-light, #F5F5F5);
}
    padding-bottom: 20px;
    border-bottom: 1px solid var(--v2-border-light, #E5E5E5);
}

body.v2 .v2-modal-header h2,
body.v2 .calendar-modal-header h2,
body.v2 .event-detail-header h2,
body.v2 .event-detail-title,
body.v2 .homev2-calendar-modal-header h2,
body.v2 .homev2-event-detail-title {
    font-size: 2rem;
    margin: 0;
    flex: 1;
    color: var(--v2-text-dark, #111111);
    padding-right: 50px;
}

/* Body del modal (área de scroll) - SCOPED A body.v2 */
body.v2 .v2-modal-body,
body.v2 .registration-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 30px 0;
    min-height: 0;
    max-height: calc(90vh - 200px);
    color: var(--v2-text-dark, #111111);
}

body.v2 .v2-modal-body::-webkit-scrollbar,
body.v2 .registration-modal-body::-webkit-scrollbar {
    width: 8px;
}

body.v2 .v2-modal-body::-webkit-scrollbar-track,
body.v2 .registration-modal-body::-webkit-scrollbar-track {
    background: var(--v2-bg-light, #FAFAFA);
    border-radius: 4px;
}

body.v2 .v2-modal-body::-webkit-scrollbar-thumb,
body.v2 .registration-modal-body::-webkit-scrollbar-thumb {
    background: var(--v2-border, #CCCCCC);
    border-radius: 4px;
}

body.v2 .v2-modal-body::-webkit-scrollbar-thumb:hover,
body.v2 .registration-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--v2-text-gray, #666666);
}

/* Footer del modal */
body.v2 .v2-modal-footer,
body.v2 .registration-modal-footer {
    padding: 24px 40px;
    border-top: 1px solid var(--v2-border-light, #E5E5E5);
    margin-top: auto;
    flex-shrink: 0;
    background-color: var(--v2-bg-white, #FFFFFF);
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

/* Info items dentro del modal */
body.v2 .v2-modal-info,
body.v2 .event-detail-info,
body.v2 .homev2-event-detail-info {
    margin-bottom: 25px;
}

body.v2 .v2-modal-info-item,
body.v2 .event-detail-info-item,
body.v2 .homev2-event-detail-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--v2-text-gray, #666666);
    line-height: 1.5;
}

body.v2 .v2-modal-info-item i,
body.v2 .event-detail-info-item i,
body.v2 .homev2-event-detail-info-item i {
    color: var(--v2-text-dark, #111111);
    flex-shrink: 0;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

body.v2 .event-detail-info-item span,
body.v2 .homev2-event-detail-info-item span {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Elementos específicos del modal */
body.v2 .v2-modal-description,
body.v2 .event-detail-description,
body.v2 .homev2-event-detail-description {
    background-color: var(--v2-bg-light, #FAFAFA);
    padding: 20px;
    border-radius: var(--v2-border-radius, 12px);
    margin-top: 20px;
    line-height: 1.8;
    color: var(--v2-text-gray, #666666);
}

/* Calendar específico - SCOPED A body.v2 */
body.v2 .homev2-calendar-day-header {
    text-align: center;
    font-weight: 700;
    padding: 15px;
    color: var(--v2-text-gray, #666666);
    font-size: 0.9rem;
}

body.v2 .homev2-calendar-day {
    aspect-ratio: 1;
    background-color: var(--v2-bg-white, #FFFFFF);
    border: 1px solid var(--v2-border-light, #E5E5E5);
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: var(--v2-transition, all 0.3s ease);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: var(--v2-text-dark, #111111);
}

body.v2 .homev2-calendar-day:hover {
    background-color: var(--v2-bg-light, #FAFAFA);
    transform: scale(1.05);
    border-color: var(--v2-border-dark, #333333);
}

body.v2 .calendar-day.homev2-other-month {
    opacity: 0.3;
    background-color: var(--v2-bg-light, #FAFAFA);
}

body.v2 .calendar-day.homev2-today {
    border: 2px solid var(--v2-bg-dark, #111111);
    background-color: var(--v2-bg-light, #FAFAFA);
    font-weight: 700;
}

body.v2 .calendar-day.homev2-has-events {
    border-color: var(--v2-accent-hover, #333333);
}

/* Formularios dentro del modal - SCOPED A body.v2 */
body.v2 .v2-modal input,
body.v2 .v2-modal textarea,
body.v2 .v2-modal select,
body.v2 .calendar-modal-content input,
body.v2 .calendar-modal-content textarea,
body.v2 .calendar-modal-content select,
body.v2 .event-detail-content input,
body.v2 .event-detail-content textarea,
body.v2 .event-detail-content select,
body.v2 .registration-modal-content input,
body.v2 .registration-modal-content textarea,
body.v2 .registration-modal-content select,
body.v2 .registration-modal-body input,
body.v2 .registration-modal-body textarea,
body.v2 .registration-modal-body select,
body.v2 #detailEventContent input,
body.v2 #detailEventContent textarea,
body.v2 #detailEventContent select {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    border: 1px solid var(--v2-border-light, #E5E5E5) !important;
    border-radius: 8px;
    color: var(--v2-text-dark, #111111) !important;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: var(--v2-transition, all 0.3s ease);
    box-sizing: border-box;
}

body.v2 .v2-modal input::placeholder,
body.v2 .v2-modal textarea::placeholder,
body.v2 .calendar-modal-content input::placeholder,
body.v2 .calendar-modal-content textarea::placeholder,
body.v2 .event-detail-content input::placeholder,
body.v2 .event-detail-content textarea::placeholder,
body.v2 .registration-modal-content input::placeholder,
body.v2 .registration-modal-content textarea::placeholder,
body.v2 .registration-modal-body input::placeholder,
body.v2 .registration-modal-body textarea::placeholder,
body.v2 #detailEventContent input::placeholder,
body.v2 #detailEventContent textarea::placeholder {
    color: var(--v2-text-muted, #999999) !important;
    opacity: 1;
}

body.v2 .v2-modal input:focus,
body.v2 .v2-modal textarea:focus,
body.v2 .v2-modal select:focus,
body.v2 .calendar-modal-content input:focus,
body.v2 .calendar-modal-content textarea:focus,
body.v2 .calendar-modal-content select:focus,
body.v2 .event-detail-content input:focus,
body.v2 .event-detail-content textarea:focus,
body.v2 .event-detail-content select:focus,
body.v2 .registration-modal-content input:focus,
body.v2 .registration-modal-content textarea:focus,
body.v2 .registration-modal-content select:focus,
body.v2 .registration-modal-body input:focus,
body.v2 .registration-modal-body textarea:focus,
body.v2 .registration-modal-body select:focus,
body.v2 #detailEventContent input:focus,
body.v2 #detailEventContent textarea:focus,
body.v2 #detailEventContent select:focus {
    outline: none !important;
    border-color: var(--v2-bg-dark, #111111) !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1) !important;
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    color: var(--v2-text-dark, #111111) !important;
}

/* Autocomplete hack para inputs dentro de modales - SCOPED A body.v2 */
body.v2 .v2-modal input:-webkit-autofill,
body.v2 .v2-modal input:-webkit-autofill:hover,
body.v2 .v2-modal input:-webkit-autofill:focus,
body.v2 .v2-modal input:-webkit-autofill:active,
body.v2 .calendar-modal-content input:-webkit-autofill,
body.v2 .calendar-modal-content input:-webkit-autofill:hover,
body.v2 .calendar-modal-content input:-webkit-autofill:focus,
body.v2 .calendar-modal-content input:-webkit-autofill:active,
body.v2 .event-detail-content input:-webkit-autofill,
body.v2 .event-detail-content input:-webkit-autofill:hover,
body.v2 .event-detail-content input:-webkit-autofill:focus,
body.v2 .event-detail-content input:-webkit-autofill:active,
body.v2 .registration-modal-content input:-webkit-autofill,
body.v2 .registration-modal-content input:-webkit-autofill:hover,
body.v2 .registration-modal-content input:-webkit-autofill:focus,
body.v2 .registration-modal-content input:-webkit-autofill:active,
body.v2 .registration-modal-body input:-webkit-autofill,
body.v2 .registration-modal-body input:-webkit-autofill:hover,
body.v2 .registration-modal-body input:-webkit-autofill:focus,
body.v2 .registration-modal-body input:-webkit-autofill:active,
body.v2 #detailEventContent input:-webkit-autofill,
body.v2 #detailEventContent input:-webkit-autofill:hover,
body.v2 #detailEventContent input:-webkit-autofill:focus,
body.v2 #detailEventContent input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--v2-text-dark, #111111) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--v2-bg-white, #FFFFFF) inset !important;
    box-shadow: 0 0 0px 1000px var(--v2-bg-white, #FFFFFF) inset !important;
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    border: 1px solid var(--v2-border-light, #E5E5E5) !important;
    transition: background-color 5000s ease-in-out 0s;
}

body.v2 .v2-modal input:-webkit-autofill:focus,
body.v2 .calendar-modal-content input:-webkit-autofill:focus,
body.v2 .event-detail-content input:-webkit-autofill:focus,
body.v2 .registration-modal-content input:-webkit-autofill:focus,
body.v2 .registration-modal-body input:-webkit-autofill:focus,
body.v2 #detailEventContent input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--v2-text-dark, #111111) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--v2-bg-white, #FFFFFF) inset, 0 0 0 3px rgba(17, 17, 17, 0.1) !important;
    box-shadow: 0 0 0px 1000px var(--v2-bg-white, #FFFFFF) inset, 0 0 0 3px rgba(17, 17, 17, 0.1) !important;
    border-color: var(--v2-bg-dark, #111111) !important;
}

/* Disabled y readonly en modales */
body.v2 .v2-modal input:disabled,
body.v2 .v2-modal textarea:disabled,
body.v2 .v2-modal select:disabled,
body.v2 .calendar-modal-content input:disabled,
body.v2 .calendar-modal-content textarea:disabled,
body.v2 .calendar-modal-content select:disabled,
body.v2 .event-detail-content input:disabled,
body.v2 .event-detail-content textarea:disabled,
body.v2 .event-detail-content select:disabled,
body.v2 .registration-modal-content input:disabled,
body.v2 .registration-modal-content textarea:disabled,
body.v2 .registration-modal-content select:disabled,
body.v2 .registration-modal-body input:disabled,
body.v2 .registration-modal-body textarea:disabled,
body.v2 .registration-modal-body select:disabled,
body.v2 #detailEventContent input:disabled,
body.v2 #detailEventContent textarea:disabled,
body.v2 #detailEventContent select:disabled {
    background-color: var(--v2-bg-light, #FAFAFA) !important;
    color: var(--v2-text-muted, #999999) !important;
    border-color: var(--v2-border-light, #E5E5E5) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

body.v2 .v2-modal input:read-only,
body.v2 .v2-modal textarea:read-only,
body.v2 .v2-modal select:read-only,
body.v2 .calendar-modal-content input:read-only,
body.v2 .calendar-modal-content textarea:read-only,
body.v2 .calendar-modal-content select:read-only,
body.v2 .event-detail-content input:read-only,
body.v2 .event-detail-content textarea:read-only,
body.v2 .event-detail-content select:read-only,
body.v2 .registration-modal-content input:read-only,
body.v2 .registration-modal-content textarea:read-only,
body.v2 .registration-modal-content select:read-only,
body.v2 .registration-modal-body input:read-only,
body.v2 .registration-modal-body textarea:read-only,
body.v2 .registration-modal-body select:read-only,
body.v2 #detailEventContent input:read-only,
body.v2 #detailEventContent textarea:read-only,
body.v2 #detailEventContent select:read-only {
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    color: var(--v2-text-dark, #111111) !important;
    border-color: var(--v2-border-light, #E5E5E5) !important;
    cursor: default;
}

body.v2 .v2-modal label,
body.v2 .registration-modal-body label {
    display: block;
    margin-bottom: 8px;
    color: var(--v2-text-dark, #111111);
    font-weight: 500;
    font-size: 0.95rem;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Labels con display flex (como checkboxes) también sin bordes */
body.v2 .registration-modal-body label[style*="display: flex"],
body.v2 .registration-modal-body #eventRegistrationForm label[style*="display: flex"],
body.v2 .registration-modal-body label:has(input[type="checkbox"]) {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Success modal - SCOPED A body.v2 */
body.v2 #registrationSuccessModal {
    background: rgba(0, 0, 0, 0.6);
}

body.v2 #registrationSuccessModal .event-detail-content {
    background-color: var(--v2-bg-white, #FFFFFF);
    color: var(--v2-text-dark, #111111);
    text-align: center;
    padding: 60px 40px;
}

body.v2 #registrationSuccessModal .event-detail-content h2 {
    color: var(--v2-text-dark, #111111) !important;
    margin-bottom: 20px;
}

body.v2 #registrationSuccessModal .event-detail-content p {
    color: var(--v2-text-gray, #666666) !important;
    margin-bottom: 30px;
}

/* Sobrescribir TODOS los elementos dentro de los modales para asegurar fondo blanco - SCOPED A body.v2 */
body.v2 .calendar-modal-content,
body.v2 .event-detail-content,
body.v2 .registration-modal-content,
body.v2 #detailEventContent,
body.v2 .registration-modal-body,
body.v2 .registration-modal-footer,
body.v2 #registrationSuccessModal .event-detail-content {
    background-color: var(--v2-bg-white, #FFFFFF) !important;
}

body.v2 .calendar-modal-content p,
body.v2 .calendar-modal-content span,
body.v2 .calendar-modal-content li,
body.v2 .calendar-modal-content div,
body.v2 .event-detail-content p,
body.v2 .event-detail-content span,
body.v2 .event-detail-content li,
body.v2 .event-detail-content div,
body.v2 .registration-modal-content p,
body.v2 .registration-modal-content span,
body.v2 .registration-modal-content li,
body.v2 .registration-modal-content div,
body.v2 #detailEventContent p,
body.v2 #detailEventContent span,
body.v2 #detailEventContent li,
body.v2 #detailEventContent div,
body.v2 .registration-modal-body p,
body.v2 .registration-modal-body span,
body.v2 .registration-modal-body li,
body.v2 .registration-modal-body div {
    color: var(--v2-text-gray, #666666) !important;
}

body.v2 .calendar-modal-content h1,
body.v2 .calendar-modal-content h2,
body.v2 .calendar-modal-content h3,
body.v2 .calendar-modal-content h4,
body.v2 .calendar-modal-content h5,
body.v2 .calendar-modal-content h6,
body.v2 .event-detail-content h1,
body.v2 .event-detail-content h2,
body.v2 .event-detail-content h3,
body.v2 .event-detail-content h4,
body.v2 .event-detail-content h5,
body.v2 .event-detail-content h6,
body.v2 .registration-modal-content h1,
body.v2 .registration-modal-content h2,
body.v2 .registration-modal-content h3,
body.v2 .registration-modal-content h4,
body.v2 .registration-modal-content h5,
body.v2 .registration-modal-content h6,
body.v2 #detailEventContent h1,
body.v2 #detailEventContent h2,
body.v2 #detailEventContent h3,
body.v2 #detailEventContent h4,
body.v2 #detailEventContent h5,
body.v2 #detailEventContent h6,
body.v2 .registration-modal-body h1,
body.v2 .registration-modal-body h2,
body.v2 .registration-modal-body h3,
body.v2 .registration-modal-body h4,
body.v2 .registration-modal-body h5,
body.v2 .registration-modal-body h6 {
    color: var(--v2-text-dark, #111111) !important;
}

/* Asegurar que ningún elemento tenga fondo oscuro dentro de modales - SCOPED A body.v2 */
/* Nota: Los estilos de inputs en modales se heredan de las reglas globales arriba */
/* Estos estilos específicos solo se usan si hay conflictos con estilos inline */

body.v2 .calendar-modal-content label,
body.v2 .event-detail-content label,
body.v2 .registration-modal-content label,
body.v2 .registration-modal-body label {
    color: var(--v2-text-dark, #111111) !important;
}

/* Calendar grid específico dentro del modal - SCOPED A body.v2 */
body.v2 .calendar-modal-content .homev2-calendar-day-header,
body.v2 .calendar-modal-content .homev2-calendar-day {
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    border: 1px solid var(--v2-border-light, #E5E5E5) !important;
    color: var(--v2-text-dark, #111111) !important;
}

body.v2 .calendar-modal-content .homev2-calendar-day:hover {
    background-color: var(--v2-bg-light, #FAFAFA) !important;
    border-color: var(--v2-border-dark, #333333) !important;
}

body.v2 .calendar-modal-content .calendar-day.homev2-today {
    border: 2px solid var(--v2-bg-dark, #111111) !important;
    background-color: var(--v2-bg-light, #FAFAFA) !important;
}

body.v2 .calendar-modal-content label,
body.v2 .event-detail-content label,
body.v2 .registration-modal-content label,
body.v2 .registration-modal-body label {
    color: var(--v2-text-dark, #111111) !important;
}

/* Event detail info items - SCOPED A body.v2 */
body.v2 .event-detail-info,
body.v2 .homev2-event-detail-info {
    background-color: transparent !important;
}

body.v2 .event-detail-info-item,
body.v2 .homev2-event-detail-info-item {
    background-color: transparent !important;
}

/* Detail event footer - SCOPED A body.v2 */
body.v2 #detailEventFooter {
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    border-top: 1px solid var(--v2-border-light, #E5E5E5) !important;
}

/* Asegurar que los botones dentro del modal tengan estilos correctos - SCOPED A body.v2 */
body.v2 .calendar-modal-content button:not(.v2-modal-close):not(.close-calendar-btn):not(.event-detail-close),
body.v2 .event-detail-content button:not(.v2-modal-close):not(.close-calendar-btn):not(.event-detail-close),
body.v2 .registration-modal-content button:not(.v2-modal-close):not(.close-calendar-btn):not(.event-detail-close),
body.v2 .registration-modal-body button:not(.v2-modal-close):not(.close-calendar-btn):not(.event-detail-close),
body.v2 #regSubmitBtnModal,
body.v2 #detailEventFooter button {
    background-color: var(--v2-bg-dark, #111111) !important;
    color: var(--v2-text-light, #FFFFFF) !important;
    border: 2px solid var(--v2-bg-dark, #111111) !important;
}

body.v2 .calendar-modal-content button:not(.v2-modal-close):not(.close-calendar-btn):not(.event-detail-close):hover,
body.v2 .event-detail-content button:not(.v2-modal-close):not(.close-calendar-btn):not(.event-detail-close):hover,
body.v2 .registration-modal-content button:not(.v2-modal-close):not(.close-calendar-btn):not(.event-detail-close):hover,
body.v2 .registration-modal-body button:not(.v2-modal-close):not(.close-calendar-btn):not(.event-detail-close):hover,
body.v2 #regSubmitBtnModal:hover,
body.v2 #detailEventFooter button:hover {
    background-color: var(--v2-accent-hover, #333333) !important;
    border-color: var(--v2-accent-hover, #333333) !important;
    color: var(--v2-text-light, #FFFFFF) !important;
}

/* Sobrescribir estilos inline del formulario de registro generado por JavaScript - SCOPED A body.v2 */
body.v2 .registration-modal-body h4,
body.v2 .registration-modal-body #eventRegistrationForm h4 {
    color: var(--v2-text-dark, #111111) !important;
}

body.v2 .registration-modal-body label,
body.v2 .registration-modal-body #eventRegistrationForm label {
    color: var(--v2-text-dark, #111111) !important;
}

body.v2 .registration-modal-body small,
body.v2 .registration-modal-body #eventRegistrationForm small,
body.v2 .registration-modal-body #accompaniedContainerModal small {
    color: var(--v2-text-gray, #666666) !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
    box-shadow: none !important;
}

body.v2 .registration-modal-body span,
body.v2 .registration-modal-body #eventRegistrationForm span {
    color: var(--v2-text-gray, #666666) !important;
}

/* Asegurar que los elementos con estilos inline dentro del modal usen tema blanco - SCOPED A body.v2 */
body.v2 .registration-modal-body [style*="color: var(--text-light)"],
body.v2 .registration-modal-body [style*="color: var(--text-muted)"],
body.v2 .registration-modal-body [style*="background: var(--bg-darkest)"],
body.v2 .registration-modal-body [style*="background-color: var(--bg-darkest)"],
body.v2 .calendar-modal-content [style*="color: var(--text-light)"],
body.v2 .calendar-modal-content [style*="color: var(--text-muted)"],
body.v2 .calendar-modal-content [style*="background: var(--bg-darkest)"],
body.v2 .calendar-modal-content [style*="background-color: var(--bg-darkest)"],
body.v2 .event-detail-content [style*="color: var(--text-light)"],
body.v2 .event-detail-content [style*="color: var(--text-muted)"],
body.v2 .event-detail-content [style*="background: var(--bg-darkest)"],
body.v2 .event-detail-content [style*="background-color: var(--bg-darkest)"] {
    color: var(--v2-text-dark, #111111) !important;
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    border: 1px solid var(--v2-border-light, #E5E5E5) !important;
}

/* Sobrescribir específicamente inputs con estilos inline que usan variables antiguas - SCOPED A body.v2 */
body.v2 .registration-modal-body input[style*="background: var(--bg-darkest)"],
body.v2 .registration-modal-body input[style*="background-color: var(--bg-darkest)"],
body.v2 .registration-modal-body input[style*="color: var(--text-light)"],
body.v2 .calendar-modal-content input[style*="background: var(--bg-darkest)"],
body.v2 .calendar-modal-content input[style*="background-color: var(--bg-darkest)"],
body.v2 .calendar-modal-content input[style*="color: var(--text-light)"],
body.v2 .event-detail-content input[style*="background: var(--bg-darkest)"],
body.v2 .event-detail-content input[style*="background-color: var(--bg-darkest)"],
body.v2 .event-detail-content input[style*="color: var(--text-light)"] {
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    background: var(--v2-bg-white, #FFFFFF) !important;
    color: var(--v2-text-dark, #111111) !important;
    border: 1px solid var(--v2-border-light, #E5E5E5) !important;
}

/* Sobrescribir textareas y selects con estilos inline - SCOPED A body.v2 */
body.v2 .registration-modal-body textarea[style*="background: var(--bg-darkest)"],
body.v2 .registration-modal-body textarea[style*="background-color: var(--bg-darkest)"],
body.v2 .registration-modal-body textarea[style*="color: var(--text-light)"],
body.v2 .registration-modal-body select[style*="background: var(--bg-darkest)"],
body.v2 .registration-modal-body select[style*="background-color: var(--bg-darkest)"],
body.v2 .registration-modal-body select[style*="color: var(--text-light)"] {
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    background: var(--v2-bg-white, #FFFFFF) !important;
    color: var(--v2-text-dark, #111111) !important;
    border: 1px solid var(--v2-border-light, #E5E5E5) !important;
}

/* Event detail info items específicos - SCOPED A body.v2 */
body.v2 .event-detail-info-item span {
    color: var(--v2-text-gray, #666666) !important;
}

body.v2 .event-detail-info-item i {
    color: var(--v2-text-dark, #111111) !important;
}

/* Asegurar que todos los elementos con fondo oscuro dentro de modales sean blancos - SCOPED A body.v2 */
body.v2 .calendar-modal-content [style*="background"],
body.v2 .event-detail-content [style*="background"],
body.v2 .registration-modal-content [style*="background"],
body.v2 .registration-modal-body [style*="background"],
body.v2 #detailEventContent [style*="background"] {
    background-color: var(--v2-bg-white, #FFFFFF) !important;
    background: var(--v2-bg-white, #FFFFFF) !important;
}

/* Mensajes de error/éxito en el modal - SCOPED A body.v2 */
body.v2 #regMessageModal,
body.v2 #regMessage {
    background-color: var(--v2-bg-light, #FAFAFA) !important;
    border: 1px solid var(--v2-border-light, #E5E5E5) !important;
    color: var(--v2-text-dark, #111111) !important;
}

body.v2 #regMessageModal.success,
body.v2 #regMessage.success {
    background-color: #E8F5E9 !important;
    border-color: #4CAF50 !important;
    color: #2E7D32 !important;
}

body.v2 #regMessageModal.error,
body.v2 #regMessage.error {
    background-color: #FFEBEE !important;
    border-color: #F44336 !important;
    color: #C62828 !important;
}