/**
 * ============================================
 * MODERN HERO STYLES - NXT Telecom CMS
 * ============================================
 *
 * GUIA RAPIDA PARA EL DISENADOR:
 * =============================
 *
 * TIPOS DE HERO DISPONIBLES:
 *
 * .hero-typography  -> Tipografia gigante protagonista (ideal para landing pages impactantes)
 * .hero-split       -> Pantalla dividida contenido | imagen (ideal para productos/servicios)
 * .hero-bento       -> Grid estilo bento con tarjetas (ideal para mostrar multiples features)
 * .hero-glass       -> Glassmorphism con efecto cristal (ideal para tech/moderno)
 * .hero-mesh        -> Fondo con blobs animados (ideal para startups/creativo)
 * .hero-editorial   -> Estilo revista/blog (ideal para articulos/noticias)
 * .hero-minimal     -> Ultra minimalista (ideal para portfolios/elegante)
 * .hero-interactive -> Reacciona al scroll (ideal para experiencias inmersivas)
 *
 * COMO USAR:
 * Selecciona el tipo en el panel de administracion > CMS > Hero
 * Cada tipo tiene sus propias opciones de configuracion
 *
 */

/* ============================================
   1. HERO TYPOGRAPHY
   - Tipografia gigante como elemento principal
   - Sin imagenes de fondo por defecto
   - Texto animado opcional
   ============================================ */
