/* =========================================================================
   ESTILOS PARA LANDING PAGES (ANIMACIONES Y ELEMENTOS ESPECIALES)
   ========================================================================= */

/* 1. ANIMACIÓN DE ENTRADA GIRATORIA (3D) */
.giratorio {
    opacity: 0;
    /* Inicio desplazado y rotado para efecto 3D dramático */
    transform: translateY(150px) perspective(1000px) rotateY(-70deg);
    transition: all 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    will-change: transform, opacity;
    transform-origin: center center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Estado final visible */
.giratorio.visible {
    opacity: 1;
    /* IMPORTANTE: Al terminar la animación, quitamos la perspectiva y rotación (3D) 
       y dejamos el elemento plano (2D). Esto permite que el filtro SVG 'Fluid Glass' 
       se renderice correctamente sin ponerse negro. */
    transform: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* 
   GESTIÓN HÍBRIDA DE EFECTOS (ROTACIÓN + CRISTAL)
   1. Durante la animación (estado .giratorio base): Usamos un desenfoque estándar (blur) 
      porque los navegadores no pueden renderizar filtros SVG en movimiento 3D.
   2. Al terminar (estado .giratorio.visible): Recuperamos el filtro SVG premium 
      definido en style.css (ya que el elemento ahora es plano).
*/

/* Estado animando (Base) - Modo Seguro */
.giratorio .glass-surface--svg,
.giratorio .glass-surface__filter {
    backdrop-filter: blur(20px) saturate(100%);
    -webkit-backdrop-filter: blur(20px) saturate(100%);
    background: rgba(255, 255, 255, 0.05);
    transition: backdrop-filter 0.5s ease;
    /* Transición suave al efecto final */
}

/* Estado final (Visible) - Modo Premium (Restaurar) */
.giratorio.visible .glass-surface--svg,
.giratorio.visible .glass-surface__filter {
    /* 'revert' intenta usar el valor original de la clase CSS base (style.css) */
    backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
    -webkit-backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
    background: rgba(255, 255, 255, 0.05);
    /* Mantener fondo sutil */
}

/* =========================================================================
   2. FLECHAS ESTÁTICAS Y RESPONSIVAS
   ========================================================================= */

/* Contenedor Estático (Ancho completo) */
.arrow-container-static {
    width: 100% !important;
    max-width: none !important;
    height: auto;
    display: block;
    position: relative;
    overflow: visible;
}

/* Contenedor Responsivo (Ajustable con flex) */
.arrow-container-responsive {
    width: 100%;
    height: 150px;
    /* Altura base para área de dibujo */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-left: 10%;
    box-sizing: border-box;
}

/* SVG Responsivo */
.responsive-arrow-svg {
    width: 100% !important;
    height: auto;
    display: block;
    overflow: visible;
}

/* Línea Punteada Base (Guía visual) */
.arrow-line-dashed {
    stroke: white;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-dasharray: 10 20;
    fill: none;
    opacity: 0; /* Oculta de base */
}

/* Máscara de Revelado (Cubre la línea punteada) */
.arrow-mask-path {
    stroke: white;
    stroke-width: 12px;
    /* Más ancho para asegurar cobertura completa */
    fill: none;
    opacity: 0; /* Oculta de base */
}

/* Cabeza de Flecha (Estilo Chevron) */
.arrow-head-responsive {
    fill: none;
    stroke: white;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    /* Oculta hasta el final de la animación */
}

/* Estados de Animación Activa */
.arrow-anim-active .arrow-mask-path {
    will-change: stroke-dashoffset;
}

.arrow-anim-active .arrow-head-responsive {
    opacity: 1;
    transition: opacity 0.5s ease-in 1.2s;
    /* Delay sincronizado */
}

/* =========================================================================
   3. ANIMACIÓN DE ELEMENTOS FLOTANTES (NUBES)
   ========================================================================= */
.nube {
    /* Animación continua suave (8s base) */
    animation: flotar 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    /* Usamos 'translate' para evitar conflictos con transformaciones de Elementor */
    will-change: translate;
}

@keyframes flotar {
    0% {
        translate: 0px 0px;
    }

    20% {
        translate: 3px -5px;
    }

    40% {
        translate: -3px -10px;
    }

    60% {
        translate: -5px -6px;
    }

    80% {
        translate: 2px -3px;
    }

    100% {
        translate: 0px 0px;
    }
}

/* =========================================================================
   4. EFECTO DE GLOW / RESPIRACIÓN EN VIDEO
   ========================================================================= */

.video-glow-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 por defecto */
    height: 0;
    overflow: visible;
    display: block;
    min-height: 350px;
}

/* Modo Inmersivo en Móvil para Video Respiración */
@media (max-width: 768px) {
    .video-glow-wrapper {
        width: 100%;
        aspect-ratio: 9 / 16;
        height: auto;
        min-height: auto !important; /* Evitar conflictos con min-height de escritorio */
        padding-bottom: 0 !important;
        margin: 0 auto 50px;
        position: relative;
        
        /* DIFUMINADO FINAL (RESTAURADO) */
        overflow: visible; 
        display: block;
        background: #000822;
    }

    .video-glow-wrapper::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 120px;
        background: linear-gradient(to bottom, transparent, #000822);
        z-index: 5;
        pointer-events: none;
        display: block !important;
    }
    
    .video-glow-element {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        
        /* CORRECCIÓN 2: Cambiado a 'contain' para que el vídeo se vea al 100% sin recortes. */
        object-fit: contain !important; 
        object-position: center center !important;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
    }

    .video-mobile {
        display: block !important;
    }
    .video-desktop {
        display: none !important;
    }

    .respiracion-overlay {
        height: 40px; 
        background: linear-gradient(to bottom, #000312 0%, rgba(0, 3, 18, 0.4) 40%, transparent 100%) !important;
    }
}

/* El elemento ::after sólo vive en desktop para este desvanecimiento */
@media (min-width: 769px) {
    .video-glow-wrapper::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 200px;
        z-index: 10;
        pointer-events: none;
        background: linear-gradient(to bottom,
                transparent 0%,
                rgba(0, 8, 34, 0.3) 40%,
                rgba(0, 8, 34, 0.9) 80%,
                #000822 100%);
    }
}


/* Elemento de Video (Iframe/Nativo) */
.video-glow-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 1;
}

.video-mobile {
    display: none;
}

/* Difuminado superior oscuro (Void Entrance Cinemático) */
.respiracion-overlay {
    position: absolute;
    top: -2px;
    /* Cubre 2px de margen para matar cualquier defecto de subpíxel del marco */
    left: 0;
    width: 100%;
    height: 200px;
    /* Profundidad idéntica al difuminado inferior */
    pointer-events: none;
    z-index: 10;

    /* Capa Base: Oscuro a Transparente.
       Fundido impecable desde el color de fondo superior hacia el interior del vídeo */
    background: linear-gradient(to bottom,
            #000312 0%,
            rgba(0, 3, 18, 0.9) 20%,
            rgba(0, 3, 18, 0.3) 60%,
            transparent 100%);
}

/* =========================================================================
   5. DARK VEIL (FONDO ANIMADO WEBGL)
   ========================================================================= */

/* Contenedor principal */
.fondoanimado {
    position: relative;
    overflow: hidden;
    /* Asegurar que el canvas no se desborde */
    background-color: #000312;
    /* Color de fondo base pedido por el usuario */
    display: flex;
    /* Opcional: para centrar contenido verticalmente si se desea */
    flex-direction: column;
}

/* Canvas del efecto */
.darkveil-canvas {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* Detrás del contenido */
    pointer-events: none;
}

/* =========================================================================
   6. GIRATORIO LAYOUT (PODCAST PREMIUM)
   ========================================================================= */
.giratorio-layout {
    width: 100%;
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px 5%;
    box-sizing: border-box;
}

.giratorio-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    /* Soporte responsive nativo */
}

