*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Arial,sans-serif;background:#f8f1e7;color:#1f3550;overflow-x:hidden}
.top{
width:100%;
background:#fff;
}

.top img{
width:100%;
height:auto;
display:block;
object-fit:cover;
}.sidebar{position:fixed;left:-290px;top:0;width:285px;height:100vh;background:linear-gradient(180deg,#78d4ff,#f8f1e7);padding:25px;transition:.35s;z-index:1000;box-shadow:0 0 20px rgba(0,0,0,.15)}
.sidebar.open{left:0}
.sidebar a{display:block;margin:10px 0;padding:14px;background:#fff;border-radius:16px;text-decoration:none;color:#1f3550;font-weight:bold;transition:.25s}
.sidebar a:hover{transform:translateX(6px)}
header{background:linear-gradient(135deg,#bde9ff,#f8f1e7);padding:20px 30px;position:sticky;top:0;backdrop-filter:blur(8px);box-shadow:0 2px 15px rgba(0,0,0,.08)}
.row{display:flex;align-items:center;gap:15px}
.btn{border:none;background:#59c7f5;padding:14px 18px;border-radius:18px;font-size:20px;cursor:pointer;transition:.2s}
.btn:hover{transform:scale(1.05)}
.title{font-size:2rem;font-weight:700}
.hero{padding:20px 20px;text-align:center;animation:fade .8s ease}
.hero-card{max-width:1000px;margin:auto;background:rgba(255,255,255,.9);padding:50px;border-radius:35px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.hero-card h1{font-size:2.6rem}
.search{display:flex;gap:10px;max-width:800px;margin:25px auto}
.search input{flex:1;padding:18px;border-radius:40px;border:2px solid #d6d6d6}
.search button{padding:18px 28px;border:none;background:#59c7f5;border-radius:40px;font-weight:bold}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
padding:35px 0;
}
.card{
background:linear-gradient(135deg,#a1e1f7,#89caf8);
padding:35px 25px;
border-radius:30px;
text-align:center;
box-shadow:0 8px 25px rgba(0,0,0,.08);
transition:.35s;
border:2px solid transparent;
cursor:pointer;
}

.card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 15px 35px rgba(0,0,0,.15);
border-color:#59c7f5;
}

.card a{
display:block;
text-decoration:none;
font-size:1.2rem;
font-weight:bold;
color:#1f3550;
}

.card:hover a{
color:#3e32c5;
}
footer{margin-top:30px;background:linear-gradient(90deg,#59c7f5,#f8f1e7);padding:45px;text-align:center}
@keyframes fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.info-box{
margin-top:35px;
text-align:left;
padding:25px;
background:#ffffff;
border-radius:25px;
box-shadow:0 4px 12px rgba(0,0,0,.05)
}

.info-box h2{
font-size:1.8rem;
margin-bottom:15px;
color:#1f3550
}

.info-box p{
line-height:1.8;
margin-bottom:15px;
font-size:1.05rem
}

.objetivos{
padding-left:20px;
line-height:1.8
}

.objetivos li{
margin-bottom:15px;
font-size:1.03rem
}

.hero-card h1{
margin-bottom:20px;
color:#1f3550
}

.director-card{
display:flex;
align-items:center;
justify-content:center;
gap:40px;
flex-wrap:wrap;
margin-top:35px;
padding:35px;
background:linear-gradient(145deg,#ffffff,#eef8ff);
border-radius:30px;
box-shadow:0 10px 25px rgba(0,0,0,.08)
}

.director-img img{
width:240px;
height:240px;
object-fit:cover;
border-radius:25px;
border:6px solid #59c7f5;
box-shadow:0 8px 20px rgba(0,0,0,.12)
}

.director-info{
max-width:500px;
text-align:left
}

.director-info h2{
font-size:2rem;
margin-bottom:12px;
color:#1f3550
}

.cargo{
font-size:1.1rem;
font-weight:bold;
color:#3a6d8c;
margin-bottom:20px;
line-height:1.6
}

.director-data{
background:#fff;
padding:20px;
border-radius:20px;
box-shadow:0 4px 12px rgba(0,0,0,.05)
}

.director-data p{
margin:12px 0;
font-size:1rem;
line-height:1.6
}

@media(max-width:768px){
.director-card{
padding:25px
}

.director-img img{
width:190px;
height:190px
}

.director-info{
text-align:center
}
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:35px;
margin-top:35px;
align-items:stretch
}

.contact-info{
display:flex;
flex-direction:column;
gap:20px
}

.contact-item{
background:#fff;
padding:25px;
border-radius:25px;
box-shadow:0 5px 15px rgba(0,0,0,.06);
text-align:left;
transition:.25s
}

.contact-item:hover{
transform:translateY(-5px)
}

.contact-item h2{
margin-bottom:12px;
font-size:1.3rem;
color:#1f3550
}

.contact-item p{
line-height:1.8;
font-size:1rem;
color:#35506b
}

.map-box{
background:#fff;
padding:15px;
border-radius:30px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
overflow:hidden
}

.map-box iframe{
width:100%;
height:100%;
min-height:500px;
border:none;
border-radius:20px
}

@media(max-width:900px){

.contact-grid{
grid-template-columns:1fr
}

.map-box iframe{
min-height:350px
}

}
.zentlalpan-btn{
display:inline-block;
margin-top:20px;
padding:14px 25px;
background:#59c7f5;
color:#fff;
text-decoration:none;
font-weight:bold;
border-radius:20px;
transition:.3s;
box-shadow:0 4px 12px rgba(0,0,0,.1);
}

.zentlalpan-btn:hover{
background:#3fb8eb;
transform:translateY(-3px);
}

.map-box{
display:flex;
flex-direction:column;
align-items:center;
}

.hero-img{
width:100%;
max-height:500px;
object-fit:cover;
border-radius:25px;
margin-top:25px;
box-shadow:0 6px 20px rgba(0,0,0,.12);
}

.intro{
font-size:1.15rem;
line-height:1.8;
margin-top:20px;
color:#35506b;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
margin-top:25px;
}

.stat-card{
background:#fff;
padding:25px;
border-radius:25px;
text-align:center;
box-shadow:0 4px 15px rgba(0,0,0,.08);
transition:.3s;
}

.stat-card:hover{
transform:translateY(-5px);
}

.stat-card h3{
color:#1f3550;
margin-bottom:10px;
}

.stat-card p{
font-size:1.3rem;
font-weight:bold;
color:#59c7f5;
}
.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin:25px 0;
}

.gallery img{
width:100%;
height:250px;
object-fit:cover;
border-radius:20px;
box-shadow:0 4px 15px rgba(0,0,0,.1);
transition:.3s;
}

.gallery img:hover{
transform:scale(1.03);
}

.info-box{
max-width:1100px;
margin:30px auto;
background:#fff;
padding:35px;
border-radius:30px;
box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.info-box h2{
margin-bottom:20px;
color:#1f3550;
font-size:2rem;
}

.info-box h3{
margin-top:20px;
margin-bottom:10px;
color:#1f3550;
}

.info-box p{
line-height:1.8;
color:#35506b;
}
.info-box hr{
    margin:35px 0;
    border:none;
    border-top:2px solid #dbe7f2;
}

@media(max-width:768px){

.hero-img{
height:250px;
}

.section-img{
    display:block;
    width:100%;
    height:auto;
    max-width:700px;
    margin:20px auto;
    border-radius:12px;
}
.gallery img{
height:200px;
}

}

.stat-card{
padding:25px;
display:flex;
flex-direction:column;
justify-content:center;
}

.stat-card p{
font-size:1rem;
font-weight:normal;
line-height:1.7;
color:#35506b;
}

.info-box h3{
font-size:1.5rem;
color:#1f3550;
margin-bottom:15px;
border-left:5px solid #59c7f5;
padding-left:12px;
}
/* ===== GALERÍA DE ACTIVIDADES ECONÓMICAS ===== */

.economia-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
    margin:25px 0;
}

.economia-gallery img{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:20px;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    transition:.3s;
}

.economia-gallery img:hover{
    transform:scale(1.05);
}

@media(max-width:768px){

.economia-gallery{
    grid-template-columns:1fr;
}

.economia-gallery img{
    height:220px;
}

}
/* ===== PLANTILLA DOCENTE ===== */

.docentes-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
margin-top:35px;
}

.docente-card{
background:#fff;
border-radius:30px;
overflow:hidden;
box-shadow:0 6px 20px rgba(0,0,0,.08);
text-align:center;
transition:all .4s ease;
animation:aparecer .8s ease;
}

.docente-card:hover{
transform:translateY(-10px);
box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.docente-card img{
display:block;
width:100%;
height:320px;
object-fit:cover;
transition:transform .5s ease;
}

.docente-card:hover img{
transform:scale(1.05);
}

.docente-card h3{
margin:20px 15px 10px;
font-size:1.35rem;
color:#1f3550;
line-height:1.35;
transition:.3s;
word-break:break-word;
overflow-wrap:break-word;
hyphens:auto;
}

.docente-card:hover h3{
color:#59c7f5;
}

.grado{
padding:0 15px 20px;
font-weight:bold;
color:#59c7f5;
font-size:1rem;
text-wrap:balance;
}

.docente-card p{
padding:0 20px 20px;
line-height:1.7;
color:#35506b;
}

@keyframes aparecer{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@media(max-width:768px){

.docentes-grid{
grid-template-columns:1fr;
gap:20px;
}

.docente-card{
width:100%;
max-width:330px;
margin:auto;
}

.docente-card img{
height:300px;
}

.docente-card h3{
font-size:1.1rem;
}

.grado{
font-size:.95rem;
}

}

@media(min-width:1024px){

.docente-card img{
height:340px;
}

}

/* ===== AVANCE DE PLANES Y PROGRAMAS ===== */

.info-box ul{
margin-top:15px;
padding-left:22px;
}

.info-box li{
margin-bottom:10px;
line-height:1.6;
}

.info-box h3{
margin-top:15px;
}
/* ===== PRACTICAS DOCENTES ===== */

.practicas-docentes{
margin-top:40px;
}

.practicas-intro{
text-align:center;
font-size:1.1rem;
line-height:1.9;
margin-bottom:35px;
color:#35506b;
}

.practicas-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
margin:20px 0 30px;
}

.practica-card{
background:#fff;
padding:25px;
border-radius:20px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
transition:.3s;
text-align:left;
display:flex;
flex-direction:column;
height:100%;
}

.practica-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 30px rgba(0,0,0,.12);
}
.practica-card h3{
text-align:center;
margin-bottom:15px;
font-size:1.3rem;
color:#1f3550;
}
.practica-card p{
line-height:1.8;
color:#35506b;
}
.gallery-banner{
background:linear-gradient(135deg,#59c7f5,#c8efff);
padding:40px;
border-radius:30px;
text-align:center;
margin-bottom:40px;
}

.gallery-banner h1{
font-size:3rem;
margin-bottom:15px;
}

.gallery-banner p{
max-width:800px;
margin:auto;
line-height:1.8;
}

.gallery-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
margin-top:30px;
}

.gallery-stat{
background:#fff;
padding:20px;
border-radius:20px;
box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.gallery-stat h2{
font-size:2rem;
color:#59c7f5;
}

.gallery-section{
margin-top:50px;
}

.gallery-section h2{
margin-bottom:20px;
padding-left:15px;
border-left:6px solid #59c7f5;
text-align:left;
}

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

.gallery-item{
background:#fff;
padding:10px;
border-radius:25px;
overflow:hidden;
box-shadow:0 6px 20px rgba(0,0,0,.08);
transition:.3s;
}

.gallery-item:hover{
transform:translateY(-8px);
box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.gallery-item img{
width:100%;
height:260px;
object-fit:cover;
border-radius:18px;
transition:.4s;
}

.gallery-item:hover img{
transform:scale(1.05);
}

.gallery-desc{
    margin-top:12px;
    padding:0 15px 15px;
    text-align:center;
    font-size:.95rem;
    line-height:1.6;
    color:#35506b;
    font-style:italic;
}

.lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.92);
display:none;
justify-content:center;
align-items:center;
z-index:99999;
backdrop-filter:blur(8px);
animation:fadeIn .3s ease;
}

.lightbox.show{
display:flex;
}

.lightbox img{
max-width:95%;
max-height:90vh;
border-radius:20px;
box-shadow:0 0 40px rgba(255,255,255,.15);
animation:zoomIn .3s ease;
}

.close{
position:absolute;
top:20px;
right:30px;
font-size:55px;
color:white;
cursor:pointer;
font-weight:bold;
transition:.3s;
}

.close:hover{
transform:scale(1.2);
color:#59c7f5;
}

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

@keyframes fadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}
.historia-img{
width:100%;
max-width:1000px;
margin:25px auto;
display:block;
border-radius:25px;
box-shadow:0 8px 25px rgba(0,0,0,.15);
transition:.4s;
}

.historia-img:hover{
transform:scale(1.02);
}

.section-img{
width:100%;
max-width:1000px;
height:auto;
object-fit:cover;
display:block;
margin:30px auto;
border-radius:25px;
box-shadow:0 8px 25px rgba(0,0,0,.15);
}
@media(max-width:600px){
.section-img{
max-width:100%;
border-radius:15px;
}
}
@media(max-width:1024px){
.section-img{
max-width:90%;
}
}
.infraestructura-imgs{
    grid-column: 1 / -1;
    display:flex;
    gap:20px;
    margin-top:10px;
}

.infraestructura-imgs img{
    width:50%;
    height:400px;
    object-fit:cover;
    border-radius:20px;
    box-shadow:0 6px 20px rgba(0,0,0,.15);
    transition:.3s;
}

.infraestructura-imgs img:hover{
    transform:scale(1.03);
}

.oferta-img{
width:100%;
max-width:850px;
display:block;
margin:25px auto;
border-radius:20px;
box-shadow:0 6px 18px rgba(0,0,0,.15);
}

.taller-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:20px;
}

.taller-card{
background:#fff;
padding:20px;
border-radius:18px;
box-shadow:0 4px 12px rgba(0,0,0,.08);
transition:.3s;
}

.taller-card:hover{
transform:translateY(-5px);
}

.taller-card h3{
margin-bottom:10px;
color:#0c4a6e;
}

.img-pequena{
    width:50%;
    max-width:450px;
    display:block;
    margin:20px auto;
    border-radius:15px;
    box-shadow:0 6px 15px rgba(0,0,0,.15);
}

@media(max-width:768px){

.infraestructura-imgs{
flex-direction:column;
}

.infraestructura-imgs img{
width:100%;
height:220px;
}
}
.destacado-box{
background:#eef8ff;
padding:25px;
margin:25px 0;
border-left:6px solid #59c7f5;
border-radius:20px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.destacado-box h3{
margin-bottom:15px;
color:#1f3550;
font-size:1.5rem;
}

.destacado-box p{
line-height:1.8;
color:#35506b;
}
@media (max-width: 768px){

.info-box,
.campo-card,
.practica-card,
.meta-box,
.destacado-box{
    padding:15px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size:0.95rem;
}

.info-box p,
.campo-card p,
.practica-card p{
    font-size:0.95rem;
    line-height:1.6;
}

}
.titulo-seccion{
text-align:center;
font-size:2rem;
margin-top:40px;
color:#1f3550;
}

.subtitulo-seccion{
text-align:center;
margin-bottom:20px;
color:#35506b;
line-height:1.6;
}

.news-section{
  padding:20px;
}

.news-card{
  max-width:1100px;
  margin:auto;
  padding:20px;
}

.news-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:15px 0;
}

.news-tabs button{
  padding:8px 14px;
  border:none;
  border-radius:20px;
  background:#1f3550;
  color:white;
  cursor:pointer;
}

.news-tabs button:hover{
  background:#3b5b8a;
}

/* GRID */
.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:15px;
}

/* CARD */
.news-item{
  background:white;
  border-radius:12px;
  padding:15px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  border-left:6px solid #1f3550;
}

.news-item h3{
  margin-bottom:8px;
}

.news-item small{
  color:gray;
}

.news-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:10px;
  font-size:12px;
  margin-bottom:8px;
  background:#eee;
}