/* ============================================
   INTRA MEDIA - EDITORIAL / POSTER STYLE
   Negro/Blanco/Rojo - Tipografía gigante
   Diseño: Club / Techno / Fashion
   Version: 142 (Reducido padding-bottom Historia: 120px → 48px)
   ============================================ */

/* ==================== RESET ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colores - Negro/Blanco/Rojo */
    --black: #000000;
    --white: #ffffff;
    --red: #ff0000;
    --red-dark: #cc0000;
    --gray: #808080;
    --gray-light: #cccccc;
    --gray-dark: #1a1a1a;

    /* Typography */
    --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;

    /* Spacing Apple - Generoso y consistente */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 80px;      /* Apple style: espaciado generoso */
    --space-xxl: 120px;    /* Entre secciones principales */

    --container-max: 1200px;  /* Apple style: contenido más estrecho = mejor lectura */
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;  /* Prevenir scroll horizontal */
    width: 100%;
    max-width: 100vw;
}

body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--black);
    line-height: 1.6;  /* Apple: line-height más respirado */
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;  /* Apple: mejor renderizado */
}

/* ==================== CONTAINERS ==================== */
.container-editorial {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);  /* Apple: padding generoso */
}

@media (max-width: 1024px) {
    .container-editorial {
        padding: 0 var(--space-lg);
    }
}

@media (max-width: 768px) {
    .container-editorial {
        padding: 0 20px;  /* 20px fijo en mobile */
    }
}

/* ==================== HERO VOGUE - EDITORIAL CENTERED ==================== */
.hero-vogue {
    background: var(--black);  /* Dark background editorial */
    padding-top: 200px;  /* Más espacio superior (140px → 200px) */
    padding-bottom: 160px;  /* Más espacio inferior (120px → 160px) */
    position: relative;
    overflow: visible;  /* Sin overflow - comportamiento normal */
    width: 100%;
}

/* Container - Vogue: centrado y estrecho */
.hero-vogue-container {
    max-width: 900px;  /* Vogue: estrecho para elegancia */
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    text-align: center;  /* Vogue: todo centrado */
    position: relative;
    z-index: 2;
    box-sizing: border-box;  /* Incluir padding en width */
}

/* Eyebrow - Vogue style */
.hero-vogue-eyebrow {
    font-family: var(--font-body);
    font-size: 0.875rem;  /* 14px discreto */
    font-weight: 600;
    color: var(--red);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: var(--space-md);  /* 24px */
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* Título - Vogue: GIGANTE centrado */
.hero-vogue-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 12vw, 6rem);  /* Mobile-first: 28px - 96px */
    font-weight: 600;  /* Semibold elegante */
    line-height: 1.15;  /* Más espacio en mobile */
    letter-spacing: -0.01em;  /* Tracking menos negativo en mobile */
    color: var(--white);
    margin-bottom: var(--space-md);  /* 24px menos espacio */
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* Subtitle - Vogue: elegante y centrado */
.hero-vogue-subtitle {
    font-family: var(--font-body);
    font-size: 1.25rem;  /* Desktop: 20px */
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);  /* Más translúcido */
    margin-bottom: var(--space-lg);  /* 48px menos aire */
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* CTAs - Vogue: centrados */
.hero-vogue-cta {
    display: flex;
    gap: var(--space-xs);  /* 8px gap - más compacto */
    margin-bottom: var(--space-lg);  /* 48px menos aire */
    justify-content: center;  /* Centrado */
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;  /* Más compacto para mobile */
    min-height: 44px;  /* Reducido de 48px */
    background: var(--red);
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9375rem;  /* 15px más pequeño */
    font-weight: 400;  /* Apple: regular weight */
    border-radius: 980px;  /* Apple: super rounded (pill perfecto) */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);  /* Apple easing */
    white-space: nowrap;
    border: none;
}

.btn-hero-primary:hover {
    background: #e60000;  /* Apple: hover más sutil */
    transform: scale(0.985);  /* Apple: scale muy sutil */
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.15);  /* Apple: sombra sutil */
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    min-height: 44px;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);  /* Apple: blanco sobre negro */
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9375rem;  /* 15px más pequeño */
    font-weight: 400;
    border: none;  /* Apple: sin borde en secundario */
    border-radius: 980px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.1);  /* Apple: bg sutil blanco */
    color: var(--white);  /* Blanco total */
    transform: scale(0.985);
}

/* Proof Stats - Vogue: scroll horizontal editorial */
.hero-vogue-proof {
    display: flex;
    gap: var(--space-xxl);  /* 120px gap entre stats */
    overflow-x: scroll;  /* Scroll horizontal FORZADO */
    overflow-y: hidden;  /* Hidden para permitir scrollLeft */
    scroll-behavior: auto;  /* Auto para permitir JS control */
    padding: var(--space-md) 0;  /* Padding vertical para espacio */
    margin: 0 calc(-1 * var(--space-xl));  /* Sangría negativa para full width */
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
    -webkit-overflow-scrolling: touch;  /* Smooth scroll en iOS */

    /* Ocultar scrollbar completamente - Vogue clean */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}

/* Ocultar scrollbar en Chrome/Safari/Opera */
.hero-vogue-proof::-webkit-scrollbar {
    display: none;
}

.proof-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;  /* No shrink - mantiene tamaño */
    min-width: 200px;  /* Ancho mínimo por stat */
    opacity: 0;
}

/* Animaciones laterales - Vogue editorial style */
.proof-stat-left {
    animation: slideInFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.proof-stat-right {
    animation: slideInFromRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Delays progresivos - efecto cascada Vogue */
.proof-stat:nth-child(1) {
    animation-delay: 0.5s;
}

.proof-stat:nth-child(2) {
    animation-delay: 0.65s;
}

.proof-stat:nth-child(3) {
    animation-delay: 0.8s;
}

.proof-stat:nth-child(4) {
    animation-delay: 0.95s;
}

.proof-stat-number {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.5rem);  /* Grande */
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-xs);  /* 8px */
    white-space: nowrap;  /* No wrap en números */
}

.proof-stat-label {
    font-family: var(--font-body);
    font-size: clamp(0.6875rem, 0.85vw, 0.875rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    max-width: 150px;  /* Permite wrap en labels */
}

/* ==================== HERO VOGUE - DECORATIVE ELEMENTS ==================== */

/* Círculo Rojo Decorativo - Vogue subtle */
.hero-vogue::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.15) 0%, rgba(255, 0, 0, 0.05) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    filter: blur(80px);  /* Blur generoso */
    opacity: 0;
    animation: fadeInScale 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

/* Apple Animations - Cubic Bezier Signature */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);  /* Apple: movimiento sutil (30 → 20) */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.98);  /* Apple: combinado con scale */
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Shake animation para validación de formularios */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* Vogue Editorial - Animaciones laterales */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);  /* Vogue: deslizamiento pronunciado desde izquierda */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(60px);  /* Vogue: deslizamiento pronunciado desde derecha */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Vogue Statement Animations */
@keyframes vogueSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);  /* Vogue: sube desde abajo */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vogueFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes vogueLineExpand {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

/* ==================== PROPUESTA - VOGUE EDITORIAL MAGAZINE CON ESENCIA ==================== */
.stats-proof-editorial {
    padding: var(--space-xxl) 0 var(--space-xxl);  /* Vogue: espaciado generoso */
    background: var(--black);  /* Negro editorial Vogue */
    position: relative;
    overflow: hidden;  /* Para contener efectos visuales */
}

/* GLOW ROJO SUTIL - Esencia visual sin fatigar */
.stats-proof-editorial::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.08) 0%, rgba(255, 0, 0, 0.03) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(100px);  /* Apple: blur generoso */
    opacity: 1;
    animation: breathingGlow 8s ease-in-out infinite;  /* Respiración sutil */
}

/* Animación breathing para el glow - da vida sin fatigar */
@keyframes breathingGlow {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.stats-proof-block {
    max-width: 1100px;  /* Vogue: más ancho para layout magazine */
    margin: 0 auto;
    padding: 0 var(--space-xl);
    position: relative;
    z-index: 1;  /* Por encima del glow */
}

/* Eyebrow pequeño - Vogue style con animación */
.stats-proof-title {
    font-family: var(--font-body);  /* Vogue: body font para eyebrow */
    font-size: clamp(0.6875rem, 0.85vw, 0.875rem);  /* PEQUEÑO - Vogue discreto */
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.15em;  /* Tracking muy expandido - Vogue */
    text-transform: uppercase;
    margin-bottom: var(--space-lg);  /* 48px espacio */
    color: rgba(255, 255, 255, 0.4);  /* Muy translúcido */
    text-align: left;  /* Vogue: alineado IZQUIERDA */
    position: relative;
}

/* Línea decorativa minimalista - da ritmo visual */
.stats-proof-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--red);
    margin-top: var(--space-sm);
    opacity: 0.6;
    animation: lineExpand 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lineExpand {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 60px;
        opacity: 0.6;
    }
}

/* Lista vertical con tipografía GIGANTE - Vogue magazine */
.stats-proof-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);  /* Vogue: GAP GIGANTE (120px) entre items */
    counter-reset: propuesta-counter;  /* Contador para números */
}

.stat-proof {
    text-align: left;  /* Vogue: ALINEADO IZQUIERDA */
    padding: 0;  /* Vogue: SIN padding - limpio */
    border: none;  /* Vogue: SIN bordes por defecto */
    background: none;  /* Vogue: SIN background */
    border-radius: 0;
    position: relative;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);  /* Transición más lenta = más elegante */
    backdrop-filter: none;
    padding-bottom: var(--space-xl);  /* Espacio inferior para separación */
    padding-left: var(--space-lg);  /* Espacio para número decorativo */
    border-left: 2px solid rgba(255, 255, 255, 0.05);  /* Línea vertical sutil - ritmo */
    counter-increment: propuesta-counter;
}

/* Número decorativo gigante - Vogue editorial */
.stat-proof::before {
    content: '0' counter(propuesta-counter);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);  /* Número moderado */
    font-weight: 900;  /* Black weight */
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--red);  /* Rojo Vogue */
    opacity: 0.3;  /* Translúcido */
    transform: translateX(-50%);  /* Centrado en línea vertical */
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Último item sin línea inferior pero con línea vertical */
.stat-proof:last-child {
    padding-bottom: 0;
}

/* Hover elegante - línea roja + número visible */
.stat-proof:hover {
    border-left-color: rgba(255, 0, 0, 0.4);  /* Línea roja en hover */
    padding-left: calc(var(--space-lg) + 8px);  /* Desplazamiento sutil a la derecha */
}

.stat-proof:hover::before {
    opacity: 1;  /* Número completamente visible */
    color: var(--white);  /* Blanco en hover */
    transform: translateX(-50%) scale(1.1);  /* Crece ligeramente */
}

.stat-proof-number {
    display: none;
}

.stat-proof-label {
    display: block;
    font-family: var(--font-display);  /* Vogue: display font para impacto */
    font-size: clamp(2rem, 4.5vw, 4rem);  /* GIGANTE - Vogue editorial (4rem) */
    color: var(--white);  /* Blanco puro - Vogue contraste */
    line-height: 1.25;  /* Vogue: más respirado (1.15 → 1.25) para lectura */
    font-weight: 500;  /* Vogue: medium weight elegante */
    text-align: left;
    letter-spacing: -0.015em;  /* Vogue: tracking más abierto para legibilidad */
    text-transform: none;
    max-width: 800px;  /* Vogue: ancho más controlado (900→800) para lectura óptima */
    margin: 0;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover - glow sutil + desplazamiento */
.stat-proof:hover .stat-proof-label {
    color: rgba(255, 255, 255, 0.95);  /* Ligeramente más translúcido */
    text-shadow: 0 0 30px rgba(255, 0, 0, 0.2);  /* Glow rojo muy sutil */
}

/* ==================== DISPONIBILIDAD EDITORIAL ==================== */
.disponibilidad-editorial {
    padding: var(--space-xxl) 0;
    background: var(--white);
}

.editorial-block {
    text-align: center;
}

.editorial-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm); /* Compacto */
    color: var(--black);
}

.editorial-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--gray);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: var(--space-lg); /* Aire */
}

/* Stats - VERTICAL EDITORIAL con desplazamiento irregular */
.stats-editorial {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 600px;
    margin: 0 auto;
    align-items: flex-start; /* No centrado perfecto */
}

.stat-editorial {
    text-align: left;
    padding: var(--space-md) 0;
    width: 100%;
}

.stat-editorial.stat-offset {
    padding-left: var(--space-lg); /* Desplazamiento irregular - editorial */
}

.stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5rem); /* Más grande en vertical */
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-xs);
    color: var(--black);
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    color: var(--gray);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ==================== PROBLEMA - VOGUE EDITORIAL MAGAZINE STYLE ==================== */
.problema-editorial {
    padding: var(--space-xxl) 0 calc(var(--space-xxl) * 1.5);  /* 120px arriba, 180px abajo */
    background: var(--white);  /* Fondo blanco limpio */
    color: var(--black);
    position: relative;
    overflow: hidden;
}