.hero-typography {
    background: var(--color-background, #0f172a);
    padding: var(--spacing-12) var(--spacing-6);
}

.hero-typography .hero-content {
    max-width: 1400px;
    text-align: left;
}

.hero-typography h1 {
    font-size: clamp(3.5rem, 12vw, 10rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin-bottom: var(--spacing-8);
}

/* Variantes de tamano tipografico */
.hero-typography.typo-lg h1 { font-size: clamp(3rem, 10vw, 7rem); }
.hero-typography.typo-xl h1 { font-size: clamp(3.5rem, 12vw, 10rem); }
.hero-typography.typo-2xl h1 { font-size: clamp(4rem, 15vw, 14rem); }
.hero-typography.typo-3xl h1 { font-size: clamp(5rem, 18vw, 18rem); }

/* Espaciado tipografico */
.hero-typography.typo-tight h1 { letter-spacing: -0.05em; }
.hero-typography.typo-normal h1 { letter-spacing: -0.02em; }
.hero-typography.typo-wide h1 { letter-spacing: 0.02em; }

/* Texto escalonado/stagger */
.hero-typography.typo-stagger h1 span {
    display: block;
    margin-left: 0;
}
.hero-typography.typo-stagger h1 span:nth-child(2) { margin-left: 5%; }
.hero-typography.typo-stagger h1 span:nth-child(3) { margin-left: 10%; }
.hero-typography.typo-stagger h1 span:nth-child(4) { margin-left: 15%; }

/* Animacion letra por letra */
.hero-typography.typo-animate-letters h1 span {
    display: inline-block;
    opacity: 0;
    animation: typo-letter-in 0.4s ease forwards;
}
.hero-typography.typo-animate-letters h1 span:nth-child(1) { animation-delay: 0.05s; }
.hero-typography.typo-animate-letters h1 span:nth-child(2) { animation-delay: 0.1s; }
.hero-typography.typo-animate-letters h1 span:nth-child(3) { animation-delay: 0.15s; }
.hero-typography.typo-animate-letters h1 span:nth-child(4) { animation-delay: 0.2s; }
.hero-typography.typo-animate-letters h1 span:nth-child(5) { animation-delay: 0.25s; }

@keyframes typo-letter-in {
    from {
        opacity: 0;
        transform: translateY(40px) rotateX(-20deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

/* Animacion palabra por palabra */
.hero-typography.typo-animate-words h1 span {
    display: inline-block;
    opacity: 0;
    animation: typo-word-in 0.6s ease forwards;
}
.hero-typography.typo-animate-words h1 span:nth-child(1) { animation-delay: 0.1s; }
.hero-typography.typo-animate-words h1 span:nth-child(2) { animation-delay: 0.25s; }
.hero-typography.typo-animate-words h1 span:nth-child(3) { animation-delay: 0.4s; }
.hero-typography.typo-animate-words h1 span:nth-child(4) { animation-delay: 0.55s; }

@keyframes typo-word-in {
    from {
        opacity: 0;
        transform: translateY(60px);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Animacion fade up simple */
.hero-typography.typo-animate-fade h1 {
    animation: typo-fade-up 0.8s ease forwards;
}

@keyframes typo-fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-typography .hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    max-width: 600px;
    opacity: 0.8;
    margin-bottom: var(--spacing-8);
}

.hero-typography .hero-cta {
    justify-content: flex-start;
}


/* ============================================
   2. HERO SPLIT SCREEN
   - Pantalla dividida contenido/imagen
   - Multiples proporciones disponibles
   - Estilos de division: recto, diagonal, curvo
   ============================================ */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    padding: 0;
}

/* Proporciones de division */
.hero-split.split-50-50 { grid-template-columns: 1fr 1fr; }
.hero-split.split-60-40 { grid-template-columns: 1.5fr 1fr; }
.hero-split.split-40-60 { grid-template-columns: 1fr 1.5fr; }
.hero-split.split-70-30 { grid-template-columns: 2.3fr 1fr; }

/* Invertir (imagen a la izquierda) */
.hero-split.split-reverse { direction: rtl; }
.hero-split.split-reverse > * { direction: ltr; }

.hero-split-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-12) var(--spacing-10);
    background: var(--color-background, #0f172a);
}

.hero-split-content .hero-badge {
    align-self: flex-start;
}

.hero-split-content h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-6);
}

.hero-split-content .hero-subtitle {
    font-size: 1.15rem;
    opacity: 0.85;
    margin-bottom: var(--spacing-8);
    max-width: 500px;
}

.hero-split-content .hero-features {
    margin-bottom: var(--spacing-8);
    flex-wrap: wrap;
}

.hero-split-content .hero-cta {
    justify-content: flex-start;
}

.hero-split-visual {
    position: relative;
    overflow: hidden;
}

.hero-split-visual img,
.hero-split-visual video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estilo diagonal */
.hero-split.split-diagonal .hero-split-visual {
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    margin-left: -10%;
}
.hero-split.split-diagonal.split-reverse .hero-split-visual {
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    margin-right: -10%;
    margin-left: 0;
}

/* Estilo curvo */
.hero-split.split-curved .hero-split-visual {
    clip-path: ellipse(75% 100% at 75% 50%);
    margin-left: -15%;
}

/* Estilo wave */
.hero-split.split-wave .hero-split-visual::before {
    content: '';
    position: absolute;
    left: -50px;
    top: 0;
    height: 100%;
    width: 100px;
    background: var(--color-background, #0f172a);
    z-index: 10;
    clip-path: path('M0,0 Q50,50 0,100 Q50,150 0,200 Q50,250 0,300 Q50,350 0,400 Q50,450 0,500 Q50,550 0,600 Q50,650 0,700 Q50,750 0,800 Q50,850 0,900 Q50,950 0,1000 L100,1000 L100,0 Z');
}

@media (max-width: 968px) {
    .hero-split {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 50vh;
    }
    .hero-split.split-reverse {
        direction: ltr;
    }
    .hero-split-content {
        padding: var(--spacing-8) var(--spacing-6);
        order: 1;
    }
    .hero-split-visual {
        order: 2;
        clip-path: none !important;
        margin: 0 !important;
    }
    .hero-split.split-diagonal .hero-split-visual,
    .hero-split.split-curved .hero-split-visual {
        clip-path: none;
        margin: 0;
    }
}


/* ============================================
   3. HERO BENTO GRID
   - Grid asimetrico tipo caja bento japonesa
   - Cada celda puede tener contenido diferente
   - Efecto glassmorphism en las tarjetas
   ============================================ */
.hero-bento {
    padding: var(--spacing-16) var(--spacing-6);
    background: var(--color-background, #0f172a);
}

.hero-bento-grid {
    display: grid;
    gap: var(--spacing-4);
    max-width: 1200px;
    margin: 0 auto;
    min-height: 70vh;
}

/* Layout 2x2 */
.hero-bento-grid.bento-2x2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
        "main feature1"
        "main feature2";
}

/* Layout 3x2 */
.hero-bento-grid.bento-3x2 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
        "main main feature1"
        "main main feature2"
        "feature3 feature4 feature5";
}

/* Layout 1-2 (1 grande arriba, 2 abajo) */
.hero-bento-grid.bento-1-2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 2fr 1fr;
    grid-template-areas:
        "main main"
        "feature1 feature2";
}

/* Layout 2-1 (2 arriba, 1 grande abajo) */
.hero-bento-grid.bento-2-1 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 2fr;
    grid-template-areas:
        "feature1 feature2"
        "main main";
}

