/* =================================================================
    SUBPÁGINA: TERAPIA DE FLOTACIÓN - EXPERIENCIA INSIGNIA (DARK)
    REVISIÓN FINAL: OPTIMIZADA Y BLINDADA
   ================================================================= */

:root {
    --flot-bg-deep: #00050a;
    --flot-bg-marine: #000b1a;
    --flot-blue-glow: rgba(0, 50, 100, 0.4);
    --flot-glass-marine: rgba(0, 15, 35, 0.4);
    --flot-gold: #b89d6c;
    --flot-gold-glow: rgba(184, 157, 108, 0.3);
    --flot-white: #ffffff;
    --flot-text-muted: rgba(255, 255, 255, 0.7);
    --flot-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    --flot-entry-duration: 1.2s;
}

/* 1. RESET, INMERSIÓN Y BLINDAJE GLOBAL */
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Evita el scroll horizontal accidental */
    position: relative;
    background-color: var(--flot-bg-deep);
}

.flotarium-universe {
    color: var(--flot-white);
    font-family: 'Montserrat', sans-serif;
    width: 100%;
}

/* Unificación de seguridad para todas las secciones */
section {
    width: 100%;
    overflow: hidden; 
    position: relative;
    box-sizing: border-box;
}

/* Optimización de Animaciones (Uso de GPU) */
@keyframes slow-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.visual-orb, .void-content {
    will-change: transform, opacity; /* Mejora el rendimiento en scroll */
}

/* =================================================================
    2. HERO: EL VACÍO (VOID)
   ================================================================= */

.void-hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #000;
    overflow: hidden; /* Evita scrolls inesperados si el texto crece */
    position: relative;
}

.void-video-wrapper { 
    position: absolute; 
    inset: 0; 
    z-index: 0; 
}

/* Corregido el selector .void-video para que coincida con tu clase hero-video o void-video */
.void-video, .hero-video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 0.4; 
}

.void-overlay {
    position: absolute; 
    inset: 0;
    z-index: 1;
}

.void-content {
    position: relative; 
    z-index: 2;
    padding: 0 20px;
    width: 100%; /* Asegura que el contenido use el ancho disponible */
}

.void-tag {
    color: var(--flot-gold);
    letter-spacing: 10px;
    text-transform: uppercase;
    font-size: 0.8rem;
    display: block;
    margin-bottom: 20px;
}

.void-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 8vw, 5.5rem); /* Ajusté levemente el clamp para evitar saltos bruscos */
    line-height: 1.1; /* Ajuste clave: evita que el interlineado sea muy alto y suba el contenido */
    letter-spacing: 5px;
    margin-bottom: 20px;
    text-shadow: 0 0 30px var(--flot-blue-glow);
    color: var(--flot-white);
    max-width: 900px; /* Limita el ancho para que el texto no toque los bordes */
    margin-left: auto;
    margin-right: auto;
}

/* =================================================================
    3. INMERSIÓN Y SILENCIO PROFUNDO (ORBES)
   ================================================================= */

.immersion-story, .deep-silence { padding: 140px 0; }

