*{
    margin:0;
    padding:0;
    box-sizing:border-box
}
html {
  scroll-behavior: smooth;
}
section{
  scroll-margin-top: 60px;
}
:root{
    --azul:rgb(238, 29, 35);
    --dorado:#c8923a;
    --dorado-claro:#e8b86d;
    --crema:#ffffff;
    --texto:#1a1a1a;
    --blanco:#ffffff;
    --footer: #2c2c2c;
}
body{
    font-family:'DM Sans', sans-serif;
    background:var(--crema);
    color:var(--texto);
    overflow-x:hidden
}
nav{
    background:var(--azul);
    padding:0 2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:100;
    /*border-bottom:3px solid var(--dorado);*/
    min-height:64px;
}
.nav-logo{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--blanco);
    text-decoration:none;
}
.nav-escudo{
    display:flex;
    align-items:center;
    justify-content:center;   
}
.nav-escudo img{
  width: 50px;
}
.nav-nombre{
    font-family:"Google Sans", sans-serif;
    font-size:22px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:0.3px;
}
.nav-nombre .subtitulo{
  display: block;
  max-width: 200px;
  font-size: 15px;
}
.nav-links{
    display:flex;
    gap:0;list-style:none
}
.nav-links a{
    color:rgba(255,255,255,0.85);
    text-decoration:none;
    font-size:16px;
    padding:20px 14px;
    display:block;
    transition:color 0.2s,background 0.2s;
    font-family:'DM Sans', sans-serif;
    font-weight:600;
    letter-spacing:0.2px;
}
.nav-links a:hover{
    color:var(--dorado-claro);
    border-bottom: var(--dorado) solid 3px;
    padding-bottom: 17px ;
}
.nav-cta{
    background:var(--dorado);
    color:var(--azul) !important;
    font-weight:600 !important;
    padding:10px 20px !important;
    border-radius:4px;
    margin-left:8px;
    transition:background 0.2s !important;
}
.nav-cta:hover{
  background:var(--dorado-claro) !important;color:var(--azul) !important
}
.hero{
  background:linear-gradient(
            180deg, rgba(238, 29, 35, 1) 0%,
                    rgba(238,29,35,0.5) 50%, 
                    rgba(255,255,255,0.25) 100%),
            url('https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=1600&q=80') top/cover no-repeat;
    position:relative;
    overflow:hidden;
    padding:100px 2rem 80px;
    text-align:center;
}
.hero::before{
    content:'';
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse 60% 60% at 20% 50%, rgba(200,146,58,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 80% 50%, rgba(74,144,196,0.15) 0%, transparent 60%);
}
.hero-tag{
    display:inline-block;
    border:2px solid var(--dorado-claro);
    color:var(--dorado-claro);
    font-size:18px;
    font-weight: 600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    padding:5px 18px;
    border-radius:2px;
    margin-bottom:28px;
    font-family:"Google Sans", sans-serif;
    position:relative;z-index:1;
}
.hero h1{
    font-family:"Google Sans", sans-serif;
    font-size:clamp(36px,6vw,64px);
    font-weight:700;
    color:var(--blanco);
    line-height:1.1;
    margin-bottom:10px;
    position:relative;z-index:1;
}
.hero h1 em{
    font-style:italic;
    color:var(--dorado-claro);
}
.hero-sub{
    font-size:20px;
    color:rgba(255,255,255,1);
    font-weight:500;
    font-style:italic;
    letter-spacing:0.3px;
    margin-bottom:32px;
    position:relative;z-index:1;
}
.hero-datos{
  display:flex;
  gap:0;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:40px;
  position:relative;
  z-index:1;
}
.hero-dato{
  padding:16px 32px;
  text-align:center;
  background: rgba(71, 71, 71, 0.5);
}
.hero-dato.inicio{
  border-top-left-radius: 10px ;
  border-bottom-left-radius: 10px;
}

.hero-dato.fin{
  border-top-right-radius: 10px ;
  border-bottom-right-radius: 10px;
}

