/* ===== RESET GENERAL ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  color: #333;
  background: #fff;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Estilos para títulos consistentes */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

main { padding-top: 0; }

/* ===== PERSONALIZACIÓN DE MENÚ SOLO PARA ESTA SECCIÓN ===== */
:root {
  --secondary: #1D428A;           /* Azul IPET */
  --secondary-dark: #13305e;
}

.nav-menu > ul > li > a:hover,
.nav-menu > ul > li > button:hover {
  color: var(--secondary);
  background-color: rgba(52,152,219,.08);
}

/* Submenú */
.submenu a:hover {
  color: var(--secondary);
  background-color: rgba(52,152,219,.08);
}

/* Menú en móvil */
@media (max-width: 931px) {
  .nav-menu { background-color: var(--secondary) !important; }

  .nav-menu > ul > li > a,
  .nav-menu > ul > li > button,
  .submenu a { color: #fff; }

  .nav-menu > ul > li > a:hover,
  .nav-menu > ul > li > button:hover,
  .submenu a:hover {
    background-color: var(--secondary-dark);
    color: #fff;
  }
}

/* Botón hamburguesa */
.nav-toggle { background-color: var(--secondary); color: #fff; }
.nav-toggle:hover { background-color: var(--secondary-dark); }

/* ===== HERO SECTION ===== */
.hero-section {
  position: relative;
  height: calc(10vh - 10px);
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)); /* sin imagen */
  color: #fff;
  text-align: center;
  padding: 0 2rem;
  margin-top: 4.2rem;
  overflow: hidden;
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(44,62,80,.8), rgba(52,152,219,.6));
  z-index: 1;
}

.hero-content {
  position: relative; z-index: 2;
  width: 90%; max-width: 800px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%;
  animation: fadeInUp 1s ease-out forwards .3s;
  opacity: 0; transform: translateY(20px);
}

.escudo { width: 80px; margin-bottom: 1rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); animation: fadeIn .8s ease-out forwards .5s; }