/* Background decorativo - Vogue style */
.problema-editorial::before {
    content: 'PROBLEMA';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(12rem, 30vw, 28rem);  /* Texto gigante de fondo */
    font-weight: 900;
    color: rgba(0, 0, 0, 0.04);  /* Negro transparente simple */
    letter-spacing: -0.05em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.problema-impact {
    max-width: 1100px;  /* Vogue: más ancho para layout editorial */
    margin: 0 auto;
    padding: 0 20px;  /* Márgenes laterales 20px */
    position: relative;
    z-index: 1;
}

/* Título - Vogue: GIGANTE vertical a la izquierda */
.impact-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.5rem);  /* Vogue: título grande */
    font-weight: 900;  /* Vogue: black weight */
    line-height: 0.9;
    letter-spacing: -0.03em;  /* Tracking negativo Vogue */
    text-transform: uppercase;
    margin-bottom: var(--space-xl);  /* 80px aire Vogue */
    color: var(--black);  /* Negro sobre blanco */
    text-align: left;
    position: relative;
}

/* Línea roja decorativa - Vogue accent */
.impact-title::after {
    content: '';
    display: block;
    width: 120px;
    height: 6px;
    background: var(--red);
    margin-top: var(--space-md);
}

/* Lista de problemas - Vogue: layout asimétrico con números */
.impact-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);  /* Vogue: gap gigante (120px) entre items */
    counter-reset: problema-counter;
}

.impact-list p {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 3rem);  /* Vogue: tipografía GIGANTE */
    line-height: 1.2;  /* Vogue: tight line-height */
    font-weight: 600;  /* Vogue: semibold */
    text-align: left;
    padding-left: 0;
    border: none;
    position: relative;
    padding-top: var(--space-lg);  /* 48px espacio para número */
    counter-increment: problema-counter;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Todos los párrafos en negro */
.impact-list p {
    color: var(--black);
}

/* Número gigante - Vogue editorial style */
.impact-list p::before {
    content: '0' counter(problema-counter);
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 7rem);  /* Número GIGANTE */
    font-weight: 900;  /* Vogue: black weight */
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--red);  /* Rojo Vogue */
    opacity: 0.2;  /* Translúcido */
    z-index: -1;
}

/* Hover dramático - Vogue style */
.impact-list p:hover {
    transform: translateX(12px);  /* Desplazamiento Vogue */
    color: rgba(0, 0, 0, 0.6);  /* Fade a gris en hover */
}

.impact-list p:hover::before {
    opacity: 0.5;  /* Número más visible en hover */
    color: var(--black);  /* Negro en hover */
}

/* ==================== CÓMO FUNCIONA - VOGUE EDITORIAL ASIMÉTRICO CON IMÁGENES ==================== */
.como-funciona-editorial {
    padding: var(--space-xxl) 0;  /* Apple: 120px espaciado */
    background: var(--white);  /* Fondo blanco limpio */
    position: relative;
    overflow: hidden;
}

/* Título - Vogue: pequeño eyebrow */
.section-title-editorial {
    font-family: var(--font-body);
    font-size: clamp(0.6875rem, 0.85vw, 0.875rem);  /* PEQUEÑO - Vogue discreto */
    font-weight: 500;
    letter-spacing: 0.15em;  /* Tracking expandido Vogue */
    text-transform: uppercase;
    text-align: left;
    margin-bottom: var(--space-xl);  /* 80px espacio */
    color: rgba(0, 0, 0, 0.4);  /* Negro translúcido */
    max-width: 100%;
    padding-left: var(--space-xl);  /* Padding lateral para alinear con cards */
    position: relative;
}

/* Línea decorativa roja - Vogue accent */
.section-title-editorial::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--red);
    margin-top: var(--space-sm);
    opacity: 0.6;
}

/* SCROLL HORIZONTAL - Vogue editorial limpio */
.pasos-editorial {
    display: flex;
    flex-direction: row;
    gap: var(--space-md);  /* 24px gap - Vogue */
    padding: 0 var(--space-xl) var(--space-lg);  /* Padding bottom para dots */
    margin: 0 0 var(--space-sm);  /* Aire antes de dots */
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;  /* Snap entre cards */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;  /* Smooth en iOS */

    /* Ocultar scrollbar pero mantener funcionalidad */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}

.pasos-editorial::-webkit-scrollbar {
    display: none;  /* Chrome/Safari */
}

/* CARD - Vogue editorial con bordes redondeados + SCROLL SNAP */
.paso-editorial {
    position: relative;
    flex: 0 0 85%;  /* Ancho 85% del viewport - muestra parte de siguiente */
    max-width: 900px;  /* Ancho máximo - Vogue */
    min-height: 580px;  /* Altura generosa - Vogue vertical */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 28px;  /* BORDES MÁS REDONDEADOS - Vogue */
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);  /* Shadow más pronunciada */
    scroll-snap-align: start;  /* Snap al inicio de cada card */

    /* Animación entrada */
    opacity: 0;
    transform: translateY(30px);
    animation: vogueFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animación escalonada por card */
.paso-editorial:nth-child(1) {
    animation-delay: 0.1s;
}

.paso-editorial:nth-child(2) {
    animation-delay: 0.2s;
}

.paso-editorial:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes vogueFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover - elevación sutil (NO scale) */
.paso-editorial:hover {
    transform: translateY(-8px);  /* Elevación más pronunciada */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);  /* Shadow más dramática en hover */
}

/* Hover en número - crece sutilmente */
.paso-editorial:hover .paso-num-editorial {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Card 1 - CUÉNTANOS TU EVENTO */
.paso-editorial:nth-child(1) {
    background-image:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0.7) 100%
        ),
        url('../images/como funciona. foto1.webp');  /* Imagen local */
}

/* Card 2 - SELECCIONAMOS POR TI */
.paso-editorial:nth-child(2) {
    background-image:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0.7) 100%
        ),
        url('../images/como funciona. foto2.webp');  /* Imagen local */
}

/* Card 3 - RESERVAS SIN COMPLICACIONES */
.paso-editorial:nth-child(3) {
    background-image:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0.7) 100%
        ),
        url('../images/como funciona. foto3.webp');  /* Imagen local */
}

/* Overlay con gradiente radial - más sofisticado */
.paso-editorial::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 30% 50%,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );  /* Gradiente radial - foco visual */
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    border-radius: 28px;  /* Mismo radio que parent */
}

.paso-editorial:hover::before {
    background: radial-gradient(
        circle at 30% 50%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.15) 100%
    );  /* Más claro en hover - destaca contenido */
}

/* Vignette sutil en los bordes */
.paso-editorial::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 30%,
        rgba(0, 0, 0, 0.15) 100%
    );  /* Vignette - focaliza atención */
    pointer-events: none;
    z-index: 2;
    border-radius: 28px;
    opacity: 0.5;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.paso-editorial:hover::after {
    opacity: 0.2;  /* Menos vignette en hover */
}

/* Contenido de la card */
.paso-content {
    position: relative;
    z-index: 3;  /* Por encima de overlays */
    padding: clamp(2.5rem, 5vw, 3.5rem);  /* Padding más generoso */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* Espacio entre número y contenido */
}

/* Número pequeño arriba - pill glassmorphism */
.paso-num-editorial {
    align-self: flex-start;  /* Alineado a la izquierda */
    font-family: var(--font-body);  /* Body font - más sutil */
    font-size: clamp(0.8125rem, 1vw, 0.875rem);  /* Muy pequeño - discreto */
    font-weight: 600;
    color: var(--white);
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);  /* Fondo translúcido sutil */
    backdrop-filter: blur(12px);  /* Glassmorphism fuerte */
    -webkit-backdrop-filter: blur(12px);  /* Safari */
    padding: 0.65rem 1.2rem;
    border-radius: 24px;  /* Pill shape más redondeado */
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: auto;  /* Empuja contenido abajo */
}

/* Wrapper para contenido inferior */
.paso-content > div:last-child {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Título GIGANTE - Vogue editorial limpio */
.paso-editorial h3 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4.5vw, 4rem);  /* GRANDE pero controlado */
    font-weight: 700;  /* Bold */
    letter-spacing: -0.03em;  /* Tight - impacto */
    text-transform: none;  /* SIN UPPERCASE - más Vogue */
    margin-bottom: var(--space-xs);  /* 8px espacio - muy apretado */
    color: var(--white);
    line-height: 1.05;  /* Muy tight - editorial */
    position: relative;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);  /* Shadow más pronunciada */
}

/* Descripción - Vogue legible sobre oscuro */
.paso-editorial p {
    font-size: clamp(1rem, 1.3vw, 1.25rem);  /* Tamaño elegante */
    color: rgba(255, 255, 255, 0.9);  /* Blanco translúcido */
    line-height: 1.5;  /* Respirado */
    font-weight: 400;
    position: relative;
    max-width: 520px;  /* Límite de lectura */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);  /* Shadow para contraste */
}

/* Línea decorativa sutil antes del título - Vogue accent */
.paso-editorial h3::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--red);
    margin-bottom: var(--space-sm);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.paso-editorial:hover h3::before {
    opacity: 1;
    transform: scaleX(1);
}

/* DOTS NAVIGATION - Indicadores de scroll */
.pasos-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);  /* 8px gap entre dots */
    padding: var(--space-md) 0;
    margin-bottom: var(--space-lg);
}

.paso-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);  /* Gris claro */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.paso-dot.active {
    width: 32px;  /* Pill cuando está activo */
    border-radius: 4px;  /* Pill shape */
    background: var(--black);  /* Negro sólido */
}

.paso-dot:hover {
    background: rgba(0, 0, 0, 0.4);  /* Más oscuro en hover */
}

/* CTA LIMPIO - Vogue editorial minimalista */
.cta-editorial-center {
    text-align: center;
    padding: var(--space-xl) var(--space-xl) 0;
    max-width: 600px;
    margin: 0 auto;
}

.cta-editorial-center .btn-poster {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 1.25rem 3rem;
    background: var(--black);
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 40px;  /* Pill button - Vogue */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 2px solid var(--black);
}

.cta-editorial-center .btn-poster:hover {
    background: var(--white);
    color: var(--black);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.cta-editorial-center .btn-poster .arrow {
    font-size: 1.2em;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-editorial-center .btn-poster:hover .arrow {
    transform: translateX(4px);
}

/* ==================== URGENCIA EDITORIAL - ROJO FULL ==================== */
.urgencia-editorial {
    padding: var(--space-xxl) var(--space-xl);  /* Apple: espaciado generoso */
    background: var(--red);
    color: var(--white);
}

.urgencia-block {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.urgencia-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    color: var(--white);
}

/* Texto pequeño - primer párrafo */
.urgencia-text-small {
    font-size: clamp(0.875rem, 1.2vw, 1rem);  /* MÁS PEQUEÑO */
    line-height: 1.5;
    margin-bottom: var(--space-xs);  /* 8px abajo */
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}

/* Wrapper del CTA - más margen superior */
.urgencia-cta {
    margin-top: var(--space-lg);  /* 48px arriba - más espacio desde el subtítulo */
}

/* Texto principal - segundo párrafo CON MARGEN SUPERIOR */
.urgencia-text-main {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    line-height: 1.6;
    margin-top: var(--space-md);  /* 24px ARRIBA - margen superior de los otros textos */
    margin-bottom: var(--space-md);  /* 24px abajo */
    color: var(--white);
    font-weight: 700;
}

.btn-poster-red {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 22px 56px; /* Más grande (72px altura) */
    background: var(--white);
    color: var(--red);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 3px solid var(--white);
    transition: all 0.3s ease;
}

.btn-poster-red:hover {
    background: var(--red);
    color: var(--white);
    border-color: var(--white);
    transform: translateY(-2px);
}

/* ==================== URGENCIA - TOQUES VOGUE ==================== */

/* Forbes divider arriba de la sección */
.forbes-divider-urgencia {
    width: 80px;
    height: 3px;
    background: var(--white);
    margin: 0 auto var(--space-lg) auto;  /* Centrado + 48px abajo */
}

/* Forbes divider abajo del CTA */
.forbes-divider-urgencia.forbes-divider-bottom {
    margin: var(--space-lg) auto 0 auto;  /* 48px arriba + centrado */
}

/* LIMITADAS en cursiva con underline rojo sobre fondo rojo */
.highlight-italic-red {
    display: inline-block;
    font-style: italic !important;  /* Vogue cursiva */
    text-decoration: underline !important;
    text-decoration-color: var(--white) !important;  /* Blanco sobre rojo */
    text-decoration-thickness: 6px !important;
    text-underline-offset: 8px !important;
    text-decoration-style: solid !important;
}

/* CTA Vogue - Redondeado y en una línea - EXTRA FINO */
.btn-urgencia-vogue {
    display: inline-flex;
    align-items: center;
    gap: 12px;  /* Gap entre texto y flecha */
    padding: 12px 32px;  /* EXTRA FINO - reducido a 12px vertical */
    background: transparent;
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 2px solid var(--white);
    border-radius: 50px;  /* REDONDEADO - pill shape */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;  /* EN UNA SOLA LÍNEA - no wrap */
}

.btn-urgencia-vogue:hover {
    background: var(--white);  /* Relleno blanco en hover */
    color: var(--red);
    border-color: var(--white);
    transform: translateY(-3px);  /* Levanta más */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);  /* Sombra sutil */
}

.btn-urgencia-vogue .arrow {
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.btn-urgencia-vogue:hover .arrow {
    transform: translateX(4px);  /* Flecha se mueve a la derecha */
}

/* ==================== FORMULARIO EDITORIAL - BLANCO PARA VISIBILIDAD ==================== */
.formulario-editorial {
    padding: 160px 20px 80px 20px;  /* 160px arriba, 80px abajo, 20px laterales */
    background: var(--white);
    color: var(--black);
    position: relative;
    overflow: hidden;
}

/* Glow sutil de fondo */
.formulario-editorial::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.form-editorial-wrapper {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Badge superior - CENTRADO, MÁS PEQUEÑO, CON PUNTO ANIMADO RGB */
.form-badge-wrapper {
    display: flex;
    justify-content: center;  /* Centrar el badge */
    margin-bottom: var(--space-md);
}

.form-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;  /* Más pequeño: 6px vertical, 16px horizontal */
    background: rgba(255, 0, 0, 0.08);
    border: 1px solid rgba(255, 0, 0, 0.2);
    border-radius: 50px;
    font-family: var(--font-display);
    font-size: 0.75rem;  /* Más pequeño: 12px */
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* SOLO el texto en rojo - v143.1 */
.form-badge-text {
    color: var(--red);
}

/* Punto rojo animado - SOLO ROJO (sin RGB) - v143.1 */
.form-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.7);
    animation: redPulse 2s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Animación SOLO ROJO - pulso de intensidad (optimizada para compositing) */
@keyframes redPulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

.form-title-editorial {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 7vw, 5.5rem);  /* Ligeramente más pequeño */
    font-weight: 700;
    line-height: 0.95;  /* Más respirado */
    letter-spacing: -0.02em;  /* Menos tracking negativo */
    text-transform: uppercase;
    text-align: center;
    margin-bottom: var(--space-md);  /* Más espacio abajo */
    color: var(--black);
}

.form-subtitle-editorial {
    font-size: clamp(1rem, 1.35vw, 1.25rem);  /* Más pequeño y refinado */
    text-align: center;
    color: var(--red);
    margin-bottom: var(--space-xl);  /* Mucho más espacio antes del form (80px) */
    letter-spacing: 0.01em;  /* Menos separación */
    font-weight: 500;  /* Menos bold (era 700) */
    line-height: 1.5;  /* Más respirado */
}

.form-editorial {
    background: transparent;
}

.form-row-editorial {
    display: grid;
    grid-template-columns: 1fr 1.15fr; /* NO perfectos - editorial */
    gap: var(--space-md); /* 32px */
    margin-bottom: var(--space-md); /* 32-40px entre campos */
}

.form-group-editorial {
    display: flex;
    flex-direction: column;
}

.form-group-editorial.full-width {
    grid-column: 1 / -1;
}

.form-group-editorial label {
    font-family: var(--font-display);
    font-size: clamp(0.75rem, 0.9vw, 0.875rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
    color: var(--black);
}

.form-group-editorial input,
.form-group-editorial select,
.form-group-editorial textarea {
    padding: var(--space-sm) var(--space-sm);
    min-height: 56px;
    background: var(--white);
    border: 2px solid var(--black);
    color: var(--black);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    transition: all 0.3s ease, border-color 0.2s ease;
}

.form-group-editorial input:focus,
.form-group-editorial select:focus,
.form-group-editorial textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
}

.form-group-editorial input::placeholder,
.form-group-editorial textarea::placeholder {
    color: var(--gray);
}

.form-group-editorial textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group-editorial select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='black' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Secciones del form */
.form-section-priority {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--gray-light);
}

