/* ==========================================================================
   Base Styles & Resets
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Blindaje para forzar el layout raíz a cubrir toda la pantalla (elimina espacios blancos) */
html {
    scroll-behavior: smooth;
}

html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Outfit', sans-serif;
    background-image: url('/Images/9_Background/Background-full.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: transparent;
    min-height: 100vh;
    color: #ffffff;
}

/* ==========================================================================
   Header Section 
   ========================================================================== */
.main-header {
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Header Fijo con Glassmorphism */
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(4, 30, 80, 0.6); /* Azul oscuro con transparencia */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.header-container {
    width: 92%; /* Reducido para dar sangría a los lados */
    max-width: 1400px; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

.menu-image {
    width: 100%;
    height: auto;
    display: block;
}

.header-interactive-map {
    position: relative;
    width: 100%;
    display: block;
}

.header-link {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 10;
    /* Ya están calibrados, se comenta el fondo */
    /* background-color: rgba(255, 255, 0, 0.25); */ 
}

/* Coordenadas aproximadas para los botones del header */
.link-logo { left: -2%; width: 22%; }
.link-para-que { left: 22%; width: 16%; } /* Este está perfecto */
.link-donde { left: 42%; width: 19%; }
.link-faq { left: 64%; width: 21%; }
/* Redes sociales separadas */
.link-instagram { left: 89.5%; width: 3%; }
.link-facebook { left: 93.5%; width: 3%; }
.link-tiktok { left: 97.5%; width: 3%; }

/* ==========================================================================
   Carrusel Principal Content & Carousel (Responsivo)
   ========================================================================== */
.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 60px 0;
    width: 100%;
    overflow-x: hidden;
}

.carousel-section {
    width: 100%; 
    max-width: none; 
    position: relative;
    margin-top: 60px; /* Aumentado para dar separación vertical con el header */
    overflow: hidden;
    background-color: transparent;
}

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 1100px; /* Limita el ancho del contenedor para que las flechas queden cerca de la imagen */
    margin: 0 auto; /* Centra el contenedor */
    padding: 0 70px 60px 70px;
    overflow: hidden;
}

.carousel-track {
    display: grid;
    grid-template-areas: "slide";
    width: 100%;
}

.carousel-slide {
    grid-area: slide;
    width: 100%;
    max-height: 65vh; 
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Controles del Carrusel */
.carousel-btn {
    position: absolute;
    top: calc(50% - 30px); /* Ajustado por el padding inferior */
    transform: translateY(-50%);
    background: transparent;
    color: #4da6ff; 
    border: none;
    cursor: pointer;
    font-size: 45px; /* Flechas más pequeñas */
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    padding: 0;
    opacity: 0.9;
}

.carousel-btn:hover {
    color: #80c1ff;
    transform: translateY(-50%) scale(1.1);
}

/* Posicionamos las flechas justo en el borde del contenedor centrado */
.prev-btn { left: 10px; }
.next-btn { right: 10px; }

/* Puntos indicadores (Dots) */
.carousel-dots {
    position: absolute;
    bottom: 15px; /* Los colocamos en el padding inferior */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid #4da6ff; 
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot:hover {
    border-color: #80c1ff;
}

.dot.active {
    background: #99d6ff; /* Relleno sólido claro */
    border-color: #99d6ff;
}

/* ==========================================================================
   Banner de Síntomas
   ========================================================================== */
.sintomas-section {
    width: 92%;
    max-width: 1400px;
    margin: 40px auto 60px;
}

/* El contenedor es relativo para que los íconos se posicionen sobre el marco */
.sintomas-container {
    position: relative;
    width: 100%;
    display: block;
}

/* El marco dicta las proporciones del banner */
.sintomas-marco {
    width: 100%;
    height: auto;
    display: block;
}

/* Los íconos se superponen en la parte inferior del marco (zona blanca) */
/* El marco es aprox 3.2:1 — la franja amarilla ocupa ~32% de la altura */
.sintomas-row {
    position: absolute;
    top: 29.17%;
    bottom: 3.85%;
    left: 1.07%;
    right: 1.01%;
    display: flex;
    align-items: stretch;
    gap: 0;
}

.sintoma-item {
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.sintoma-item:nth-child(1) { flex-basis: 19.15%; }
.sintoma-item:nth-child(2) { flex-basis: 18.68%; }
.sintoma-item:nth-child(3) { flex-basis: 24.19%; }
.sintoma-item:nth-child(4) { flex-basis: 18.99%; }
.sintoma-item:nth-child(5) { flex-basis: 18.99%; }

.sintoma-item:hover {
    transform: scale(1.04) translateY(-3px);
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.4));
    z-index: 5;
}

.sintoma-icon {
    height: 100%;
    width: 100%;
    object-fit: fill;
    display: block;
}

/* ==========================================================================
   Retailers
   ========================================================================== */
.retailers-section {
    width: 92%;
    max-width: 1400px;
    margin: clamp(40px, 5vw, 80px) auto 50px;
}

.retailers-container {
    position: relative;
    width: 100%;
}

.retailers-marco {
    width: 100%;
    height: auto;
    display: block;
}

/* Zona blanca del marco Arte_Retailers.png
   El personaje ocupa el left ~20% — los logos van de ahí al right */
.retailers-row {
    position: absolute;
    top: 54%;
    bottom: 6%;
    left: 20%;
    right: 2%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0;
}

.retailer-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    overflow: hidden;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.retailer-item:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}

