/* =====================================
   RESET GENERAL
===================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial,sans-serif;
  scroll-behavior:smooth;
}

body{
  background:#f5efb5;
  color:#0b2b1a;
  overflow-x:hidden;
}


/* =====================================
   HERO
===================================== */

.hero{

  position:relative;

  overflow:hidden;

  min-height:100vh;

  padding:22px 6%;

}
/*=====================================
CANAL INSTITUCIONAL
======================================*/

.tv-live{

width:90%;
max-width:1200px;
margin:70px auto;

}

.tv-live h2{

text-align:center;
font-size:34px;
color:#0d6b36;
margin-bottom:25px;

}

.tv-contenedor{

background:#ffffff;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.15);
overflow:hidden;

}

.video-tv{

background:#111;
height:500px;
display:flex;
justify-content:center;
align-items:center;
color:#fff;

}

.offline{

text-align:center;
padding:40px;

}

.offline h3{

font-size:30px;
margin-bottom:15px;

}

.offline p{

font-size:18px;
color:#ddd;

}

.estado-tv{

display:flex;
justify-content:space-between;
padding:20px;
background:#f4f4f4;
font-weight:bold;

}

.estado{

color:#c62828;

}

.espectadores{

color:#0d6b36;

}

/* =====================================
   SLIDER HERO
===================================== */

.slider-hero{

  position:absolute;

  inset:0;

  z-index:1;

  overflow:hidden;

  background:#000;

}


/* =====================================
   SLIDES
===================================== */

.slide{

  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;

  opacity:0;

  animation:slider 15s infinite ease-in-out;

  transform:scale(1);

  filter:brightness(72%);

}


/* CAPA TRANSPARENTE */

.slide::before{

  content:"";

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.18);

  z-index:2;

}

/* =====================================
   IMAGENES
===================================== */

.slide1{
  background-image:url('portada.jpg');
  animation-delay:0s;
  z-index:3;
}

.slide2{
  background-image:url('portada1.jpg');
  animation-delay:5s;
  z-index:2;
}

.slide3{
  background-image:url('portada4.jpg');
  animation-delay:10s;
  z-index:1;
}


/* =====================================
   ANIMACION
===================================== */

@keyframes slider{

  0%{
    opacity:0;
    transform:scale(1);
  }

  5%{
    opacity:1;
  }

  28%{
    opacity:1;
    transform:scale(1.08);
  }

  33%{
    opacity:0;
  }

  100%{
    opacity:0;
  }

}


/* =====================================
   CONTENIDO ENCIMA
===================================== */

.nav,
.presentacion{

  position:relative;

  z-index:5;

}


/* =====================================
   NAVBAR
===================================== */

.nav{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  flex-wrap:wrap;

  padding:18px 25px;

  border-radius:25px;

  background:
  rgba(0,0,0,.45);

  backdrop-filter:blur(8px);

  -webkit-backdrop-filter:blur(8px);

  box-shadow:
  0 10px 25px rgba(0,0,0,.18);

}


/* =====================================
   MARCA
===================================== */

.marca{

  display:flex;

  align-items:center;

  gap:14px;

}

.marca img{
  width:60px;
}

.marca p{

  color:white;

  font-size:13px;

  font-weight:bold;

}

.marca h1{

  color:white;

  font-size:28px;

}


/* =====================================
   BOTONES
===================================== */

.boton{

  display:inline-block;

  padding:14px 26px;

  border-radius:40px;

  text-decoration:none;

  font-weight:bold;

  transition:.35s;

}

.boton:hover{

  transform:
  translateY(-4px)
  scale(1.03);

}


/* VERDE */

.verde{

  background:#008037;

  color:white;

  box-shadow:
  0 8px 20px rgba(0,128,55,.25);

}


/* AMARILLO */

.amarillo{

  background:#ffcc00;

  color:#001d13;

  box-shadow:
  0 10px 25px rgba(255,204,0,.30);

}


/* BORDE */

.borde{

  border:2px solid white;

  color:white;

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

}


/* =====================================
   PRESENTACION
===================================== */

.presentacion{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:70px;

  margin-top:90px;

  flex-wrap:wrap;

}


/* TEXTO */

.presentacion > div:first-child{

  max-width:680px;

}


/* TITULO */

.presentacion h2{

  font-size:
  clamp(52px,6vw,92px);

  line-height:.95;

  margin-bottom:20px;

  color:white;

  text-shadow:
  0 5px 20px rgba(0,0,0,.45);

}


/* TEXTO */

.presentacion p{

  font-size:20px;

  line-height:1.9;

  margin-bottom:25px;

  color:white;

  text-shadow:
  0 3px 10px rgba(0,0,0,.35);

}