.hero-dato:last-child{
    border-right:none
}
.hero-dato .num{
  font-family:"Google Sans", sans-serif;
  font-size:36px;
  font-weight:700;
  color:var(--dorado-claro);
  line-height:1;
  display:block;
}
.hero-dato .lab{
  font-family:"Google Sans", sans-serif;
  font-size:14px;
  color:rgba(255,255,255,1);
  font-weight:500;
  letter-spacing:0.5px;
  margin-top:4px;
  display:block;
  text-transform:uppercase;
}
.hero-btns{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  position:relative;z-index:1;
}
.btn-prim{
  background:var(--dorado);color:var(--azul);
  padding:14px 30px;border-radius:4px;
  text-decoration:none;font-weight:600;font-size:15px;
  font-family:'Source Serif 4',serif;
  border:none;cursor:pointer;
  transition:background 0.2s;
  display:inline-block;
}
.btn-prim:hover{
  background:var(--dorado-claro)
}
.sep{
  width:60px;height:3px;
  background:var(--dorado);
  margin:0 auto 24px;
  border-radius:2px;
}
.sep-left{margin:0 0 24px}
section{
  padding:70px 2rem
}
.contenedor{
  max-width:1100px;
  margin:0 auto
}
.sec-tag{
    font-size:20px;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--dorado);
    font-weight:600;
    font-family:'DM Sans', sans-serif;
    margin-bottom:12px;
    display:block;
}
.sec-titulo{
  font-family:'Playfair Display',serif;
  font-size:clamp(28px,4vw,50px);
  font-weight:700;color:var(--azul);
  line-height:1.15;
  margin-bottom:16px;
}
.sec-titulo em{
  font-style:italic;
  color:var(--dorado)
}

.historia{background:var(--crema)}
.hist-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;align-items:start;
  margin-top:48px;
}
.hist-texto p{
  font-size:17px;
  line-height:1.85;
  color:var(--texto-suave);
  font-weight:300;
  margin-bottom:20px;
  text-align: justify;
}
.hist-texto p:last-child{margin-bottom:0}
.hist-texto strong{color:var(--azul);font-weight:600}
.timeline{
  border-left:2px solid var(--dorado);
  padding-left:24px;
  position:relative;
}
.tl-item{margin-bottom:32px;position:relative}
.tl-item::before{
  content:'';
  position:absolute;left:-35px;top:5px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--dorado);
  border:3px solid var(--crema);
  box-shadow:0 0 0 2px var(--dorado);
}
.tl-año{
  font-family:"Google Sans", sans-serif;
  font-size:22px;font-weight:700;
  color:var(--azul);
  display:block;margin-bottom:4px;
}
.tl-desc{
  font-size:14px;line-height:1.6;
  color:var(--texto-suave);font-weight:300;
}
.niveles{background:var(--azul)}
.niveles .sec-titulo{color:var(--blanco)}
.niveles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2px;
  margin-top:48px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  overflow:hidden;
}
.nivel-card{
  background:rgba(255,255,255,0.05);
  padding:32px 24px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,0.08);
  transition:background 0.2s;
  cursor:default;
}
.nivel-card:last-child{border-right:none}
.nivel-card:hover{background:rgba(200,146,58,0.12)}
.nivel-icono{
  font-size:32px;margin-bottom:16px;display:block;
}
.nivel-nombre{
  font-family:'Playfair Display',serif;
  font-size:18px;font-weight:600;
  color:var(--blanco);
  margin-bottom:8px;display:block;
}
.nivel-detalle{
  font-size:13px;color:rgba(255,255,255,0.55);
  font-weight:300;line-height:1.5;
}
.nivel-badge{
  display:inline-block;
  margin-top:12px;
  background:var(--dorado);
  color:var(--azul);
  font-size:10px;font-weight:600;
  padding:3px 10px;border-radius:2px;
  letter-spacing:1px;text-transform:uppercase;
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  padding: 20px;
}

.gallery-item {
  width: 100%;
  height: 200px;
  object-fit: cover; /* Evita que la imagen se deforme */
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.gallery-item:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* El Modal (Ventana para agrandar la imagen) */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 1000;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
}

.modal-content {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 4px;
  animation: zoomIn 0.3s ease;
}

/* Botón de cerrar */
.close-btn {
  position: absolute;
  top: 20px; right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

@keyframes zoomIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}