.retailer-icon {
    width: auto;
    max-width: 90%;
    height: auto;
    max-height: 52px;  /* controla el alto máximo de cada logo */
    object-fit: contain;
    display: block;
}

/* ==========================================================================
   Propuesta de Valor
   ========================================================================== */
.propuesta-section {
    width: 92%;
    max-width: 1400px;
    margin: 10px auto 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.propuesta-titulo {
    width: 55%;
    max-width: 650px;
    height: auto;
    display: block;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.propuesta-titulo:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35));
}

.propuesta-arte {
    width: 55%;
    max-width: 700px;
    height: auto;
    display: block;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.propuesta-arte:hover {
    transform: scale(1.03) translateY(-6px);
    filter: drop-shadow(0 16px 32px rgba(0,0,0,0.4));
}

/* ==========================================================================
   Tipos de Lesiones Bucales (Infográfico)
   ========================================================================== */
.tipos-lesiones-section {
    width: 92%;
    max-width: 1400px;
    margin: clamp(30px, 4vw, 60px) auto clamp(30px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.tipos-lesiones-titulo {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.tipos-lesiones-titulo:hover {
    transform: scale(1.02);
}

.lesiones-interactive-container {
    position: relative;
    width: 100%;
    max-width: 820px;
    height: auto;
    display: block;
}

.tipos-lesiones-arte {
    width: 100%;
    height: auto;
    display: block;
    /* Animación removida por petición del usuario */
}

/* ==========================================================================
   Preguntas Frecuentes (Q&A)
   ========================================================================== */
.faq-section {
    width: 92%;
    max-width: 1400px;
    margin: clamp(30px, 4vw, 60px) auto 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.faq-titulo {
    width: 80%;
    max-width: 500px;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.faq-titulo:hover {
    transform: scale(1.02);
}

.faq-row {
    width: 80%;
    max-width: 900px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

.faq-item {
    width: calc(50% - 10px); /* Para que quepan las dos en paralelo con espacio exacto */
    max-width: 600px;
    height: auto;
    display: block;
    /* Movemos la transición al wrap interactivo */
}

/* Ya no hay hover en las preguntas frecuentes a petición del usuario */


/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    width: 100%;
    margin-top: 0;
    padding: 40px 0;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 30, 100, 0.4); /* Fondo más oscuro para contrastar */
    border-top: 3px solid #ffcc00; /* Línea amarilla sutil (Kanka brand) superior */
    backdrop-filter: blur(8px); /* Efecto glassmorphism */
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15); /* Sombra hacia arriba */
}

.footer-container {
    width: 92%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Añadido para poder posicionar los enlaces sobre la imagen */
}

.footer-imagen {
    width: 100%;
    height: auto;
    display: block;
}

/* Enlaces del Footer (Redes Sociales) */
.footer-link {
    position: absolute;
    height: 16%;    /* Alto ajustado para no sobrar tanto arriba y abajo */
    z-index: 10;
    /* Ya están calibrados, se comenta el fondo temporal */
    /* background-color: rgba(255, 255, 0, 0.25); */
}

/* Posiciones individuales recortadas a la medida exacta */
.footer-link-instagram { top: 15%; right: 4%; width: 14%; }
.footer-link-facebook  { top: 44%; right: 0%; width: 18%; }
.footer-link-tiktok    { top: 68%; right: -1%; width: 19%; }
    max-width: 1000px; /* Tamaño máximo para que no se estire demasiado en pantallas gigantes */
    display: block;
}

/* ==========================================================================
   Interacción de Tapas FAQ
   ========================================================================== */
.faq-imagen-wrap {
    position: relative;
    display: block;
    line-height: 0;
    /* El ancho lo controla .faq-item (width:48%) */
}
.faq-imagen-wrap--q1 { aspect-ratio: 1008 / 2891; }
.faq-imagen-wrap--q2 { aspect-ratio: 1079 / 2894; }
.faq-imagen {
    width: 100%;
    height: auto;
    display: block;
}

/* Tapas clickeables sobre las respuestas */
.faq-tapa {
    position: absolute;
    background-color: #022e9e;   /* Azul exacto (sampleado) del fondo de las tarjetas FAQ */
    border: none;
    cursor: pointer;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 0;
    outline: none;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--pt, 0px);
}

/* Botón CTA visual para incitar el clic */
.faq-tapa::after {
    content: "Ver información";
    color: #022e9e;
    background-color: #ffcc00; /* Botón amarillo llamativo */
    padding: clamp(2px, 0.8vw, 6px) clamp(4px, 1.5vw, 14px);
    border-radius: 20px;
    font-size: clamp(5px, 1.5vw, 14px);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, background-color 0.2s ease;
    white-space: nowrap; /* Evita que el botón se rompa en dos renglones */
}

/* Modificador para las preguntas frecuentes */
.faq-tapa.tapa-respuesta::after {
    content: "Ver respuesta";
}

.faq-tapa:hover::after {
    transform: scale(1.05);
    background-color: #ffffff;
}

.faq-tapa.caida {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   Animaciones de Scroll (IntersectionObserver)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Responsive — Sistema Fluido Completo
   ========================================================================== */

/* --- Tablet / Mobile ≤ 768px --- */
@media (max-width: 768px) {
    /* ---- Header ajustado a la pantalla ---- */
    .main-header { padding: clamp(8px, 1.5vw, 14px) 0; }
    .header-container { width: 98%; padding: 0; overflow: visible; }
    .header-interactive-map { width: 100%; flex-shrink: 1; }
    .menu-image  { width: 100%; }

    /* ---- Carrusel Ajuste ---- */
    .carousel-section {
        min-height: auto; 
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: none;
        padding-bottom: 20px;
    }

    .carousel-container {
        padding: 0 15px 40px; /* Menos padding lateral para hacer la imagen más grande */
        max-width: none;
        width: 100%;
    }

    .carousel-slide {
        max-height: 50vh;
        object-fit: contain;
    }

    .carousel-btn   { font-size: 40px; } /* Flechas mucho más grandes y fáciles de tocar */
    .prev-btn { left: 0px; }
    .next-btn { right: 0px; }
    .carousel-dots  { gap: 12px; bottom: 5px; }
    .dot { width: 12px; height: 12px; border-width: 2px; }

    /* ---- SCROLL 2: Síntomas + Propuesta juntos (comparten pantalla) ---- */
    .sintomas-section {
        min-height: auto;   /* NO forzamos pantalla completa aquí */
        width: 96%;
        margin: clamp(30px, 5vw, 50px) auto clamp(20px, 3vw, 30px);
    }

    .propuesta-section {
        min-height: auto;   /* NO forzamos pantalla completa aquí */
        width: 96%;
        margin: 0 auto clamp(30px, 5vw, 50px);
        gap: 10px;
        justify-content: flex-start;
    }
    .propuesta-titulo { width: clamp(200px, 78vw, 480px); }
    .propuesta-arte   { width: clamp(240px, 85vw, 560px); }

    /* ---- Retailers ---- */
    .retailers-row {
        top: 50%;
        bottom: 5%;
        left: 20%;
        right: 1%;
    }
    .retailer-item { padding: 2px; }
    .retailer-icon { max-height: 40px; }

    /* ---- FAQ (Lado a lado a petición) ---- */
    .faq-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }
    .faq-item {
        width: calc(50% - 5px);
    }
}

/* --- Mobile pequeño ≤ 480px --- */
@media (max-width: 480px) {
    /* La cabecera hereda el scroll horizontal de 768px */
    /* Hereda .carousel-slide max-height: 60vh de la media query de 768px */
    .carousel-btn { font-size: 30px; }
    .sintomas-section { width: 98%; }
    .propuesta-titulo { width: 88vw; }
    .propuesta-arte   { width: 92vw; }
}

/* --- Laptop 1024–1366px --- */
@media (min-width: 1024px) and (max-width: 1366px) {
    .carousel-container { max-width: 960px; }
    .sintomas-section   { max-width: 1100px; }
    .propuesta-titulo   { width: 50%; max-width: 560px; }
    .propuesta-arte     { width: 52%; max-width: 640px; }
}

/* --- Monitor 1440px --- */
@media (min-width: 1367px) and (max-width: 1919px) {
    .carousel-container { max-width: 1200px; }
    .sintomas-section   { max-width: 1300px; }
    .propuesta-titulo   { width: 48%; max-width: 700px; }
    .propuesta-arte     { width: 52%; max-width: 800px; }
}

/* --- Monitor grande / TV ≥1920px --- */
@media (min-width: 1920px) {
    .main-header { padding: clamp(18px, 1.2vw, 30px) 0; }
    .header-container { max-width: 1600px; }
    .menu-image  { width: clamp(900px, 55vw, 1400px); }

    .carousel-section   { max-width: none; width: 100%; }
    .carousel-container { max-width: 1600px; }
    .carousel-slide     { max-height: 60vh; }

    .sintomas-section   { max-width: 1500px; width: 94%; }
    .propuesta-section  { max-width: 1400px; width: 70%; }
    .propuesta-titulo   { width: 44%; max-width: 900px; }
    .propuesta-arte     { width: 50%; max-width: 1000px; }
    
    .retailers-section  { max-width: 1500px; }
    .tipos-lesiones-section { max-width: 1600px; }
    .faq-section        { max-width: 1500px; }
    
    .site-footer { padding: 60px 0; }
    .footer-container { max-width: 1500px; }
}

/* ==========================================================================
   Animaciones y Efectos (Scroll Reveal & Hover Zoom)
   ========================================================================== */

/* Las animaciones de Scroll Reveal ahora funcionan al revés:
   Todo es VISIBLE por defecto (para que no haya flash al cargar la página).
   JS se encarga de añadir la clase ".hidden" a los elementos que están
   SÓLO fuera de la pantalla. Al hacer scroll, JS quita ".hidden". */

.reveal {
    transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Estado inicial (oculto) asignado dinámicamente por JS a lo que no se ve */
.reveal.hidden {
    opacity: 0 !important;
}

/* Direcciones desde las que entran los elementos ocultos */
.reveal-left.hidden  { transform: translateX(-80px) !important; }
.reveal-right.hidden { transform: translateX(80px) !important; }
.reveal-up.hidden    { transform: translateY(60px) !important; }
.reveal-zoom.hidden  { transform: scale(0.9) !important; }

/* Para que el ocultamiento inicial por JS sea instantáneo y no animado */
.reveal.no-transition {
    transition: none !important;
}

/* ——— Hover Zoom Global para imágenes interactivas ——— */
.hover-zoom {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease !important;
}
.hover-zoom:hover {
    transform: scale(1.06) !important;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.35)) !important;
    z-index: 10;
}

/* ——— Efecto Brillante Específico para las Bocas (Síntomas) ——— */
.sintoma-item.hover-zoom:hover {
    transform: scale(1.12) !important;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 30px rgba(255, 204, 0, 0.9)) !important;
    z-index: 20;
}

