body {
            background: var(--oscuro);
            color: var(--claro);

            overflow-x: hidden;
        }
        .hero {
            position: relative;
            height: 100svh;
            min-height: 600px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background-image: url('../img/hero.webp');
            background-size: cover;
            background-position: center;
            transform: scale(1.04);
            transition: transform 10s ease;
            filter: brightness(.45) saturate(.85);
        }
        .hero:hover .hero-bg { transform: scale(1.0); }

        .hero-overlay {
            position: absolute; inset: 0;
            background:
                linear-gradient(to top, var(--oscuro) 0%, transparent 45%),
                linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 30%);
        }
        /* nav */
        .hero-nav {
            position: absolute;
            top: 2rem; left: 0; right: 0;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 clamp(1.5rem, 5vw, 4rem);
        }
        .nav-logo img {
            height: 52px;
            object-fit: contain;
            filter: brightness(1);
        }
        .nav-links {
            display: flex;
            align-items: center;
            gap: .2rem;
            background: rgba(18,18,18,.75);
            backdrop-filter: blur(16px);
            border: 1px solid var(--principal);
            border-radius: 100px;
            padding: .35rem .4rem;
            list-style: none;
        }
        .nav-links a {
            color: var(--claro);
            text-decoration: none;
            font-size: .78rem;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: .45rem 1.1rem;
            border-radius: 100px;
            transition: background .2s, color .2s;
        }
        .nav-links a:hover { background: rgba(137,72,72,.25); color: var(--claro); }
        .nav-links a.active { color: var(--principal); }
        .nav-cta {
            background: linear-gradient(to right, var(--amarillo-principal), var(--principal));
            color: #fff !important;
            font-weight: 700 !important;
        }
        .nav-cta:hover { opacity: .9; }

        /* hero content */
        .hero-content {
            position: relative;
            z-index: 10;
            padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vh, 5rem);
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: flex-end;
            gap: 2rem;
        }
        .hero-eyebrow {
            font-size: .68rem;
            font-weight: 600;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--amarillo-principal);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: .7rem;
        }
        .hero-eyebrow::before {
            content: '';
            display: inline-block;
            width: 28px; height: 2px;
            background: var(--amarillo-principal);
        }
        .hero-title {
            font-family: var(--font-display);
            font-size: clamp(4.5rem, 13vw, 11rem);
            line-height: .88;
            letter-spacing: .02em;
        }
        .hero-title .line-accent { color: var(--principal); }
        .hero-title .line-thin {
            font-size: clamp(1.8rem, 4vw, 3.5rem);
            color: var(--text-gray2);
            display: block;
            letter-spacing: .12em;
            font-family: var(--font-body);
            font-weight: 300;
            font-style: italic;
            margin-top: .3rem;
        }

        .hero-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 1.5rem;
            padding-bottom: .3rem;
        }
        .hero-badge {
            background: rgba(0,56,118,.3);
            border: 1px solid rgba(110,168,254,.35);
            color: #6ea8fe;
            font-size: .62rem;
            font-weight: 700;
            letter-spacing: .2em;
            text-transform: uppercase;
            padding: .4rem 1rem;
            border-radius: 2px;
            text-align: center;
        }
        .hero-cta {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            padding: 1rem 2.2rem;
            background: var(--principal);
            color: #fff;
            font-family: var(--font-display);
            font-size: 1.15rem;
            letter-spacing: .1em;
            text-decoration: none;
            border-radius: 3px;
            transition: background .25s, transform .2s;
        }
        .hero-cta:hover { background: var(--secundario); transform: translateY(-2px); }
        .hero-cta svg { width: 16px; height: 16px; fill: currentColor; }

        .hero-scroll {
            display: flex;
            align-items: center;
            gap: .5rem;
            color: var(--text-gray);
            font-size: .65rem;
            letter-spacing: .2em;
            text-transform: uppercase;
        }
        .scroll-line {
            width: 1px; height: 32px;
            background: linear-gradient(to bottom, var(--principal), transparent);
        }

        @media (max-width: 768px) {
            .hero-content { grid-template-columns: 1fr; }
            .hero-right { align-items: flex-start; flex-direction: row; flex-wrap: wrap;}
            .hero-scroll { display: none; }
            .nav-links { display: none; }

        }

        /* ---------------------
           STATS BAR
        --------------------- */
        .stats-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-top: 1px solid var(--borde-gris);
            border-bottom: 1px solid var(--borde-gris);
        }
        .stat-item {
            padding: 1.8rem 2rem;
            border-right: 1px solid var(--borde-gris);
            display: flex;
            flex-direction: column;
            gap: .3rem;
        }
        .stat-item:last-child { border-right: none; }
        .stat-num {
            font-family: var(--font-display);
            font-size: 2.8rem;
            line-height: 1;
            color: var(--principal);
            letter-spacing: .04em;
        }
        .stat-label {
            font-size: .62rem;
            font-weight: 600;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--text-gray);
        }
        @media (max-width: 600px) {
            .stats-bar { grid-template-columns: 1fr 1fr; }
            .stat-item:nth-child(2) { border-right: none; }
        }

        /* ---------------------
           ABOUT / INTRO
        --------------------- */
        .about {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 60vh;
            border-bottom: 1px solid var(--borde-gris);
        }
        .about-img {
            position: relative;
            overflow: hidden;
        }
        .about-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            filter: brightness(.6) saturate(.8);
            display: block;
            transition: transform .6s ease, filter .6s ease;
        }
        .about:hover .about-img img {
            transform: scale(1.03);
            filter: brightness(.75) saturate(1);
        }
        .about-img::after {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(to right, transparent 60%, var(--oscuro) 100%);
        }
        .about-text {
            padding: 4rem clamp(2rem, 5vw, 5rem);
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2rem;
        }
        .section-label {
            font-size: .62rem;
            font-weight: 600;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: var(--amarillo-principal);
        }
        .about-title {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 5vw, 4.5rem);
            line-height: .92;
            letter-spacing: .04em;
        }
        .about-title span { color: var(--principal); }
        .about-body {
            font-size: 1rem;
            font-weight: 300;
            color: var(--text-gray2);
            line-height: 1.75;
            max-width: 480px;
        }
        .about-body strong { color: var(--claro); font-weight: 600; }
        .btn-ghost {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .75rem 1.6rem;
            border: 1px solid var(--borde-gris);
            color: var(--text-light-gray);
            font-family: var(--font-display);
            font-size: 1rem;
            letter-spacing: .1em;
            text-decoration: none;
            border-radius: 3px;
            width: fit-content;
            transition: border-color .25s, color .25s, background .25s;
        }
        .btn-ghost:hover {
            border-color: var(--principal);
            color: var(--claro);
            background: rgba(137,72,72,.08);
        }
        .btn-ghost svg { width: 14px; height: 14px; fill: currentColor; }

        @media (max-width: 768px) {
            .about { grid-template-columns: 1fr; }
            .about-img { height: 280px; }
            .about-img::after { background: linear-gradient(to bottom, transparent 60%, var(--oscuro) 100%); }
        }

        /* ---------------------
           INSCRIPCIÓN CTA
        --------------------- */
        .inscripcion-cta {
            position: relative;
            overflow: hidden;
            padding: 6rem clamp(1.5rem, 6vw, 5rem);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 3rem;
            flex-wrap: wrap;
            border-bottom: 1px solid var(--borde-gris);
            border-top: 1px solid var(--borde-gris);

        }
        .inscripcion-cta::before {
            content: 'INSCRÍBETE';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            font-family: var(--font-display);
            font-size: clamp(5rem, 18vw, 14rem);
            color: rgba(255,255,255,.025);
            white-space: nowrap;
            pointer-events: none;
            letter-spacing: .04em;
        }
        .cta-tag {
            font-size: .62rem;
            font-weight: 600;
            letter-spacing: .28em;
            text-transform: uppercase;
            color: var(--amarillo-principal);
            margin-bottom: .8rem;
        }
        .cta-title {
            font-family: var(--font-display);
            font-size: clamp(2.2rem, 5vw, 4rem);
            line-height: .95;
            letter-spacing: .04em;
            max-width: 560px;
        }
        .cta-title span { color: var(--principal); }
        .cta-right {
            display: flex;
            flex-direction: column;
            gap: .8rem;
            align-items: flex-start;
        }
        .cta-cats {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
        }
        .cta-cat {
            font-size: .6rem;
            font-weight: 700;
            letter-spacing: .15em;
            text-transform: uppercase;
            padding: .3rem .7rem;
            border-radius: 2px;
            border: 1px solid var(--borde-gris);
            color: var(--text-gray);
        }
        .btn-inscripcion {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            padding: 1rem 2.5rem;
            background: var(--principal);
            color: #fff;
            font-family: var(--font-display);
            font-size: 1.2rem;
            letter-spacing: .1em;
            text-decoration: none;
            border-radius: 3px;
            transition: background .25s, transform .2s;
        }
        .btn-inscripcion:hover { background: var(--secundario); transform: translateY(-2px); }
        .btn-inscripcion svg { width: 16px; height: 16px; fill: currentColor; }

        /* ---------------------
           GALERÍA / MULTIMEDIA
        --------------------- */
        .multimedia {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 55vh;
            max-height: 70vh;
            border-bottom: 1px solid var(--borde-gris);
        }
        .multimedia-text {
            padding: 4rem clamp(2rem, 5vw, 5rem);
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2rem;
            border-right: 1px solid var(--borde-gris);
        }
        .multimedia-title {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 5vw, 4.2rem);
            line-height: .92;
            letter-spacing: .04em;
        }
        .multimedia-title span { color: var(--principal); }
        .multimedia-desc {
            font-size: .95rem;
            font-weight: 300;
            color: var(--text-gray2);
            line-height: 1.7;
            max-width: 400px;
        }
        .multimedia-mosaic {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 2px;
            overflow: hidden;
        }
        .mosaic-img {
            overflow: hidden;
            position: relative;
        }
        .mosaic-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: block;
            filter: brightness(.65) saturate(.8);
            transition: transform .5s ease, filter .5s ease;
        }
        .mosaic-img:hover img {
            transform: scale(1.06);
            filter: brightness(.85) saturate(1);
        }
        .mosaic-img:first-child {
            grid-row: 1 / 3;
        }

        @media (max-width: 768px) {
            .multimedia { grid-template-columns: 1fr; max-height: none;}
            .multimedia-text { border-right: none; border-bottom: 1px solid var(--borde-gris); }
            .multimedia-mosaic { height: 300px; }
        }

        /* ---------------------
           NOTICIAS
        --------------------- */
        .noticias-section {
            padding: 4rem clamp(1.5rem, 6vw, 5rem);
            border-bottom: 1px solid var(--borde-gris);
        }
        .section-header {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-bottom: 2.5rem;
        }
        .section-header h2 {
            font-family: var(--font-display);
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            letter-spacing: .06em;
            white-space: nowrap;
        }
        .section-line { flex: 1; height: 1px; background: var(--borde-gris); }
        .section-link {
            font-size: 9px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--text-gray);
            background-color: var(--gris);
            text-decoration: none;
            transition: color 0.15s;
            padding: 8px 10px 8px 10px;
            border-radius: 2px;
            border:1px solid var(--borde-gris);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap:5px;
        }
        .section-link:hover { color: var(--claro); }

        .noticias-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: var(--borde-gris);
            border: 1px solid var(--borde-gris);
            border-radius: 6px;
            overflow: hidden;
        }
        .noticia-card {
            background: var(--gris-fondo);
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: inherit;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity .5s ease, transform .5s ease, background .25s;
        }
        .noticia-card.visible { opacity: 1; transform: translateY(0); }
        .noticia-card:nth-child(2) { transition-delay: .08s; }
        .noticia-card:nth-child(3) { transition-delay: .16s; }
        .noticia-card:nth-child(4) { transition-delay: .24s; }
        .noticia-card:hover { background: var(--gris-claro); }

        .noticia-img {
            aspect-ratio: 16/10;
            overflow: hidden;
        }
        .noticia-img img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: block;
            filter: brightness(.7) saturate(.8);
            transition: transform .4s ease, filter .4s ease;
        }
        .noticia-card:hover .noticia-img img {
            transform: scale(1.04);
            filter: brightness(.85) saturate(1);
        }
        .noticia-body {
            padding: 1.2rem 1.4rem 1.4rem;
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: .5rem;
        }
        .noticia-meta {
            font-size: .65rem;
            font-weight: 600;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--text-gray);
        }
        .noticia-meta span { color: var(--amarillo-principal); }
        .noticia-title {
            font-family: var(--font-display);
            font-size: 1.05rem;
            letter-spacing: .04em;
            line-height: 1.2;
            color: var(--claro);
        }
        .noticia-arrow {
            margin-top: auto;
            padding-top: .8rem;
            font-size: .7rem;
            color: var(--text-gray);
            display: flex;
            align-items: center;
            gap: .3rem;
            transition: color .2s, gap .2s;
        }
        .noticia-card:hover .noticia-arrow { color: var(--principal); gap: .6rem; }

        @media (max-width: 900px) {
            .noticias-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 500px) {
            .noticias-grid { grid-template-columns: 1fr; }
        }
        @media (max-width:400px){
            .section-header{ flex-flow:column; gap:.5rem;}
            .section-link{
                border-radius:3px;
                letter-spacing: .1em;
                border:1px solid var(--borde-gris);
                padding: .75rem 1.6rem;
            }
        }