.form-section-secondary {
    margin-bottom: var(--space-md);
}

.btn-poster-full {
    width: 100%;
    padding: 18px var(--space-md);  /* Padding más compacto */
    background: var(--red);
    color: var(--white);
    border: none;
    border-radius: 50px;  /* Bordes muy redondeados (pill shape) */
    font-family: var(--font-display);
    font-size: clamp(0.875rem, 1.4vw, 1.125rem);  /* Texto más pequeño */
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);  /* Apple ease */
    margin-top: var(--space-lg);
    box-shadow: 0 4px 16px rgba(255, 0, 0, 0.2);
}

.btn-poster-full:hover {
    background: var(--red-dark);
    transform: translateY(-4px) scale(1.02);  /* Lift + escala más pronunciada */
    box-shadow: 0 12px 32px rgba(255, 0, 0, 0.3);
}

.form-disclaimer-editorial {
    text-align: center;
    font-size: clamp(0.75rem, 0.95vw, 0.875rem);  /* Más pequeño */
    color: rgba(0, 0, 0, 0.5);  /* Más sutil */
    margin-top: var(--space-md);  /* Más espacio arriba */
    letter-spacing: 0.03em;  /* Más separación = más elegante */
    font-weight: 500;  /* Menos bold */
}

/* Trust indicators */
.form-trust-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.trust-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.trust-number {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
    font-weight: 700;
    color: var(--red);
    letter-spacing: -0.02em;
}

.trust-label {
    font-size: clamp(0.75rem, 0.9vw, 0.875rem);
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.trust-divider {
    width: 1px;
    height: 40px;
    background: rgba(0, 0, 0, 0.1);
}

/* ==================== NUESTRA HISTORIA - VALIDACIÓN EMPRESA (MÁGICA) ==================== */
.historia-editorial {
    padding-top: var(--space-xxl);  /* 120px arriba */
    padding-bottom: var(--space-lg);  /* 48px abajo - reducido */
    background: var(--white);
    position: relative;
    overflow: hidden;
}

/* Partículas flotantes mágicas */
.historia-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.particle-historia {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--red);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 8s ease-in-out infinite;
}

.particle-historia:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 10s;
}

.particle-historia:nth-child(2) {
    top: 60%;
    left: 80%;
    animation-delay: 2s;
    animation-duration: 12s;
}

.particle-historia:nth-child(3) {
    top: 40%;
    left: 30%;
    animation-delay: 4s;
    animation-duration: 9s;
}

.particle-historia:nth-child(4) {
    top: 80%;
    left: 60%;
    animation-delay: 1s;
    animation-duration: 11s;
}

.particle-historia:nth-child(5) {
    top: 30%;
    left: 90%;
    animation-delay: 3s;
    animation-duration: 13s;
}

@keyframes particleFloat {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-40px) scale(1);
    }
}

/* Eyebrow - Apple style con glow effect */
.historia-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(0.6875rem, 0.85vw, 0.875rem);  /* 11-14px */
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.65);  /* Mejorado para contraste WCAG AA */
    margin-bottom: var(--space-md);
    text-align: center;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* Título gigante - Editorial style con animación de líneas */
.historia-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 8rem);  /* 48-128px - GIGANTE */
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--black);
    margin-bottom: var(--space-md);
    position: relative;
    z-index: 2;
}

.historia-title-line {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    animation: titleSlideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.historia-title-line:nth-child(1) {
    animation-delay: 0.3s;
}

.historia-title-line:nth-child(3) {
    animation-delay: 0.5s;
}

@keyframes titleSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Divider rojo - Apple accent ANIMADO (optimizado para compositing) */
.historia-divider {
    width: 80px;
    height: 2px;
    background: rgba(255, 0, 0, 0.4);
    margin: 0 auto var(--space-xl);
    position: relative;
    z-index: 2;
    transform: scaleX(0);
    transform-origin: center;
    animation: dividerExpand 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
    will-change: transform;
}

@keyframes dividerExpand {
    to {
        transform: scaleX(1);
    }
}

/* ==================== TIMELINE VOGUE - EDITORIAL MINIMALISTA ==================== */

/* Contenedor principal Vogue */
.timeline-vogue {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-xxl) 0;  /* 120px vertical */
}

/* Línea vertical ultra fina - Vogue style */
.vogue-line {
    position: absolute;
    left: 80px;  /* Fija a la izquierda */
    top: 0;
    width: 1px;  /* Ultra fina */
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.02)
    );
    z-index: 0;
}

/* MILESTONE - Cada hito Vogue */
.vogue-milestone {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--space-xxl);  /* 120px separación */
    padding-left: 140px;  /* Espacio para número + línea */
    opacity: 0;
    transform: translateY(40px);
    animation: vogueSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

/* Delays escalonados */
.vogue-milestone:nth-child(2) {
    animation-delay: 0.9s;
}

.vogue-milestone:nth-child(3) {
    animation-delay: 1.2s;
}

@keyframes vogueSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contenido del milestone */
.vogue-milestone-content {
    flex: 1;
    max-width: 600px;
}

/* NÚMERO - Editorial style (01, 02, 03) */
.vogue-number {
    position: absolute;
    left: 0;
    top: 8px;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, 3.5rem);  /* 40-56px */
    font-weight: 300;  /* Light weight - muy Vogue */
    letter-spacing: 0.05em;
    color: rgba(0, 0, 0, 0.12);  /* Muy translúcido */
    line-height: 1;
}

/* Número del milestone actual */
.vogue-number-current {
    color: rgba(255, 0, 0, 0.15);  /* Rojo translúcido */
}

/* AÑO - Display gigante */
.vogue-year {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-md);  /* 24px */
}

.year-main {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5rem);  /* 48-80px - GIGANTE */
    font-weight: 700;
    letter-spacing: -0.02em;  /* Kerning negativo */
    color: var(--black);
    line-height: 0.9;  /* Muy apretado */
}

.year-sub {
    font-family: var(--font-display);
    font-size: clamp(0.6875rem, 0.9vw, 0.875rem);  /* 11-14px */
    font-weight: 600;
    letter-spacing: 0.2em;  /* Muy expandido */
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
    margin-top: 8px;
}

/* Año actual - con rojo sutil */
.year-main-current {
    color: rgba(0, 0, 0, 0.95);
    position: relative;
}

.year-main-current::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--red);
}

/* TÍTULO - Editorial serif-style */
.vogue-milestone-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.75rem);  /* 20-28px */
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--black);
    margin-bottom: var(--space-sm);  /* 16px */
    line-height: 1.3;
}

/* TEXTO - Body limpio */
.vogue-text {
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 1.1vw, 1.125rem);  /* 15-18px */
    font-weight: 400;
    line-height: 1.8;  /* Muy generoso - legibilidad */
    color: rgba(0, 0, 0, 0.75);
    max-width: 55ch;  /* Óptimo para lectura */
    margin-bottom: var(--space-md);
}

/* STATS VOGUE - Inline con separadores */
.vogue-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.vogue-stat {
    font-family: var(--font-display);
    font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);  /* 13-15px */
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
}

.vogue-stat strong {
    font-weight: 700;
    color: var(--black);
}

.vogue-stat-sep {
    font-size: clamp(0.75rem, 0.9vw, 0.875rem);
    color: rgba(0, 0, 0, 0.25);
}

/* QUOTE - Destacado Vogue */
.vogue-quote {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1.4vw, 1.375rem);  /* 18-22px */
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.01em;
    color: var(--red);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    padding-left: 24px;
    border-left: 2px solid var(--red);
    line-height: 1.5;
}

/* DIVIDER MINI - Línea fina horizontal */
.vogue-divider-mini {
    width: 60px;
    height: 1px;
    background: rgba(0, 0, 0, 0.15);
    margin-top: var(--space-lg);  /* 48px */
}

/* MILESTONE ACTUAL - Destaque sutil */
.vogue-milestone-current {
    /* Sin background agresivo, solo detalles tipográficos */
}

/* ==================== TESTIMONIOS RATING - BASE (VISIBLE EN DESKTOP) ==================== */
.testimonios-rating-below {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: var(--space-md);
    padding: var(--space-sm) 0;
}

.rating-stars {
    display: flex;
    gap: 4px;
}

.rating-star {
    color: var(--accent);
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.rating-star:hover {
    transform: scale(1.15);
}

.rating-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
}

.rating-score {
    font-weight: 700;
    color: var(--black);
    letter-spacing: 0.01em;
}

.rating-divider {
    color: rgba(0, 0, 0, 0.3);
}

.rating-count {
    font-weight: 500;
}

/* ==================== MOBILE RESPONSIVE - VOGUE ==================== */
@media (max-width: 768px) {
    .timeline-vogue {
        padding: var(--space-lg) 20px;  /* 20px margen lateral */
    }

    /* Línea a la izquierda - respetando margen de 20px */
    .vogue-line {
        left: 20px;  /* Alineada con el margen */
    }

    /* Milestone con padding ajustado */
    .vogue-milestone {
        padding-left: 60px;  /* 20px margen + 40px espacio */
        margin-bottom: var(--space-lg);
    }

    /* Número más pequeño y posicionado desde el margen */
    .vogue-number {
        font-size: 2rem;  /* 32px fijo */
        left: 0;  /* Desde el borde del milestone (que ya tiene padding) */
        top: 4px;
    }

    /* Contenido del milestone respetando márgenes */
    .vogue-milestone-content {
        padding-right: 0;  /* Sin padding extra a la derecha */
    }

    /* Año adaptado */
    .year-main {
        font-size: 3rem;  /* 48px fijo */
    }

    .year-sub {
        font-size: 0.6875rem;  /* 11px */
    }

    /* Título mobile */
    .vogue-milestone-title {
        font-size: 1.125rem;  /* 18px */
    }

    /* Texto mobile */
    .vogue-text {
        font-size: 0.9375rem;  /* 15px */
        line-height: 1.7;
    }

    /* Stats wrap en mobile */
    .vogue-stats {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Quote mobile */
    .vogue-quote {
        font-size: 1rem;  /* 16px */
        padding-left: 16px;
    }

    /* Divider más corto */
    .vogue-divider-mini {
        width: 40px;
        margin-top: var(--space-md);
    }

}

/* ==================== WHATSAPP - VOGUE EDITORIAL CARD ==================== */
.whatsapp-editorial {
    padding: var(--space-xxl) 0;  /* 120px espaciado */
    background: var(--white);
}

.whatsapp-vogue-card {
    position: relative;
    max-width: 1200px;  /* Forbes: más ancho */
    margin: 0 auto;
    min-height: 700px;  /* Forbes: más alto para dar presencia */
    border-radius: 12px;  /* Forbes: bordes más sutiles */
    overflow: hidden;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.1),
        0 12px 48px rgba(0, 0, 0, 0.08);  /* Forbes: doble sombra elegante */
}