/* Columna Izquierda */
.giratorio-left {
    flex: 0 1 45%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.giratorio-title {
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1.1;
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.5px;
}

.giratorio-title .fw-black {
    font-weight: 800;
    /* PREMIUM más grueso */
}

/* Flecha Punteada CSS 100% Responsiva */
.giratorio-arrow-css {
    margin-top: 25px;
    margin-left: 20%;
    /* Nace debajo de 'más' visualmente */
    width: 65%;
    /* Estira hacia el video */
    min-width: 80px;
    height: 50px;
    border-left: 2px dashed #ffffff;
    border-bottom: 2px dashed #ffffff;
    border-bottom-left-radius: 12px;
    position: relative;
}

/* Punta de flecha (Chevron) */
.giratorio-arrow-css::after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: -6px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
}

/* Columna Derecha (Video) */
.giratorio-right {
    flex: 0 1 50%;
    display: flex;
    justify-content: flex-end;
    z-index: 2;
}

/* Wrapper Estilo Premium para el Video */
.giratorio-video-wrapper {
    width: 100%;
    max-width: 550px;
    border-radius: 16px;
    overflow: hidden;
    /* Ratio perfecto para YouTube (16:9) */
    aspect-ratio: 16 / 9;
    position: relative;

    /* Borde tipo cristal y sombra pronunciada para efecto premium */
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    /* Por si tarda en cargar el marco */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(8, 25, 137, 0.4);
    display: flex;
}