.hero-text h1 {
  font-weight: 600; font-size: 2.6rem; margin-bottom: .3rem;
  text-shadow: 0 2px 4px rgba(0,0,0,.3); line-height: 1.3; color: #fff;
}
.hero-text h1 span { color: #b0c7e8; position: relative; display: inline-block; }
.hero-text h1 span::after {
  content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px; background: #b0c7e8;
  transform: scaleX(0); transform-origin: right; animation: underlineExpand .8s ease-in-out forwards 1s;
}
.hero-text p { font-size: 1.2rem; color:#fff; opacity: 0; animation: fadeIn .8s ease-out forwards 1.2s; margin-top: .5rem; }
.hero-text p span { display:inline-block; opacity:0; transform: translateY(10px); }
.hero-text p span:nth-child(1){ animation: fadeInUpItem .6s ease-out forwards 1.4s; }
.hero-text p span:nth-child(2){ animation: fadeInUpItem .6s ease-out forwards 1.6s; }
.hero-text p span:nth-child(3){ animation: fadeInUpItem .6s ease-out forwards 1.8s; }

/* Keyframes */
@keyframes fadeInUp { to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { to { opacity:.9; } }
@keyframes fadeInUpItem { to { opacity:1; transform:translateY(0); } }
@keyframes underlineExpand { from{transform:scaleX(0);transform-origin:right;} to{transform:scaleX(1);transform-origin:left;} }

/* ===== CONTENT SECTIONS ===== */
.content-section {
  width: 100%;
  background: #fff;            /* ← sección “Nuestro Enfoque Educativo” en BLANCO */
  padding: 6rem 0;
}

/* Contenedor general centrado */
.main-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Asegurar fondo blanco dentro de Enfoque Educativo */
.content-section .main-content,
.content-section .content-article-nf,
.content-section .content-container,
.content-section .text-content,
.content-section .slider-container {
  background: #fff;
}

.content-article-nf {
  background:#fff; padding:0; margin-top:0; overflow:hidden; width:100%; box-sizing:border-box;
}

.article-title {
  margin-bottom: 1.5rem; font-size: 2.5rem; font-weight: 700;
  position: relative; padding-bottom: 1rem; text-align: center;
}
.article-title::after {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:100px; height:5px; background:#3498db; border-radius:3px;
}

/* ===== CONTENT CONTAINERS ===== */
.content-container{
  background:#fff;
  border-radius:20px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  overflow:hidden;
  margin-bottom:1.5rem;
  transition: transform .3s ease, box-shadow .3s ease;
  width:100%; box-sizing:border-box;
}
.content-container:hover { transform: translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.08); }

.content-wrapper { display:flex; flex-wrap:wrap; }

.slider-container { flex:1; min-width:300px; position:relative; overflow:hidden; }
.text-content { flex:1; min-width:300px; padding:1.5rem; display:flex; flex-direction:column; justify-content:center; text-align:left; }

.content-block { margin-bottom:1.5rem; }
.content-block h3{
  color:#2c3e50; font-size:1.6rem; margin-bottom:1rem; position:relative; padding-bottom:.8rem; text-align:left;
}
.content-block h3::after { content:''; position:absolute; bottom:0; left:0; width:60px; height:4px; background:#3498db; border-radius:3px; }
.content-block p { color:#4a5568; line-height:1.8; font-size:1.1rem; text-align:left; }

.stats-container{ display:flex; gap:2rem; margin-top:1.5rem; flex-wrap:wrap; }
.stat-item{
  background:#f8fafc; padding:1.2rem 1.8rem; border-radius:10px; border-left:4px solid #3498db; min-width:140px; transition: transform .3s ease; text-align:left;
}
.stat-item:hover{ transform: translateY(-3px); }
.stat-number{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:2rem; color:#2c3e50; line-height:1; }
.stat-label{ font-size:.9rem; color:#4a5568; margin-top:.5rem; }

/* Alternar */
.content-container.reverse .content-wrapper{ flex-direction: row-reverse; }

/* ===== SLIDER ===== */
.slider{ position:relative; width:100%; height:100%; overflow:hidden; min-height:280px; }
.slides{ display:flex; width:100%; height:100%; transition: transform .5s ease-in-out; }
.slide{ min-width:100%; height:100%; flex-shrink:0; position:relative; }
.slide img{ width:100%; height:100%; object-fit:cover; object-position:center; }

.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.5); color:#fff; border:none; padding:0; cursor:pointer;
  font-size:1.5rem; z-index:10; transition: all .3s ease; border-radius:50%;
  width:45px; height:45px; display:flex; align-items:center; justify-content:center;
  line-height:1; margin:0; opacity:.8;
}
.slider-nav:hover{ background:rgba(0,0,0,.8); opacity:1; }
.prev{ left:20px; } .next{ right:20px; }

.slider-dots{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; gap:12px; z-index:10;
}
.dot{ width:12px; height:12px; border-radius:50%; border:2px solid #fff; cursor:pointer; transition: all .3s ease; background:transparent; }
.dot.active{ background:#fff; transform:scale(1.3); }

/* ===== INFO CARDS ===== */
.info-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:2.5rem;
  margin:2rem 0;
  justify-items:center;
  padding:0 1rem;
  max-width:1200px;
  width:100%;
  box-sizing:border-box;
  margin-left:auto; margin-right:auto;
  background:#fff;                       /* asegura blanco en toda la banda */
}

.info-card{
  background:#fff;
  border-radius:12px;
  padding:1.5rem;
  box-shadow:0 5px 20px rgba(0,0,0,.05);
  transition: all .4s ease;
  border-top:4px solid #3498db;
  position:relative;
  overflow:hidden;
  text-align:center;
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center;
  min-height:350px;
  box-sizing:border-box;
}
.info-card:hover{ transform: translateY(-4px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.info-card::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(52,152,219,.1) 0%, rgba(255,255,255,0) 100%);
  z-index:0; opacity:0; transition: opacity .3s ease;
}
.info-card:hover::before{ opacity:1; }

.card-icon{ font-size:2.5rem; color:#3498db; margin-bottom:1.5rem; transition: transform .3s ease; position:relative; z-index:1; }
.info-card:hover .card-icon{ transform: scale(1.1); }
.info-card h3{ color:#2c3e50; font-size:1.5rem; margin-bottom:1.2rem; position:relative; z-index:1; width:100%; }
.info-card p{ color:#4a5568; line-height:1.8; margin-bottom:1.5rem; position:relative; z-index:1; font-size:1.05rem; width:100%; flex-grow:1; }

.card-link{ display:inline-flex; align-items:center; color:#3498db; font-weight:600; text-decoration:none; transition: all .3s ease; position:relative; z-index:1; }
.card-link i{ margin-left:.5rem; transition: transform .3s ease; }
.card-link:hover{ color:#2c3e50; }
.card-link:hover i{ transform: translateX(5px); }

/* ===== ACTIVITIES SECTION ===== */
/* El gris suave SOLO vive dentro de .activities-section */
.activities-section {
  width:100%;
  background:#f9faf8b2;
  padding:5rem 0;
}

.activities-section .main-content { background:#f9faf8b2; }
.section-title{
  font-family:'Montserrat',sans-serif; color:#2c3e50; text-align:center;
  margin:2rem 0 4rem; font-size:2.5rem; position:relative;
}
.section-title::after{
  content:''; display:block; width:100px; height:4px; background:#3498db;
  margin:1rem auto; border-radius:3px;
}

.content-article{ background:#f9faf8b2; margin-bottom:0; padding-bottom:0; }
.event-details{ background:#f9faf8b2; margin-bottom:0; }
.detail-header{ text-align:center; margin-bottom:3rem; background:#f9faf8b2; }

.detail-header h3{ color:#2c3e50; font-size:2rem; margin-bottom:.8rem; }
.detail-header .subtitle{ color:#4a5568; font-size:1.2rem; max-width:700px; margin:0 auto; line-height:1.6; }

.activities-section .content-container{
  background:#fff; border-radius:20px; box-shadow:0 4px 10px rgba(0,0,0,.04);
  overflow:hidden; margin-bottom:2rem; transition: transform .3s ease, box-shadow .3s ease;
}
.activities-section .content-wrapper{ display:flex; flex-wrap:wrap; background:#f9faf8b2; }
.activities-section .slider-container{ flex:1; min-width:300px; position:relative; overflow:hidden; background:#fff; }
.activities-section .text-content{ flex:1; min-width:300px; padding:1.5rem; display:flex; flex-direction:column; justify-content:center; text-align:left; background:#fff; }

.activities-section .content-block{ margin-bottom:1.5rem; }
.activities-section .content-block h3{
  color:#2c3e50; font-size:1.6rem; margin-bottom:1rem; position:relative; padding-bottom:.8rem; text-align:left;
}
.activities-section .content-block h3::after{ content:''; position:absolute; bottom:0; left:0; width:60px; height:4px; background:#3498db; border-radius:3px; }
.activities-section .content-block p{ color:#4a5568; line-height:1.8; font-size:1.1rem; text-align:left; }

.activities-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:2.5rem; margin:3rem 0; background:#f9faf8b2;
}
.activity-card{
  background:#fff; border-radius:12px; padding:2.5rem 2rem; box-shadow:0 4px 10px rgba(0,0,0,.04);
  transition: all .4s ease; text-align:center; border-bottom:4px solid #3498db;
}
.activity-card:hover{ transform: translateY(-8px); box-shadow:0 10px 25px rgba(0,0,0,.1); }
.activity-icon{ font-size:2.5rem; color:#3498db; margin-bottom:1.5rem; transition: transform .3s ease; }
.activity-card:hover .activity-icon{ transform: scale(1.2); }
.activity-card h4{ color:#2c3e50; font-size:1.4rem; margin-bottom:1.2rem; }
.activity-card p{ color:#4a5568; font-size:1rem; line-height:1.7; }

.highlight-box{
  background:#fff; border-radius:12px; padding:3rem; margin:4rem auto; max-width:800px;
  box-shadow:0 10px 30px rgba(0,0,0,.08); position:relative; border-left:5px solid #3498db;
}
.highlight-box p{ color:#2c3e50; font-size:1.2rem; line-height:1.8; font-style:italic; position:relative; padding:0 3rem; text-align:center; }
.quote-icon{ position:absolute; top:2rem; left:2rem; color:rgba(52,152,219,.2); font-size:4rem; }

/* ===== FOOTER ===== */
.footer{
  background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)), url('../imgnuevas/escuela/escuela3.jpg');
  background-size: cover; background-position: center 30%; background-repeat:no-repeat; background-attachment: fixed;
  color:#f8f8f8; padding:4.5rem 0; position:relative;
}
.footer-container{ max-width:1200px; margin:auto; padding:0 1.5rem; }
.footer-content{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; height:100%; text-align:center; }
.footer-brand{ display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; }
.footer-logo{ width:60px; filter: drop-shadow(2px 4px 6px #000); }
.footer-title{ font-size:1.8rem; font-weight:600; color:#fff; margin:0; text-shadow:0 2px 4px rgba(0,0,0,.3); }
.footer-slogan{ font-size:1rem; color:rgba(255,255,255,.8); margin:0; font-weight:300; }

.footer-social{ text-align:center; }
.social-title{ font-size:1.1rem; font-weight:500; margin-bottom:1rem; color:rgba(255,255,255,.9); }
.social-links{ display:flex; justify-content:center; gap:1.5rem; }
.social-link{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  color:rgba(255,255,255,.8); background-color:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2); border-radius:50%; transition: all .3s ease; text-decoration:none;
}
.social-link:hover{ background-color:rgba(255,255,255,.1); transform: translateY(-3px); }
.social-link:hover i.fa-facebook-f{ color:#1877f2; }
.social-link:hover i.fa-instagram{ color:#E1306C; }
.social-link:hover i.fa-youtube{ color:#FF0000; }

/* Responsive ajustes footer */
@media (min-width: 768px) {
  .footer-content{ flex-direction:row; align-items:center; justify-content:space-between; text-align:initial; }
  .footer-brand{ flex-direction:row; align-items:center; text-align:left; gap:1rem; }
  .footer-brand-info{ text-align:left; }
  .footer-social{ text-align:right; }
  .social-links{ justify-content:flex-end; }
  .footer-logo{ width:65px; }
  .footer-title{ font-size:2rem; }
  .footer-slogan{ font-size:1.1rem; }
}

/* Back to top */
.back-to-top{
  position:fixed; bottom:30px; right:30px; width:50px; height:50px; background:#1D428A; color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; cursor:pointer;
  opacity:0; visibility:hidden; transition: all .3s ease; z-index:999;
}
.back-to-top.active{ opacity:1; visibility:visible; }
.back-to-top:hover{ background:#13305e; transform: translateY(-3px); }
.back-to-top:hover i{ color:#fff; }

/* ===== MEDIA QUERIES ===== */
@media (max-width: 992px) {
  .flex-container { flex-direction:column; }
  .flex-container.reverse { flex-direction:column; }
  .slider-container { width:100%; max-width:100%; }
}

@media (max-width: 767px) {
  /* HERO SECTION */
  .hero-section{
    height:auto; min-height:400px; padding:3rem 1rem 2rem; text-align:center;
  }
  .hero-text h1{ font-size:1.8rem; }
  .hero-text p{ font-size:1rem; }
  .escudo{ width:70px; }

  /* Títulos y sliders */
  .article-title{ font-size:1.6rem; }
  .slider-common{ height:250px; }
  .section-title{ font-size:1.6rem; }
  .activity-list{ grid-template-columns:1fr; }

  /* Footer */
  .page-footer{ padding:1.5rem 1rem; }

  /* Navegación (si aplica) */
  .nav-list{ flex-direction:column; align-items:center; gap:1rem; }

  /* ==== GUTTER ÚNICO EN MOBILE ==== */
  .main-content{ padding-left:1rem; padding-right:1rem; }

  /* Hijos 100% sin márgenes laterales */
  .content-container,
  .activities-section .content-container,
  .info-cards{
    width:100%;
    margin-left:0;
    margin-right:0;
    box-sizing:border-box;
  }

  /* Texto interno con su padding propio */
  .text-content,
  .activities-section .text-content{
    padding-left:1.5rem;
    padding-right:1.5rem;
  }

  /* Info cards */
  .info-cards{
    grid-template-columns:1fr;
    gap:1.5rem;
    margin:2rem 0;          /* sin márgenes laterales extra */
    max-width:none;
    padding-left:0;
    padding-right:0;
    background:#fff;
  }

  .info-card{
    min-height:300px;
    padding:1.2rem;
    width:100%;
    box-sizing:border-box;
  }
}