/* Imagen de fondo - Vogue editorial */
.whatsapp-vogue-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Overlay oscuro Forbes con vignette premium */
.whatsapp-vogue-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        /* Vignette radial desde centro */
        radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0.7) 70%,
            rgba(0, 0, 0, 0.85) 100%
        ),
        /* Gradient vertical para dar profundidad */
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            rgba(0, 0, 0, 0.8) 100%
        );
    z-index: 1;
}

/* Contenido sobre la imagen - FORBES CENTRADO */
.whatsapp-vogue-content {
    position: relative;
    z-index: 2;
    padding: calc(var(--space-xxl) * 1.5) var(--space-xl);  /* 180px vertical, 80px horizontal - Forbes: mucho aire */
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  /* Forbes: todo centrado */
    text-align: center;  /* Forbes: texto centrado */
    min-height: 700px;  /* Matched con card */
    margin: 0 auto;
    max-width: 800px;  /* Forbes: contenedor más ancho */
}

/* Divider Forbes - línea elegante */
.forbes-divider {
    width: 60px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin-bottom: var(--space-md);  /* 24px */
}

.forbes-divider-bottom {
    margin-bottom: 0;
    margin-top: var(--space-xl);  /* 80px - mucho aire arriba */
    opacity: 0.2;  /* Más sutil abajo */
}

/* Eyebrow - Forbes premium */
.whatsapp-vogue-eyebrow {
    font-family: var(--font-body);
    font-size: 0.8125rem;  /* 13px - Forbes: más pequeño */
    font-weight: 600;  /* Forbes: semibold */
    letter-spacing: 0.15em;  /* Forbes: tracking amplio */
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);  /* Forbes: más translúcido */
    margin-bottom: var(--space-md);  /* 24px - más aire */
}

/* Título - Forbes elegante y centrado */
.whatsapp-vogue-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 7rem);  /* Forbes: MÁS GIGANTE */
    font-weight: 700;
    line-height: 0.9;  /* Forbes: super tight */
    letter-spacing: -0.04em;  /* Forbes: tracking negativo */
    margin-bottom: var(--space-lg);  /* 48px - Forbes: más aire */
    color: var(--white);
}

/* Texto - Forbes minimalista */
.whatsapp-vogue-text {
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 1.35vw, 1.25rem);  /* 17-20px - Forbes: más pequeño */
    font-weight: 300;  /* Forbes: light weight */
    line-height: 1.7;  /* Forbes: muy respirado */
    color: rgba(255, 255, 255, 0.85);  /* Forbes: ligeramente translúcido */
    margin-bottom: calc(var(--space-lg) * 1.5);  /* 72px - Forbes: mucho aire */
    max-width: 540px;  /* Forbes: ancho controlado */
}

/* Botón WhatsApp - Forbes minimalista */
.btn-whatsapp-vogue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);  /* 8px */
    padding: 18px 40px;  /* Forbes: más padding */
    background: rgba(255, 255, 255, 0.95);  /* Forbes: blanco translúcido */
    color: var(--black);  /* Forbes: texto negro */
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9375rem;  /* 15px - Forbes: más pequeño */
    font-weight: 600;  /* Forbes: semibold */
    letter-spacing: 0.02em;  /* Forbes: tracking sutil */
    border-radius: 4px;  /* Forbes: bordes sutiles (no pill) */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);  /* Forbes: sombra oscura */
}

.btn-whatsapp-vogue:hover {
    background: var(--white);  /* Forbes: blanco sólido */
    transform: translateY(-3px);  /* Forbes: elevación */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);  /* Forbes: sombra más intensa */
}

.btn-whatsapp-vogue i {
    font-size: 1.375rem;  /* 22px */
    color: #25D366;  /* Verde WhatsApp solo en el icono */
}

/* ==================== TESTIMONIOS - MINIMALISTA ==================== */
.testimonios-dark {
    padding: var(--space-lg) 0;  /* 48px arriba */
    padding-bottom: 240px;  /* Mucho más margen abajo - respiro generoso */
    background: var(--white);
    color: var(--black);
    position: relative;
    overflow: hidden;
}

/* Header minimalista centrado */
.testimonios-header {
    text-align: center;  /* Centrado */
    margin-bottom: var(--space-md);  /* 24px - más compacto */
    max-width: 100%;
}

.testimonios-title-dark {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);  /* 20-28px */
    font-weight: 700;
    line-height: 1.2;
    color: var(--black);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.highlight-text {
    color: var(--accent);
    font-weight: 700;
    font-style: normal;
}

/* Subrayado rojo estilo Vogue editorial - ULTRA VISIBLE + CURSIVA */
.highlight-underline {
    display: inline-block;
    color: var(--black) !important;
    font-style: italic !important;  /* CURSIVA Vogue */
    text-decoration: underline !important;
    text-decoration-color: #ff0000 !important;  /* ROJO directo */
    text-decoration-thickness: 6px !important;  /* GROSOR muy visible */
    text-underline-offset: 6px !important;  /* Separación del texto */
    text-decoration-style: solid !important;
}

/* Rating BAJO las cards - La regla de ocultación está en el media query de 768px y 480px */

.rating-stars {
    display: flex;
    gap: 4px;  /* Gap minimalista entre estrellas */
}

.rating-star {
    color: var(--accent);  /* ROJO - branding Intra Media */
    font-size: 16px;  /* Un poco más grande para visibilidad */
    line-height: 1;
    transition: transform 0.2s ease;
}

.rating-star:hover {
    transform: scale(1.15);  /* Efecto hover sutil */
}

.rating-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.875rem;  /* 14px */
    color: rgba(0, 0, 0, 0.6);
}

.rating-score {
    font-weight: 700;
    color: var(--black);
    letter-spacing: 0.01em;
}

.rating-divider {
    color: rgba(0, 0, 0, 0.3);
    font-weight: 400;
}

.rating-count {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);  /* Mejorado para contraste WCAG AA */
}

/* Scroll container horizontal - SCROLL INFINITO */
.testimonios-scroll-container {
    display: flex;
    gap: var(--space-sm);  /* 16px gap - más compacto */
    overflow: hidden;  /* Ocultar scroll en desktop */
    position: relative;
    padding: 0 0 var(--space-md);  /* Solo padding bottom */
    margin-bottom: var(--space-sm);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Ocultar scrollbar en todos los navegadores */
.testimonios-scroll-container::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* iOS Safari - ocultar scrollbar */
.testimonios-scroll-container {
    -webkit-overflow-scrolling: touch;
}

.testimonios-scroll-container::-webkit-scrollbar-track {
    background: transparent !important;
}

.testimonios-scroll-container::-webkit-scrollbar-thumb {
    background: transparent !important;
}

/* OVERRIDE para móvil - OCULTAR SCROLLBAR COMPLETAMENTE */
@media (max-width: 768px) {
    .testimonios-scroll-container {
        overflow-x: hidden !important;  /* HIDDEN para que no aparezca scrollbar */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
        padding-bottom: 0 !important;  /* ELIMINAR padding que crea espacio para scrollbar */
        /* El scroll se manejará 100% por JavaScript */
    }

    /* Ocultar scrollbar en Chrome/Safari/Opera */
    .testimonios-scroll-container::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* Animación de scroll infinito automático */
@keyframes scroll-infinito {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);  /* Mover exactamente la mitad (duplicados) */
    }
}

.testimonios-scroll-track {
    display: flex;
    gap: var(--space-sm);  /* 16px gap */
    animation: scroll-infinito 60s linear infinite;  /* 60 segundos loop */
    will-change: transform;
}

.testimonios-scroll-track:hover {
    animation-play-state: paused;  /* Pausar al hacer hover */
}

/* Card de testimonio minimalista compacta - estilo Trustpilot + Vogue */
.testimonio-card-dark {
    flex: 0 0 360px;  /* Un pelin más grande */
    width: 360px;
    min-height: 160px;  /* Un poco más alto */
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.15);  /* Borde gris muy sutil */
    border-radius: 20px;  /* Bordes redondeados Vogue */
    padding: 22px;  /* Padding un poco más generoso */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.3s ease;  /* Solo transición de borde */
    box-shadow: none;
}

.testimonio-card-dark:hover {
    border-color: var(--accent);
}

/* Quote texto minimalista compacto */
.testimonio-quote {
    font-family: var(--font-body);
    font-size: 0.8125rem;  /* 13px - compacto */
    font-weight: 400;  /* Regular - legible */
    line-height: 1.5;  /* Más compacto */
    color: var(--black);
    margin-bottom: var(--space-sm);  /* 16px */
    letter-spacing: -0.005em;
}

/* Author section minimalista compacta */
.testimonio-author-dark {
    display: flex;
    align-items: center;
    gap: 10px;  /* Gap más pequeño */
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);  /* Línea muy sutil */
}

.author-avatar-dark {
    width: 32px;  /* Más pequeño */
    height: 32px;
    border-radius: 50%;
    border: none;  /* Sin borde */
    /* iniciales en vez de imagen: el 40 % del círculo, negro sobre gris claro, como las generaba el servicio externo */
    display: grid;
    place-items: center;
    flex: none;
    background: #f5f5f5;
    color: #000;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.author-info-dark {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-name-dark {
    font-family: var(--font-display);
    font-size: 0.6875rem;  /* 11px - muy pequeño */
    font-weight: 700;
    color: var(--black);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.author-role-dark {
    font-family: var(--font-body);
    font-size: 0.625rem;  /* 10px - tiny */
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);  /* Mejorado para contraste WCAG AA */
    letter-spacing: 0.01em;
}

/* Dots navigation - OCULTOS */
.testimonios-dots {
    display: none;  /* Quitados */
}

.testimonio-dot {
    display: none;
}

.testimonio-dot:hover {
    display: none;
}

.testimonio-dot.active {
    display: none;
}

/* ==================== FOOTER APPLE DARK - MINIMALISTA ==================== */
.footer-apple-dark {
    background: var(--black);  /* Fondo negro */
    padding: var(--space-xl) 0;  /* 80px arriba/abajo */
    color: var(--white);
}

/* Divider superior - línea roja sutil */
.footer-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 0, 0, 0.15);  /* Rojo muy sutil */
    margin-bottom: var(--space-xl);  /* 80px */
}

/* Contenido principal del footer */
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-lg);  /* 48px */
    margin-bottom: var(--space-lg);  /* 48px */
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);  /* Divider sutil */
}

/* Marca - centrada */
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-logo {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);  /* 24-32px - MÁS GRANDE */
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 8px;
}

.footer-tagline {
    font-family: var(--font-body);
    font-size: clamp(0.875rem, 1.1vw, 1rem);  /* 14-16px */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);  /* Blanco translúcido */
    letter-spacing: 0.02em;
    margin-bottom: 16px;
    line-height: 1.6;  /* Espaciado para 2 líneas */
}

/* Badges de validación - inline con separador */
.footer-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.footer-badge {
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 0.9vw, 0.875rem);  /* 12-14px */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.02em;
}

.footer-badge-separator {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 400;
}

/* Contacto - centrado */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

.footer-contact-label {
    font-family: var(--font-display);
    font-size: clamp(0.75rem, 0.9vw, 0.875rem);  /* 12-14px */
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

.footer-link {
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 1.1vw, 1.125rem);  /* 15-18px - MÁS GRANDE */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);  /* Más visible */
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);  /* Apple ease */
    position: relative;
}

.footer-link:hover {
    color: var(--red);  /* Rojo en hover */
}

.footer-location {
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 0.9vw, 0.875rem);  /* 12-14px */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);  /* Mejorado para contraste WCAG AA */
    letter-spacing: 0.02em;
    margin-top: 8px;
    font-style: normal;
}

/* Copyright y Legal - Apple minimalista */
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-top: var(--space-xs);  /* 12px - menos espaciado */
}

/* Legal - inline con mismo estilo que copyright */
.footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-legal-link {
    font-family: var(--font-body);
    font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);  /* 11-13px - mismo que copyright */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);  /* Mejorado para contraste WCAG AA */
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-legal-link:hover {
    color: rgba(255, 255, 255, 0.9);  /* Más visible en hover */
}

.footer-legal-separator {
    color: rgba(255, 255, 255, 0.2);
    font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
}

/* Trust indicators en el footer */
.footer-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 0.9vw, 0.875rem);  /* 12-14px */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.02em;
}

.footer-separator {
    color: rgba(255, 255, 255, 0.3);
}

.footer-copyright {
    font-family: var(--font-body);
    font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);  /* 11-13px - MÁS PEQUEÑO */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);  /* Mejorado para contraste WCAG AA */
    letter-spacing: 0.03em;
}

/* ==================== ACCESIBILIDAD - FOCUS VISIBLE ==================== */
*:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 4px;
}

/* Remover outline en clicks de mouse (solo mostrar en keyboard) */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ==================== SKIP LINKS ==================== */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--red);
    color: var(--white);
    padding: 12px 24px;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    z-index: 10001;
    border-radius: 0 0 4px 4px;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* ==================== NAVBAR - APPLE STYLE DARK ==================== */
.navbar-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);  /* Negro translúcido Apple */
    backdrop-filter: blur(20px);  /* Apple: blur pronunciado */
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);  /* Borde sutil blanco */
}

