:root{

--primary:#6A00CD;
--primary-dark:#4F00A0;

--bg:#ffffff;
--bg-soft:#f7f5fc;

--text:#1f1f1f;
--gray:#666;

--surface-soft:#f7f5fc;
--text-light:#666;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{
    scroll-behavior:smooth;
}

body{

font-family:'Open Sans',sans-serif;
color:var(--text);
line-height:1.7;

}

/* ===========================
   CAMPUS
=========================== */

.nav-campus{
    list-style:none;
}

/* =====================================
   CAMPUS
===================================== */

.btn-campus{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:12px 24px;

    background-color:#6A00CD;

    color:#FFFFFF;

    text-decoration:none;

    border-radius:8px;

    font-size:16px;
    font-weight:600;

    white-space:nowrap;

    transition:
        background-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}

.btn-campus:hover{

    background-color:#52009E;

    transform:translateY(-2px);

    box-shadow:
        0 8px 20px rgba(106,0,205,.18);

}

.btn-campus:active{

    transform:translateY(0);

}


/* Campus dentro del menú:
   oculto en desktop */

.nav-campus-mobile{

    display:none;

}

@media (max-width:768px){

    .header{

        position:relative;

    }


    .header .container{

        display:flex;

        justify-content:center;

        align-items:center;

        position:relative;

        min-height:70px;

    }


    /* =========================
       LOGO CENTRADO
    ========================= */

    .logo{

        display:flex;

        position:absolute;

        left:50%;

        transform:translateX(-50%);

        z-index:1001;

    }

    .logo img{

        height:50px;

        width:auto;

    }


    /* =========================
       HAMBURGUESA
    ========================= */

    .menu-toggle{

        display:block;

        position:absolute;

        left:20px;

        top:50%;

        transform:translateY(-50%);

        z-index:1002;

    }


    /* =========================
       CAMPUS DESKTOP
       OCULTO EN MOBILE
    ========================= */

    .btn-campus-desktop{

        display:none;

    }


    /* =========================
       MENÚ
    ========================= */

    nav{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:#fff;

        box-shadow:
            0 10px 30px rgba(0,0,0,.08);

        max-height:0;

        overflow:hidden;

        transition:
            max-height .4s ease;

        z-index:1000;

    }


    nav.active{

        max-height:500px;

    }


    nav ul{

        display:flex;

        flex-direction:column;

        padding:25px;

        gap:20px;

    }


    /* =========================
       CAMPUS DENTRO DEL MENÚ
    ========================= */

    .nav-campus-mobile{

        display:block;

        width:100%;

        margin-top:5px;

    }

    .nav-campus-mobile .btn-campus{

        display:flex;

        width:100%;

        justify-content:center;

        align-items:center;

        padding:14px 20px;

        text-align:center;

    }

}

.container{

width:min(1200px,90%);
margin:auto;

}

/* HAMBURGER */

.menu-toggle{

display:none;

background:none;
border:none;

cursor:pointer;

width:40px;
height:40px;

position:relative;

}

.menu-toggle span{

display:block;

width:28px;
height:3px;

background:var(--primary);

margin:5px auto;

border-radius:2px;

transition:.3s;

}

/* Estado activo */

.menu-toggle.active span:nth-child(1){

transform:
translateY(8px)
rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

opacity:0;

}

.menu-toggle.active span:nth-child(3){

transform:
translateY(-8px)
rotate(-45deg);

}

h1,h2,h3{

font-family:'Playfair Display',serif;

}

.header{

position:relative;
z-index:9999;
padding:20px 0;
border-bottom:1px solid #eee;

}

.header .container{

display:flex;
justify-content:space-between;
align-items:center;

}

nav ul{

display:flex;
gap:30px;
list-style:none;

}

nav a{

text-decoration:none;
color:var(--text);

}

nav a.active{

color:var(--primary);

position:relative;

}

nav a.active::after{

content:"";

position:absolute;

bottom:-6px;
left:0;

width:100%;
height:2px;

background:var(--primary);

border-radius:999px;

}

/* ===========================
   LOGO
=========================== */

.logo{

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

}

.logo img{

    display:block;

    width:auto;
    
    height:60px;

    object-fit:contain;

    transition:transform .3s ease;

}

.logo:hover img{

    transform:scale(1.03);

}

.btn-primary{

background:white;
color:var(--primary);

padding:14px 24px;

border-radius:10px;

text-decoration:none;
font-weight:700;

}

.btn-secondary{

border:1px solid white;

padding:14px 24px;

border-radius:10px;

color:white;
text-decoration:none;

}