/* ——— Efecto de Luz/Glow para los logos de Retailers ——— */
.retailer-item.hover-zoom:hover {
    transform: scale(1.08) !important;
    filter: drop-shadow(0 0 15px rgba(255, 204, 0, 0.9)) !important;
    z-index: 20;
}

/* ——— Zoom Hover en la sección entera de Retailers ——— */
.retailers-container {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 12px;
}
.retailers-marco {
    display: block;
    width: 100%;
}
.retailers-container:hover {
    transform: scale(1.03);
}

/* ——— Contenedor para la Propuesta de Valor ——— */
.propuesta-arte {
    transform-origin: center center;
    will-change: transform;
}

/* ——— Animación flotante para el frasco ——— */
@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}
.propuesta-arte.floating {
    animation: float 4s ease-in-out infinite;
}

/* ——— Cascada de logos de Retailers ——— */
.retailer-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.4s ease !important;
}
.retailers-section.is-visible .retailer-item:nth-child(1) { animation: retailerIn 0.5s 0.1s forwards ease; }
.retailers-section.is-visible .retailer-item:nth-child(2) { animation: retailerIn 0.5s 0.2s forwards ease; }
.retailers-section.is-visible .retailer-item:nth-child(3) { animation: retailerIn 0.5s 0.3s forwards ease; }
.retailers-section.is-visible .retailer-item:nth-child(4) { animation: retailerIn 0.5s 0.4s forwards ease; }
.retailers-section.is-visible .retailer-item:nth-child(5) { animation: retailerIn 0.5s 0.5s forwards ease; }
.retailers-section.is-visible .retailer-item:nth-child(6) { animation: retailerIn 0.5s 0.6s forwards ease; }
@keyframes retailerIn {
    to { opacity: 1; transform: translateY(0); }
}
.retailers-section.hidden .retailer-item {
    opacity: 0;
    transform: translateY(30px);
    animation: none !important;
}