.navbar-sticky.visible {
    transform: translateY(0);
}

.navbar-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-md) var(--space-xl);  /* Más espacio vertical: 24px arriba/abajo */
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;  /* Mayor altura para más aire */
}

.navbar-brand {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);  /* 16px entre CTA y hamburger */
}

/* CTA Móvil compacto - Apple pill style */
.navbar-cta-mobile {
    display: none;  /* Oculto por defecto en desktop */
    align-items: center;
    justify-content: center;
    height: 36px;  /* Misma altura que hamburger (8+2+4+2+4+2+8 + visual) */
    padding: 0 16px;
    background: var(--red);
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 18px;  /* Apple: pill shape proporcional a altura */
    transition: all 0.2s ease;
    white-space: nowrap;
}

.navbar-cta-mobile:hover {
    background: var(--red-dark);
    transform: scale(0.98);  /* Apple: sutil */
}

.brand-logo {
    height: 48px;  /* Logo más grande y visible */
    width: auto;
    display: block;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.brand-logo:hover {
    opacity: 0.8;  /* Hover sutil */
}

/* Fallback para texto si hay logo text */
.brand-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--white);
    text-transform: none;
}

.navbar-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.hamburger-line {
    display: block;
    width: 20px;  /* Apple: más pequeño */
    height: 2px;  /* Apple: más fino */
    background: var(--white);  /* Blanco sobre fondo negro */
    margin: 4px 0;
    transition: all 0.3s ease;
}

.navbar-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
}

.navbar-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: var(--space-md);  /* Apple: gap más compacto */
}

.navbar-link {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;  /* Apple: peso normal */
    letter-spacing: 0;  /* Sin letter-spacing */
    text-transform: none;  /* Normal case */
    color: rgba(255, 255, 255, 0.85);  /* Blanco suave sobre negro */
    text-decoration: none;
    transition: color 0.2s ease;
    position: relative;
}

.navbar-link::after {
    display: none;  /* Apple: sin underline animado */
}

.navbar-link:hover,
.navbar-link:focus {
    color: var(--white);  /* Blanco total en hover */
}

.navbar-cta {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;  /* Apple: padding compacto */
    background: var(--red);
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;  /* Peso normal */
    letter-spacing: 0;  /* Sin letter-spacing */
    text-transform: none;  /* Normal case */
    border: none;  /* Apple: sin borde */
    border-radius: 12px;  /* Apple: bordes más redondeados */
    transition: all 0.2s ease;
}

.navbar-cta:hover {
    background: var(--red-dark);
    transform: scale(0.98);  /* Apple: efecto sutil */
}

/* ==================== SCROLL PROGRESS BAR ==================== */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: var(--red);
    width: 0%;
    z-index: 9999;
    transition: width 0.1s ease-out;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.4);
}

/* ==================== WHATSAPP FLOATING - CON TEXTO + ANIMACIÓN ==================== */
.whatsapp-float-editorial {
    position: fixed;
    bottom: var(--space-md);
    right: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: #25D366;
    border-radius: 50px;
    color: var(--white);
    text-decoration: none;
    font-size: 1.5rem;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
    z-index: 1000;
    transition: all 0.3s ease;
    will-change: transform, opacity;
}

.whatsapp-float-text {
    font-family: var(--font-display);
    font-size: clamp(0.875rem, 1vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.whatsapp-float-editorial:hover {
    background: #1da851;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.6);
}

/* ==================== ELEMENTOS ANIMABLES ==================== */
.animated {
    animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media (max-width: 1024px) {
    .container-editorial {
        padding: 0 var(--space-md);
    }
}

@media (max-width: 768px) {
    .container-editorial {
        padding: 0 var(--space-sm);
    }

    .hero-poster-content {
        padding: var(--space-md) var(--space-sm);
    }

    .hero-poster-info {
        flex-direction: column;
        gap: var(--space-md);
    }

    .info-label::before {
        position: relative;
        left: 0;
        margin-right: var(--space-xs);
    }

    .stats-editorial {
        gap: var(--space-md);
    }

    .stat-editorial.stat-offset {
        padding-left: var(--space-md); /* Menos desplazamiento en mobile */
    }

    /* CÓMO FUNCIONA - Scroll horizontal en mobile - VOGUE STYLE */
    .section-title-editorial {
        padding-left: var(--space-md);  /* Padding lateral mobile */
        margin-bottom: var(--space-lg);
    }

    .section-title-editorial::after {
        width: 40px;  /* Línea más corta en mobile */
    }

    .pasos-editorial {
        padding: 0 var(--space-md) var(--space-md);  /* Padding bottom para dots */
        gap: var(--space-sm);  /* 16px gap en mobile */
    }

    .paso-editorial {
        flex: 0 0 90%;  /* 90% del viewport en mobile - más ancho */
        max-width: 500px;  /* Ancho máximo mobile */
        min-height: 480px;  /* Altura generosa en mobile */
        border-radius: 24px;  /* Bordes redondeados consistentes */
    }

    .paso-editorial::before {
        border-radius: 24px;  /* Mismo radio que parent mobile */
    }

    .paso-editorial::after {
        border-radius: 24px;  /* Vignette con bordes redondeados */
    }

    .paso-content {
        padding: clamp(2rem, 6vw, 2.5rem);  /* Padding generoso mobile */
    }

    .paso-num-editorial {
        font-size: 0.75rem;  /* Número muy pequeño en mobile */
        padding: 0.55rem 1rem;  /* Más compacto */
        border-radius: 20px;
    }

    .paso-editorial h3 {
        font-size: clamp(2rem, 8vw, 2.75rem);  /* Título grande pero legible */
        margin-bottom: var(--space-xs);
    }

    .paso-editorial h3::before {
        width: 32px;  /* Línea más corta en mobile */
        margin-bottom: var(--space-xs);
    }

    .paso-editorial p {
        font-size: clamp(0.9375rem, 4.5vw, 1.0625rem);  /* Descripción legible */
        max-width: 100%;  /* Full width en mobile */
    }

    /* DOTS - Más pequeños en mobile */
    .pasos-dots {
        padding: var(--space-sm) 0;
        margin-bottom: var(--space-md);
    }

    .paso-dot {
        width: 6px;
        height: 6px;
    }

    .paso-dot.active {
        width: 24px;  /* Pill más corto en mobile */
    }

    /* CTA - Más compacto en mobile */
    .cta-editorial-center {
        padding: var(--space-lg) var(--space-md) 0;
    }

    .cta-editorial-center .btn-poster {
        padding: 1rem 2rem;
        font-size: 0.875rem;
    }

    .testimonios-grid-editorial {
        gap: var(--space-lg); /* Menos espacio en mobile */
    }

    .form-row-editorial {
        grid-template-columns: 1fr;
    }

    /* TIMELINE - Mobile responsive */
    .timeline-container {
        padding: var(--space-lg) 0;
    }

    /* Línea a la izquierda en mobile */
    .timeline-line {
        left: 30px;
        transform: translateX(0);
    }

    /* Items a la derecha de la línea */
    .timeline-item,
    .timeline-item-right {
        justify-content: flex-start;
        padding-left: 70px;
        padding-right: 0;
        margin-bottom: var(--space-lg);  /* 48px entre hitos */
    }

    /* Dot a la izquierda */
    .timeline-dot {
        left: 30px;
        transform: translateX(-50%);
    }

    /* Content más estrecho */
    .timeline-content {
        max-width: 100%;
    }

    /* Card más compacta */
    .timeline-card {
        padding: var(--space-md);
    }

    /* Stats apilados */
    .timeline-stats {
        flex-direction: column;
        gap: var(--space-sm);
        padding: var(--space-sm);
    }

    /* Features apilados */
    .timeline-features {
        flex-direction: column;
    }

    .feature-tag {
        width: 100%;
        justify-content: center;
    }

    /* Footer Apple Dark - Mobile: TODO EN UNA LÍNEA */
    .footer-content {
        flex-direction: column;
        gap: var(--space-md);  /* 24px */
        text-align: center;
        align-items: center;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-badges {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-contact {
        align-items: center;
    }

    .footer-contact-label {
        margin-bottom: 8px;
    }

    /* Links en horizontal en mobile */
    .footer-link {
        display: inline-block;
    }

    .footer-location {
        margin-top: 12px;
    }

    /* Trust indicators wrap en mobile */
    .footer-trust {
        gap: 8px;
        font-size: 0.6875rem;  /* Más pequeño en mobile */
    }

    .whatsapp-float-editorial {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
        bottom: var(--space-sm);
        right: var(--space-sm);
    }
}

@media (max-width: 480px) {
    .hero-poster-title {
        font-size: 4rem;
    }

    .editorial-title,
    .urgencia-title {
        font-size: 4.5rem;
    }

    /* Problema Vogue - Mobile responsive */
    .problema-editorial::before {
        font-size: clamp(6rem, 40vw, 12rem);  /* Background text más pequeño en mobile */
    }

    .impact-title {
        font-size: clamp(1.5rem, 8vw, 2.5rem);  /* Título más pequeño */
        margin-bottom: var(--space-lg);  /* Menos aire */
    }

    .impact-title::after {
        width: 60px;  /* Línea más corta */
        height: 4px;
        margin-top: var(--space-sm);
    }

    .impact-list {
        gap: var(--space-xl);  /* Gap reducido en mobile (80px) */
    }

    .impact-list p {
        font-size: clamp(1.125rem, 5vw, 1.75rem);  /* Texto más pequeño en mobile */
        padding-top: var(--space-md);  /* Menos espacio para número */
    }

    .impact-list p::before {
        font-size: clamp(2rem, 12vw, 4rem);  /* Número más pequeño */
    }


    .section-title-editorial {
        font-size: 3rem;
    }

    .form-title-editorial {
        font-size: 3.5rem;
    }

    .btn-poster,
    .btn-poster-red {
        padding: 1.25rem 2rem;
        font-size: 0.875rem;
    }

    /* WhatsApp Forbes - Mobile responsive */
    .whatsapp-vogue-card {
        min-height: 600px;  /* Forbes: mantener altura en mobile */
        border-radius: 8px;  /* Forbes: bordes sutiles en mobile */
    }

    .whatsapp-vogue-content {
        padding: var(--space-xl) var(--space-md);  /* 80px vertical, 24px lateral */
        min-height: 600px;
    }

    .forbes-divider {
        width: 40px;  /* Más pequeño en mobile */
    }

    .forbes-divider-bottom {
        margin-top: var(--space-lg);  /* Menos aire en mobile */
    }

    .whatsapp-vogue-eyebrow {
        font-size: 0.75rem;  /* 12px en mobile */
        letter-spacing: 0.12em;
    }

    .whatsapp-vogue-title {
        font-size: clamp(3rem, 14vw, 5rem);  /* Forbes: mantener tamaño grande */
        margin-bottom: var(--space-md);  /* 24px */
    }

    .whatsapp-vogue-text {
        font-size: clamp(0.9375rem, 3.5vw, 1.0625rem);  /* 15-17px */
        margin-bottom: var(--space-lg);  /* 48px */
    }

    .btn-whatsapp-vogue {
        padding: 16px 32px;  /* Padding reducido en mobile */
        font-size: 0.875rem;  /* 14px */
    }

    /* Testimonios - Mobile minimalista */
    .testimonios-dark {
        padding: var(--space-lg) 0;  /* 48px padding top */
        padding-bottom: 240px !important;  /* Mucho margen abajo en mobile */
    }

    .testimonios-header {
        margin-bottom: var(--space-md);  /* 24px */
        padding: 0 var(--space-sm);
    }

    .testimonios-title-dark {
        font-size: clamp(1rem, 5vw, 1.25rem);  /* Pequeño en mobile */
    }

    .testimonios-scroll-container {
        padding: 0 var(--space-sm) 0;  /* 16px lateral, SIN padding-bottom */
        gap: var(--space-sm);  /* 16px gap */
        overflow-x: hidden !important;  /* HIDDEN - sin scrollbar visible */
        overflow-y: hidden !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }

    /* Ocultar scrollbar en Chrome/Safari/Opera */
    .testimonios-scroll-container::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .testimonio-card-dark {
        flex: 0 0 75%;  /* 75% en mobile - fina */
        min-height: 220px;  /* Alargada */
        padding: var(--space-sm);  /* 16px padding */
    }

    .testimonio-quote {
        font-size: 0.8125rem;  /* 13px - pequeño */
        margin-bottom: var(--space-sm);  /* 16px */
        font-weight: 300;  /* Light */
    }

    .author-avatar-dark {
        width: 32px;
        height: 32px;
    }

    .author-name-dark {
        font-size: 0.6875rem;  /* 11px */
    }

    .author-role-dark {
        font-size: 0.625rem;  /* 10px */
    }

    .testimonios-dots {
        display: none !important;  /* OCULTAR en móvil (auto-scroll activo) */
        padding: var(--space-sm) 0;
    }
}

/* ==================== TRUST BADGES (HERO) ==================== */
.hero-trust-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease 1s forwards;
    opacity: 0;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(0, 0, 0, 0.85); /* Mejorado contraste */
    border: 2px solid var(--white);
    border-radius: 4px;
    backdrop-filter: blur(10px);
}

.badge-icon {
    font-size: clamp(0.95rem, 1.1vw, 1.125rem);
}

.badge-text {
    font-size: clamp(0.75rem, 0.9vw, 0.875rem);
    color: var(--white);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ==================== TEAM FORBES - ESTILO PROFESIONAL ==================== */
.team-forbes {
    padding: var(--space-xxl) 0;  /* Apple: espaciado generoso 120px */
    background: #fafafa;  /* Fondo gris claro (Forbes style) */
}

/* Header del equipo - Minimalista */
.team-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-xl);  /* 80px abajo */
}

.team-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 0.95vw, 0.875rem);  /* 12-14px */
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.7);  /* Mejorado para contraste WCAG AA */
    margin-bottom: var(--space-sm);  /* 16px */
}

