/* ==================== Global ==================== */
/* ===== Vars base y helpers ===== */
:root{
  --nav-h: 64px;
  --brand: #083f3a;
  --accent: #F58A08;
  --ink: #111;
  --bg: #f7f7f7;
  --card: #fff;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-heading: "Oswald", "Montserrat", sans-serif;
  --font-alt: "Montserrat", system-ui, sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h);}
* { box-sizing: border-box; margin: 0; padding: 0; }
body{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  text-transform: none; /* evita mayúsculas forzadas en todo el sitio */
  color: #111;
}
  

/* Títulos */
h1, h2, h3, .h1, .h2{
  font-family: var(--font-heading);
  letter-spacing: .01em;
  text-transform: none; /* solo mayúsculas donde lo pidas */
}

/* Jerarquía y peso sugerido */
h1, .h1{ font-weight: 700; }
h2, .h2{ font-weight: 600; }
/* Header/Nav */
header { position: relative; z-index: 1000; background: var(--brand); height: 60px; }
nav {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1200px; margin: 0 auto; height: 100%; padding: 0 12px;
}
#logo img { height: 48px; }
nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li { position: relative; padding: 0 12px; }
nav ul li a {
  color: #fff; line-height: 60px; text-decoration: none; font-family: var(--font-sans);font-weight: 600;
}
nav ul li:hover > a { color: var(--accent); }
nav ul li ul {
  display: none; position: absolute; top: 100%; left: 0; background: var(--brand);
  min-width: 200px; z-index: 20;
}
nav ul li:hover > ul { display: block; }
nav ul li ul li a { line-height: 44px; padding: 0 16px; }
.hamburguesa { display: none; position: relative; z-index: 1030; font-size: 1.6rem; color: white; cursor: pointer; }
@media (max-width: 768px) {
  .hamburguesa { display: block; z-index: 30; }
  nav ul { display: none; flex-direction: column; position: fixed; top: 60px; left: 0; right: 0;width: 100%; background: var(--brand);  overflow: hidden;
    max-height: 0;
    transition: max-height .28s ease;}
  nav ul.show { max-height: 80vh; }
  nav ul li { text-align: center; padding: 10px 0; }
}
/* Hero */
.hero { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); }
.hero .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.4), transparent); }
.hero .content { position: relative; z-index: 1; text-align: center; color: #fff; padding: 0 20px; }
.hero h1 { font-family: var(--font-heading); font-size: clamp(28px, 5vw, 48px); font-weight: 700; }
.hero .lead { font-size: 18px; margin: 20px 0; }
.btn { display: inline-block; padding: 12px 20px; border-radius: 30px; text-decoration: none; font-weight: 700; }
.btn-primary { background: var(--accent); color: #111; }
.btn, .btn-primary{
  font-family: var(--font-sans);
  letter-spacing: .01em;
}

.btn-ghost { border: 1px solid #fff; color: #fff; }
.btn-bt { color: #fff; background: #083f3a;  }
/* Slider base: ahora más ancho y adaptable */
.slider{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  /* más ancho: hasta 1280px y algo de respiro lateral */
  width: min(100%, 1280px);
  margin: clamp(20px, 5vw, 48px) auto;
  background: #000; /* evita “fondo blanco” al cargar imágenes */
}

/* variante “full-bleed” opcional (ocupa de orilla a orilla) */
.slider.is-full { width: 100%; border-radius: 0; }

/* relación de aspecto más cinematográfica en desktop, 16:9 en móviles */
.slide { min-width: 100%; aspect-ratio: 21 / 9; }
@media (max-width: 768px){
  .slide { aspect-ratio: 16 / 9; }
}

.slider .track{
  display: flex;
  transition: transform .6s ease;
  will-change: transform; /* rendimiento */
}
.slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.95); /* un pelín más de contraste */
}

/* Flechas: más visibles y con “hit area” mayor */
.slider .nav{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none; /* para que solo los botones capten eventos */
  padding-inline: clamp(6px, 2vw, 16px);
}
.slider .nav button{
  pointer-events: auto;
  background: rgba(0,0,0,.35);
  border: 0;
  color: #fff;
  font-size: clamp(18px, 2.4vw, 28px);
  padding: clamp(6px, 1.2vw, 12px) clamp(8px, 1.6vw, 14px);
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.slider .nav button:hover{ background: rgba(0,0,0,.5); transform: translateY(-1px); }
.slider .nav button:active{ transform: translateY(0); }

/* Dots: más grandes y con estado activo claro */
.slider .dots{
  position: absolute; left: 0; right: 0; bottom: clamp(6px, 2vw, 16px);
  display: flex; gap: 10px; justify-content: center;
}
.slider .dots button{
  width: 10px; height: 10px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.slider .dots button.active{
  width: 26px;
  background: var(--accent, #F58A08);
}

/* Accesibilidad (enfoque visible) */
.slider .nav button:focus-visible,
.slider .dots button:focus-visible{
  outline: 3px solid var(--accent, #F58A08);
  outline-offset: 2px;
}

/* Testimonios */
.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 20px; margin-top: 20px; }
.tcard { background: var(--card); border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,.1); }
.tcard .quote {  font-family: var(--font-heading);font-size: 40px; color: var(--brand); }
.tcard p { font-style: italic; }
.tcard .user { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.tcard img { border-radius: 50%; width: 50px; height: 50px; object-fit: cover; }
.tcard .meta { font-size: 12px; color: #555; }
/* Noticias */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 20px; margin-top: 20px; }
.card { background: var(--card); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,.1); display: flex; flex-direction: column; }
.card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card h3 { font-family: var(--font-heading); margin: 10px; }
.card p { margin: 0 10px 10px; flex-grow: 1; }
.card .meta { font-size: 12px; color: #555; margin: 0 10px 10px; }
/* Mosaico */
.container-mosaico { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.element { position: relative; flex: 1 1 calc(33% - 10px); cursor: pointer; overflow: hidden; border-radius: 8px; }
.element img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; background: rgba(0,0,0,.1); transition: background .3s; }
.element:hover .overlay { background: rgba(0,0,0,.3); }
@media(max-width:768px){ .element { flex:1 1 100%; } }
/**Click mouse */
/* ===== Icono de click centrado ===== */
.click-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  color: #fff;
  opacity: 0.85;
  pointer-events: none; /* no bloquea el click */
  animation: pulse 1.6s infinite;
}

/* Animación tipo pulso */
@keyframes pulse {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: .9; }
  50%  { transform: translate(-50%, -50%) scale(1.2); opacity: .6; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: .9; }
}

/* Al pasar el mouse: brilla más */
.element:hover .click-icon {
  color: var(--accent, #083f3a);
  opacity: 1;
}


/* Footer */
.site-footer { background: #0a2623; color: #d3e5e3; padding: 40px 20px; }
.site-footer .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 20px; }
.site-footer h4 { color: var(--accent); margin-bottom: 10px; }
.site-footer a { color: #cfe7e4; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .copyright { text-align: center; margin-top: 20px; font-size: 14px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 10px; }
/* Modal PDF */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; z-index: 9999; }
.modal[aria-hidden="false"] { display: flex; }
.modal .dialog { background: #fff; width: 90%; max-width: 900px; height: 80vh; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.modal header { background: var(--brand); color: #fff; padding: 10px; display: flex; justify-content: space-between; align-items: center; }
.modal iframe { flex: 1; border: none; }
.modal .close { background: var(--accent); border: none; padding: 6px 12px; color: #111; border-radius: 6px; cursor: pointer; }
/* ====== Conócenos (Misión y Visión) – Fix centrado + responsive ====== */

/* Si ya tienes .container definida, puedes omitir este bloque.
   Lo dejo por si no existiera en tu CSS actual. */
.container {
  max-width: 1200px;
  margin-inline: auto;    /* centra el contenido */
  padding-inline: 16px;   /* respira en laterales */
}

/* Espaciado vertical de secciones (si te falta) */
.section { padding-block: clamp(40px, 6vw, 72px); }
/* ===== Identidad (sección con fondo) ===== */
.identidad__header{
  height:100px;
  width:0 autoso
}

.identidad-hero, .identidad-wrap,.oferta-educativa{
  position: relative;
  padding-block: clamp(36px, 6vw, 80px);
  /* usa tu imagen con espacios escapados; cambia la ruta si la mueves */
  background: url("assets/images/identidad/verde.png") center/cover no-repeat;
  isolation: isolate; /* para el overlay */
}
.oferta-educativa{
  position: relative;
  padding-block: clamp(36px, 6vw, 80px);
  /* usa tu imagen con espacios escapados; cambia la ruta si la mueves */
  background: url("assets/images/identidad/verde-inverso.png") center/cover no-repeat;
  isolation: isolate; /* para el overlay */
}


.identidad-hero::before,.identidad-wrap::before,.oferta-educativa::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.76) 40%, rgba(255,255,255,.8) 100%);
  z-index:-1; /* suaviza el fondo para mejorar legibilidad */
}

/* Intro centrada */
#identidad .intro{
  text-align:center;
  max-width: 900px;
  margin-inline: auto;
}
#identidad .intro .h2{ margin-bottom: 8px; }
#identidad .intro p{ margin: 0 auto 10px; color:#2a2a2a; }

/* Grid responsive */
.mv-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: clamp(16px, 3vw, 28px);
  margin-top: 22px;
}

/* Tarjetas */
.mv-card{
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  padding: clamp(16px, 2.4vw, 22px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mv-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.10); }

.mv-title{
  font-family: var(--font-heading, Oswald, sans-serif);
  color: var(--brand, #083f3a);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin: 0 0 8px;
  text-align: center;
}
.mv-card p{
  margin: 0;
  color: #28978e;
  line-height: 1.65;
  text-align: center;
  font-size: 20px;
  font-weight: 200;
}

/* Detalle sutil en desktop para emular “tarjeta con imagen” */
@media (min-width: 900px){
  .mv-card{
    background:
      linear-gradient(180deg, rgba(255,255,255,.0) 55%, rgba(8,63,58,.06) 100%),
      #fff;
  }
}

/* Respeto a reduce motion */
@media (prefers-reduced-motion: reduce){
  .mv-card{ transition: none; }
}


/* ===== Facebook centrado + ancho ===== */
#facebook .container {
  max-width: 640px;   /* margen de respiro */
  margin-inline: auto;
  text-align: center;
}

.fb-wrap {
  margin-inline: auto;
  max-width: 600px;   /* ancho límite */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  background: #fff;
  display: inline-block;
  width: 100%;        /* se ajusta hasta 600px */
}

/* Solo en móvil: scroll horizontal opcional */
@media (max-width: 600px){
  .fb-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 6px;
  }
  .fb-track { scroll-snap-align: center; }
  .fb-scroller::-webkit-scrollbar { height: 6px; }
  .fb-scroller::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.25);
    border-radius: 99px;
  }
}