.hero-bento-cell {
    background: var(--glass-bg, rgba(255,255,255,0.08));
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    border-radius: var(--border-radius-lg, 20px);
    padding: var(--spacing-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
}

.hero-bento-cell:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.hero-bento-cell.bento-main {
    grid-area: main;
    padding: var(--spacing-10);
}

.hero-bento-cell.bento-main h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-4);
}

.hero-bento-cell.bento-main .hero-subtitle {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-bottom: var(--spacing-6);
}

.hero-bento-cell.bento-feature {
    text-align: center;
}

.hero-bento-cell.bento-feature-1 { grid-area: feature1; }
.hero-bento-cell.bento-feature-2 { grid-area: feature2; }
.hero-bento-cell.bento-feature-3 { grid-area: feature3; }
.hero-bento-cell.bento-feature-4 { grid-area: feature4; }
.hero-bento-cell.bento-feature-5 { grid-area: feature5; }

.hero-bento-cell .bento-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-4);
    background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary), var(--color-secondary)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-bento-cell .bento-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-2);
}

.hero-bento-cell .bento-text {
    font-size: 0.95rem;
    opacity: 0.7;
}

/* Celda con imagen de fondo */
.hero-bento-cell.bento-image {
    padding: 0;
}
.hero-bento-cell.bento-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-bento-cell.bento-image .bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    z-index: 1;
}
.hero-bento-cell.bento-image .bento-content {
    position: relative;
    z-index: 2;
    padding: var(--spacing-6);
    margin-top: auto;
}

@media (max-width: 768px) {
    .hero-bento-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        grid-template-areas: none !important;
    }
    .hero-bento-cell {
        grid-area: auto !important;
    }
    .hero-bento-cell.bento-main {
        min-height: 300px;
    }
    .hero-bento-cell.bento-feature {
        min-height: 150px;
    }
}


/* ============================================
   4. HERO GLASSMORPHISM
   - Tarjeta de cristal esmerilado
   - Fondo vibrante visible a traves del glass
   - Bordes sutiles y sombras suaves
   ============================================ */
.hero-glass {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12) var(--spacing-6);
    position: relative;
}

/* Fondo vibrante */
.hero-glass .hero-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
}

.hero-glass-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    padding: var(--spacing-12) var(--spacing-10);
    max-width: 700px;
    width: 100%;
    position: relative;
    z-index: 10;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Variantes de blur */
.hero-glass.glass-blur-10 .hero-glass-card { backdrop-filter: blur(10px); }
.hero-glass.glass-blur-20 .hero-glass-card { backdrop-filter: blur(20px); }
.hero-glass.glass-blur-30 .hero-glass-card { backdrop-filter: blur(30px); }
.hero-glass.glass-blur-40 .hero-glass-card { backdrop-filter: blur(40px); }
.hero-glass.glass-blur-50 .hero-glass-card { backdrop-filter: blur(50px); }