/* ——— Carrusel: Ken Burns al cambiar slide ——— */
.carousel-slide {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    transform: scale(1.04);
}
.carousel-slide.active {
    opacity: 1;
    transform: scale(1);
}
.carousel-slide.active:hover {
    transform: scale(1.03);
}
.carousel-slide.slide-out {
    opacity: 0;
    transform: scale(0.97);
}


}

/* ==========================================================================
   Propuesta de Valor (Sección) - Partículas y Degradado
   ========================================================================== */
/* ==========================================================================
   Propuesta de Valor (Sección) - Partículas y Degradado
   ========================================================================== */
.propuesta-section {
    position: relative; 
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    overflow: hidden; /* Evita que las partículas ensanchen la página */
    clip-path: inset(0); /* Blindaje extra para que nada se salga */
    contain: paint;
    isolation: isolate; /* Asegura el stacking context para evitar fugas en Mac/iOS */
    transform: translateZ(0); /* Aceleración por hardware para clipping perfecto */
    
    /* Fondo Degradado sutil (Opción 4) */
    background: radial-gradient(circle at center, rgba(10, 74, 232, 0.4) 0%, rgba(3, 37, 133, 0) 70%);
}

.propuesta-titulo { 
    width: 100%; 
    max-width: 600px; 
    z-index: 2; 
    position: relative; 
}