.carreras{background:var(--blanco)}
.val-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  margin-top:48px;
}
.val-card{
  background:rgba(232, 184, 109,0.2);
  border-radius:6px;
  padding:32px 28px;
  border-top:3px solid var(--dorado);
  position:relative;
  overflow:hidden;
}
.val-card:hover{
background:rgba(232, 184, 109,0.5);
}

.val-card::after{
  content:'';
  position:absolute;bottom:0;right:0;
  width:80px;height:80px;
  background:var(--crema);
  border-radius:80px 0 0 0;
  opacity:0.5;
}
.icon-wrap span { 
  color: var(--dorado); 
  font-size: 2.8rem; 
  margin-bottom: 20px;
}
.val-num{
  font-family:"Google Sans", sans-serif;
  font-size:100px;
  font-weight:700;
  color:var(--crema-oscuro);
  line-height:1;
  margin-bottom:8px;
  display:block;
}
.val-titulo{
  font-family:"Google Sans", sans-serif;
  font-size:25px;
  font-weight:600;
  color:var(--azul);margin-bottom:12px;
  display:block;
}
.val-texto{
  font-size:16px;
  line-height:1.8;
  color:var(--texto-suave);font-weight:300;
}

.val-grid-revista{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:24px;
  margin-top:48px;
}
.val-card-revista{
  background:rgba(232, 184, 109,0.2);
  border-radius:6px;
  padding:25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

.val-card-revista img{
  border-radius: 2px;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

/* Contenedor de los dos botones */
.val-card-botones {
  display: flex;
  gap: 10px; /* Espacio entre ambos botones */
  width: 100%;
}

.enlace-revista {
  flex: 1;
  display: flex;  
  text-decoration: none; 
}

.btn-revista {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-revista.principal {
  background-color: transparent;
  border: rgb(240,70,70) solid 2px;
  color: rgb(240, 70, 70);
}
.btn-revista.principal:hover {
  background-color: rgb(240,70,70);
  color: #fff;
}

/* Estilo para el botón secundario */
.btn-revista.secundario {
   background-color: transparent;
  border: rgb(240,70,70) solid 2px;
  color: rgb(240, 70, 70);
}
.btn-revista.secundario:hover {
  background-color: rgb(240,70,70);
  color: #fff;
}

.comunidad{background:var(--crema)}
.com-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;align-items:center;
  margin-top:48px;
}
.com-texto p{
  font-size:17px;line-height:1.85;
  color:var(--texto-suave);font-weight:300;
  margin-bottom:20px;
}
.com-texto p:last-child{margin-bottom:0}
.com-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.com-stat{
  background:var(--azul);
  border-radius:6px;padding:28px 24px;
  text-align:center;
}
.com-stat .n{
  font-family:'Playfair Display',serif;
  font-size:40px;font-weight:700;
  color:var(--dorado-claro);
  display:block;line-height:1;
}
.com-stat .l{
  font-size:12px;color:rgba(255,255,255,0.6);
  font-weight:300;margin-top:6px;
  display:block;letter-spacing:0.5px;
  text-transform:uppercase;
}
.cita{
  border-left:3px solid var(--dorado);
  padding-left:20px;
  font-size:25px;
  font-style:italic;
  color:var(--blanco);
  font-family:"Google Sans", sans-serif;
  font-weight:400;
  line-height:1.7;
}
.cita cite{
  display:block;
  margin-top:10px;
  font-size:15px;
  font-style:normal;
  font-family:'Source Serif 4',serif;
  color:var(--blanco);
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
}

.compromiso{
  background:var(--azul);
  position:relative;overflow:hidden;
}
.compromiso:before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 80% at 90% 50%, rgba(200,146,58,0.1) 0%, transparent 60%);
}
.past-grid{
  display:grid;
  grid-template-columns:5fr 4fr;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:1;
}
.past-texto .sec-titulo{
  color:var(--blanco)
}
.past-texto p{
  font-size:20px;
  line-height:1.85;
  color:rgba(255,255,255,1);
  font-weight:500;
  margin-bottom:20px;
}
.past-actividades{
  display:flex;flex-direction:column;gap:14px;
}
.past-act{
  background:rgba(255,255,255,0.2);
  border-radius:6px;padding:18px 20px;
  display:flex;align-items:flex-start;gap:14px;
  border-left:3px solid var(--dorado);
}
.past-act-icono{font-size:22px;flex-shrink:0;margin-top:2px}
.past-act-titulo{
  font-size:18px;
  font-weight:600;
  color:var(--blanco);
  font-family:"Google Sans", sans-serif;
  display:block;margin-bottom:4px;
}
.past-act-sub{
  font-size:17px;
  color:rgba(255,255,255,0.8);
  font-weight:300
}