/* Variantes de opacidad */
.hero-glass.glass-opacity-05 .hero-glass-card { background: rgba(255,255,255,0.05); }
.hero-glass.glass-opacity-10 .hero-glass-card { background: rgba(255,255,255,0.10); }
.hero-glass.glass-opacity-15 .hero-glass-card { background: rgba(255,255,255,0.15); }
.hero-glass.glass-opacity-20 .hero-glass-card { background: rgba(255,255,255,0.20); }
.hero-glass.glass-opacity-25 .hero-glass-card { background: rgba(255,255,255,0.25); }
.hero-glass.glass-opacity-30 .hero-glass-card { background: rgba(255,255,255,0.30); }

/* Sin borde */
.hero-glass.glass-no-border .hero-glass-card {
    border: none;
}

.hero-glass-card .hero-badge {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
}

.hero-glass-card h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-4);
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.hero-glass-card .hero-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: var(--spacing-8);
}

.hero-glass-card .hero-features {
    margin-bottom: var(--spacing-6);
}

.hero-glass-card .hero-feature {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
}

/* Elementos decorativos flotantes */
.hero-glass-decorations {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
}

.hero-glass-decoration {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(40px);
}

.hero-glass-decoration:nth-child(1) {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -50px;
    animation: glass-float 8s ease-in-out infinite;
}

.hero-glass-decoration:nth-child(2) {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: 10%;
    animation: glass-float 10s ease-in-out infinite reverse;
}

.hero-glass-decoration:nth-child(3) {
    width: 150px;
    height: 150px;
    top: 30%;
    left: -30px;
    animation: glass-float 12s ease-in-out infinite;
    animation-delay: -3s;
}

@keyframes glass-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -20px) rotate(5deg); }
    50% { transform: translate(0, 10px) rotate(0deg); }
    75% { transform: translate(-20px, -10px) rotate(-5deg); }
}


/* ============================================
   5. HERO MESH GRADIENT
   - Blobs de color animados en el fondo
   - Efecto organico y moderno
   - Performance optimizada
   ============================================ */
.hero-mesh {
    position: relative;
    overflow: hidden;
}

.hero-mesh-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-mesh-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.7;
    animation: mesh-blob 20s ease-in-out infinite;
}

/* Velocidades de animacion */
.hero-mesh.mesh-speed-10 .hero-mesh-blob { animation-duration: 10s; }
.hero-mesh.mesh-speed-20 .hero-mesh-blob { animation-duration: 20s; }
.hero-mesh.mesh-speed-30 .hero-mesh-blob { animation-duration: 30s; }
.hero-mesh.mesh-speed-40 .hero-mesh-blob { animation-duration: 40s; }
.hero-mesh.mesh-speed-60 .hero-mesh-blob { animation-duration: 60s; }

/* Intensidad de blur */
.hero-mesh.mesh-blur-40 .hero-mesh-blob { filter: blur(40px); }
.hero-mesh.mesh-blur-60 .hero-mesh-blob { filter: blur(60px); }
.hero-mesh.mesh-blur-80 .hero-mesh-blob { filter: blur(80px); }
.hero-mesh.mesh-blur-100 .hero-mesh-blob { filter: blur(100px); }
.hero-mesh.mesh-blur-120 .hero-mesh-blob { filter: blur(120px); }

