/* Escuela Básica Escuadrón - Estilos PRO */

html { 
    scroll-behavior: smooth; 
}

body { 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Animaciones sutiles */
@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-fade-in { 
    animation: fadeInUp 0.6s ease-out forwards; 
}

/* ==========================================================================
   PORTADA
   La foto del frontis se mueve muy lentamente (zoom + desplazamiento) para
   que la portada no se vea como una imagen detenida. Si además existe un
   video en assets/video/portada.mp4 o portada.webm, se reproduce encima y el
   movimiento de la foto se detiene para no gastar recursos.
   Versión liviana de la foto según el ancho de pantalla.
   ========================================================================== */

.hero-fachada {
    background-image: url('../img/fachada-escuela.jpg');
    background-image: -webkit-image-set(url('../img/fachada-escuela.webp') type('image/webp'),
                                        url('../img/fachada-escuela.jpg') type('image/jpeg'));
    background-image: image-set(url('../img/fachada-escuela.webp') type('image/webp'),
                                url('../img/fachada-escuela.jpg') type('image/jpeg'));
    background-position: center;
    animation: portadaMovimiento 26s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes portadaMovimiento {
    from { transform: scale(1.05) translate3d(0, 0, 0); }
    to   { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); }
}

/* El video aparece sólo cuando ya puede reproducirse (si el archivo existe) */
.hero-video {
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}

.hero-video.visible {
    opacity: 1;
}

/* Con video andando, la foto deja de moverse: no tiene sentido gastar CPU */
.con-video .hero-fachada {
    animation: none;
}

@media (max-width: 768px) {
    .hero-fachada {
        background-image: url('../img/fachada-escuela-960.jpg');
        background-image: -webkit-image-set(url('../img/fachada-escuela-960.webp') type('image/webp'),
                                            url('../img/fachada-escuela-960.jpg') type('image/jpeg'));
        background-image: image-set(url('../img/fachada-escuela-960.webp') type('image/webp'),
                                    url('../img/fachada-escuela-960.jpg') type('image/jpeg'));
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-fachada {
        animation: none;
    }
}

/* Imágenes con tratamiento consistente */
img {
    filter: saturate(1.05) contrast(1.02);
}

/* Scrollbar personalizada */
::-webkit-scrollbar { 
    width: 10px; 
}

::-webkit-scrollbar-track { 
    background: #f8fafc; 
}

::-webkit-scrollbar-thumb { 
    background: #2E5D3A; 
    border-radius: 5px; 
}

::-webkit-scrollbar-thumb:hover { 
    background: #6AB04C; 
}

/* Accesibilidad - Skip link */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only:focus {
    position: fixed;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: #2E5D3A;
    color: white;
    z-index: 100;
    border-radius: 0.375rem;
}

/* Accesibilidad - Focus visible */
a:focus-visible, 
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #6AB04C;
    outline-offset: 2px;
}

/* Tarjetas mejoradas */
.card-minimal {
    transition: all 0.3s ease;
}

.card-minimal:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(46, 93, 58, 0.1);
}

/* Botón volver arriba */
#back-to-top {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#back-to-top:hover {
    transform: translateY(-3px);
}

/* Acordeón */
.acordeon-btn[aria-expanded="true"] i.fa-chevron-down { 
    transform: rotate(180deg); 
}

/* Tarjetas de noticias */
.noticia-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.noticia-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(46, 93, 58, 0.2);
}

#sin-resultados i { 
    color: #6AB04C; 
}

/* Responsive */
@media (max-width: 768px) {
    .text-5xl { font-size: 2.5rem; }
    .text-6xl { font-size: 3rem; }
}

@media print {
    header, footer, .no-print, #back-to-top, a[href*="wa.me"] { 
        display: none !important; 
    }
    body { 
        background: white; 
        color: black;
    }
}

/* Reducir movimiento para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   AJUSTES PARA EL TELÉFONO
   ============================================================================ */

/* ── 1. Las animaciones no pueden dejar la página en blanco ─────────────────
   AOS (el efecto de aparición al desplazar) oculta los bloques hasta que
   entran en pantalla. Si su JavaScript no alcanzara a cargar —o fallara en un
   teléfono— esos bloques quedarían invisibles y la página se vería vacía al
   moverse. Por eso ahora sólo se ocultan cuando main.js confirma que AOS está
   listo (agrega la clase «con-aos» a <html>). Si algo falla: se ve el
   contenido, sin animación. */
html:not(.con-aos) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ── 2. Nada más ancho que la pantalla ──────────────────────────────────────
   Si algo se pasa de ancho (un correo largo, una palabra sin espacios, una
   fila que no puede encogerse), el navegador deja deslizar la página de lado y
   aparece una franja blanca al costado. Se recorta con «clip», que NO crea un
   contenedor de desplazamiento: así la cabecera fija sigue funcionando igual. */
html, body {
    overflow-x: clip;
    max-width: 100%;
}
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

/* ── 3. Los textos largos se parten en vez de empujar el diseño ─────────────
   Correos, direcciones y palabras sin espacios. */
footer li, footer p, footer a, .partible {
    overflow-wrap: anywhere;
}

/* ── 4. En filas y rejillas, el contenido puede encogerse ───────────────────
   Por defecto un elemento flexible no baja de su ancho de contenido: una frase
   larga dentro de una fila estira todo el ancho de la página. */
.flex > *, .grid > * {
    min-width: 0;
}