.btn-white{

display:inline-block;

margin-top:30px;

background:white;

padding:14px 24px;

border-radius:10px;

text-decoration:none;

color:var(--primary);

font-weight:700;

}

.reveal{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/* ==================================
   CTA GLOBAL
================================== */

.cta{

padding:120px 0;

background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:white;

text-align:center;

position:relative;

overflow:hidden;

}

.cta .container{

max-width:800px;

}

.cta h2{

font-size:3rem;

margin-bottom:20px;

color:white;

}

.cta p{

font-size:1.1rem;

line-height:1.8;

max-width:650px;

margin:
0 auto 40px;

opacity:.95;

}

.cta .btn-white{

display:inline-flex;

align-items:center;
justify-content:center;

padding:
16px 32px;

font-weight:600;

transition:.3s;

}

.cta .btn-white:hover{

transform:
translateY(-3px);

}

.cta::before{

content:"";

position:absolute;

width:500px;
height:500px;

border-radius:50%;

background:
rgba(255,255,255,.05);

top:-250px;
right:-150px;

}

.cta::after{

content:"";

position:absolute;

width:350px;
height:350px;

border-radius:50%;

background:
rgba(255,255,255,.04);

bottom:-180px;
left:-100px;

}

/*   FOOTER PREMIUM */

.footer {
  background: #0F172A;
  color: white;
  padding-top: 80px;
  margin-top: 0px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 3fr; /* marca + bloque de secciones */
  gap: 60px;
  padding-bottom: 60px;
}

.footer-brand h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
}

.footer-brand p {
  line-height: 1.8;
  opacity: .8;
  max-width: 350px;
}

.footer-sections {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 180px;
}

.footer-column h4 {
  margin-bottom: 10px;
  font-size: 1rem;
  color: white;
}

.footer-column a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  transition: .3s;
}

.footer-column a:hover {
  color: white;
  transform: translateX(4px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-bottom p {
  opacity: .7;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  transition: .3s;
}

.footer-legal a:hover {
  color: white;
}

.sep {
  border: none;
  height: 2px;
  width: 500px;
  background-color: #D9B3F2;
  margin: 30px auto;
  border-radius: 2px;
}

/* =========================================================
   RESPONSIVE GLOBAL
   ========================================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: 90%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .header {
        padding: 10px 0;
    }

    .header .container {
        min-height: 70px;
        position: relative;
        justify-content: center;
    }

    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .logo img {
        width: auto;
        height: 48px;
        max-width: 120px;
    }

    .menu-toggle {
        display: block;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10002;
    }

    .btn-campus-desktop {
        display: none;
    }

    #main-nav {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);

        width: 100vw;
        max-width: 100vw;

        background: #ffffff;

        max-height: 0;
        overflow: hidden;

        box-shadow: 0 10px 30px rgba(0,0,0,.08);

        transition: max-height .35s ease;

        z-index: 10000;
    }

    #main-nav.active {
        max-height: 600px;
    }

    #main-nav ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;

        gap: 0;
        padding: 20px;
    }

    #main-nav li {
        width: 100%;
    }

    #main-nav a {
        display: block;
        width: 100%;

        padding: 13px 5px;
    }

    .nav-campus-mobile {
        display: block;
        width: 100%;
        margin-top: 12px;
    }

    .nav-campus-mobile .btn-campus {
        width: 100%;
        min-height: 52px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 13px 20px;
    }

    .sep {
        width: min(500px, 100%);
        max-width: 100%;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .footer-sections {
        width: 100%;
        gap: 35px;
    }

    .footer-column {
        min-width: 0;
        flex: 1 1 180px;
    }

    .footer-bottom {
        align-items: flex-start;
    }

}

@media (max-width: 600px) {

    .container {
        width: calc(100% - 32px);
    }

    .header .container {
        min-height: 64px;
    }

    .logo img {
        height: 44px;
        max-width: 110px;
    }

    .menu-toggle {
        left: 0;
    }

    .footer {
        padding-top: 60px;
    }

    .footer-sections {
        flex-direction: column;
        gap: 30px;
    }

    .footer-column {
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: 15px;
    }

    .cta {
        padding: 80px 0;
    }

    .cta h2 {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .cta p {
        font-size: 1rem;
    }

}

@media (max-width: 400px) {

    .container {
        width: calc(100% - 24px);
    }

    .logo img {
        height: 42px;
        max-width: 100px;
    }

    .menu-toggle {
        width: 38px;
        height: 38px;
    }

    .menu-toggle span {
        width: 26px;
    }

}

/* ==================================
   INNER HERO
   Quiénes somos / Áreas / Sumate
================================== */

.inner-hero {

    position: relative;

    min-height: 620px;

    display: flex;
    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background: var(--primary);

}

/* Imagen de fondo */

.inner-hero-image {

    position: absolute;

    inset: 0;

    z-index: -3;

}

.inner-hero-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}

/* Degradado principal */

.inner-hero-gradient {

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(47, 0, 91, .96) 0%,
            rgba(76, 0, 125, .88) 32%,
            rgba(106, 0, 205, .48) 62%,
            rgba(106, 0, 205, .08) 100%
        );

}