/* Video: Configuración base para fondos cinemáticos */
.giratorio-video-wrapper video,
.video-glow-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none !important;

    /* Aceleración por Hardware (GPU) para evitar congelación de frames */
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Overlay transparente que cubre el vídeo e impide toda interacción del ratón.
   Al no detectar hover sobre el <video>, el navegador NO muestra controles. */
.video-overlay-blocker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    cursor: default;
    /* Totalmente transparente pero captura todos los eventos */
    background: transparent;
}

/* El Iframe ocupa todo garantizado y prohíbe las interacciones de pausa con ratón */
.giratorio-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    /* Inutiliza el click de YT evitando mostrar controles/pausar */
}

/* Adaptación Responsive a Móviles y Pantallas Medianas */
@media (max-width: 850px) {
    .giratorio-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .giratorio-left {
        width: 100%;
        align-items: center;
    }

    /* En vista móvil, se convierte en una simple flecha para abajo */
    .giratorio-arrow-css {
        margin-left: 0;
        width: 0;
        height: 60px;
        /* Flecha más larga y fina */
        border-bottom: none;
        border-left: 2px dashed #ffffff;
        border-bottom-left-radius: 0;
    }

    /* Optimización de filtros para móviles para evitar lag en video */
    .giratorio-video-cristal {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Adaptar chevron hacia abajo */
    .giratorio-arrow-css::after {
        right: auto;
        left: -6px;
        bottom: -4px;
        transform: rotate(135deg);
    }

    .giratorio-right {
        width: 100%;
        justify-content: center;
    }

    .giratorio-video-wrapper {
        max-width: 100%;
    }
}

/* =========================================================================
   NUEVO FONDO: HEROFONDO (GRAINIENT)
   ========================================================================= */
.herofondo {
    position: relative;
    overflow: hidden;
    background-color: #000312;
    /* Color base profundo */
    width: 100%;
}

/* Difuminado de salida inferior integrado en herofondo */
.herofondo::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, #000822);
}

.grainient-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* 7. HERO PODCAST - Sección Layout */
.hero-podcast-section {
    min-height: 85vh;
    /* Se reduce de 100vh para ver la sección de abajo */
    padding: 60px 5%;
    /* Menos padding para subir el contenido */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    position: relative;
    /* Asegurar que el seudoelemento se posicione bien */
}