.team-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 6rem);  /* 48-96px */
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: var(--space-md);  /* 24px */
}

.team-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.3vw, 1.25rem);  /* 16-20px */
    font-weight: 400;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.7);  /* Gris medio */
    letter-spacing: 0.01em;
}

/* Scroll lateral infinito - Container */
.team-scroll-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: var(--space-xl);  /* 80px */
    padding: var(--space-md) 0;  /* 24px arriba/abajo para sombras */
}

/* Track de scroll con animación infinita */
.team-scroll-track {
    display: flex;
    gap: var(--space-xl);  /* 80px entre cards */
    animation: scrollTeam 20s linear infinite;  /* Scroll rápido */
    will-change: transform;
}

/* Animación de scroll infinito */
@keyframes scrollTeam {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% / 2));  /* Mueve exactamente la mitad (7 DJs originales) */
    }
}

/* Pausar animación en hover */
.team-scroll-container:hover .team-scroll-track {
    animation-play-state: paused;
}

/* Team Member Card - Minimalista Forbes SIN FONDO */
.team-member {
    flex: 0 0 320px;  /* Ancho fijo de 320px por card */
    background: transparent;  /* Sin fondo blanco */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.team-member:hover {
    transform: translateY(-4px);  /* Lift sutil */
}

/* Foto del miembro - B&W elegante MÁS PEQUEÑA CON BORDES REDONDEADOS */
.member-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;  /* Cuadrado más pequeño (antes 3:4 vertical) */
    background: var(--gray-light);
    margin-bottom: var(--space-md);  /* 24px */
    border-radius: 16px;  /* Bordes redondeados */
    max-width: 280px;  /* Foto más pequeña - máximo 280px */
    margin-left: auto;
    margin-right: auto;
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1);  /* Blanco y negro Forbes */
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-member:hover .member-photo img {
    filter: grayscale(80%) contrast(1.05);  /* Menos grayscale en hover */
    transform: scale(1.03);  /* Zoom muy sutil */
}

/* Info del miembro - Tipografía elegante CENTRADA */
.member-info {
    padding: 0;  /* Sin padding (Forbes no usa bordes ni padding interno) */
    text-align: center;  /* Centrar texto bajo la foto */
}

.member-name {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2vw, 1.875rem);  /* 24-30px */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--black);
    margin-bottom: 6px;
    text-transform: none;  /* Sin uppercase (más elegante) */
}

.member-role {
    font-family: var(--font-body);
    font-size: clamp(0.875rem, 1.1vw, 1.125rem);  /* 14-18px */
    font-weight: 600;
    color: #c40000;  /* Rojo oscurecido para mejor contraste WCAG AA */
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.member-specialty {
    font-family: var(--font-body);
    font-size: clamp(0.875rem, 1vw, 1rem);  /* 14-16px */
    font-weight: 400;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);  /* Mejorado para contraste WCAG AA */
    letter-spacing: 0.01em;
}

/* Footer del equipo - Disclaimer profesional */
.team-footer {
    text-align: center;
    max-width: 600px;
    margin: var(--space-xl) auto 0;  /* 80px arriba */
}

.team-divider {
    width: 60px;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    margin: 0 auto var(--space-md);  /* 24px abajo */
}

.team-note {
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 1.15vw, 1.125rem);  /* 15-18px */
    font-weight: 400;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.7);
    letter-spacing: 0.01em;
}

.team-note strong {
    font-weight: 700;
    color: var(--black);
}

/* ==================== FAQ EDITORIAL ==================== */
/* ==================== FAQ VOGUE STYLE - NEGRO/BLANCO/ROJO ==================== */

.faq-dark-modern {
    background: var(--black);  /* Negro editorial Vogue */
    padding: var(--space-xxl) 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* GLOW ROJO SUTIL - Mismo estilo que PROPUESTA */
.faq-dark-modern::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(var(--faq-glow-y, 0px));  /* Parallax */
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.08) 0%, rgba(255, 0, 0, 0.03) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(100px);  /* Apple: blur generoso */
    opacity: 1;
    animation: breathingGlow 8s ease-in-out infinite;  /* Respiración sutil */
    transition: transform 0.1s ease-out;  /* Suaviza parallax */
}

/* ==================== PARTÍCULAS FLOTANTES MÁGICAS ==================== */
.faq-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--red);
    border-radius: 50%;
    opacity: 0;
    animation: floatParticle 15s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

/* Posiciones y delays diferentes para cada partícula */
.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 14s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 16s; }
.particle:nth-child(4) { left: 50%; animation-delay: 1s; animation-duration: 13s; }
.particle:nth-child(5) { left: 60%; animation-delay: 3s; animation-duration: 15s; }
.particle:nth-child(6) { left: 70%; animation-delay: 5s; animation-duration: 17s; }
.particle:nth-child(7) { left: 80%; animation-delay: 2.5s; animation-duration: 14.5s; }
.particle:nth-child(8) { left: 90%; animation-delay: 4.5s; animation-duration: 16.5s; }

@keyframes floatParticle {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(100vh) scale(0.8);
    }
    10% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
        transform: translateX(20px) translateY(-50vh) scale(1);
    }
    90% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateX(-20px) translateY(-110vh) scale(0.6);
    }
}

.faq-dark-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    text-align: center;
    position: relative;
    z-index: 1;  /* Por encima del glow */
}

/* Header mágico con contador */
.faq-header-magic {
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* Contador animado arriba */
.faq-counter {
    display: inline-block;
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--red);  /* Rojo brillante */
    margin-bottom: var(--space-xs);
    opacity: 0;
    animation: fadeInDown 1s ease-out 0.3s forwards;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.5);  /* Glow rojo */
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Título FAQ gigante - Vogue editorial con acento rojo */
.faq-dark-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6.5vw, 5.5rem);  /* Más reducido para "PREGUNTAS FRECUENTES" */
    font-weight: 900;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 0.9;
    margin: 0 auto var(--space-lg) auto;
    text-align: center;
    position: relative;
    opacity: 0;
    animation: fadeInScale 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;  /* Elastic */
    max-width: 100%;
    word-wrap: break-word;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Línea decorativa roja debajo del título - Vogue accent */
.faq-dark-title::after {
    content: '';
    display: block;
    width: 0;  /* Empieza en 0 */
    height: 4px;
    background: var(--red);  /* ACENTO ROJO */
    margin: var(--space-md) auto 0 auto;
    animation: expandLine 0.8s ease-out 1.5s forwards;  /* Se expande después del título */
}

@keyframes expandLine {
    from {
        width: 0;
    }
    to {
        width: 80px;
    }
}

/* Stack de accordion items */
.faq-pills-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);  /* 16px entre items */
    margin-bottom: var(--space-lg);
}

/* Cada item del accordion */
.faq-accordion-item {
    width: 100%;
}

/* Pill de pregunta - Vogue minimalista con número */
.faq-pill {
    background: transparent;  /* Transparente - minimalista */
    border: 2px solid rgba(255, 255, 255, 0.15);  /* Border blanco sutil */
    border-radius: 50px;  /* Pill redondeada */
    padding: 20px 32px;
    min-height: 80px;  /* Altura mínima fija para todas las pills */
    color: rgba(255, 255, 255, 0.85);  /* Blanco más visible */
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.2vw, 1.125rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;  /* Espacio entre número y pregunta */
}

/* Número de pregunta (01, 02, 03...) */
.faq-number {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--red);  /* ROJO */
    opacity: 0.7;
    min-width: 32px;
    transition: all 0.3s ease;
}

/* Texto de pregunta */
.faq-question-text {
    flex: 1;  /* Toma todo el espacio disponible */
    text-align: left;
}

/* Icono + a la derecha */
.faq-pill .faq-icon {
    margin-left: auto;  /* Empuja a la derecha */
}

/* HOVER con GLOW MÁGICO */
.faq-pill:hover {
    background: rgba(255, 0, 0, 0.05);  /* Tinte rojo muy sutil */
    border-color: var(--red);  /* BORDE ROJO */
    color: var(--white);  /* Blanco puro */
    transform: translateY(-3px) scale(1.02);  /* Levita + escala */
    box-shadow:
        0 12px 32px rgba(255, 0, 0, 0.25),  /* Sombra roja fuerte */
        0 0 40px rgba(255, 0, 0, 0.3),  /* Glow rojo exterior */
        inset 0 0 20px rgba(255, 0, 0, 0.1);  /* Glow interior sutil */
}

.faq-pill:hover .faq-number {
    opacity: 1;
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);  /* Glow en el número */
}

/* Pill activa (abierta) */
.faq-accordion-item.active .faq-pill {
    border-color: var(--red);  /* Borde rojo cuando está abierto */
    color: var(--white);
}

/* Icono + / - */
.faq-icon {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--red);  /* Icono rojo - acento Vogue */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
}

/* Icono rota cuando está activo */
.faq-accordion-item.active .faq-icon {
    transform: rotate(45deg);  /* + se convierte en × */
}

/* Contenedor de respuesta (oculto por defecto) */
.faq-answer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s ease;
    padding: 0 32px;
}

/* Respuesta visible cuando está activo */
.faq-accordion-item.active .faq-answer-content {
    max-height: 300px;  /* Suficiente para respuestas */
    padding: var(--space-md) 32px var(--space-sm) 32px;
}

/* Texto de respuesta */
.faq-answer-content p {
    color: rgba(255, 255, 255, 0.75);
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    line-height: 1.6;
    font-weight: 400;
    margin: 0;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .faq-dark-title {
        font-size: clamp(1.75rem, 6vw, 3rem);
    }

    .faq-pill {
        padding: 16px 24px;
        font-size: 0.95rem;
    }

    .faq-answer-content p {
        font-size: 0.875rem;
    }
}

/* ==================== FORMULARIO SIMPLIFICADO ==================== */
.form-simplified {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.form-group-editorial-simple {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-md);  /* Espacio generoso entre campos (24px) */
}

.form-group-editorial-simple label {
    font-family: var(--font-display);
    font-size: clamp(0.75rem, 1vw, 0.875rem);  /* Labels más pequeños y refinados */
    font-weight: 600;  /* Menos bold (era 700) */
    letter-spacing: 0.08em;  /* Más separación = más elegante */
    text-transform: uppercase;
    margin-bottom: var(--space-sm);  /* Más espacio entre label e input */
    color: rgba(0, 0, 0, 0.7);  /* Color más suave (no negro puro) */
}

.form-group-editorial-simple input,
.form-group-editorial-simple select {
    padding: 20px 32px;  /* Padding reducido: 20px vertical, 32px horizontal */
    height: 72px;  /* Altura mayor para evitar corte del texto */
    min-height: 72px;
    background: var(--white);
    border: 2px solid rgba(0, 0, 0, 0.15);  /* Borde más sutil: 2px + transparencia */
    border-radius: 36px;  /* Border-radius proporcional (50% de la altura) */
    color: var(--black);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.3vw, 1.25rem);  /* Texto ligeramente más pequeño */
    font-weight: 400;  /* Peso regular (menos basto) */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);  /* Apple ease */
    letter-spacing: 0.01em;  /* Espaciado sutil */
    display: flex;
    align-items: center;  /* Centrar verticalmente el texto */
    line-height: 1.4;  /* Line-height controlado */
}

.form-group-editorial-simple input:focus,
.form-group-editorial-simple select:focus {
    outline: none;
    border-color: var(--red);
    border-width: 2px;  /* Mantener grosor en focus */
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.08);  /* Sombra más sutil */
    transform: translateY(-2px);  /* Efecto lift suave */
}

.form-group-editorial-simple input::placeholder {
    color: rgba(0, 0, 0, 0.35);  /* Placeholder muy sutil */
    font-weight: 400;
}

.form-group-editorial-simple select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23000000' opacity='0.5' d='M8 12L2 6h12z'/%3E%3C/svg%3E");  /* Icono más sutil */
    background-repeat: no-repeat;
    background-position: right 2rem center;  /* Posición del icono */
    padding-right: 4rem !important;  /* Espacio para el icono (reducido de 4.5rem) */
}

/* Opciones del select también con padding */
.form-group-editorial-simple select option {
    padding-left: 1rem;
}

/* Hover suave en inputs */
.form-group-editorial-simple input:hover:not(:focus),
.form-group-editorial-simple select:hover:not(:focus) {
    border-color: rgba(0, 0, 0, 0.25);  /* Borde ligeramente más oscuro en hover */
}

/* ==================== FLATPICKR - CALENDARIO PERSONALIZADO VOGUE ==================== */

/* Contenedor principal del calendario */
.flatpickr-calendar {
    background: var(--white) !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
    font-family: var(--font-body) !important;
    padding: 16px !important;
}

/* Mes y año (header) */
.flatpickr-months {
    padding: 8px 0 !important;
}

.flatpickr-current-month {
    font-family: var(--font-display) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--black) !important;
    letter-spacing: 0.02em !important;
}

/* Flechas de navegación */
.flatpickr-prev-month,
.flatpickr-next-month {
    fill: var(--black) !important;
    transition: all 0.3s ease !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    fill: var(--red) !important;
    transform: scale(1.2) !important;
}