.propuesta-arte { 
    width: 100%; 
    max-width: 800px; 
    z-index: 2; 
    position: relative; 
}

/* Partículas Flotantes (Grandes y difuminadas) */
.particula {
    position: absolute;
    border-radius: 50%;
    animation: flotar 15s infinite linear;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
}

/* Bolitas blancas difuminadas */
.particula-1 { width: 120px; height: 120px; left: 10%; bottom: -150px; animation-duration: 25s; animation-delay: 0s; background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%); }
.particula-2 { width: 80px; height: 80px; left: 25%; bottom: -100px; animation-duration: 20s; animation-delay: 5s; background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); }
.particula-3 { width: 150px; height: 150px; left: 80%; bottom: -150px; animation-duration: 30s; animation-delay: 2s; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%); }
.particula-4 { width: 60px; height: 60px; left: 70%; bottom: -80px; animation-duration: 18s; animation-delay: 8s; background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 70%); }

/* Más bolitas blancas y azul claro difuminadas para aumentar volumen */
.particula-7 { width: 140px; height: 140px; left: 15%; bottom: -200px; animation-duration: 28s; animation-delay: 4s; background: radial-gradient(circle, rgba(200,230,255,0.4) 0%, rgba(200,230,255,0) 70%); }
.particula-8 { width: 90px; height: 90px; left: 40%; bottom: -120px; animation-duration: 22s; animation-delay: 1s; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%); }
.particula-9 { width: 180px; height: 180px; left: 60%; bottom: -250px; animation-duration: 32s; animation-delay: 6s; background: radial-gradient(circle, rgba(180,220,255,0.25) 0%, rgba(180,220,255,0) 70%); }
.particula-10 { width: 70px; height: 70px; left: 85%; bottom: -90px; animation-duration: 19s; animation-delay: 3s; background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); }

