/* === ESTILOS BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    background-color: #f8f9fa;
    /* Evita que el menú inferior tape el texto final */
    padding-bottom: 100px; 
}

/* Accesibilidad y Foco */
:focus {
    outline: 3px solid #028a94;
    outline-offset: 4px;
}
.close-btn:focus {
    outline: 3px solid #cc0033; 
}

/* === HEADER STICKY === */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 1); 
    z-index: 50;
    border-bottom: 1px solid transparent; 
}

.logo-svg {
    width: 30px;
    height: 30px;
    fill: rgb(255, 255, 255); 
}

/* === BLOQUE 1: ESTÁTICO === */
.block-static {
    position: relative;
    width: 100%;
    height: 80vh; /* Ocupa el 80% de la altura de la pantalla */
    background-image: url('assets/imagen-1.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.static-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Filtro oscuro para leer el texto */
}

.static-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    padding: 0 20px;
}

.static-content h1 {
    font-size: clamp(2rem, 5vw, 4rem); /* Texto responsivo moderno */
    margin-bottom: 10px;
}

.static-content p {
    font-size: clamp(1rem, 2vw, 1.5rem);
    opacity: 0.9;
}

/* === BLOQUE 2: PARALLAX === */
.block-parallax {
    position: relative;
    width: 100%;
    min-height: 60vh;
    /* La magia del Parallax CSS básico: */
    background-attachment: fixed; 
    background-image: url('assets/pha.webp');
    background-size: cover;
    background-position: center;
    
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 60px 20px;
}

.parallax-content h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.parallax-content p {
    margin-bottom: 30px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.animated-svg {
    width: 100px;
    height: 100px;
    color: #00d2ff; /* Color de línea/relleno que heredará el SVG */
    /* La rotación será inyectada por JavaScript */
    transition: transform 0.1s ease-out; 
}

/* === BLOQUE 3: INFORMACIÓN ADAPTATIVA === */
.block-info {
    width: 100%;
    padding: 8vh 20px;
    display: flex;
    justify-content: center; /* Centra el artículo en la pantalla */
    background-color: #ffffff;
}

.reading-container {
    /* CLAVE PARA TV Y MÓVILES: Nunca superará los 65 caracteres de ancho */
    width: 100%;
    max-width: 65ch; 
    
    /* Tipografía fluida: Mínimo 16px, crecimiento dinámico, máximo 24px */
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem); 
    line-height: 1.7; /* Espaciado entre líneas para descanso visual */
    color: #2b2b2b;
}

.reading-container h2 {
    font-size: 2em; /* Relativo al tamaño de la fuente del contenedor */
    margin-bottom: 0.8em;
    color: #111;
    border-bottom: 3px solid #028a94;
    display: inline-block;
    padding-bottom: 5px;
}

.reading-container p {
    margin-bottom: 1.5em;
}

/* === BARRA INFERIOR === */
.bottom-trigger-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    z-index: 100; /* Aseguramos que esté por encima de los bloques */
}

.bottom-bar {
    width: 60px;
    height: 8px;
    background-color: rgb(0, 0, 0); 
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.bottom-bar:hover, .bottom-bar:focus {
    transform: scale(1.3);
}

/* === OVERLAY DEL MENÚ (Cristal) === */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.glass-menu {
    position: relative;
    width: 90%;
    max-width: 400px;
    padding: 50px 30px 40px 30px; 
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; 
    flex-wrap: wrap; 
}

.close-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 14px;
    height: 14px;
    background-color: #ff4d7a;
    border: 1px solid #cc0033;
    border-radius: 2px;
    cursor: pointer;
}

.menu-item {
    width: 60px;
    height: 60px;
    background-color: #333;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0; 
}

.menu-item:hover, .menu-item:focus {
    background-color: #555;
}

@media (min-width: 768px) {
    .glass-menu {
        max-width: 500px;
        padding: 60px 40px 50px 40px;
        gap: 25px;
    }
    .menu-item {
        width: 80px;
        height: 80px;
    }
    .close-btn {
        width: 16px;
        height: 16px;
    }
}

.logo-svg {
    /* Forzamos el tamaño máximo para que quepa en el header de 60px */
    width: 60px; /* Puedes ajustar esto a 50px o 60px según qué tan ancho sea tu logo */
    height: 60px; 
    max-height: 100%;

}

/* Esto fuerza a que TODAS las partes internas del logo obedezcan el color que dicta JavaScript */
#logo-svg path,
#logo-svg polygon,
#logo-svg rect,
#logo-svg g {
    fill: inherit !important;
}

/* Y aseguramos que el contenedor principal aplique el cambio suavemente */
#logo-svg {
    transition: fill 0.1s ease-out;
}
.parallax-gif {
    width: 80px; /* El tamaño que necesites */
    height: auto;
    display: block;
    margin: 0 auto; /* Para centrarlo */
    /* transition: transform 0.1s ease-out; Opcional para suavizar */
}