/* Breakpoints finos */
@media (max-width: 768px) {
  #identidad > .container > p { font-size: 15.5px; }
}
@media (max-width: 480px) {
  .card-mv .body { padding: 14px 16px 18px; }
}
/* ===== Slider de Testimonios: multivista (1/2/3 por vista) ===== */
.t-slider{
  position: relative;
  overflow: hidden;
  width: min(100%, 1100px);
  margin: 24px auto 0;
  border-radius: 14px;
}
.t-track{
  display: flex;
  transition: transform .6s ease;
  will-change: transform;
}

/* base tcard se mantiene */
.t-slide{ padding: clamp(14px, 2.4vw, 20px); }
.tcard{
  background: var(--card, #fff);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.tcard .quote{ font-size: clamp(36px, 5vw, 48px); color: var(--brand, #083f3a); line-height: 1; }
.tcard p{ font-style: italic; margin: 8px 0 12px; }
.tcard .user{ display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.tcard .user img{ width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }

/* Flechas y dots (igual que antes) */
.t-nav{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; padding-inline:8px; }
.t-nav button{ pointer-events:auto; background:rgba(0,0,0,.28); border:0; color:#fff; font-size:22px; padding:8px 12px; border-radius:10px; cursor:pointer; transition:background .2s, transform .2s; }
.t-nav button:hover{ background:rgba(0,0,0,.45); transform:translateY(-1px); }
.t-dots{ display:flex; justify-content:center; gap:8px; margin-top:10px; }
.t-dots button{ width:8px; height:8px; border-radius:999px; border:0; background:rgba(0,0,0,.25); cursor:pointer; transition: width .2s, background .2s; }
.t-dots button.active{ width:22px; background: var(--accent, #F58A08); }
.t-nav button:focus-visible, .t-dots button:focus-visible{ outline:3px solid var(--accent, #F58A08); outline-offset:2px; }

/* Anchos por vista: controlados por clase en .t-slider */
.t-slider.per-1 .t-slide{ min-width: 100%; }
.t-slider.per-2 .t-slide{ min-width: 50%; }
.t-slider.per-3 .t-slide{ min-width: 33.3334%; }

/* Gutters visuales sin romper el cálculo */
.t-slider .t-slide{ box-sizing: border-box; }

/* Ajustes responsivos: JS aplica .per-1/.per-2/.per-3, pero este fallback ayuda */
@media (max-width: 599px){ .t-slider:not(.per-2):not(.per-3) .t-slide{ min-width:100%; } }
@media (min-width: 600px) and (max-width: 1023px){ .t-slider:not(.per-1):not(.per-3) .t-slide{ min-width:50%; } }
@media (min-width: 1024px){ .t-slider:not(.per-1):not(.per-2) .t-slide{ min-width:33.3334%; } }