.hero-mesh-blob:nth-child(1) {
    width: 600px;
    height: 600px;
    top: -200px;
    left: -100px;
    background: var(--mesh-color-1, #7c3aed);
}

.hero-mesh-blob:nth-child(2) {
    width: 500px;
    height: 500px;
    top: 20%;
    right: -100px;
    background: var(--mesh-color-2, #06b6d4);
    animation-delay: -5s;
    animation-direction: reverse;
}

.hero-mesh-blob:nth-child(3) {
    width: 450px;
    height: 450px;
    bottom: -100px;
    left: 30%;
    background: var(--mesh-color-3, #ec4899);
    animation-delay: -10s;
}

.hero-mesh-blob:nth-child(4) {
    width: 350px;
    height: 350px;
    top: 50%;
    left: 10%;
    background: var(--mesh-color-4, #f59e0b);
    animation-delay: -15s;
    animation-direction: reverse;
}

.hero-mesh-blob:nth-child(5) {
    width: 300px;
    height: 300px;
    bottom: 10%;
    right: 20%;
    background: var(--mesh-color-5, #10b981);
    animation-delay: -8s;
}

.hero-mesh-blob:nth-child(6) {
    width: 400px;
    height: 400px;
    top: 10%;
    left: 50%;
    background: var(--mesh-color-6, #6366f1);
    animation-delay: -12s;
    animation-direction: reverse;
}

@keyframes mesh-blob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(50px, -30px) scale(1.1);
    }
    50% {
        transform: translate(-30px, 50px) scale(0.95);
    }
    75% {
        transform: translate(30px, 30px) scale(1.05);
    }
}

.hero-mesh .hero-content {
    position: relative;
    z-index: 10;
}

/* Presets de colores mesh */
.hero-mesh.mesh-purple {
    --mesh-color-1: #7c3aed;
    --mesh-color-2: #06b6d4;
    --mesh-color-3: #ec4899;
    --mesh-color-4: #f59e0b;
}

.hero-mesh.mesh-ocean {
    --mesh-color-1: #0284c7;
    --mesh-color-2: #06b6d4;
    --mesh-color-3: #22d3ee;
    --mesh-color-4: #0891b2;
}

.hero-mesh.mesh-sunset {
    --mesh-color-1: #f97316;
    --mesh-color-2: #ef4444;
    --mesh-color-3: #ec4899;
    --mesh-color-4: #f59e0b;
}

.hero-mesh.mesh-forest {
    --mesh-color-1: #10b981;
    --mesh-color-2: #059669;
    --mesh-color-3: #34d399;
    --mesh-color-4: #047857;
}

.hero-mesh.mesh-galaxy {
    --mesh-color-1: #6366f1;
    --mesh-color-2: #8b5cf6;
    --mesh-color-3: #a855f7;
    --mesh-color-4: #3b82f6;
}


/* ============================================
   6. HERO EDITORIAL
   - Estilo revista/magazine
   - Tipografia editorial
   - Metadatos visibles (autor, fecha, categoria)
   ============================================ */
.hero-editorial {
    padding: var(--spacing-16) var(--spacing-6);
    background: var(--color-background, #fafafa);
}

.hero-editorial .hero-content {
    max-width: 900px;
    text-align: left;
}

.hero-editorial-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    font-size: 0.9rem;
    opacity: 0.7;
    flex-wrap: wrap;
}

.hero-editorial-category {
    background: var(--color-primary);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: var(--border-radius, 4px);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-editorial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.hero-editorial-author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.hero-editorial-divider {
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    opacity: 0.4;
}

.hero-editorial h1 {
    font-family: var(--font-heading, 'Playfair Display'), Georgia, serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: var(--spacing-6);
    letter-spacing: -0.02em;
}

.hero-editorial .hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    opacity: 0.8;
    margin-bottom: var(--spacing-8);
    max-width: 700px;
}

.hero-editorial-tags {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-8);
}

.hero-editorial-tag {
    background: var(--color-surface, #f0f0f0);
    color: var(--color-text);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full, 20px);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.hero-editorial-tag:hover {
    background: var(--color-primary);
    color: white;
}

.hero-editorial-image {
    margin-top: var(--spacing-10);
    border-radius: var(--border-radius-lg, 16px);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.hero-editorial-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Variante con imagen al lado */
.hero-editorial.editorial-with-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
}

.hero-editorial.editorial-with-image .hero-content {
    max-width: none;
}

.hero-editorial.editorial-with-image .hero-editorial-image {
    margin-top: 0;
}

@media (max-width: 968px) {
    .hero-editorial.editorial-with-image {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   7. HERO MINIMAL
   - Ultra minimalista
   - Solo texto esencial
   - Mucho espacio en blanco
   ============================================ */
.hero-minimal {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16) var(--spacing-6);
    background: var(--color-background, #ffffff);
}

.hero-minimal .hero-content {
    text-align: center;
    max-width: 800px;
}

.hero-minimal h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: var(--spacing-6);
    letter-spacing: -0.01em;
}

.hero-minimal .hero-subtitle {
    font-size: 1.1rem;
    opacity: 0.6;
    margin-bottom: var(--spacing-8);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.hero-minimal .hero-cta {
    justify-content: center;
}

.hero-minimal .btn {
    font-weight: 500;
    padding: 0.9rem 2rem;
}

/* Sin decoraciones */
.hero-minimal .hero-badge,
.hero-minimal .hero-particles,
.hero-minimal .hero-grid,
.hero-minimal .hero-lines,
.hero-minimal .hero-visual,
.hero-minimal .hero-scroll,
.hero-minimal .hero-features,
.hero-minimal .hero-trust {
    display: none !important;
}


/* ============================================
   8. HERO INTERACTIVE
   - Efectos que reaccionan al scroll
   - Requiere JavaScript para funcionalidad completa
   ============================================ */
.hero-interactive {
    position: relative;
    overflow: hidden;
}

.hero-interactive .hero-content {
    transition: all 0.1s ease-out;
}

/* Efecto Fade - contenido se desvanece al scrollear */
.hero-interactive.scroll-fade .hero-content {
    will-change: opacity, transform;
}

/* Efecto Zoom - imagen hace zoom out */
.hero-interactive.scroll-zoom .hero-bg {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* Efecto Reveal - elementos aparecen gradualmente */
.hero-interactive.scroll-reveal .hero-badge,
.hero-interactive.scroll-reveal h1,
.hero-interactive.scroll-reveal .hero-subtitle,
.hero-interactive.scroll-reveal .hero-cta {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.hero-interactive.scroll-reveal.revealed .hero-badge {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.hero-interactive.scroll-reveal.revealed h1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.hero-interactive.scroll-reveal.revealed .hero-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.hero-interactive.scroll-reveal.revealed .hero-cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

/* Efecto Split - titulo se separa al scrollear */
.hero-interactive.scroll-split h1 span {
    display: inline-block;
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* Efecto Parallax Layers - multiples capas a diferentes velocidades */
.hero-interactive.scroll-parallax-layers .hero-layer {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.hero-interactive.scroll-parallax-layers .hero-layer-1 {
    z-index: 1;
}

.hero-interactive.scroll-parallax-layers .hero-layer-2 {
    z-index: 2;
}

.hero-interactive.scroll-parallax-layers .hero-layer-3 {
    z-index: 3;
}

/* Progress bar de scroll */
.hero-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--color-primary);
    z-index: 9999;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.1s ease-out;
}


/* ============================================
   9. HERO VIDEO CINEMATICO
   - Mejoras para el tipo video existente
   - Letterbox, grain, color grading
   ============================================ */
.hero-video.video-cinematic {
    padding: 0;
}

/* Letterbox bars */
.hero-video.video-cinematic::before,
.hero-video.video-cinematic::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 10%;
    background: #000;
    z-index: 15;
}

.hero-video.video-cinematic::before { top: 0; }
.hero-video.video-cinematic::after { bottom: 0; }

/* Film grain overlay */
.hero-video.video-grain .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.05;
    z-index: 10;
    pointer-events: none;
    animation: grain-shift 0.5s steps(10) infinite;
}

@keyframes grain-shift {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1%, -1%); }
    20% { transform: translate(1%, 1%); }
    30% { transform: translate(-1%, 1%); }
    40% { transform: translate(1%, -1%); }
    50% { transform: translate(-1%, 0); }
    60% { transform: translate(1%, 0); }
    70% { transform: translate(0, 1%); }
    80% { transform: translate(0, -1%); }
    90% { transform: translate(1%, 1%); }
}

/* Color grading filters */
.hero-video.video-grade-warm .hero-bg {
    filter: sepia(0.2) saturate(1.3) brightness(1.05);
}

.hero-video.video-grade-cool .hero-bg {
    filter: saturate(0.9) brightness(1.1) hue-rotate(-10deg);
}

.hero-video.video-grade-vintage .hero-bg {
    filter: sepia(0.3) contrast(1.1) brightness(0.95) saturate(0.8);
}

.hero-video.video-grade-dramatic .hero-bg {
    filter: contrast(1.2) saturate(1.2) brightness(0.9);
}

/* Subtitulo estilo cine */
.hero-video.video-cinematic .hero-subtitle {
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.85rem;
}


/* ============================================
   10. DECORACIONES Y ELEMENTOS ADICIONALES
   - Patrones decorativos opcionales
   - Pueden combinarse con cualquier tipo de hero
   ============================================ */

/* Decoracion: Dots */
.hero-decoration-dots::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.1;
    z-index: 2;
    pointer-events: none;
}

/* Decoracion: Circles */
.hero-decoration-circles::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(var(--color-primary-rgb), 0.1);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}

.hero-decoration-circles::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}

/* Decoracion: Squares */
.hero-decoration-squares::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(45deg, rgba(var(--color-primary-rgb), 0.03) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(var(--color-primary-rgb), 0.03) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(var(--color-primary-rgb), 0.03) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(var(--color-primary-rgb), 0.03) 75%);
    background-size: 60px 60px;
    z-index: 2;
    pointer-events: none;
}

/* Decoracion: Waves */
.hero-decoration-waves::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,208C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
    z-index: 5;
    pointer-events: none;
}