/* ETIQUETA */

.etiqueta{

  display:inline-block;

  background:#ffcc00;

  color:#001d13;

  padding:12px 22px;

  border-radius:40px;

  margin-bottom:25px;

  font-weight:bold;

  box-shadow:
  0 10px 25px rgba(255,204,0,.30);

}


/* LINEA */

.linea-hero{

  width:120px;

  height:6px;

  background:#ffcc00;

  border-radius:20px;

  margin:22px 0;

}


/* ACCIONES */

.acciones{

  display:flex;

  gap:15px;

  flex-wrap:wrap;

}


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

.logo-grande{

  display:flex;

  justify-content:center;

  align-items:center;

}


/* ESCUDO */

.escudo{

  width:100%;

  max-width:420px;

  background:white;

  padding:25px;

  border-radius:40px;

  box-shadow:
  0 25px 60px rgba(0,0,0,.25);

  animation:
  flotar 4s ease-in-out infinite;

  transition:.4s;

}


.escudo:hover{

  transform:
  scale(1.03);

}


/* =====================================
   EFECTO FLOTAR
===================================== */

@keyframes flotar{

  0%{
    transform:
    translateY(0px);
  }

  25%{
    transform:
    translateY(-10px);
  }

  50%{
    transform:
    translateY(-18px);
  }

  75%{
    transform:
    translateY(-10px);
  }

  100%{
    transform:
    translateY(0px);
  }

}


/* =====================================
   REDES
===================================== */

.redes{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));

  gap:25px;

  margin:70px 6%;

}


/* TARJETAS */

.tarjeta-red{

  background:white;

  padding:30px;

  border-radius:30px;

  text-align:center;

  text-decoration:none;

  color:#0b2b1a;

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

  transition:.35s;

}


.tarjeta-red:hover{

  transform:translateY(-10px);

  box-shadow:
  0 20px 40px rgba(0,128,55,.18);

}


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

@media(max-width:1100px){

  .presentacion{

    flex-direction:column;

    text-align:center;

  }

  .acciones{

    justify-content:center;

  }

  .linea-hero{

    margin:auto;
    margin-top:25px;
    margin-bottom:25px;

  }

}


@media(max-width:768px){

  .presentacion h2{

    font-size:48px;

  }

  .escudo{

    max-width:300px;

  }

  .nav{

    flex-direction:column;

    gap:15px;

    text-align:center;

  }

}


@media(max-width:500px){

  .presentacion h2{

    font-size:40px;

  }

  .presentacion p{

    font-size:18px;

  }

  .boton{

    width:100%;

    text-align:center;

  }

}

/* =====================================
   SECCIONES PRINCIPALES
===================================== */

main{
  width:100%;
  max-width:1400px;
  margin:auto;
}

/* =====================================
   NOTICIAS
===================================== */

.noticias{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

  gap:30px;

  padding:80px 6%;

}

.noticias h2{

  grid-column:1/-1;

  text-align:center;

  font-size:42px;

  color:#0b2c4d;

  margin-bottom:20px;

}

.noticias article{

  background:white;

  padding:35px;

  border-radius:25px;

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

  transition:.3s;

}

.noticias article:hover{

  transform:
  translateY(-6px);

}

.noticias h3{

  font-size:28px;

  color:#0b2c4d;

  margin-bottom:18px;

}

.noticias p{

  font-size:18px;

  line-height:1.8;

  color:#444;

  margin-bottom:25px;

}

/* =====================================
   INFORMACIÓN INSTITUCIONAL
===================================== */

.info-colegio{

  padding:90px 6%;

  background:#ffffff;

}

.info-colegio h2{

  text-align:center;

  font-size:42px;

  color:#0b2c4d;

}

.linea-himno{

  width:120px;

  height:5px;

  background:#ffcc00;

  border-radius:20px;

  margin:20px auto 50px auto;

}

.info-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(350px,1fr));

  gap:35px;

}

.info-item{

  background:#f5f7fa;

  padding:40px;

  border-radius:25px;

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

  transition:.3s;

}

.info-item:hover{

  transform:
  translateY(-6px);

}

.info-item h3{

  font-size:30px;

  color:#0b2c4d;

  margin-bottom:20px;

}

.info-item p{

  line-height:1.9;

  color:#444;

  text-align:justify;

  font-size:18px;

}

/* =====================================
   HIMNO
===================================== */

.himno-colegio{

  padding:90px 6%;

  background:#f5f7fa;

  text-align:center;

}

.himno-colegio h2{

  font-size:42px;

  color:#0b2c4d;

}