.contacto{
  background:var(--blanco)
}
.cont-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:48px;
  align-items:start;
}
.cont-info .dato{
  display:flex;
  gap:25px;
  align-items:flex-start;
  margin-bottom:40px;
}
.dato-icono{
  width:50px;
  height:50px;
  flex-shrink:0;
  background:rgba(232, 184, 109,0.3);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:var(--dorado-claro);
}
.dato-tit{
  font-size:18px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--dorado);
  font-weight:600;
  display:block;
  margin-bottom:4px;
}
.dato-val{
  font-size:16px;
  color:var(--texto);
  font-weight:400;
  line-height:1.5;
}
.form-inscripcion{
  background:var(--azul);
  border-radius:8px;padding:36px 32px;
}
.form-inscripcion h3{
  font-family:'Playfair Display',serif;
  font-size:24px;font-weight:700;color:var(--blanco);
  margin-bottom:8px;
}
.form-inscripcion p{
  font-size:14px;color:rgba(255,255,255,0.6);
  font-weight:300;margin-bottom:28px;
  line-height:1.6;
}
.form-grupo{margin-bottom:18px}
.form-grupo label{
  display:block;font-size:12px;
  color:rgba(255,255,255,0.6);
  letter-spacing:1px;text-transform:uppercase;
  font-weight:600;margin-bottom:6px;
}
.form-grupo input,
.form-grupo select{
  width:100%;background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:4px;padding:12px 16px;
  color:var(--blanco);font-size:15px;
  font-family:'Source Serif 4',serif;
  font-weight:300;
  transition:border-color 0.2s;
  appearance:none;
}
.form-grupo select option{background:#1a3a5c;color:var(--blanco)}
.form-grupo input::placeholder{color:rgba(255,255,255,0.3)}
.form-grupo input:focus,
.form-grupo select:focus{
  outline:none;
  border-color:var(--dorado);
}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn-form{
  width:100%;
  background:var(--dorado);color:var(--azul);
  padding:15px;border-radius:4px;
  font-weight:600;font-size:16px;
  font-family:'Source Serif 4',serif;
  border:none;cursor:pointer;
  margin-top:8px;
  transition:background 0.2s;
}
.btn-form:hover{background:var(--dorado-claro)}

footer{
  background:var(--footer);
  border-top:3px solid var(--dorado);
  padding:40px 2rem 24px;
}
.foot-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.foot-logo{
  display:flex;
  align-items:center;
  justify-self: start;
  gap:12px;
  margin-bottom:16px;
}
.foot-logo img{
  width: 30px;
}
.foot-logo-txt{
  font-family:"Google Sans", sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--blanco);
  line-height:1.3;
}
.foot-desc{
  font-size:13px;color:rgba(255,255,255,0.5);
  font-weight:300;line-height:1.7;
}
.foot-col h4{
  font-size:16px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--dorado);
  font-weight:600;
  margin-bottom:16px;
  font-family:"Google Sans", sans-serif;
}
.foot-col ul{list-style:none}
.foot-col ul li{margin-bottom:10px}
.foot-col ul li a{
  font-size:14px;color:rgba(255,255,255,0.55);
  text-decoration:none;font-weight:300;
  transition:color 0.2s;
}
.foot-col ul li a:hover{color:var(--dorado-claro)}
.foot-copy{
  max-width:1100px;margin:24px auto 0;
  font-size:12px;color:rgba(255,255,255,0.35);
  text-align:center;font-weight:300;
}

@media(max-width:700px){
  .hist-grid,.com-grid,.past-grid,.cont-grid,.foot-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .hero-dato{padding:12px 20px}
  .hero-dato .num{font-size:28px}
  .form-grid-2{grid-template-columns:1fr}
  .com-stats{grid-template-columns:1fr 1fr}
}