/* Degradado inferior para integrar con la siguiente sección */

.inner-hero::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 100px;

    z-index: -1;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--bg)
        );

    pointer-events: none;

}

/* Contenido */

.inner-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    padding-top: 110px;
    padding-bottom: 110px;

    padding-left: clamp(24px, 4vw, 60px);
    padding-right: clamp(24px, 4vw, 60px);

}

/* Etiqueta superior */

.inner-hero .eyebrow {

    display: inline-block;

    margin-bottom: 24px;

    color: rgba(255, 255, 255, .78);

    font-size: .78rem;
    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

}

/* Título */

.inner-hero h1 {

    max-width: 760px;

    margin: 0 0 28px;

    color: #ffffff;

    font-size: clamp(
        3rem,
        6vw,
        5.8rem
    );

    line-height: 1.02;

    letter-spacing: -.04em;

}

/* Descripción */

.inner-hero p {

    max-width: 620px;

    margin: 0;

    color: rgba(255, 255, 255, .86);

    font-size: clamp(
        1rem,
        1.5vw,
        1.2rem
    );

    line-height: 1.75;

}

/* Botones */

.inner-hero-actions {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 36px;

}

.inner-hero .btn-primary {

    background: #ffffff;

    color: var(--primary);

}

.inner-hero .btn-primary:hover {

    background: rgba(255, 255, 255, .88);

}

/* ==================================
   RESPONSIVE TABLET
================================== */

@media (max-width: 992px) {

    .inner-hero {

        min-height: 560px;

    }

    .inner-hero-gradient {

        background:
            linear-gradient(
                90deg,
                rgba(47, 0, 91, .96) 0%,
                rgba(76, 0, 125, .84) 48%,
                rgba(106, 0, 205, .25) 100%
            );

    }

    .inner-hero-content {

        padding-top: 100px;
        padding-bottom: 100px;

    }

    .inner-hero h1 {

        max-width: 650px;

        font-size: clamp(
            3rem,
            7vw,
            4.8rem
        );

    }

}

/* ==================================
   RESPONSIVE MOBILE
================================== */

@media (max-width: 768px) {

    .inner-hero {

        min-height: 570px;

        align-items: flex-end;

    }

    .inner-hero-image img {

        object-position: center;

    }

    .inner-hero-gradient {

        background:
            linear-gradient(
                180deg,
                rgba(47, 0, 91, .20) 0%,
                rgba(76, 0, 125, .62) 35%,
                rgba(47, 0, 91, .98) 100%
            );

    }

    .inner-hero::after {

        height: 100px;

    }

    .inner-hero-content {

        padding-top: 100px;
        padding-bottom: 75px;

    }

    .inner-hero .eyebrow {

        margin-bottom: 18px;

        font-size: .72rem;

    }

    .inner-hero h1 {

        max-width: 100%;

        margin-bottom: 22px;

        font-size: clamp(
            2.5rem,
            11vw,
            4rem
        );

        line-height: 1.05;

    }

    .inner-hero p {

        max-width: 100%;

        font-size: .98rem;

        line-height: 1.65;

    }

    .inner-hero-actions {

        margin-top: 28px;

        flex-direction: column;

        align-items: stretch;

    }

    .inner-hero-actions .btn-primary {

        width: 100%;

        text-align: center;

    }

}

/* ==================================
   MOBILE PEQUEÑO
================================== */

@media (max-width: 480px) {

    .inner-hero {

        min-height: 540px;

    }

    .inner-hero-content {

        padding-top: 90px;
        padding-bottom: 60px;

    }

    .inner-hero h1 {

        font-size: 2.45rem;

    }

    .inner-hero p {

        font-size: .92rem;

    }

}

.quienes-hero .inner-hero-image img {

    object-position: center center;

}

.areas-inner-hero .inner-hero-image img {

    object-position: center center;

}

.sumate-inner-hero .inner-hero-image img {

    object-position: center center;

}