.contenido-himno{

  max-width:900px;

  margin:auto;

  background:white;

  padding:50px;

  border-radius:25px;

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

}

.contenido-himno p{

  font-size:20px;

  line-height:2;

  margin-bottom:25px;

  color:#333;

}

.autor{

  margin-top:35px;

  font-weight:bold;

  color:#0b2c4d;

}

/* =====================================
   CONTACTO
===================================== */

.contacto{

  padding:80px 6%;

  background:white;

  text-align:center;

}

.contacto h2{

  font-size:40px;

  color:#0b2c4d;

  margin-bottom:40px;

}

.contacto-grid{

  display:flex;

  justify-content:center;

  align-items:center;

  flex-wrap:wrap;

  gap:20px;

}

.contacto-item{

  background:#ffcc00;

  padding:16px 28px;

  border-radius:40px;

  font-weight:bold;

  box-shadow:
  0 5px 15px rgba(0,0,0,.08);

}

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

@media(max-width:768px){

  .noticias h2,
  .info-colegio h2,
  .himno-colegio h2,
  .contacto h2{

    font-size:30px;

  }

  .noticias h3,
  .info-item h3{

    font-size:24px;

  }

  .contenido-himno{

    padding:30px 20px;

  }

}
/* =====================================
   NUEVA ESTRUCTURA
===================================== */

.contenedor-principal{
  max-width:1300px;
  margin:auto;
  padding:60px 20px;
}

/* REDES */

.redes-sociales{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
  margin-bottom:70px;
}

.card-red{
  background:white;
  padding:30px;
  border-radius:25px;
  text-align:center;
  text-decoration:none;
  color:#0b2b1a;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
  transition:.3s;
}

.card-red:hover{
  transform:translateY(-6px);
}

/* BLOQUES */

.bloque{
  margin-bottom:90px;
}

.bloque h2{
  text-align:center;
  font-size:42px;
  color:#0b2c4d;
  margin-bottom:45px;
}

/* GRID */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:30px;
}

/* CARDS */

.card{
  background:white;
  padding:35px;
  border-radius:25px;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.card h3{
  font-size:28px;
  margin-bottom:20px;
  color:#0b2c4d;
}

.card p{
  line-height:1.8;
  color:#444;
  margin-bottom:20px;
}

/* HIMNO */

.himno{
  text-align:center;
}

.himno-card{
  max-width:900px;
  margin:auto;
}

/* CONTACTO */

.contacto-grid{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

.contacto-item{
  background:#ffcc00;
  padding:16px 28px;
  border-radius:40px;
  font-weight:bold;
}

/* RESPONSIVE */

@media(max-width:768px){

  .bloque h2{
    font-size:30px;
  }

  .card h3{
    font-size:24px;
  }

}
/* =====================================
   EGRESADOS
===================================== */

.contenido-egresados{

  max-width:1200px;

  margin:auto;

  padding:80px 6%;

}

/* INTRO */

.intro-egresados{

  background:white;

  padding:45px;

  border-radius:25px;

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

  margin-bottom:50px;

  text-align:center;

}

.intro-egresados h2{

  font-size:42px;

  color:#0b2c4d;

  margin-bottom:20px;

}

.intro-egresados p{

  font-size:20px;

  line-height:1.9;

  color:#444;

}

/* SERVICIOS */

.servicios-egresados h2{

  text-align:center;

  font-size:40px;

  color:#0b2c4d;

  margin-bottom:45px;

}

/* GRID */

.cards-egresados{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(260px,1fr));

  gap:30px;

}

/* CARD */

.card-egresado{

  background:white;

  padding:35px;

  border-radius:25px;

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

  transition:.3s;

}

.card-egresado:hover{

  transform:
  translateY(-6px);

}

.card-egresado h3{

  color:#0b2c4d;

  margin-bottom:18px;

  font-size:24px;

}

.card-egresado p{

  line-height:1.8;

  color:#555;

}

/* RESPONSIVE */

@media(max-width:768px){

  .intro-egresados h2,
  .servicios-egresados h2{

    font-size:30px;

  }

}
/* =====================================
   TRANSPARENCIA DEL SLIDER
===================================== */

/* BOTÓN ADMINISTRADOR SIMAT */

.boton-admin-simat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;

    margin-top: 14px;
    padding: 14px 18px;

    background: #07562f;
    color: #ffffff;

    border: 2px solid #07562f;
    border-radius: 12px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    transition: .2s;
}

.boton-admin-simat:hover {
    background: #043d23;
    border-color: #043d23;

    transform: translateY(-1px);

    box-shadow:
        0 5px 15px rgba(7, 86, 47, .20);
}

.tv-live{
    background:red;
    color:white;
    padding:50px;
}