.immersion-story { background: radial-gradient(circle at top, var(--flot-bg-marine) 0%, #000000 100%); }
.deep-silence { 
    background: radial-gradient(circle at bottom, var(--flot-bg-marine) 0%, #000000 100%); 
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.immersion-container, .deep-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 0 40px;
}

.immersion-block, .immersion-visual, .deep-visual, .deep-content { flex: 1; }

.immersion-heading { 
    font-family: 'Playfair Display', serif; 
    font-size: 3.5rem; 
    line-height: 1.1; 
    margin-bottom: 30px; 
}

.immersion-heading span { color: var(--flot-gold); font-style: italic; }
.immersion-text { color: var(--flot-text-muted); line-height: 2; font-size: 1.1rem; margin-bottom: 40px; }

.immersion-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
}

.stat-item {
    font-size: 0.85rem; color: var(--flot-text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    display: flex; align-items: center; gap: 12px;
}

.stat-item span {
    color: var(--flot-gold); font-family: 'Playfair Display', serif;
    font-size: 1.2rem; font-weight: bold;
}

.visual-orb {
    width: 450px; height: 450px; border-radius: 50%;
    border: 1px solid var(--flot-gold-glow);
    padding: 15px; background: rgba(0, 30, 60, 0.15);
    animation: slow-float 6s infinite ease-in-out;
    box-shadow: 0 0 40px rgba(0, 20, 50, 0.5);
}

.visual-orb img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 50%; filter: brightness(0.7);
}

.secondary-orb { animation-direction: reverse; }

/* =================================================================
    4. HOW IT WORKS (PROCESO) - SLIDER MÓVIL SEGURO
   ================================================================= */

.how-it-works {
    padding: 100px 0;
    background: radial-gradient(circle at center, var(--flot-bg-marine) 0%, #000000 100%);
    overflow-x: clip; /* Blindaje extra contra desbordamiento */
}

.process-container {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 20px;
    justify-content: center;
}

.process-card {
    flex: 1;
    min-width: 300px;
    background: var(--flot-glass-marine);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 50px 40px;
    text-align: center;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: var(--flot-transition);
}

.process-card.featured {
    background: rgba(0, 30, 60, 0.4);
    border-color: rgba(191, 161, 91, 0.3);
}

.process-card:hover {
    transform: translateY(-10px);
    border-color: var(--flot-gold);
}

.step-num {
    font-family: 'Playfair Display', serif;
    color: var(--flot-gold);
    display: block;
    margin-bottom: 25px;
    letter-spacing: 5px;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--flot-gold);
    padding-bottom: 5px;
}

.process-card h3 {
    color: var(--flot-white);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.process-card p {
    color: var(--flot-text-muted);
    line-height: 1.8;
    font-size: 0.95rem;
}

/* =================================================================
    5. RITUAL OFFERINGS (TARJETAS)
   ================================================================= */

.ritual-offerings {
    padding: 100px 0 150px;
    background: radial-gradient(circle at center, var(--flot-bg-marine) 0%, #000000 100%);
}

.offerings-header {
    text-align: center;
    width: 100%;
    margin-bottom: 80px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.offerings-header .gold-line {
    display: block;
    width: 50px;
    height: 2px;
    background-color: var(--flot-gold);
    margin-bottom: 20px;
}

.offerings-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--flot-white);
}

.offerings-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.offering-card {
    background: var(--flot-glass-marine);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 60px 40px;
    text-align: center;
    border-radius: 4px;
    flex: 0 1 calc(33.333% - 30px); 
    min-width: 320px;
    display: flex;
    flex-direction: column;
    transition: var(--flot-transition);
}

.offering-specs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 25px 0 15px;
}

.spec-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(184, 157, 108, 0.4), transparent);
}

.spec-time {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    color: var(--flot-gold);
    letter-spacing: 4px;
    white-space: nowrap;
    font-weight: 500;
}

.offering-card.featured {
    border-color: var(--flot-gold-glow);
    background: rgba(0, 20, 45, 0.5);
}

.offering-card:hover { 
    transform: translateY(-15px); 
    border-color: var(--flot-gold); 
}

.offering-label {
    color: var(--flot-gold);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 4px;
    margin-bottom: 20px;
    display: block;
}

.offering-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 15px;
}

.offering-card p {
    color: var(--flot-text-muted);
    line-height: 1.8;
    margin-bottom: 30px;
    flex-grow: 1;
}

.offering-price {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--flot-gold);
    margin-bottom: 30px;
    line-height: 1;
}

/* BOTÓN SÓLIDO PERMANENTE */
.offering-btn {
    display: inline-block;
    padding: 18px 40px;
    border: 1px solid var(--flot-gold);
    background: var(--flot-gold); /* Color sólido de fondo */
    color: #000; /* Texto oscuro para contraste */
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: var(--flot-transition);
}

.offering-btn:hover {
    background: #d4bc8d; /* Color un poco más claro para el feedback visual */
    border-color: #d4bc8d;
    color: #000; /* Mantiene el texto oscuro */
    transform: scale(1.02); /* Efecto de presión sutil */
    box-shadow: 0 5px 15px rgba(184, 157, 108, 0.3);
}



/* =================================================================
    6. FAQ SECTION (REFRESCADO PREMIUM)
   ================================================================= */

.flotacion-faq { 
    padding: 140px 0; 
    background: radial-gradient(circle at bottom, var(--flot-bg-marine) 0%, #000000 100%); 
}

.faq-container-fluid {
    max-width: 900px; /* Reducido para mejor legibilidad */
    margin: 0 auto;
    padding: 0 40px;
}

.faq-header { 
    text-align: center; 
    margin-bottom: 60px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-grid { 
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Estilo del Ítem (Efecto Cristal) */
.faq-item { 
    background: rgba(255, 255, 255, 0.02); 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.05); 
    border-radius: 8px;
    transition: var(--flot-transition);
}

.faq-item summary { 
    padding: 30px 40px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
    outline: none; 
    list-style: none; /* Quita la flecha por defecto de Chrome */
}

.faq-item summary::-webkit-details-marker {
    display: none; /* Quita la flecha por defecto de Safari */
}

.faq-item summary h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--flot-white);
    transition: color 0.3s ease;
}

/* Icono Personalizado */
.faq-icon-wrapper {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184, 157, 108, 0.3);
    border-radius: 50%;
    color: var(--flot-gold);
    font-size: 1.2rem;
    transition: all 0.5s ease;
}