/* Layout interior de dos columnas */
.hero-podcast-inner {
    position: relative;
    z-index: 2;
    /* Por encima del canvas WebGL */
    width: 100%;
    /* Todo el ancho del contenedor padre */
    max-width: 1400px;
    /* Un poco más de aire para el estiramiento extremo */
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* Centrar verticalmente */
    justify-content: space-between;
    /* Texto izquierda, Video derecha */
    gap: 40px;
}

/* Columna izquierda (Texto + Flecha) */
.hero-podcast-left {
    flex: 0 1 450px;
    display: flex;
    flex-direction: column;
    text-align: left;
    /* Título alineado a la izquierda */
    padding-top: 0;
}

.hero-text-wrapper {
    margin-bottom: 20px;
}

/* Ajuste de Flecha Hero para esta sección */
.hero-arrow-box {
    width: 100%;
    height: 160px;
    /* Subido para asegurar que la máscara no corte el cuerpo en L */
    margin-top: 10px;
    overflow: visible !important;
}

.hero-arrow-box svg {
    overflow: visible !important;
}

/* Columna derecha: el cristal giratorio */
.hero-podcast-right {
    flex: 1;
    /* Que ocupe el espacio disponible pero con sensatez */
    display: flex;
    justify-content: flex-end;
    /* Pegado a la derecha */
    align-items: center;
    padding: 0;
}

