:root {
    --bordo-oscuro: #4a070b;
    --bordo-primario: #6e1016;
    --bordo-claro: #8b1a21;
    --dorado: #e5b653;
    --blanco: #ffffff;
    --gris-claro: #f6f7f9;
    --gris-borde: #e8eaee;
    --gris-texto: #5d626b;
    --texto-oscuro: #20242a;
    --font: 'Poppins', sans-serif;
    --sombra-suave: 0 8px 24px rgba(32, 36, 42, 0.06);
    --sombra-flote: 0 18px 40px rgba(110, 16, 22, 0.14);
    --border-radius: 16px;
    --ancho-contenido: 1200px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

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

main, section {
    overflow-x: clip; /* Evita que las animaciones de AOS (fade-left / fade-right) estiren la pantalla */
}

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { min-width: 320px; background: var(--blanco); color: var(--texto-oscuro); font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button, input, textarea, select { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(229, 182, 83, 0.8); outline-offset: 3px; }
::selection { background: var(--bordo-primario); color: var(--blanco); }

/* Barra superior */
.top-bar { display: flex; align-items: center; min-height: 38px; padding: 7px 0; border-bottom: 1px solid var(--gris-borde); background: var(--gris-claro); color: var(--gris-texto); font-size: 0.78rem; }
.contenido-top-bar { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--ancho-contenido); margin: 0 auto; padding: 0 24px; }
.top-bar-info, .top-bar-sociales { display: flex; align-items: center; gap: 12px; }
.top-bar-info { flex-wrap: wrap; }
.top-bar-info span { display: inline-flex; align-items: center; gap: 6px; }
.top-bar-info i, .top-bar-sociales a { color: var(--bordo-primario); }
.top-bar-info .separador { color: #c8cbd0; }
.top-bar-sociales span { margin-right: 2px; font-weight: 600; }
.top-bar-sociales a { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border: 1px solid #dfe1e5; border-radius: 50%; background: var(--blanco); transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; }
.top-bar-sociales a:hover { transform: translateY(-2px); background: var(--bordo-primario); color: var(--blanco); }

/* Encabezado principal */
.header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 84px;
    background: #ffffff;
    border-bottom: 1px solid rgba(232, 234, 238, 0.8);
    box-shadow: 0 7px 22px rgba(32, 36, 42, 0.05);
    transition: min-height 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* Cuando baja la página: se clava arriba con position fixed y efecto vidrio */
.header.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 70px;
    background: rgba(255, 255, 255, 0.78) !important; /* Más transparente para que se note el efecto */
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(110, 16, 22, 0.12);
    box-shadow: 0 10px 30px rgba(32, 36, 42, 0.12);
}

/* Compensa el espacio cuando el header pasa a fixed para que la página no salte */
body.header-fijo {
    padding-top: 84px;
}

.contenido-header { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--ancho-contenido); margin: 0 auto; padding: 0 24px; transition: padding 0.3s ease; }
.header__izquierda { display: flex; align-items: center; gap: 14px; min-width: 0; }
.header__logo { display: inline-flex; align-items: center; gap: 13px; }
.header__logo--imagen { width: auto !important; height: 56px !important; object-fit: contain; transition: height 0.3s ease, transform 0.3s ease; }
.header.scrolled .header__logo--imagen { height: 48px !important; }
.header__logo--titulo { display: block; max-width: 230px; margin: 0; overflow: hidden; color: var(--bordo-primario) !important; font-size: 1.12rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.header__logo--subtitulo { display: block; color: #7b8088; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.9px; }
.navegacion__links { display: flex; align-items: center; gap: 5px; margin: 0; padding: 0; }
.links { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 13px; border-radius: 10px; color: var(--texto-oscuro) !important; font-size: 0.86rem; font-weight: 600; white-space: nowrap; transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
.links:hover, .links.activo { color: var(--bordo-primario) !important; background: #fbf3f3; }
.links:hover { transform: translateY(-1px); }
.dropdown > a i { display: inline-block; margin-left: 9px; font-size: 0.68rem; transition: transform 0.25s ease; }
.dropdown:hover > a i, .dropdown:focus-within > a i { transform: rotate(180deg); }
.menu-toggle { display: none; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--bordo-primario); cursor: pointer; font-size: 1.45rem; }
.menu-toggle:hover { background: #fbf3f3; }

/* Menú desplegable */
.dropdown { position: relative; display: inline-block; }
.dropdown-content { position: absolute; top: calc(100% + 8px); left: 0; z-index: 100; min-width: 215px; visibility: hidden; padding: 7px; border: 1px solid var(--gris-borde); border-top: 3px solid var(--bordo-primario); border-radius: 12px; background: var(--blanco); box-shadow: 0 16px 35px rgba(32, 36, 42, 0.12); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; }
.dropdown-content a { display: block; padding: 10px 13px; border-radius: 8px; color: var(--texto-oscuro); font-size: 0.86rem; transition: background 0.2s ease, color 0.2s ease; }
.dropdown-content a:hover { background: #fbf3f3; color: var(--bordo-primario); }
.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content { visibility: visible; opacity: 1; transform: translateY(0); }

/* Contenedores compartidos */
.contenedor { width: min(100% - 48px, var(--ancho-contenido)); margin: 0 auto; padding: 64px 0; }
main > section, .contenedor > section { scroll-margin-top: 100px; }

/* Encabezados interiores: una misma firma visual en todo el sitio */
body .hero-academico, body .hero-instalaciones, body .hero-noticias, body .seccion-hero-mini, body .hero-mini {
    position: relative;
    overflow: hidden;
    padding: 72px 24px;
    background: linear-gradient(120deg, var(--bordo-oscuro), var(--bordo-primario) 58%, var(--bordo-claro));
}
body .hero-academico::after, body .hero-instalaciones::after, body .hero-noticias::after, body .seccion-hero-mini::after, body .hero-mini::after {
    content: '';
    position: absolute;
    right: -95px;
    bottom: -180px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(255,255,255,0.035), 0 0 0 48px rgba(255,255,255,0.02);
    pointer-events: none;
}
body .hero-academico h1, body .hero-instalaciones h1, body .hero-noticias h1, body .seccion-hero-mini h1, body .hero-mini h1 {
    position: relative;
    z-index: 1;
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -0.035em;
}
body .hero-academico p, body .hero-instalaciones p, body .hero-noticias p, body .seccion-hero-mini p, body .hero-mini p {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    color: rgba(255,255,255,0.86);
}

body .tarjeta-instalacion, body .tarjeta-curso, body .noticia-tarjeta, body .tarjeta, body .contacto-blanco, body .calendario-caja {
    border: 1px solid rgba(232, 234, 238, 0.9);
    box-shadow: var(--sombra-suave);
}

/* Pie de página */
.footer-principal { width: 100%; margin-top: 64px; padding: 64px 24px 22px; background: var(--bordo-oscuro); color: var(--blanco); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 42px; max-width: var(--ancho-contenido); margin: 0 auto 42px; }
.footer-columna h4 { position: relative; margin-bottom: 20px; padding-bottom: 11px; color: var(--blanco); font-size: 1rem; }
.footer-columna h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 34px; height: 3px; border-radius: 5px; background: var(--dorado); }
.footer-columna p, .footer-columna ul li { margin-bottom: 11px; color: rgba(255, 255, 255, 0.76); font-size: 0.86rem; line-height: 1.7; }
.footer-columna ul { padding: 0; }
.footer-columna ul li a { color: rgba(255, 255, 255, 0.76); transition: color 0.2s ease, padding 0.2s ease; }
.footer-columna ul li a:hover { padding-left: 4px; color: var(--blanco); }
.footer-sociales { display: flex; gap: 11px; }
.footer-sociales a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--blanco); transition: transform 0.25s ease, background 0.25s ease; }
.footer-sociales a:hover { transform: translateY(-3px); background: var(--bordo-claro); }
.footer-bottom { max-width: var(--ancho-contenido); margin: 0 auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.56); font-size: 0.78rem; text-align: center; }

@media (max-width: 1050px) {
    .contenido-header { padding: 0 18px; }
    .navegacion__links { gap: 0; }
    .links { padding-inline: 10px; font-size: 0.82rem; }
}

@media (max-width: 820px) {
    .top-bar { display: none; }
    .header, .header.scrolled { min-height: 76px; padding: 10px 0; }
    .contenido-header { flex-direction: column; gap: 10px; padding: 0 14px; }
    .header__izquierda { position: relative; width: 100%; justify-content: center; }
    .header__logo { width: 100%; min-width: 0; padding: 0 38px 0 50px; gap: 10px; justify-content: center; }
    .header__logo--imagen, .header.scrolled .header__logo--imagen { height: 50px !important; }
    .header__logo--titulo { max-width: calc(100vw - 150px); font-size: clamp(0.86rem, 4.2vw, 1rem); }
    .header__logo--subtitulo { font-size: 0.66rem; }
    .menu-toggle { position: absolute; top: 50%; left: 0; display: block; transform: translateY(-50%); }
    .navegacion { display: none; width: 100%; }
    .navegacion.abierto { display: block; padding-top: 10px; border-top: 1px solid var(--gris-borde); }
    .navegacion__links { flex-direction: column; align-items: stretch; width: 100%; gap: 3px; }
    .links { justify-content: center; width: 100%; min-height: 43px; font-size: 0.94rem; }
    .dropdown { width: 100%; text-align: center; }
    .dropdown-content { position: static; display: none; width: 100%; min-width: 0; padding: 4px; border: 0; border-radius: 10px; background: var(--gris-claro); box-shadow: none; transform: none; }
    .dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content { display: block; visibility: visible; opacity: 1; transform: none; }
    .contenedor { width: min(100% - 32px, var(--ancho-contenido)); padding: 48px 0; }
    .footer-principal { margin-top: 48px; padding: 48px 20px 20px; }
    .footer-grid { gap: 30px; }
}

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