/* Respuesta con animación */
.faq-answer { 
    padding: 0 40px 30px; 
    overflow: hidden;
    animation: fadeInSlide 0.5s ease-out;
}

.faq-answer p {
    color: var(--flot-text-muted);
    line-height: 1.8;
    font-size: 0.95rem;
    margin: 0;
    border-top: 1px solid rgba(184, 157, 108, 0.1);
    padding-top: 20px;
}

/* ESTADO ABIERTO */
.faq-item[open] { 
    background: rgba(184, 157, 108, 0.03);
    border-color: rgba(184, 157, 108, 0.2); 
}

.faq-item[open] summary h3 {
    color: var(--flot-gold);
}

.faq-item[open] .faq-icon-wrapper { 
    transform: rotate(45deg); 
    background: var(--flot-gold);
    color: #000;
}

/* Animación de entrada de la respuesta */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================================================================
    7. RESPONSIVE (MEDIA QUERIES)
   ================================================================= */

@media (max-width: 1100px) {
    .immersion-container, .deep-container { gap: 40px; }
    .immersion-heading { font-size: 2.8rem; }
    .visual-orb { width: 380px; height: 380px; }
    .offering-card { flex: 0 1 calc(50% - 30px); }
}

@media (max-width: 768px) {
    /* Inmersión y Silencio */
    .immersion-story, .deep-silence, .flotacion-faq { padding: 80px 0; }
    .immersion-container, .deep-container { flex-direction: column; text-align: center; padding: 0 25px; }
    .deep-container { flex-direction: column-reverse; }
    .visual-orb { width: 300px; height: 300px; margin: 0 auto; }
    .immersion-heading { font-size: 2.2rem; }
    .immersion-stats { grid-template-columns: 1fr; justify-items: center; }
    .stat-item { justify-content: center; }

    /* Slider de Proceso */
    .process-container {
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 20px 30px 50px;
        scrollbar-width: none;
    }
    .process-container::-webkit-scrollbar { display: none; }
    .process-card { flex: 0 0 85%; max-width: 85%; scroll-snap-align: center; }

    /* Offerings y FAQ */
    .offering-card { flex: 0 1 100%; }
    .faq-main-title { font-size: 2.2rem; }
    .faq-item summary { padding: 25px 30px; }
    .faq-item summary h3 { font-size: 1.15rem; padding-right: 15px; } /* Espacio para el icono */
    .faq-answer { padding: 0 30px 25px; }
    
    /* FAQ: Ajuste de icono en móvil */
    .faq-icon-wrapper { width: 26px; height: 26px; font-size: 1rem; }
}

@media (max-width: 480px) {
    .visual-orb { width: 260px; height: 260px; }
    .immersion-heading { font-size: 1.8rem; }
    
    /* FAQ: Optimización para pantallas muy angostas */
    .faq-item summary { padding: 20px; }
    .faq-item summary h3 { font-size: 1.05rem; line-height: 1.4; }
    .faq-answer p { font-size: 0.9rem; }
    .faq-icon-wrapper { min-width: 22px; width: 22px; height: 22px; }
}

/* =================================================================
   8. FOOTER - FLOTACIÓN VARIANT (ADAPTACIÓN MARINA)
   ================================================================= */

.bliss-footer.flotacion-footer-theme {
    background-color: var(--flot-bg-marine); /* Cambio a azul marino */
    border-top: 1px solid rgba(184, 157, 108, 0.15);
    padding: 100px 0 40px;
}

/* Ajuste de la línea dorada bajo el logo */
.flotacion-footer-theme .footer-divider-gold {
    width: 60px;
    height: 1px;
    background: var(--flot-gold);
    margin: 25px 0;
    opacity: 0.6;
}

/* Títulos de columnas */
.flotacion-footer-theme .col-label {
    font-family: 'Montserrat', sans-serif;
    color: var(--flot-gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 30px;
    display: block;
}

/* Texto de la cita */
.flotacion-footer-theme .footer-quote {
    color: var(--flot-text-muted);
    font-style: italic;
    font-family: 'Playfair Display', serif;
    line-height: 1.8;
}

/* Iconos y enlaces */
.flotacion-footer-theme .icon-circle {
    border: 1px solid rgba(184, 157, 108, 0.3);
    color: var(--flot-gold);
    transition: var(--flot-transition);
}

.flotacion-footer-theme .social-link-item:hover .icon-circle {
    background: var(--flot-gold);
    color: #000;
    box-shadow: 0 0 15px var(--flot-gold-glow);
}

.flotacion-footer-theme .contact-stack li a, 
.flotacion-footer-theme .link-label {
    color: var(--flot-text-muted);
    transition: 0.3s;
}

.flotacion-footer-theme .contact-stack li a:hover {
    color: var(--flot-gold);
}

/* Barra inferior */
.flotacion-footer-theme .footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 60px;
    padding-top: 30px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}