/* ============================================
   11. TEXTO OSCURO (para fondos claros)
   ============================================ */
.hero-dark-text,
.hero-dark-text h1,
.hero-dark-text .hero-subtitle,
.hero-dark-text .hero-badge,
.hero-dark-text .hero-feature,
.hero-dark-text .hero-trust {
    color: var(--color-text, #1a1a2e);
}

.hero-dark-text .hero-badge {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
}

.hero-dark-text .hero-feature {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
}

.hero-dark-text h1 .highlight {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ============================================
   12. RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .hero-typography h1 {
        font-size: clamp(2.5rem, 10vw, 5rem);
    }

    .hero-typography.typo-stagger h1 span {
        margin-left: 0 !important;
    }

    .hero-glass-card {
        padding: var(--spacing-8) var(--spacing-6);
        margin: 0 var(--spacing-4);
    }

    .hero-editorial h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .hero-mesh-blob {
        transform: scale(0.6);
    }

    .hero-video.video-cinematic::before,
    .hero-video.video-cinematic::after {
        height: 5%;
    }
}

@media (max-width: 480px) {
    .hero-minimal h1 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .hero-glass-decoration {
        display: none;
    }
}


/* ============================================
   13. ANIMACIONES REDUCIDAS
   Para usuarios con preferencia de movimiento reducido
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-mesh-blob,
    .hero-glass-decoration,
    .hero-typography.typo-animate-letters h1 span,
    .hero-typography.typo-animate-words h1 span,
    .hero-particles::before,
    .hero-particles::after,
    .hero-lines::before,
    .hero-float-image {
        animation: none !important;
    }

    .hero-interactive .hero-content,
    .hero-interactive .hero-bg {
        transition: none !important;
    }
}


/* ============================================
   14. IMAGEN FLOTANTE DECORATIVA
   - Imagen que flota en el hero
   - Multiples posiciones y animaciones
   - Ideal para productos, mockups, ilustraciones
   ============================================ */
.hero-float-image {
    position: absolute;
    z-index: 15;
    pointer-events: none;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Tamanos */
.hero-float-image.float-small { max-width: 250px; }
.hero-float-image.float-medium { max-width: 400px; }
.hero-float-image.float-large { max-width: 550px; }
.hero-float-image.float-xl { max-width: 700px; }
.hero-float-image.float-auto { max-width: none; }

/* Posiciones */
.hero-float-image.float-right {
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.hero-float-image.float-right-edge {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.hero-float-image.float-left {
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.hero-float-image.float-left-edge {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.hero-float-image.float-bottom-right {
    right: 5%;
    bottom: 10%;
}

.hero-float-image.float-bottom-left {
    left: 5%;
    bottom: 10%;
}

.hero-float-image.float-center-right {
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
}

.hero-float-image.float-behind {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    opacity: 0.3;
}

/* Sombra */
.hero-float-image.float-shadow {
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

/* Animaciones */
@keyframes hero-float {
    0%, 100% { transform: translateY(-50%); }
    50% { transform: translateY(calc(-50% - 20px)); }
}

@keyframes hero-float-simple {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes hero-float-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes hero-float-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes hero-float-swing {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

@keyframes hero-float-fade-in {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-float-slide-in-right {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes hero-float-slide-in-left {
    from { opacity: 0; transform: translateX(-100px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Aplicar animaciones */
.hero-float-image.float-anim-float.float-right,
.hero-float-image.float-anim-float.float-right-edge,
.hero-float-image.float-anim-float.float-left,
.hero-float-image.float-anim-float.float-left-edge,
.hero-float-image.float-anim-float.float-center-right {
    animation: hero-float 4s ease-in-out infinite;
}

.hero-float-image.float-anim-float.float-bottom-right,
.hero-float-image.float-anim-float.float-bottom-left,
.hero-float-image.float-anim-float.float-behind {
    animation: hero-float-simple 4s ease-in-out infinite;
}

.hero-float-image.float-anim-pulse {
    animation: hero-float-pulse 3s ease-in-out infinite;
}

.hero-float-image.float-anim-rotate {
    animation: hero-float-rotate 20s linear infinite;
}

.hero-float-image.float-anim-swing {
    animation: hero-float-swing 3s ease-in-out infinite;
    transform-origin: top center;
}

.hero-float-image.float-anim-fade-in {
    animation: hero-float-fade-in 1s ease forwards;
}

.hero-float-image.float-anim-slide-in.float-right,
.hero-float-image.float-anim-slide-in.float-right-edge,
.hero-float-image.float-anim-slide-in.float-bottom-right,
.hero-float-image.float-anim-slide-in.float-center-right {
    animation: hero-float-slide-in-right 0.8s ease forwards;
}

.hero-float-image.float-anim-slide-in.float-left,
.hero-float-image.float-anim-slide-in.float-left-edge,
.hero-float-image.float-anim-slide-in.float-bottom-left {
    animation: hero-float-slide-in-left 0.8s ease forwards;
}

/* Responsive */
@media (max-width: 1200px) {
    .hero-float-image.float-small { max-width: 200px; }
    .hero-float-image.float-medium { max-width: 300px; }
    .hero-float-image.float-large { max-width: 400px; }
    .hero-float-image.float-xl { max-width: 500px; }
}

@media (max-width: 968px) {
    .hero-float-image {
        position: relative;
        display: block;
        margin: var(--spacing-8) auto 0;
        transform: none !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .hero-float-image.float-small { max-width: 180px; }
    .hero-float-image.float-medium { max-width: 250px; }
    .hero-float-image.float-large { max-width: 300px; }
    .hero-float-image.float-xl { max-width: 350px; }

    .hero-float-image.float-behind {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-float-image.float-small { max-width: 150px; }
    .hero-float-image.float-medium { max-width: 200px; }
    .hero-float-image.float-large { max-width: 250px; }
    .hero-float-image.float-xl { max-width: 280px; }
}

/* ============================================================
   SCANLINES - Efecto CRT
============================================================ */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.scanlines::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.03) 1px,
        rgba(0, 0, 0, 0.03) 2px
    );
    animation: scanlines-move 8s linear infinite;
}

.scanlines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(0, 0, 0, 0.15) 100%
    );
}

@keyframes scanlines-move {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

/* Variante mas intensa */
.scanlines.scanlines-intense::before {
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.08) 1px,
        rgba(0, 0, 0, 0.08) 2px
    );
}

/* Variante con color */
.scanlines.scanlines-green::before {
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0, 255, 100, 0.02) 1px,
        rgba(0, 255, 100, 0.02) 2px
    );
}

/* Desactivar en mobile para mejor rendimiento */
@media (max-width: 768px) {
    .scanlines::before,
    .scanlines::after {
        display: none;
    }
}