/* Días de la semana (L, M, X...) */
.flatpickr-weekdays {
    margin-top: 8px !important;
}

span.flatpickr-weekday {
    font-family: var(--font-display) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: rgba(0, 0, 0, 0.5) !important;
    letter-spacing: 0.05em !important;
}

/* Días del calendario */
.flatpickr-day {
    border-radius: 50% !important;
    color: var(--black) !important;
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Día hover */
.flatpickr-day:hover {
    background: rgba(255, 0, 0, 0.1) !important;
    border-color: transparent !important;
    color: var(--red) !important;
    transform: scale(1.1) !important;
}

/* Día seleccionado */
.flatpickr-day.selected {
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: var(--white) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3) !important;
}

.flatpickr-day.selected:hover {
    background: var(--red-dark) !important;
    border-color: var(--red-dark) !important;
}

/* Día de hoy */
.flatpickr-day.today {
    border: 2px solid var(--red) !important;
    color: var(--red) !important;
    font-weight: 600 !important;
}

.flatpickr-day.today:hover {
    background: rgba(255, 0, 0, 0.1) !important;
}

/* Días deshabilitados (pasados) */
.flatpickr-day.disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(0, 0, 0, 0.2) !important;
}

/* Input con icono de calendario */
.form-group-editorial-simple input[readonly] {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 2V4M14 2V4M3 8H17M5 4H15C16.1046 4 17 4.89543 17 6V16C17 17.1046 16.1046 18 15 18H5C3.89543 18 3 17.1046 3 16V6C3 4.89543 3.89543 4 5 4Z' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2rem center;
    background-size: 20px;
}

/* ==================== TESTIMONIOS CON AVATARES ==================== */
.testimonio-avatar {
    margin-bottom: var(--space-sm);
}

.testimonio-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--black);
}

/* ==================== FORM HELP TEXT ==================== */
.form-help-text {
    display: block;
    font-size: 0.75rem;
    color: var(--gray);
    margin-top: 6px;
    font-weight: 500;
}

/* ==================== LOADING STATE ==================== */
.btn-poster-full.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-poster-full.loading::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    margin-left: -12px;
    margin-top: -12px;
    border: 3px solid var(--white);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* ==================== PREFERS REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-poster-image,
    .hero-poster-content {
        transform: none !important;
    }

    .whatsapp-float-editorial {
        animation: none !important;
    }
}

/* ==================== RESPONSIVE - FAQ ==================== */
@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .hero-trust-badges {
        flex-direction: column;
        align-items: center;
    }

    .trust-badge {
        min-width: 200px;
        justify-content: center;
    }

    /* Navbar mobile - Apple style dark */
    .navbar-container {
        padding: var(--space-sm) var(--space-md);  /* Padding vertical mobile */
    }

    .brand-logo {
        height: 40px;  /* Logo proporcional en mobile */
    }

    /* CTA móvil - Mostrar solo en mobile */
    .navbar-cta-mobile {
        display: inline-flex;  /* Activar en mobile */
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-menu {
        position: fixed;
        top: 60px;  /* Altura navbar con padding */
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);  /* Negro translúcido */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: var(--space-md);
        gap: var(--space-xs);  /* Apple: gap compacto */
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-menu.active {
        transform: translateX(0);
    }

    .navbar-link {
        font-size: 1rem;  /* Apple: tamaño contenido */
        padding: var(--space-sm);
        width: 100%;
        text-align: left;  /* Apple: alineado izquierda */
        color: rgba(255, 255, 255, 0.85);  /* Blanco suave */
    }

    .navbar-link:hover {
        color: var(--white);  /* Blanco total hover */
    }

    .navbar-cta {
        width: 100%;
        justify-content: center;
        padding: var(--space-sm);
        margin-top: var(--space-sm);
    }

    /* WhatsApp floating ajustado */
    .whatsapp-float-editorial {
        bottom: var(--space-sm);
        right: var(--space-sm);
    }

    .whatsapp-float-text {
        display: none;
    }

    .whatsapp-float-editorial {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        justify-content: center;
    }
}

/* ==================== HERO VOGUE - RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .hero-vogue-container {
        padding: 0 var(--space-lg);
    }
}

@media (max-width: 768px) {
    .hero-vogue {
        padding-top: 140px;  /* Más espacio en tablet (100px → 140px) */
        padding-bottom: var(--space-xxl);  /* Más espacio inferior (80px → 120px) */
    }

    .hero-vogue-container {
        padding: 0 var(--space-md);
        max-width: 100%;
    }

    .hero-vogue-title {
        margin-bottom: var(--space-md);  /* Menos espacio */
    }

    .hero-vogue-subtitle {
        font-size: 1rem;  /* Tablet: 16px */
        margin-bottom: var(--space-lg);  /* Menos espacio */
        max-width: 100%;  /* Full width en mobile */
    }

    .hero-vogue-cta {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: var(--space-lg);  /* Menos espacio antes de stats */
        gap: var(--space-xs);  /* Menos gap */
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        padding: 12px 20px;
        font-size: 0.9375rem;  /* 15px */
    }

    .hero-vogue-proof {
        gap: var(--space-lg);  /* 48px en tablet */
        margin: 0 calc(-1 * var(--space-md));
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .proof-stat {
        min-width: 160px;  /* Más compacto en tablet */
    }

    .proof-stat-number {
        font-size: clamp(2.25rem, 7vw, 3.5rem);
    }

    .proof-stat-label {
        font-size: clamp(0.6875rem, 2vw, 0.8125rem);
    }
}

/* ==================== RESPONSIVE - MOBILE PEQUEÑO ==================== */
@media (max-width: 480px) {
    .hero-vogue {
        padding-top: 120px;  /* Más espacio superior en mobile (80px → 120px) */
        padding-bottom: var(--space-xl);  /* Más espacio inferior (48px → 80px) */
    }

    .hero-vogue-container {
        padding: 0 20px;  /* Padding lateral móvil */
    }


    .hero-vogue-eyebrow {
        font-size: 0.6875rem;  /* 11px más pequeño */
        margin-bottom: var(--space-md);  /* 24px - más espaciado */
    }

    .hero-vogue-title {
        font-size: clamp(1.5rem, 11vw, 6rem);  /* 24px mínimo */
        margin-bottom: var(--space-md);  /* 24px - más espacio */
        line-height: 1.2;  /* Más compacto */
    }

    .hero-vogue-subtitle {
        font-size: 0.5rem;  /* 8px en móvil - muy discreto */
        font-weight: 300;  /* Peso más ligero */
        margin-bottom: var(--space-lg);  /* 48px - más aire */
        line-height: 1.5;  /* Más respirado */
        padding: 0 4px;  /* Padding extra lateral */
        color: rgba(255, 255, 255, 0.6);  /* Más translúcido */
    }

    .hero-vogue-cta {
        margin-bottom: var(--space-lg);  /* 48px - más espacio */
        gap: 10px;  /* Gap más generoso */
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 9px 14px;  /* Más compacto */
        font-size: 0.8125rem;  /* 13px */
        min-height: 38px;  /* Más pequeño */
    }

    .hero-vogue-proof {
        gap: 12px;  /* Gap mínimo */
        margin: 0 -20px;  /* Sangría negativa para full width */
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .proof-stat {
        min-width: 110px;  /* Más compacto */
    }

    .proof-stat-number {
        font-size: clamp(1.5rem, 8vw, 2.5rem);  /* 24px mínimo */
        margin-bottom: 3px;
    }

    .proof-stat-label {
        font-size: clamp(0.5rem, 2vw, 0.6875rem);  /* 8px mínimo */
        max-width: 80px;
        line-height: 1.15;
    }

    /* Animaciones simplificadas en mobile - todas desde abajo */
    .proof-stat-left,
    .proof-stat-right {
        animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* DJs Gallery Mobile */
    .djs-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    /* Team Forbes - Mobile: mantener hover suave */
    .team-member:hover {
        transform: translateY(-2px);  /* Lift más sutil en mobile */
    }

    /* PROPUESTA Vogue Editorial - Mobile responsive con esencia */
    .stats-proof-editorial {
        padding: var(--space-xl) 0;  /* 80px en mobile */
    }

    /* Glow más pequeño en mobile */
    .stats-proof-editorial::before {
        width: 400px;
        height: 400px;
        filter: blur(80px);
    }

    .stats-proof-block {
        padding: 0 var(--space-md);  /* 24px lateral en mobile */
    }

    .stats-proof-title {
        font-size: clamp(0.625rem, 1.8vw, 0.75rem);  /* Eyebrow más pequeño en mobile */
        margin-bottom: var(--space-md);  /* 24px espacio */
        letter-spacing: 0.12em;
    }

    .stats-proof-title::after {
        width: 40px;  /* Línea más corta en mobile */
        margin-top: var(--space-xs);
    }

    .stats-proof-grid {
        gap: var(--space-xl);  /* 80px gap en mobile - Vogue sigue generoso */
    }

    .stat-proof {
        padding-bottom: var(--space-lg);  /* 48px espacio inferior */
        padding-left: var(--space-md);  /* Menos espacio lateral en mobile */
        border-left-width: 1px;  /* Línea más fina en mobile */
    }

    .stat-proof::before {
        font-size: clamp(1rem, 4vw, 1.5rem);  /* Número más pequeño en mobile */
    }

    .stat-proof:last-child {
        padding-bottom: 0;
    }

    .stat-proof:hover {
        padding-left: calc(var(--space-md) + 4px);  /* Menos desplazamiento en mobile */
    }

    .stat-proof-label {
        font-size: clamp(1.5rem, 7vw, 2.5rem);  /* Tipografía grande en mobile - Vogue */
        line-height: 1.3;  /* Más respirado en mobile */
        max-width: 100%;
    }
}

/* ==================== CONVERSION OPTIMIZATION ELEMENTS ==================== */
/* Version: 143 - Conversión optimizada manteniendo diseño Vogue/Apple */

/* ========== 1. HERO GUARANTEE BADGES ========== */
.hero-guarantees {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.guarantee-badge {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 980px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.guarantee-badge i {
    font-size: 1rem;
    color: var(--red);
}

.guarantee-badge span {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.guarantee-badge:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 0, 0, 0.3);
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .hero-guarantees {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .guarantee-badge {
        width: 100%;
        justify-content: center;
    }
}

/* ========== 2. STICKY MOBILE BAR ========== */
.sticky-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;  /* Oculto por defecto */
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: var(--black);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px;
    z-index: 999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);  /* Oculto abajo inicialmente */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sticky-mobile-bar.visible {
    transform: translateY(0);  /* Mostrar cuando tiene clase visible */
    display: grid;  /* Asegurar que esté visible */
}

.mobile-bar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-bar-btn i {
    font-size: 1.5rem;
}

.mobile-bar-btn span {
    color: inherit;  /* Asegurar herencia del color */
}

.mobile-bar-call {
    background: rgba(255, 255, 255, 0.15);  /* Mejorado para contraste WCAG AA */
    color: var(--white);
}

.mobile-bar-call:hover {
    background: rgba(255, 255, 255, 0.25);
}

.mobile-bar-whatsapp {
    background: #25D366;
    color: var(--white);
}

.mobile-bar-whatsapp span {
    color: var(--white);  /* Asegurar contraste en span */
}

.mobile-bar-whatsapp:hover {
    background: #22c55e;
    transform: scale(1.05);
}

.mobile-bar-availability {
    background: var(--red);
    color: var(--white);
}

.mobile-bar-availability span {
    color: var(--white);  /* Asegurar contraste en span */
}

.mobile-bar-availability:hover {
    background: var(--red-dark);
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .sticky-mobile-bar {
        display: grid;
    }
}

/* ========== 3. EXIT INTENT POPUP ========== */
.exit-intent-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 20px;
}

.exit-intent-overlay.active {
    opacity: 1;
    visibility: visible;
}

.exit-intent-popup {
    position: relative;
    max-width: 600px;
    width: 100%;
    background: var(--white);
    border-radius: 16px;
    padding: var(--space-xl);
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.exit-intent-overlay.active .exit-intent-popup {
    transform: scale(1) translateY(0);
}

.exit-intent-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.exit-intent-close:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: rotate(90deg);
}

.exit-intent-close i {
    font-size: 1.25rem;
    color: var(--black);
}

.exit-intent-content {
    text-align: center;
}

.exit-intent-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: var(--space-sm);
}

.exit-intent-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--black);
    margin-bottom: var(--space-md);
}

.exit-intent-subtitle {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: var(--space-lg);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.exit-intent-subtitle strong {
    color: var(--red);
    font-weight: 700;
}

.exit-intent-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.exit-benefit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--black);
}

.exit-benefit i {
    font-size: 1.25rem;
    color: var(--red);
}

.exit-intent-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 16px 32px;
    background: var(--red);
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 980px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: var(--space-md);
}

.exit-intent-cta:hover {
    background: var(--red-dark);
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.25);
}

.exit-intent-cta .arrow {
    font-size: 1.25rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.exit-intent-cta:hover .arrow {
    transform: translateX(4px);
}

.exit-intent-urgency {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .exit-intent-popup {
        padding: var(--space-lg);
    }
}

/* ========== 4. SOCIAL PROOF NOTIFICATIONS ========== */
.social-proof-notifications {
    position: fixed;
    bottom: 100px;
    left: 20px;
    z-index: 998;
    max-width: 320px;
}

.social-proof-notification {
    background: var(--white);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    transform: translateX(-120%);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-proof-notification.show {
    transform: translateX(0);
}

.social-proof-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #f5f5f5;
    color: #000;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.social-proof-content {
    flex: 1;
}

.social-proof-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 2px;
}