/* Cristal con el video - Restaurado para simetría */
.giratorio-video-cristal {
    width: 100%;
    max-width: 600px;
    /* Tamaño ideal para simetría visual con el alto */
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.7),
        0 0 50px rgba(59, 80, 234, 0.3);
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ── Responsive Móvil ── */
@media (max-width: 991px) {
    .hero-podcast-section {
        min-height: auto;
        padding: 80px 20px 40px; /* Aumentado padding superior */
    }

    .hero-podcast-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .hero-podcast-left h1 {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Centrado de cualquier párrafo o descripción en el hero */
    .hero-podcast-left p, .hero-podcast-left div {
        text-align: center;
        width: 100%;
    }

    .hero-podcast-left {
        flex: 0 0 auto;
        width: 100%;
        align-items: center;
    }

    .hero-arrow-box {
        height: 60px;
        width: 100px;
        margin: 20px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 60' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10v35M6 37l6 8 6-8'/%3E%3C/svg%3E") no-repeat center;
        background-size: contain;
    }

    .hero-arrow-box svg, .hero-arrow-box::before, .hero-arrow-box::after {
        display: none !important;
    }

    .hero-podcast-right {
        flex: 0 0 auto;
        width: 100%;
        justify-content: center;
    }
}

/* 1. Ocultar forzosamente todos los controles nativos en navegadores WebKit/Blink */
.giratorio-video-wrapper video::-webkit-media-controls,
.video-glow-wrapper video::-webkit-media-controls,
.giratorio-video-wrapper video::-webkit-media-controls-enclosure,
.video-glow-wrapper video::-webkit-media-controls-enclosure,
.giratorio-video-wrapper video::-webkit-media-controls-panel,
.video-glow-wrapper video::-webkit-media-controls-panel,
.giratorio-video-wrapper video::-webkit-media-controls-start-playback-button,
.video-glow-wrapper video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

/* 2. Bloquear cualquier interacción directa de ratón/toque con el elemento de video */
.giratorio-video-wrapper video,
.video-glow-wrapper video {
    pointer-events: none !important;
}

/* 1. Ocultar la barra de controles de MediaElement.js (Nativo de WordPress) y Elementor */
.giratorio-video-wrapper .mejs-controls,
.video-glow-wrapper .mejs-controls,
.giratorio-video-wrapper .mejs-overlay-play,
.video-glow-wrapper .mejs-overlay-play,
.giratorio-video-wrapper .elementor-custom-embed-play,
.video-glow-wrapper .elementor-custom-embed-play,
.giratorio-video-wrapper .elementor-video-icon,
.video-glow-wrapper .elementor-video-icon {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. Quitar el fondo oscuro o márgenes que añade el contenedor de MediaElement */
.giratorio-video-wrapper .mejs-container,
.video-glow-wrapper .mejs-container {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Ocultar botones de Play superpuestos nativos de Elementor */
/* This rule is now merged into the previous .mejs-controls rule */

/* 4. Por si Edge está intentando forzar su botón de "Mejoras de vídeo" o PIP */
.giratorio-video-wrapper video,
.video-glow-wrapper video {
    pointer-events: none !important;
    /* Edge a veces ignora pointer-events en videos si no tienen un z-index bajo */
    position: relative;
    z-index: 1; /* Asegurar que está por encima de fondos pero bajo el overlay */
}

/* =========================================================================
   NUEVA SECCIÓN: UN ESPACIO A TU MEDIDA (CUSTOM HTML)
   ========================================================================= */

.espacio-medida-section {
    padding: 100px 5%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    background: transparent;
}

.espacio-medida-title {
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    line-height: 1.1;
    margin-bottom: 20px;
}

.espacio-medida-title b {
    display: block;
    font-weight: 900;
    text-transform: lowercase;
    font-size: 1.2em;
}

.espacio-medida-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1440px; /* Más ancho para PC */
    gap: 20px; /* Gap real para evitar que se toquen */
    position: relative;
    padding: 0 40px;
}

.espacio-medida-item {
    flex: 0 0 380px; /* Tamaño fijo para unificar */
    z-index: 2;
    transition: transform 0.5s ease;
}

/* Rotaciones Específicas */
.espacio-medida-item:nth-of-type(1) { transform: rotate(-5deg); }
.espacio-medida-item:nth-of-type(3) { transform: rotate(5deg); }
.espacio-medida-item:nth-of-type(5) { transform: rotate(-4deg); }

.espacio-medida-item img {
    width: 100%;
    aspect-ratio: 16 / 10; /* Un formato panorámico elegante, un poco menos que 16:9 */
    object-fit: cover; /* Recortar sin deformar */
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* Caso Especial: La primera imagen (Medidas) debe verse completa sin recortes */
.espacio-medida-item:first-of-type img {
    aspect-ratio: auto;
    object-fit: contain;
}

.espacio-medida-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1540px; /* Un poco más de margen total */
    gap: 20px; /* Reducir gap para que las flechas grandes encajen */
    position: relative;
    padding: 0 40px;
}

.espacio-medida-arrow {
    flex: 0 1 250px; /* Flechas más grandes */
    min-width: 120px;
    z-index: 1;
    opacity: 0.9;
}

/* Flecha Gigante Final */
.espacio-medida-final-arrow {
    width: 100%;
    max-width: 500px;
    height: 220px; /* Aumentado para la curva sinuosa */
    margin-top: -10px;
    margin-left: auto;
    margin-right: auto; /* Centrar */
}

/* ADAPTACIÓN RESPONSIVE (MÓVIL VERTICAL) */
@media (max-width: 850px) {
    .espacio-medida-container {
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
    }

    .espacio-medida-item {
        flex: 0 0 auto;
        width: 100%;
        max-width: 320px;
        transform: rotate(0deg) !important;
    }

    .espacio-medida-arrow {
        width: 100%;
        height: 70px;
        margin: 30px 0 !important;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 70' fill='none' stroke='white' stroke-width='1.5' stroke-dasharray='4 4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v50'/%3E%3Cpath d='M7 47l5 8 5-8' stroke-dasharray='0'/%3E%3C/svg%3E") no-repeat center;
        background-size: contain;
        display: block !important;
        transform: none !important;
    }

    .espacio-medida-arrow svg, .espacio-medida-arrow::before, .espacio-medida-arrow::after {
        display: none !important;
    }

    .espacio-medida-final-arrow {
        width: 100%;
        height: 180px;
        margin: 20px auto;
        max-width: 380px;
        display: block;
    }
}