/* Bolitas amarillas gigantes (Brillo Kanka) */
.particula-5 { width: 250px; height: 250px; left: -5%; bottom: -200px; animation-duration: 35s; animation-delay: 4s; background: radial-gradient(circle, rgba(255, 204, 0, 0.2) 0%, rgba(255, 204, 0, 0) 70%); }
.particula-6 { width: 300px; height: 300px; right: -5%; bottom: -300px; animation-duration: 40s; animation-delay: 1s; background: radial-gradient(circle, rgba(255, 204, 0, 0.15) 0%, rgba(255, 204, 0, 0) 70%); }
.particula-11 { width: 200px; height: 200px; left: 45%; bottom: -220px; animation-duration: 38s; animation-delay: 7s; background: radial-gradient(circle, rgba(255, 204, 0, 0.12) 0%, rgba(255, 204, 0, 0) 70%); }
.particula-12 { width: 280px; height: 280px; right: 20%; bottom: -280px; animation-duration: 42s; animation-delay: 2s; background: radial-gradient(circle, rgba(255, 204, 0, 0.1) 0%, rgba(255, 204, 0, 0) 70%); }

@keyframes flotar {
    0% { transform: translateY(0) scale(1) translateX(0); opacity: 0; }
    20% { opacity: 0.8; }
    50% { transform: translateY(-200px) scale(1.2) translateX(30px); }
    80% { opacity: 0.8; }
    100% { transform: translateY(-400px) scale(0.8) translateX(-30px); opacity: 0; }
}

/* ==========================================================================
   Footer HTML Layout (Reemplazo de Imagen)
   ========================================================================== */
.footer-html-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0b3b9b;
    padding: 30px max(6%, calc((100% - 1200px) / 2));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-top: 3px solid #ffcc00;
    position: relative; /* Para posicionar la mascota */
    overflow: hidden; /* Para que la mascota no se salga del fondo azul */
}
.site-footer {
    padding: 0 !important;
    background-color: transparent !important;
    border-top: none !important;
}

.footer-mascot {
    position: absolute;
    right: calc(100% + 30px); /* Siempre a la izquierda de las redes */
    bottom: -15px; /* Altura alineada con las redes */
    z-index: 10;
}
.mascot-img {
    height: 180px;
    width: auto;
    object-fit: contain;
    transform: scaleX(-1); /* Hace que apunte a la derecha (hacia las redes sociales) */
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); /* Para que resalte un poco sobre el fondo azul */
    pointer-events: none; /* Evitar bugs de drag en la imagen */
}

.footer-content-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 75%;
}

.footer-logo-img {
    max-height: 80px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    align-self: flex-start;
    margin-left: 0;
}

.footer-text p {
    color: white;
    font-family: 'Reyes', 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    word-break: break-word;
}

.footer-contact {
    display: flex;
    gap: 40px;
    margin-top: 15px;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffcc00;
    text-decoration: none;
    font-family: 'Reyes', 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 22px;
    transition: opacity 0.3s ease;
}
.contact-link:hover {
    opacity: 0.8;
}

.footer-content-right {
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative; /* Para anclar a la mascota */
}

.footer-visit-text {
    color: white;
    font-family: 'Reyes', 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 -5px 0;
    text-align: center;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffcc00;
    text-decoration: none;
    font-family: 'Reyes', 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 24px;
    transition: transform 0.3s ease;
}
.social-link:hover {
    transform: translateX(-5px);
}

@media (max-width: 1200px) {
    .footer-mascot {
        display: none;
    }
}

@media (max-width: 768px) {
    .footer-html-layout {
        flex-direction: column;
        gap: 40px;
        padding: 50px 6%;
    }
    .footer-content-left {
        max-width: 100%;
        text-align: center;
        align-items: center;
    }
    .footer-logo-img {
        max-height: 65px;
        align-self: center;
        margin-bottom: 10px;
    }
    .footer-contact {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
    }
    .contact-link {
        justify-content: center;
        width: 100%;
    }
    .footer-content-right {
        width: 100%;
        align-items: center;
        padding-top: 35px;
        border-top: 1px solid rgba(255, 204, 0, 0.2);
        gap: 25px;
    }
    .footer-visit-text {
        text-align: center;
    }
    .social-link {
        justify-content: center;
        width: 100%;
    }
}

@font-face {
    font-family: 'Reyes';
    src: url('../EDITABLE/Fonts/Reyes-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Reyes';
    src: url('../EDITABLE/Fonts/Reyes-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}