.social-proof-time {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
}

.social-proof-icon {
    color: var(--red);
    font-size: 1.25rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .social-proof-notifications {
        left: 10px;
        right: 10px;
        bottom: 80px;
        max-width: calc(100% - 20px);
    }
}

/* ========== 5. CHATBOT ========== */
.chatbot-launcher {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 997;
    cursor: pointer;
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.chatbot-launcher.visible {
    opacity: 1;
    transform: scale(1);
}

.chatbot-icon {
    width: 56px;
    height: 56px;
    background: var(--red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.chatbot-launcher:hover .chatbot-icon {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(255, 0, 0, 0.4);
}

.chatbot-icon i {
    font-size: 1.75rem;
    color: var(--white);
}

.chatbot-bubble {
    position: absolute;
    bottom: 72px;
    right: 0;
    background: var(--white);
    padding: 10px 16px;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--black);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.chatbot-launcher:hover .chatbot-bubble {
    opacity: 1;
    transform: translateY(0);
}

.chatbot-window {
    position: fixed;
    bottom: 140px;
    right: 20px;
    width: 360px;
    max-width: calc(100vw - 40px);
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.chatbot-window.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

.chatbot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--black);
    border-radius: 16px 16px 0 0;
}

.chatbot-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chatbot-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.chatbot-header-text {
    display: flex;
    flex-direction: column;
}

.chatbot-name {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
}

.chatbot-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

.chatbot-status-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.chatbot-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.chatbot-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.chatbot-close i {
    font-size: 1.125rem;
    color: var(--white);
}

.chatbot-messages {
    padding: 20px;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chatbot-message {
    padding: 12px 16px;
    border-radius: 12px;
    max-width: 85%;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
}

.chatbot-message-bot {
    background: rgba(0, 0, 0, 0.05);
    color: var(--black);
    align-self: flex-start;
}

.chatbot-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px 20px;
}

.chatbot-option {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--black);
    text-align: left;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.chatbot-option:hover {
    background: rgba(255, 0, 0, 0.05);
    border-color: var(--red);
    transform: translateX(4px);
}

/* ========== 6. PRICING SECTION - VOGUE STYLE ========== */
.pricing-vogue {
    padding: var(--space-xxl) 0;
    background: var(--white);
}

.pricing-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.pricing-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.4);
    margin-bottom: var(--space-md);
}

.pricing-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--black);
    margin-bottom: var(--space-md);
}

.pricing-subtitle {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.7);
    max-width: 700px;
    margin: 0 auto;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.pricing-card {
    background: var(--white);
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: var(--space-lg);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.pricing-card:hover {
    border-color: var(--red);
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}

.pricing-card-featured {
    border-color: var(--red);
    border-width: 3px;
    box-shadow: 0 8px 32px rgba(255, 0, 0, 0.1);
}

.pricing-featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--red);
    color: var(--white);
    padding: 6px 16px;
    border-radius: 980px;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pricing-card-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.pricing-tier-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: var(--space-sm);
}

.pricing-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.pricing-currency {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
}

.pricing-number {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--black);
}

.pricing-period {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
}

.pricing-card-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--black);
}

.pricing-feature i {
    font-size: 1.125rem;
    color: var(--red);
    flex-shrink: 0;
}

.pricing-ideal {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    font-style: italic;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: var(--space-md);
    text-align: center;
}

.pricing-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 14px 28px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 980px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

.pricing-cta-basic,
.pricing-cta-deluxe {
    background: rgba(0, 0, 0, 0.05);
    color: var(--black);
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.pricing-cta-basic:hover,
.pricing-cta-deluxe:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: var(--black);
    transform: scale(1.02);
}

.pricing-cta-premium {
    background: var(--red);
    color: var(--white);
    border: 2px solid var(--red);
}

.pricing-cta-premium:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.25);
}

.pricing-cta .arrow {
    font-size: 1.25rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-cta:hover .arrow {
    transform: translateX(4px);
}

.pricing-footer {
    text-align: center;
}

.pricing-divider {
    width: 80px;
    height: 2px;
    background: var(--red);
    margin: 0 auto var(--space-lg);
}

.pricing-note {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.6);
    max-width: 600px;
    margin: 0 auto;
}

.pricing-note strong {
    font-weight: 600;
    color: var(--black);
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        padding: var(--space-md);
    }

    .pricing-number {
        font-size: 3rem;
    }
}

/* ========== RESPONSIVE MOBILE - CONVERSION ELEMENTS ========== */
@media (max-width: 768px) {
    .chatbot-launcher {
        bottom: 100px;
        right: 16px;
    }

    .chatbot-icon {
        width: 48px;
        height: 48px;
    }

    .chatbot-icon i {
        font-size: 1.5rem;
    }

    .chatbot-window {
        bottom: 160px;
        right: 16px;
        left: 16px;
        width: auto;
    }

    /* Footer responsive - mantiene todo centrado en mobile */
    .footer-content {
        gap: var(--space-md);  /* 24px en mobile */
    }

    .footer-badges {
        flex-wrap: wrap;  /* Permite wrap en mobile */
    }
}
/* ==================== FIXES RESPONSIVE MÓVIL ==================== */

@media (max-width: 768px) {
    /* FIX 1: HERO - Sección centrada verticalmente */
    .hero-vogue {
        padding-top: 140px !important;
        padding-bottom: 80px !important;  /* Reducido de 120px a 80px */
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

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

    /* HERO EYEBROW - Centrado */
    .hero-vogue-eyebrow {
        text-align: center !important;
    }

    /* HERO TÍTULO - Más grande y centrado */
    .hero-vogue-title {
        font-size: clamp(3.25rem, 15vw, 6rem) !important;  /* Más grande: 52px+ */
        line-height: 1.1 !important;
        margin-bottom: 16px !important;
        text-align: center !important;
        padding: 0 10px !important;  /* Padding lateral de 10px */
    }

    /* HERO SUBTÍTULO - Más pequeño y mismo ancho que CTAs */
    .hero-vogue-subtitle {
        font-size: 0.875rem !important;  /* 14px - un pelín más pequeño */
        line-height: 1.5 !important;
        margin-bottom: 36px !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-weight: 400 !important;
        padding: 0 20px !important;  /* Mismo padding que los CTAs */
        text-align: center !important;
        max-width: calc(100% - 40px) !important;  /* Mismo ancho que los CTAs (100% - padding lateral) */
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* HERO CTAs - Centrados */
    .hero-vogue-cta {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100% !important;
        padding: 0 20px !important;
    }

    /* Botón secundario "Cómo funciona" - Fondo gris con bordes redondeados */
    .btn-hero-secondary {
        background: rgba(128, 128, 128, 0.15) !important;  /* Gris casi transparente */
        color: rgba(255, 255, 255, 0.95) !important;
        border-radius: 980px !important;  /* Mismo border-radius que el CTA rojo */
    }

    .btn-hero-secondary:hover {
        background: rgba(128, 128, 128, 0.25) !important;  /* Más visible al hover */
    }

    /* HERO PROOF STATS - Margen superior y scroll funcional */
    .hero-vogue-proof {
        margin-top: 40px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 40px !important;
        padding: 12px 20px !important;
        width: 100% !important;
        touch-action: pan-x !important;  /* Permitir solo scroll horizontal en touch */
        /* Ocultar scrollbar pero mantener funcionalidad */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .hero-vogue-proof::-webkit-scrollbar {
        display: none !important;
    }

    .hero-vogue-proof .proof-stat {
        flex: 0 0 auto !important;  /* No flex, tamaño fijo */
        min-width: 120px !important;
        width: 120px !important;
    }

    /* FIX 2: SECCIÓN "CÓMO FUNCIONA" - Sin fondo */
    .como-funciona-editorial {
        background: transparent !important;  /* Sin fondo gris */
        border-radius: 0 !important;
        margin: 0 0 40px 0 !important;  /* Margen inferior de 40px */
        padding: 0 20px 60px 20px !important;  /* Sin padding superior */
    }

    /* TÍTULO "CÓMO CONSEGUIR..." - 10px alineado a la izquierda */
    .section-title-editorial {
        font-size: 10px !important;  /* 10px */
        line-height: 1.3 !important;
        text-align: left !important;  /* Alineación izquierda */
        word-wrap: break-word !important;
        max-width: 100% !important;
        padding-left: 20px !important;  /* 20px de padding izquierdo */
        letter-spacing: 0.1em !important;  /* Más espaciado para legibilidad */
        font-weight: 500 !important;
        margin-bottom: 40px !important;
    }

    /* CARDS "CÓMO FUNCIONA" - Ajustar texto para que no se salga */
    .paso-editorial {
        min-height: auto !important;  /* Altura automática */
        padding: 30px 20px !important;  /* Padding ajustado */
    }

    .paso-content {
        padding: 20px !important;  /* Padding interno reducido */
    }

    .paso-editorial h3 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;  /* Título más pequeño */
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    .paso-editorial p {
        font-size: 0.875rem !important;  /* 14px - texto más pequeño */
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
    }

    /* CTA "VER DISPONIBILIDAD" - Más pequeño en móvil */
    .cta-editorial-center .btn-poster {
        font-size: 0.875rem !important;  /* 14px - más pequeño */
        padding: 12px 24px !important;  /* Padding reducido */
        min-height: 44px !important;  /* Altura mínima reducida */
    }

    .cta-editorial-center .btn-poster .arrow {
        font-size: 1rem !important;  /* Flecha más pequeña */
    }

    /* TESTIMONIOS - COMENTADO - Causaba conflicto con auto-scroll JavaScript
    .testimonios-scroll-container {
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        padding: 20px 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100% !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        scroll-behavior: smooth !important;
        scrollbar-width: thin !important;
    }

    .testimonios-scroll-container::-webkit-scrollbar {
        height: 6px !important;
    }

    .testimonios-scroll-container::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important;
    }

    .testimonios-scroll-container::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3) !important;
        border-radius: 3px !important;
    }
    */

    .testimonios-scroll-track {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        animation: none !important;
        transform: none !important;
        padding: 0 20px !important;
        width: auto !important;
        min-width: calc(300px * 19 + 16px * 18 + 40px) !important;  /* 19 cards × 300px + gaps + padding */
    }

    .testimonio-card-dark {
        flex: 0 0 auto !important;
        width: 300px !important;  /* Más ancho (largo) */
        min-width: 300px !important;
        max-width: 300px !important;
        min-height: 180px !important;  /* Menos alto (más fino) */
        padding: 20px !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .testimonio-quote {
        font-size: 0.75rem !important;  /* 12px - más pequeño */
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }

    .testimonio-author-dark {
        margin-top: auto !important;
    }

    .author-name-dark {
        font-size: 0.75rem !important;  /* 12px */
    }

    .author-role-dark {
        font-size: 0.6875rem !important;  /* 11px */
    }

    .author-avatar-dark {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem;
    }

    /* FIX 3: "DISPONIBILIDAD DE DJS" - Ajustar tamaño y centrar */
    .urgencia-title {
        font-size: clamp(2.5rem, 10vw, 4rem) !important;  /* Reducido */
        line-height: 1 !important;
        text-align: center !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

    .urgencia-block {
        text-align: center !important;
        padding: 0 20px !important;
    }

    .urgencia-text-small {
        text-align: center !important;
    }

    .urgencia-cta {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* FIX 4: "COMPROBAR DISPONIBILIDAD" - Ajustar tamaño y centrar */
    .form-title-editorial {
        font-size: clamp(2.5rem, 10vw, 4rem) !important;  /* Reducido */
        line-height: 1 !important;
        text-align: center !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        margin: 0 auto var(--space-md) auto !important;
    }

    .form-subtitle-editorial {
        text-align: center !important;
        font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
    }

    .form-editorial-wrapper {
        text-align: center !important;
        padding: 0 20px !important;
    }
}

/* ---------- Aviso de cookies (componente compartido /legal/assets/cookies.js): el aspecto de hogueras (negro, blanco y rojo) ---------- */
:root {
    --ck-sombra-barra: 0 -10px 36px rgba(0, 0, 0, 0.55); --ck-radio-m: 14px; --ck-radio-bm: 8px;
    --ck-bg: #000000; --ck-fg: #ffffff; --ck-suave: #cccccc; --ck-titulo: #ffffff; --ck-enlace: #ffffff;
    --ck-borde: 2px solid #ff0000; --ck-radio: 0;
    --ck-sombra: 0 16px 48px rgba(0, 0, 0, 0.5);
    --ck-fuente: var(--font-body); --ck-fuente-t: var(--font-display); --ck-peso-t: 700; --ck-tam-t: 18px; --ck-mayus-t: uppercase; --ck-ls-t: 0.04em;
    --ck-peso-b: 700; --ck-tam-b: 12px; --ck-mayus-b: uppercase; --ck-ls-b: 0.06em; --ck-radio-b: 0;
    --ck-btn-bg: transparent; --ck-btn-fg: #ffffff; --ck-btn-borde: 2px solid #ffffff; --ck-btn-hover-bg: #ffffff; --ck-btn-hover-fg: #000000;
    --ck-linea: #333333; --ck-on: #ff0000; --ck-off: #8c8c8c; --ck-bola: #ffffff; --ck-foco: #ff4d4d;
}