/* =========================================================
   CEFOPEC — Centro de Formación Profesional de Educación Continua
   Paleta extraída directamente del logotipo oficial:
   Navy  #023979   Cyan  #0EA3D0   Blanco #FFFFFF
   ========================================================= */

:root{
  --navy: #023979;
  --navy-dark: #012450;
  --navy-darker: #011733;
  --cyan: #0EA3D0;
  --cyan-light: #4FC3E8;
  --cyan-dark: #0B84AA;
  --white: #FFFFFF;
  --off-white: #F5F9FC;
  --gray-100: #EEF2F6;
  --gray-300: #C9D4DE;
  --gray-600: #5B6B7A;
  --text: #172436;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-brand: 'Archivo Black', 'Poppins', Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(2,57,121,.12);
  --shadow-lg: 0 20px 50px rgba(2,57,121,.18);
  --container: 1200px;
  --header-h: 92px;
}

*,*::before,*::after{ box-sizing:border-box; }
/* El sitio nunca debe permitir desplazamiento horizontal de la página
   completa (sensación de "app", no de página web que se puede arrastrar
   de lado a lado). overflow-x:hidden en html Y body es la red de
   seguridad: aunque algún elemento (ej. un panel de menú fuera de
   pantalla, un carrusel, un ajuste futuro) se desborde por error del
   ancho del viewport, el navegador jamás habilita el scroll/rebote
   horizontal de toda la página — solo bloquea el desplazamiento lateral
   del documento, no afecta el scroll vertical normal ni los carruseles
   internos que sí deben poder deslizarse de lado (ésos ya declaran su
   propio overflow-x:auto en su contenedor). overscroll-behavior-x:none
   evita además el "rebote" lateral que algunos navegadores móviles
   muestran al llegar al borde. width:100% + max-width:100% evita que el
   documento se ensanche más allá del viewport aunque scrollWidth lo
   calcule mayor por algún hijo transformado fuera de pantalla. */
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  width:100%;
  max-width:100%;
}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  width:100%;
  max-width:100%;
  position:relative;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.2; color:var(--navy); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
.icon{ width:18px; height:18px; fill:currentColor; flex-shrink:0; }
.brand-font{ font-family:var(--font-brand); font-weight:400; letter-spacing:.01em; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.section{ padding:96px 0; }
.section-tag{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cyan-dark);
  background:rgba(14,163,208,.1);
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:16px;
}
.section-tag.light{ color:var(--cyan-light); background:rgba(255,255,255,.12); }
/* Separador entre la cuadrícula de fotos del Cuerpo Administrativo y el
   organigrama que la sigue: centra el mismo pill de .section-tag como un
   pequeño título de subsección. */
.orgchart-label{
  text-align:center;
  margin:48px 0 32px;
}
.orgchart-label .section-tag{ margin-bottom:0; }
.section-head{ max-width:680px; margin-bottom:56px; }
.section-head h2{ font-size:2.1rem; margin-bottom:14px; }
.section-head p{ color:var(--gray-600); font-size:1.05rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:2px solid transparent;
  transition:all .25s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--navy); color:var(--white); }
.btn-primary:hover{ background:var(--navy-dark); transform:translateY(-2px); }
.btn-outline{ border-color:var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:var(--white); }
.btn-outline-navy{ border-color:var(--navy); color:var(--navy); padding:8px 18px; font-size:.85rem; }
.btn-outline-navy:hover{ background:var(--navy); color:var(--white); }
.btn-cyan{ background:var(--cyan); color:var(--white); }
.btn-cyan:hover{ background:var(--cyan-dark); transform:translateY(-2px); }
.btn-white-outline{ border-color:rgba(255,255,255,.7); color:var(--white); }
.btn-white-outline:hover{ background:var(--white); color:var(--navy); }
.btn-white-solid{ background:var(--white); color:var(--navy); }
.btn-white-solid:hover{ background:var(--navy-darker); color:var(--white); }
.btn-lg{ padding:16px 34px; font-size:1rem; }
.btn-sm{ padding:8px 16px; font-size:.8rem; }
.btn-block{ width:100%; }

/* ---------- Topbar ---------- */
.topbar{
  background:var(--navy-darker);
  color:var(--gray-300);
  font-size:.82rem;
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:40px;
}
.topbar-contact{ display:flex; gap:24px; }
.topbar-contact a, .topbar-social a{ display:flex; align-items:center; gap:6px; color:var(--gray-300); }
.topbar-contact a:hover, .topbar-social a:hover{ color:var(--cyan-light); }
.topbar-contact .icon{ width:14px; height:14px; }
.topbar-social{ display:flex; gap:14px; }
.topbar-social .icon{ width:15px; height:15px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:500;
  background:var(--white);
  box-shadow:0 2px 18px rgba(2,57,121,.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:var(--header-h);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ width:56px; height:56px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-weight:800; letter-spacing:.03em; font-size:1.3rem; color:var(--navy); text-transform:uppercase; }
.brand-sub{ font-size:.66rem; color:var(--gray-600); max-width:220px; text-transform:none; }

.main-nav{ flex:1; display:flex; justify-content:center; }
.main-nav > ul{ display:flex; align-items:center; justify-content:center; gap:32px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:block;
  padding:14px 4px;
  font-weight:600;
  font-size:.92rem;
  color:var(--text);
  border-radius:var(--radius-sm);
  transition:color .2s;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.main-nav > ul > li > a:hover{ color:var(--cyan-dark); }
.main-nav > ul > li.has-dropdown > a{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.has-dropdown > a::after{
  content:'';
  display:inline-block;
  width:6px; height:6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  flex-shrink:0;
}
.dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  background:var(--white);
  min-width:220px;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:all .2s ease;
}
/* El desplegable por :hover queda restringido a dispositivos con puntero
   fino (ratón). En táctil el submenú se abre con .submenu-toggle y la clase
   .open (ver js/menu.js), para que ambos comportamientos no se pisen. */
@media (hover:hover) and (pointer:fine){
  .has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
}
.dropdown li a{
  display:block;
  padding:10px 14px;
  font-size:.88rem;
  border-radius:6px;
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.dropdown li a:hover{ background:var(--off-white); color:var(--cyan-dark); }

.header-cta{ display:flex; gap:10px; align-items:center; }
.header-cta .btn{ padding:11px 20px; font-size:.85rem; text-transform:uppercase; letter-spacing:.02em; }

/* Botón verde de WhatsApp: mismo lenguaje visual que el resto de .btn
   (radio, tipografía, padding), solo cambia el color de fondo. Se usa en
   el menú móvil (.main-nav-actions) junto a Portal Académico e Inscríbete. */
.btn-whatsapp{ background:#25D366; color:var(--white); }
.btn-whatsapp:hover{ background:#1DA851; transform:translateY(-2px); }

/* Los 3 botones de acción (Portal Académico, Inscríbete Ahora, WhatsApp
   Directo) que en escritorio viven en .header-cta, junto al menú. En
   escritorio .header-cta ya los muestra, así que este bloque permanece
   oculto; en el menú móvil a pantalla completa (@media max-width:900px
   más abajo) .header-cta se oculta y este bloque pasa a mostrarse dentro
   del propio menú, anclado abajo, para que esos 3 accesos no desaparezcan
   en la versión responsive. */
.main-nav-actions{ display:none; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px; height:40px;
  background:none; border:none;
  padding:0;
}
.nav-toggle span{ width:100%; height:2px; background:var(--navy); border-radius:2px; transition:all .25s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Botón/toggle táctil de submenús (Nosotros, Oferta Académica).
   En escritorio está oculto: allí el submenú lo abre :hover. Se muestra en
   móvil (<=900px) y en cualquier dispositivo sin hover, donde es el único
   control accesible del submenú (aria-expanded + aria-controls). */
.submenu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;          /* área táctil mínima recomendada */
  background:none; border:none; padding:0;
  color:var(--text);
  cursor:pointer;
  flex-shrink:0;
}
.submenu-toggle-icon{
  width:8px; height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .25s ease;
}
.has-dropdown.open .submenu-toggle-icon{ transform:rotate(-135deg); }

/* Tablets/táctiles anchos (>900px): el panel móvil no aplica, pero tampoco
   existe :hover, así que el toggle debe seguir visible y el submenú
   desplegarse con .open. */
@media (hover:none){
  .submenu-toggle{ display:inline-flex; }
  .has-dropdown > a::after{ display:none; }
  .has-dropdown.open > .dropdown,
  .has-dropdown.open > .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
}
@media (hover:none) and (min-width:901px){
  .main-nav > ul > li.has-dropdown{ display:flex; align-items:center; }
  .submenu-toggle{ width:32px; height:32px; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  color:var(--white);
  padding:110px 0 90px;
  min-height:640px;
  display:flex;
  align-items:center;
}
.hero-bg{
  position:absolute; inset:0;
  overflow:hidden;
  background:linear-gradient(135deg, var(--navy-darker) 0%, var(--navy) 55%, var(--navy-dark) 100%);
  z-index:0;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-bg::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 20%, rgba(14,163,208,.55), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(14,163,208,.35), transparent 50%),
    linear-gradient(135deg, rgba(1,23,51,.82) 0%, rgba(2,57,121,.78) 55%, rgba(1,36,80,.85) 100%);
  z-index:1;
}
.hero-bg::after{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 70% 30%, black, transparent 70%);
  z-index:2;
}
.hero-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:40px;
}
.eyebrow{
  display:inline-block;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  padding:7px 18px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.03em;
  margin-bottom:22px;
}
.hero h1{
  color:var(--white);
  font-size:3rem;
  line-height:1.15;
  margin-bottom:22px;
  max-width:620px;
}
.hero h1 span{ color:var(--cyan-light); }
.hero-slogan{
  font-size:1.15rem;
  font-weight:600;
  font-style:italic;
  color:var(--cyan-light);
  margin-bottom:16px;
  letter-spacing:.01em;
}
.hero p{
  font-size:1.1rem;
  color:rgba(255,255,255,.85);
  max-width:540px;
  margin-bottom:34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats{ display:flex; gap:44px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.stat-num{ font-size:2.1rem; font-weight:800; color:var(--white); }
.stat-label{ font-size:.82rem; color:rgba(255,255,255,.7); }

.hero-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.hero-badge::before{
  content:'';
  position:absolute;
  width:380px; height:380px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
}
.hero-logo{
  width:min(260px, 100%);
  height:auto;
  /* La sombra anterior (negro al 35%) casi no se notaba porque el fondo
     del hero ya es azul marino oscuro. Se usan dos drop-shadow apiladas,
     bastante más oscuras y opacas que antes (negro al 65-75%) — una
     cerrada pegada al escudo y otra más ancha y difusa debajo — para que
     el halo se note claramente incluso sobre el degradado navy/cyan del
     fondo, en vez de perderse en él. */
  filter:
    drop-shadow(0 8px 14px rgba(0,0,0,.75))
    drop-shadow(0 26px 40px rgba(0,0,0,.65));
  animation:float 5s ease-in-out infinite;
  position:relative;
}
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-16px);} }

.scroll-down{
  position:absolute;
  bottom:26px; left:50%;
  transform:translateX(-50%);
  width:28px; height:44px;
  border:2px solid rgba(255,255,255,.5);
  border-radius:20px;
  z-index:1;
}
.scroll-down span{
  position:absolute; top:8px; left:50%;
  width:4px; height:8px;
  background:var(--cyan-light);
  border-radius:2px;
  transform:translateX(-50%);
  animation:scrolldown 1.6s infinite;
}
@keyframes scrolldown{ 0%{ opacity:1; top:8px;} 100%{ opacity:0; top:22px;} }

/* ---------- About ---------- */
.about-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:64px;
  align-items:center;
}
.about-visual{ position:relative; }
.about-frame{
  position:relative;
  aspect-ratio:1/1;
  border-radius:24px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg);
}
.about-frame-photo{
  width:100%; height:100%;
  object-fit:cover;
}
.about-badge-circle{
  position:absolute;
  top:-26px; left:-26px;
  width:112px; height:112px;
  border-radius:50%;
  background:var(--white);
  border:5px solid var(--white);
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:6px;
  z-index:2;
}
.about-badge-circle strong{ display:block; font-size:1.65rem; color:var(--cyan-dark); font-weight:800; line-height:1; }
.about-badge-circle span{ font-size:.5rem; color:var(--gray-600); line-height:1.15; margin-top:3px; }
.about-badge-card{
  position:absolute;
  bottom:-22px; right:-22px;
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:20px 26px;
  text-align:center;
  border:4px solid var(--white);
  z-index:2;
}
.about-badge-card strong{ display:block; font-size:1.7rem; color:var(--cyan-dark); font-weight:800; }
.about-badge-card span{ font-size:.75rem; color:var(--gray-600); }
.about-badge-card-logo{
  padding:9px 18px 8px;
  width:auto; height:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:4px;
}
.avalados-label{ font-size:.68rem; font-weight:700; color:var(--text); white-space:nowrap; line-height:1; margin:0; }
.avalados-row{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.avalado-logo{ display:block; object-fit:contain; }
.avalado-cefopec{ width:50px; height:auto; }
.avalado-uc{ width:130px; height:46px; object-fit:cover; object-position:center; }
.avalado-divider{ width:1px; height:32px; background:var(--gray-300); flex-shrink:0; }

.about-content h2{ font-size:2rem; margin-bottom:18px; }
.about-content p{ color:var(--gray-600); margin-bottom:16px; }
.about-list{ margin:22px 0 30px; display:flex; flex-direction:column; gap:12px; }
.about-list li{ display:flex; align-items:center; gap:10px; font-weight:500; color:var(--text); }
.icon-check{ width:22px; height:22px; fill:var(--cyan); flex-shrink:0; }

/* ---------- Bienestar page helpers ---------- */
.wellness-values{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:28px 0 18px;
}
.wellness-credit{
  text-align:center;
  color:var(--gray-600);
  font-size:.95rem;
  margin:0;
}
.wellness-subhead{
  font-size:1.3rem;
  margin:0 0 24px;
  text-align:center;
}
.wellness-subhead:not(:first-of-type){ margin-top:48px; }

/* ---------- Misión / Visión / Valores (ancho completo, debajo del bloque Nosotros) ---------- */
.mvv-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:56px;
}
.mvv-card{
  position:relative;
  background:var(--white);
  border:1px solid var(--gray-100);
  border-radius:var(--radius);
  padding:30px 26px;
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mvv-card::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, var(--cyan-light), var(--cyan-dark));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.mvv-card:hover{
  transform:translateY(-8px);
  box-shadow:0 0 0 1px rgba(14,163,208,.25), 0 18px 46px rgba(14,163,208,.35);
  border-color:transparent;
}
.mvv-card:hover::before{ opacity:1; }
.mvv-icon{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  background:rgba(14,163,208,.1);
  margin-bottom:18px;
}
.mvv-icon svg{ width:26px; height:26px; fill:var(--cyan-dark); }
.mvv-tag{
  display:inline-block;
  font-size:.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--cyan-dark);
  background:rgba(14,163,208,.1);
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:12px;
}
.mvv-card p{ font-size:.92rem; color:var(--gray-600); margin:0; line-height:1.55; }

.mvv-grid.four{ grid-template-columns:repeat(4,1fr); }
.mvv-grid.four .mvv-card{ display:flex; flex-direction:column; }
.mvv-grid.four .mvv-tag{ margin-bottom:16px; }

/* ---------- Programs ---------- */
.programs-featured{ background:var(--off-white); }
.cards-grid{ display:grid; gap:28px; }
.cards-grid.three{ grid-template-columns:repeat(3,1fr); }

.program-card{
  background:var(--white);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s;
  display:flex;
  flex-direction:column;
}
.program-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.program-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.program-icon{ width:44px; height:44px; padding:10px; background:rgba(14,163,208,.1); border-radius:12px; fill:var(--cyan-dark); }
.badge-modalidad{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); background:var(--gray-100); padding:5px 12px; border-radius:999px; }
.program-eyebrow{ font-size:.78rem; font-weight:700; color:var(--cyan-dark); text-transform:uppercase; letter-spacing:.05em; }
.program-card h3{ font-size:1.2rem; margin:8px 0 10px; }
.program-card p{ color:var(--gray-600); font-size:.92rem; flex-grow:1; margin-bottom:18px; }
.program-meta{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--gray-600); border-top:1px solid var(--gray-100); padding-top:14px; margin-bottom:16px; }
.program-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--navy); font-size:.9rem; }
.program-link svg{ width:16px; height:16px; fill:currentColor; transition:transform .2s; }
.program-link:hover svg{ transform:translateX(4px); }
.program-link:hover{ color:var(--cyan-dark); }

/* ---------- Enroll Banner ---------- */
.enroll-banner{
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg, var(--cyan-dark), var(--cyan));
  color:var(--white);
  padding:56px 0;
}
.enroll-banner::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 100% 160% at 68% 50%, black, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 100% 160% at 68% 50%, black, transparent 85%);
}
.enroll-banner::after{
  content:'';
  position:absolute;
  top:50%; right:2%;
  width:380px; height:380px;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.4), transparent 68%);
}
.enroll-banner .enroll-glow-left{
  position:absolute;
  bottom:-90px; left:-60px;
  width:260px; height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(2,57,121,.5), transparent 70%);
}
.enroll-inner{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.enroll-inner h2{ color:var(--white); font-size:1.8rem; margin-bottom:8px; }
.enroll-inner p{ color:rgba(255,255,255,.9); }
.enroll-inner.center{ justify-content:center; text-align:center; }
.enroll-inner.center blockquote{
  margin:0;
  max-width:760px;
  color:var(--white);
  font-size:1.4rem;
  font-weight:600;
  line-height:1.5;
  font-style:italic;
}

/* ---------- Why ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.why-card{
  position:relative;
  display:flex;
  flex-direction:column;
  text-align:center;
  padding:30px 20px;
  border-radius:var(--radius);
  border:1px solid var(--gray-100);
  background:var(--white);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.why-card::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, var(--cyan-light), var(--cyan-dark));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.why-card:hover{
  transform:translateY(-8px);
  box-shadow:0 0 0 1px rgba(14,163,208,.25), 0 18px 46px rgba(14,163,208,.35);
  border-color:transparent;
}
.why-card:hover::before{ opacity:1; }
.why-icon{
  width:64px; height:64px;
  margin:0 auto 18px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--navy), var(--cyan-dark));
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .3s ease, transform .3s ease;
}
.why-card:hover .why-icon{
  box-shadow:0 0 0 6px rgba(14,163,208,.18), 0 0 28px rgba(14,163,208,.55);
  transform:scale(1.06);
}
.why-icon svg{ width:28px; height:28px; fill:var(--white); }
.pillar-num{ font-size:1.3rem; font-weight:800; color:var(--white); font-family:var(--font-display, inherit); }
.why-card h3{ font-size:1.02rem; margin-bottom:8px; }
.why-card p{ font-size:.85rem; color:var(--gray-600); margin-bottom:0; }
.why-pillar{
  display:inline-block;
  margin:0 auto 14px;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(14,163,208,.1);
  font-size:.64rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--cyan-dark);
}

/* ---------- Bienestar: Coordinación + Pilares (bloque unificado) ---------- */
.pilares-hero{
  background:linear-gradient(120deg, var(--navy), var(--cyan-dark));
  color:var(--white);
}
.pilares-hero .section-head h1{
  color:var(--white);
  font-size:2.5rem;
  margin-bottom:14px;
}
.pilares-hero .section-head h2{ color:var(--white); }
.pilares-hero .section-head p{ color:rgba(255,255,255,.85); }

/* Tarjetas de los 5 pilares: diseño propio (no comparte estilos con
   .why-card/.why-grid, que sigue usándose tal cual en la sección "Por qué
   estudiar en CEFOPEC" de la página de inicio) pensado para resaltar sobre
   el fondo azul degradado de .pilares-hero: barra superior en degradado
   siempre visible (no solo al pasar el mouse), insignia circular grande
   con degradado y halo, y una elevación más marcada en hover. */
.pilar-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.pilar-card{
  position:relative;
  background:var(--white);
  border-radius:var(--radius);
  padding:34px 22px 28px;
  text-align:center;
  overflow:hidden;
  box-shadow:0 16px 34px rgba(1,23,51,.28);
  transition:transform .3s ease, box-shadow .3s ease;
}
.pilar-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:6px;
  background:linear-gradient(90deg, var(--cyan-light), var(--cyan-dark));
}
.pilar-card:hover{
  transform:translateY(-10px);
  box-shadow:0 24px 48px rgba(1,23,51,.4);
}
.pilar-badge{
  width:72px; height:72px;
  margin:0 auto 20px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--navy), var(--cyan-dark));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px rgba(14,163,208,.14), 0 10px 22px rgba(2,57,121,.35);
  transition:transform .3s ease, box-shadow .3s ease;
}
.pilar-card:hover .pilar-badge{
  transform:scale(1.08) rotate(-4deg);
  box-shadow:0 0 0 8px rgba(14,163,208,.22), 0 14px 28px rgba(2,57,121,.45);
}
.pilar-badge-num{ font-size:1.6rem; font-weight:800; color:var(--white); }
.pilar-card h3{ font-size:1.08rem; margin-bottom:10px; }
.pilar-card p{ font-size:.86rem; color:var(--gray-600); margin:0; line-height:1.55; }

/* ---------- Catalog ---------- */
.tabs{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:36px;
}
.tab-btn{
  background:var(--off-white);
  border:2px solid transparent;
  color:var(--navy);
  font-weight:600;
  font-size:.9rem;
  padding:11px 24px;
  border-radius:999px;
  transition:all .2s;
}
.tab-btn:hover{ background:var(--gray-100); }
.tab-btn.active{ background:var(--navy); color:var(--white); }

.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadein .35s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- Reconocimiento: lista de categorías (bienestar.html) ----------
   Reemplaza la cuadrícula de tarjetas por un listado vertical, más fácil
   de escanear cuando hay varias categorías (5 y 7 en Docente/Administrativo):
   cada fila combina el emoji de la categoría en una insignia circular con
   el título y la descripción, en vez de repetir la tarjeta blanca de
   .news-card para cada una. */
.reco-list{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.reco-item{
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--white);
  border-radius:var(--radius-sm);
  padding:20px 26px;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.reco-item:hover{
  transform:translateX(6px);
  box-shadow:var(--shadow-lg);
}
.reco-icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(14,163,208,.1);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
}
.reco-text h3{ font-size:1.02rem; margin-bottom:4px; }
.reco-text p{ color:var(--gray-600); font-size:.9rem; margin:0; line-height:1.5; }

@media (max-width:600px){
  .reco-item{ align-items:flex-start; padding:18px 20px; gap:14px; }
}

.table-list{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.table-row{
  display:grid;
  grid-template-columns:2.2fr 1.2fr .9fr .9fr .8fr;
  align-items:center;
  gap:12px;
  padding:16px 22px;
  background:var(--white);
  border-bottom:1px solid var(--gray-100);
  font-size:.92rem;
}
.table-row:last-child{ border-bottom:none; }
.table-row:not(.table-head):hover{ background:var(--off-white); }
.table-head{ background:var(--navy); color:var(--white); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.table-row .btn{ justify-self:end; }

/* ---------- Diploma grid (oferta fija de diplomados) ---------- */
.diploma-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.diploma-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .3s ease, box-shadow .3s ease;
}
.diploma-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(2,57,121,.32);
}
.diploma-card-photo{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
}
.diploma-card-photo img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.diploma-card:hover .diploma-card-photo img{ transform:scale(1.06); }
.diploma-card-body{
  padding:20px 20px 22px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.diploma-card-title{
  font-size:1.02rem;
  font-weight:800;
  color:var(--navy-dark);
  line-height:1.28;
  margin:0 0 6px;
}
.diploma-card-meta{
  font-size:.7rem;
  color:var(--gray-600);
  font-weight:600;
  margin:0 0 14px;
}
.diploma-card-highlights{
  list-style:none;
  padding:0;
  margin:0 0 16px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.diploma-card-highlights li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.8rem;
  color:var(--text);
  line-height:1.35;
}
.diploma-card-highlights svg{
  width:16px; height:16px;
  fill:var(--cyan);
  flex-shrink:0;
  margin-top:2px;
}
.diploma-card-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
}
.diploma-pill{
  display:inline-block;
  padding:5px 12px;
  border-radius:999px;
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:nowrap;
}
.diploma-pill-outline{ border:1.5px solid var(--navy); color:var(--navy); background:transparent; }
.diploma-pill-solid{ background:var(--cyan); color:var(--white); border:1.5px solid var(--cyan); }
.diploma-card-btn{
  margin-top:auto;
  width:100%;
  text-align:center;
  justify-content:center;
}

.coming-soon{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
  padding:60px 24px;
  border-radius:var(--radius);
  background:var(--off-white);
  color:var(--gray-600);
}
.coming-soon svg{ width:40px; height:40px; fill:var(--cyan-dark); }
.coming-soon p{ max-width:420px; }

/* ---------- News ---------- */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
/* Variante para grupos con un número de tarjetas que no llena filas
   completas (ej. las categorías de Reconocimiento, 5 y 7 elementos): en
   vez de una cuadrícula fija que deja la última fila incompleta pegada a
   la izquierda, se usa flexbox con envoltura y centrado para que esa
   última fila quede centrada como el resto. */
.news-grid.wrap{ display:flex; flex-wrap:wrap; justify-content:center; }
.news-grid.wrap .news-card{ flex:1 1 300px; max-width:360px; }
.news-card{
  padding:30px;
  border-radius:var(--radius);
  background:var(--off-white);
  border-top:4px solid var(--cyan);
  transition:transform .25s, box-shadow .25s;
}
.news-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.news-tag{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cyan-dark); }
.news-card h3{ font-size:1.1rem; margin:10px 0 12px; }
.news-card p{ color:var(--gray-600); font-size:.9rem; margin-bottom:18px; }
.news-card .program-link{ font-size:.85rem; }

/* ---------- Digital facilities ---------- */
.digital{
  background:linear-gradient(135deg, var(--navy-darker), var(--navy));
  color:var(--white);
}
.digital-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:center; }
.digital-content h2{ color:var(--white); font-size:2rem; margin-bottom:10px; }
.digital-content > p{ color:rgba(255,255,255,.75); margin-bottom:36px; }
.digital-list{ display:flex; flex-direction:column; gap:22px; }
.digital-item{ display:flex; gap:16px; align-items:flex-start; }
.digital-item svg{ width:26px; height:26px; fill:var(--cyan-light); flex-shrink:0; margin-top:3px; }
.digital-item h4{ color:var(--white); font-size:1rem; margin-bottom:4px; }
.digital-item p{ color:rgba(255,255,255,.7); font-size:.88rem; }
.digital-visual{ display:flex; flex-direction:column; gap:24px; }
.digital-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  padding:34px;
  text-align:center;
  backdrop-filter:blur(6px);
}
.digital-card strong{ display:block; font-size:2.4rem; font-weight:800; color:var(--cyan-light); }
.digital-card span{ font-size:.85rem; color:rgba(255,255,255,.75); }
.digital-card.accent{ background:rgba(14,163,208,.15); border-color:rgba(14,163,208,.4); }

/* ---------- Reseñas de Google (Google Business Profile) ---------- */
.google-reviews{
  background:var(--off-white);
  border-radius:var(--radius);
  padding:32px;
}
.google-reviews-head{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:26px;
  padding-bottom:22px;
  border-bottom:1px solid var(--gray-300);
}
.google-g{ width:34px; height:34px; flex-shrink:0; }
.google-reviews-headtext{ display:flex; flex-direction:column; margin-right:auto; }
.google-reviews-headtext strong{ color:var(--navy); font-size:1.05rem; }
.google-reviews-headtext span{ font-size:.85rem; color:var(--gray-600); }
.google-reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review-skeleton{
  height:150px;
  border-radius:var(--radius-sm);
  background:linear-gradient(100deg, var(--gray-100) 30%, #fff 50%, var(--gray-100) 70%);
  background-size:200% 100%;
  animation:shimmer 1.6s infinite;
}
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.review-card{
  background:var(--white);
  border-radius:var(--radius-sm);
  padding:20px;
  box-shadow:var(--shadow);
}
.review-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.review-card-head img{ width:38px; height:38px; border-radius:50%; }
.review-card-head strong{ display:block; font-size:.88rem; color:var(--navy); }
.review-card-head span{ font-size:.8rem; color:#f5a623; letter-spacing:1px; }
.review-card p{ font-size:.88rem; color:var(--gray-600); }
.google-reviews-note{ margin-top:22px; font-size:.82rem; color:var(--gray-600); text-align:center; }

/* ---------- FAQ (Preguntas Frecuentes) ---------- */
.faq{ background:var(--off-white); }
/* Numeración automática (1., 2., 3.…) delante de cada pregunta, vía CSS
   counter sobre el <span> de texto (primer hijo de .faq-question, antes
   del ícono +): no requiere tocar el HTML de cada pregunta ni mantener
   los números a mano si se agrega o quita alguna. */
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; counter-reset:faq-item; }
.faq-item{
  background:var(--white);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  background:none;
  border:none;
  text-align:left;
  font-family:inherit;
  font-weight:700;
  font-size:1rem;
  color:var(--navy);
  cursor:pointer;
}
.faq-question > span:first-child::before{
  counter-increment:faq-item;
  content:counter(faq-item)'. ';
  color:var(--cyan-dark);
}
.faq-icon{
  width:20px; height:20px;
  fill:var(--cyan-dark);
  flex-shrink:0;
  transition:transform .25s ease;
}
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.faq-answer p{
  padding:0 24px 22px;
  color:var(--gray-600);
  font-size:.92rem;
  line-height:1.6;
}
.faq-item.open .faq-answer{ max-height:400px; }

/* ---------- Final CTA ---------- */
.final-cta{
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 30% 30%, var(--cyan-dark), var(--navy) 70%);
  color:var(--white);
  padding:80px 0;
  text-align:center;
}
.final-cta-glow-tl{
  position:absolute;
  top:-90px; left:-70px;
  width:320px; height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.32), transparent 70%);
}
.final-cta-glow-br{
  position:absolute;
  bottom:-110px; right:-70px;
  width:360px; height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(2,57,121,.55), transparent 70%);
}
.final-cta-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  text-align:left;
}
.final-cta-text{ text-align:left; }
.final-cta-inner h2{ color:var(--white); font-size:2.1rem; margin-bottom:14px; }
.final-cta-inner p{ color:rgba(255,255,255,.85); margin-bottom:32px; max-width:460px; }
.mascot-cta{
  width:260px;
  margin:0 auto 18px;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.3));
  animation:float 5s ease-in-out infinite;
}

/* ---------- Formulario de contacto dentro del CTA final ---------- */
.final-cta-form{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  padding:32px;
  backdrop-filter:blur(3px);
}
.final-cta-form h3{
  color:var(--white);
  font-size:1.05rem;
  margin-bottom:18px;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.final-cta-form .footer-form{ gap:12px; }

@media (max-width:900px){
  .final-cta-inner{ grid-template-columns:1fr; text-align:center; gap:36px; }
  .final-cta-text{ text-align:center; }
  .final-cta-text p{ margin-left:auto; margin-right:auto; }
  .mascot-cta{ margin:0 auto 18px; }
  .final-cta-form{ padding:26px; text-align:left; }
}

/* ---------- Page Banner (páginas internas, ej. Nuestro Equipo) ---------- */
.page-banner{
  background:linear-gradient(120deg, var(--navy), var(--cyan-dark));
  color:var(--white);
  padding:120px 0 64px;
  text-align:center;
}
.page-banner-inner{ max-width:640px; margin:0 auto; }
.page-banner h1{ color:var(--white); font-size:2.5rem; margin:16px 0 14px; }
.page-banner p{ color:rgba(255,255,255,.85); font-size:1.05rem; }

/* ---------- Información Legal ---------- */
.legal-subnav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  position:sticky;
  top:var(--header-h);
  z-index:10;
  background:var(--off-white);
  padding:18px 0;
  margin-bottom:16px;
  border-bottom:1px solid var(--gray-100);
}
.legal-subnav a{
  font-size:.82rem;
  font-weight:600;
  color:var(--navy);
  background:var(--white);
  border:1px solid var(--gray-100);
  padding:9px 16px;
  border-radius:999px;
  white-space:nowrap;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.legal-subnav a:hover{ background:var(--navy); color:var(--white); border-color:var(--navy); transform:translateY(-2px); }

.legal-sections{ display:flex; flex-direction:column; gap:64px; padding-top:24px; }
.legal-section{ scroll-margin-top:calc(var(--header-h) + 90px); }
.legal-section h2{ font-size:1.6rem; margin-bottom:18px; padding-bottom:16px; border-bottom:2px solid var(--gray-100); }
.legal-section > p.legal-intro{ color:var(--gray-600); font-size:1.02rem; margin:-8px 0 24px; max-width:680px; }
.legal-placeholder{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:var(--off-white);
  border:1px dashed var(--gray-300);
  border-radius:var(--radius);
  padding:28px 32px;
  color:var(--gray-600);
  font-size:.95rem;
  line-height:1.6;
}
.legal-placeholder svg{ width:26px; height:26px; fill:var(--cyan-dark); flex-shrink:0; margin-top:2px; }
.legal-placeholder strong{ color:var(--navy); }

.legal-tabgroup{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.legal-tab-btn{
  background:var(--off-white);
  border:2px solid transparent;
  color:var(--navy);
  font-weight:600;
  font-size:.85rem;
  padding:10px 20px;
  border-radius:999px;
  transition:all .2s;
  cursor:pointer;
}
.legal-tab-btn:hover{ background:var(--gray-100); }
.legal-tab-btn.active{ background:var(--navy); color:var(--white); }

.legal-doc-download{
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--white);
  border:1px solid var(--gray-100);
  border-radius:var(--radius);
  padding:22px 26px;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.legal-doc-download:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.legal-doc-download-icon{
  width:48px; height:48px;
  flex-shrink:0;
  border-radius:12px;
  background:rgba(14,163,208,.1);
  display:flex; align-items:center; justify-content:center;
}
.legal-doc-download-icon svg{ width:24px; height:24px; fill:var(--cyan-dark); }
.legal-doc-download-text{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.legal-doc-download-text strong{ color:var(--navy); font-size:1rem; }
.legal-doc-download-text span{ color:var(--gray-600); font-size:.85rem; }
.legal-doc-download-cta{
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:.85rem;
  color:var(--navy);
  border:2px solid var(--navy);
  padding:9px 18px;
  border-radius:999px;
  transition:all .2s ease;
}
.legal-doc-download-cta svg{ width:16px; height:16px; fill:currentColor; }
.legal-doc-download:hover .legal-doc-download-cta{ background:var(--navy); color:var(--white); }

@media (max-width:600px){
  .legal-doc-download{ flex-wrap:wrap; }
  .legal-doc-download-cta{ width:100%; justify-content:center; }
}

.legal-doc-panel{ display:none; scroll-margin-top:calc(var(--header-h) + 90px); }
.legal-doc-panel.active{ display:block; animation:fadein .35s ease; }
.legal-doc-panel h3{ font-size:1.3rem; color:var(--navy); margin-bottom:4px; }
.legal-doc-meta{ color:var(--gray-600); font-size:.85rem; font-style:italic; margin-bottom:24px; }
.legal-doc-panel h4{ font-size:1rem; color:var(--navy); margin:22px 0 8px; }
.legal-doc-panel h4:first-of-type{ margin-top:0; }
.legal-doc-panel p{ color:var(--gray-600); font-size:.95rem; line-height:1.7; }
.legal-doc-panel strong{ color:var(--navy); }

@media (max-width:700px){
  .legal-subnav{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-left:-24px; margin-right:-24px; padding-left:24px; padding-right:24px; }
  .legal-placeholder{ flex-direction:column; padding:22px; }
  .legal-tabgroup{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; justify-content:flex-start; margin-left:-24px; margin-right:-24px; padding:0 24px 4px; }
  .legal-tab-btn{ white-space:nowrap; }
}

/* ---------- Equipo (docentes / administrativo) ---------- */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:28px;
}
.team-card{
  background:var(--white);
  border-radius:var(--radius);
  padding:30px 24px;
  box-shadow:var(--shadow);
  text-align:center;
  transition:transform .25s, box-shadow .25s;
}
.team-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.team-photo{
  width:100px; height:100px;
  border-radius:50%;
  margin:0 auto 18px;
  background:var(--off-white);
  border:3px solid var(--cyan-light);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  /* Fuerza su propia capa de composición: sin esto, Chrome a veces deja
     una franja gris "pegada" en el recorte circular cuando la tarjeta
     vuelve a mostrarse (display:none -> '') al cambiar de página del
     carrusel — un glitch de repintado, no un problema de la foto en sí. */
  transform:translateZ(0);
}
.team-photo img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.team-photo svg{ width:46px; height:46px; fill:var(--gray-300); }
.team-card h3{ font-size:1.05rem; margin-bottom:6px; }
.team-role{
  display:inline-block;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--cyan-dark);
  background:rgba(14,163,208,.1);
  padding:5px 14px;
  border-radius:999px;
  margin-bottom:12px;
}
.team-card p{ color:var(--gray-600); font-size:.88rem; }
.team-section + .team-section{ padding-top:0; }

/* ---------- Carrusel de equipo (paginado, 4 por página) ---------- */
.team-grid-carousel{ grid-template-columns:repeat(4, 1fr); }
.team-carousel-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-top:36px;
}
.team-carousel-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--white);
  border:2px solid var(--navy);
  color:var(--navy);
  font-weight:600;
  font-size:.88rem;
  padding:10px 22px;
  border-radius:999px;
  transition:all .2s ease;
}
.team-carousel-btn:hover:not(:disabled){ background:var(--navy); color:var(--white); }
.team-carousel-btn:disabled{ opacity:.35; cursor:default; }
.team-carousel-dots{ display:flex; gap:8px; }
.team-carousel-dots button{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--gray-300);
  border:none;
  padding:0;
  transition:background .2s ease, transform .2s ease;
}
.team-carousel-dots button.active{ background:var(--cyan-dark); transform:scale(1.3); }

/* ---------- Controles de zoom/desplazamiento del organigrama ----------
   El árbol completo (con todos sus niveles y ramas en abanico) es más
   ancho y alto de lo que cabe cómodamente en una pantalla, en escritorio
   y sobre todo en móvil. En vez de forzar tarjetas diminutas o una hoja
   interminable para que quepa todo, el árbol vive dentro de un lienzo de
   tamaño fijo (.orgchart-viewport) que se puede arrastrar con el dedo o
   el mouse y acercar/alejar con los botones — igual que un visor de mapa,
   así las tarjetas pueden ser grandes y legibles sin importar cuánto mida
   el árbol completo. Mismo comportamiento en escritorio y en móvil. */
.orgchart-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:16px;
}
.orgchart-hint{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:10px 18px;
  background:rgba(14,163,208,.08);
  color:var(--navy);
  font-weight:600;
  font-size:.85rem;
  border-radius:999px;
}
.orgchart-zoom-controls{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex-wrap:wrap;
}
.orgchart-zoom-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--white);
  border:2px solid var(--navy);
  color:var(--navy);
  font-weight:700;
  font-size:1rem;
  line-height:1;
  width:40px; height:40px;
  border-radius:50%;
  padding:0;
  white-space:nowrap;
  transition:background .2s ease, color .2s ease, transform .15s ease;
  flex-shrink:0;
}
.orgchart-zoom-btn span{ font-size:1.05rem; line-height:1; }
.orgchart-zoom-btn-wide{ width:auto; border-radius:999px; padding:0 16px; font-size:.82rem; }
.orgchart-zoom-btn-wide span{ font-size:1rem; }
.orgchart-zoom-btn:hover{ background:var(--navy); color:var(--white); transform:translateY(-1px); }
.orgchart-zoom-btn:active{ transform:translateY(0); }

.orgchart-viewport{
  position:relative;
  width:100%;
  height:640px;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--gray-100);
  border:1px solid var(--gray-300);
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.orgchart-viewport.is-grabbing{ cursor:grabbing; }

/* ---------- Organigrama (Cuerpo Administrativo) ---------- */
.orgchart{
  display:flex; flex-direction:column; align-items:center;
  transform-origin:0 0;
  will-change:transform;
  padding:24px;
  box-sizing:border-box;
}
/* El árbol necesita más ancho que el lienzo visible para que Cefopec
   Studio Panamá y Analista Financiero & Datos puedan flanquear a la
   Directora Operativa y Financiera en su propia fila Y que sus 4
   coordinaciones sigan cabiendo en una sola fila debajo. Este ancho fijo
   se aplica SIEMPRE, también en móvil: el árbol debe verse exactamente
   igual (misma estructura ramificada) en cualquier tamaño de pantalla,
   sin una versión apilada distinta para móvil. El JS de zoom/pan
   (fitToView) se encarga de escalar y centrar el árbol completo dentro
   del lienzo al cargar, tanto en escritorio como en móvil, en vez de
   depender de un layout responsive alternativo. */
.orgchart{ width:1760px; }
.org-connector{ width:2px; height:26px; background:var(--gray-300); flex-shrink:0; }
.org-tier{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:22px;
  flex-wrap:wrap;
  width:100%;
}
.org-branch{ display:flex; flex-direction:column; align-items:center; gap:0; min-width:0; max-width:100%; }
.org-branch > .org-connector{ margin:0 auto; }
.org-branch > .org-tier{ margin-top:0; max-width:100%; }

/* Filas donde dos cargos "flanquean" a un tercero (ej. Director General
   flanqueado por Marketing/Asesora): esa fila NUNCA debe envolver aunque el
   subárbol central sea muy ancho/alto, o el elemento lateral derecho termina
   cayendo varias líneas más abajo, fuera de contexto visual. Las tarjetas
   laterales mantienen su ancho natural; solo la rama central (.org-branch-trunk)
   se encoge y envuelve su propio contenido internamente. */
.org-tier-nowrap{ flex-wrap:nowrap; align-items:flex-start; }
.org-tier-nowrap > .org-branch{ flex:0 0 auto; }
.org-tier-nowrap > .org-branch-trunk{ flex:1 1 0%; min-width:0; max-width:100%; }

/* Abanico de flechas: cuando un cargo tiene varias ramas que lo flanquean
   directamente (ej. Marketing y Asesora Académica a los lados del Director
   General), se traza una línea horizontal que une los centros de las ramas
   extremas, con un pequeño tallo vertical bajando a cada tarjeta, para que
   quede claro que las tres reportan al mismo cargo superior.
   La línea se dibuja POR RAMA (no como un solo ::before del contenedor con
   offsets fijos en px) para que quede perfectamente centrada sobre el
   tallo de CADA tarjeta sin importar cuántas ramas haya o si sus anchos
   son muy distintos (ej. Cefopec Studio Panamá, más ancha, junto a
   Holmeider). Cada rama dibuja el segmento que le corresponde, extendido
   medio "gap" hacia cada lado para unirse sin cortes con el segmento de
   la rama vecina; la primera y la última rama solo dibujan la mitad que
   mira hacia el centro, para que la línea no se salga por los extremos.

   La línea se posiciona con top:0, pegada al borde superior de la propia
   rama (por eso .org-fanout NO lleva padding-top: si lo llevara, la rama
   empezaría más abajo que la línea y el tallo —que es hijo de la rama—
   quedaría flotando sin tocarla, con un hueco en blanco entre ambos). Toda
   la distancia vertical hasta la tarjeta la aporta el alto del propio
   .org-connector-stub, que arranca justo debajo de la línea. */
.org-fanout{ position:relative; }
.org-fanout > .org-branch,
.org-fanout > .org-branch-trunk{ position:relative; }
.org-fanout > .org-branch::before,
.org-fanout > .org-branch-trunk::before{
  content:'';
  position:absolute;
  top:0;
  left:-11px;
  right:-11px;
  height:2px;
  background:var(--gray-300);
}
.org-fanout > .org-branch:first-child::before,
.org-fanout > .org-branch-trunk:first-child::before{ left:50%; }
.org-fanout > .org-branch:last-child::before,
.org-fanout > .org-branch-trunk:last-child::before{ right:50%; }
.org-connector-stub{ width:2px; height:52px; background:var(--gray-300); margin:0 auto; }

/* Más espacio vertical bajo la Directora Operativa y Financiera: con la
   altura estándar las 4 coordinaciones quedaban demasiado pegadas a su
   tarjeta y la línea de conexión se leía muy apretada. Este modificador
   (tronco + tallo más largo) solo se usa en esa fila; el abanico en sí ya
   no necesita su propio modificador porque ya no usa padding-top. El tallo
   entre la línea y cada tarjeta se mantiene corto (46px, igual que en el
   resto del árbol en móvil) para que no se vea como un tramo de línea
   descolgado; toda la separación extra vive en el tronco de arriba. */
.org-connector-lg{ height:110px; }
.org-fanout-lg > .org-branch > .org-connector-stub{ height:46px; }

/* Corrección de centrado para Elaine Gordón: la línea del abanico ya
   conecta cada tallo con el centro de SU PROPIA rama (ver .org-fanout de
   arriba), pero cuando las dos ramas hijas tienen anchos muy distintos
   (Vacante para Docentes de Planta: 190px vs. la rama de Marlenis
   Jaramillo, ensanchada a 320px por la caja de Promotores de Ventas), el
   conector de Elaine —centrado sobre el ancho TOTAL de sus ramas— ya no
   coincide con el punto medio real entre esos dos tallos, que es distinto
   cuando las ramas no miden lo mismo. La diferencia es constante y
   calculable: (190 − 320) / 4 = 32.5px. Se corrige desplazando esta fila
   hija hacia la derecha esa misma distancia (sin cambiar el ancho que
   ocupa para el resto del árbol).

   Ese desplazamiento, sin embargo, no deja suficiente separación real: la
   tarjeta de Marlenis Jaramillo (y por lo tanto también la caja de Equipo
   de Bienestar de la rama vecina de Marlen Batista, que queda casi a la
   misma altura) terminaban con sus bordes superpuestos, no solo cerca uno
   del otro. Medido directamente en el navegador (sin el desplazamiento
   recenter, que no cambia el ancho que la rama de Elaine reserva en el
   layout): 40.5px de superposición real entre esas dos tarjetas. El margen
   derecho de la rama de Elaine tiene que crecer lo suficiente para cubrir
   esa superposición MÁS un margen de separación cómodo (~24px), es decir
   40.5 + 24 ≈ 64.5px por encima del valor anterior (40px), de ahí 108px. */
.org-fanout-recenter{ position:relative; left:32.5px; }
.org-branch-gap-r{ margin-right:108px; }
/* El "puente" que cierra la línea del abanico entre ramas vecinas (ver
   .org-fanout > .org-branch::before más arriba) asume el gap estándar de
   22px de .org-tier (por eso extiende -11px, la mitad, hacia cada lado).
   La rama vecina (Marlen Batista) sigue dibujando su mitad estándar del
   gap (-11px) desde su propio borde izquierdo; esta rama debe cubrir el
   resto del hueco hasta ese punto: el gap estándar completo menos esos
   11px, más el margen extra de arriba — es decir -(22 − 11 + margen) =
   -(11 + margen). Con margin-right:108px eso da -119px. */
.org-fanout > .org-branch-gap-r::before{ right:-119px; }

/* IMPORTANTE: el organigrama YA NO tiene un layout apilado distinto para
   móvil. Antes, por debajo de 1090px, las filas en abanico (.org-tier-nowrap)
   pasaban a mostrarse en una sola columna vertical con tarjetas agrandadas
   — una versión simplificada, distinta de la de escritorio. El usuario pidió
   explícitamente que el organigrama se vea "exactamente" igual en móvil que
   en computadora, es decir el árbol completo y ramificado, no una lista
   apilada. Ahora la estructura (.org-tier-nowrap, .org-fanout, tamaños de
   tarjeta, etc.) es IDÉNTICA en cualquier ancho de pantalla; lo único que
   cambia en pantallas angostas es la escala visual completa del árbol,
   aplicada por el JS de zoom/pan (fitToView(), en js/script.js) sobre
   #orgchartInner para que quepa dentro del lienzo (.orgchart-viewport) sin
   deformar ni reordenar nada — igual que si alguien alejara el zoom con los
   dedos. Por eso ya no hace falta ningún @media aquí: el árbol de 1760px de
   ancho (ver .orgchart más arriba) se dibuja siempre igual, y el visor se
   encarga de mostrarlo completo a cualquier tamaño. */

/* Tarjeta de persona en el organigrama: mismo lenguaje visual que .team-card
   (foto circular con borde cian, nombre en navy, cargo en pastilla), a escala
   reducida para que quepan varios niveles del árbol. Reemplaza al antiguo
   .org-node (recuadro con banda de color y sin foto). */
.org-person-card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 14px 16px;
  width:190px;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.org-person-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.org-person-photo{
  width:72px; height:72px;
  border-radius:50%;
  margin:0 auto 12px;
  background:var(--off-white);
  border:3px solid var(--cyan-light);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.org-person-photo img{ width:100%; height:100%; object-fit:cover; }
.org-person-photo svg{ width:30px; height:30px; fill:var(--gray-300); }
.org-person-name{ font-weight:800; color:var(--navy); font-size:.9rem; line-height:1.25; margin-bottom:8px; }
.org-person-role{
  display:inline-block;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--cyan-dark);
  background:rgba(14,163,208,.1);
  padding:5px 12px;
  border-radius:999px;
  line-height:1.3;
}
.org-person-card.is-vacant .org-person-name{ color:var(--gray-600); font-weight:600; font-style:italic; font-size:.8rem; }
.org-person-card.is-vacant .org-person-role{ color:var(--gray-600); background:var(--gray-100); }
/* El logotipo de CEFOPEC (escudo) reemplaza el ícono genérico de "vacante";
   se usa contain en vez de cover para que se vea completo dentro del
   círculo, sin recortar los laureles ni la cinta del escudo. */
.org-person-card.is-vacant .org-person-photo img{ object-fit:contain; padding:9px; background:var(--white); }

.org-person-card.tier-1{ width:212px; padding:22px 16px 18px; }
.org-person-card.tier-1 .org-person-photo{ width:92px; height:92px; border-width:4px; }
.org-person-card.tier-1 .org-person-name{ font-size:1.05rem; margin-bottom:10px; }
.org-person-card.tier-1 .org-person-role{ font-size:.72rem; padding:6px 16px; }

.org-person-card.tier-4{ width:190px; }
.org-person-card.tier-4 .org-person-photo{ width:64px; height:64px; }
.org-person-card.tier-4 .org-person-name{ font-size:.86rem; }

.org-group{
  background:var(--white);
  border:1px solid var(--gray-100);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:16px 18px;
  width:200px;
  text-align:center;
}
.org-group-title{
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--cyan-dark);
  margin-bottom:8px;
}
.org-group-body{ font-size:.78rem; color:var(--gray-600); line-height:1.5; }
/* Más ancha que .org-group para que, en dos columnas, ningún nombre
   (nombre y apellido en una sola línea, ej. "Mariagabriela De Icaza")
   tenga que partirse en dos líneas. */
.org-group.wide{ width:320px; }
/* Tarjeta cuadrada (ej. Equipo de Bienestar): una lista corta de una sola
   columna se ve mejor en una caja más compacta y alta que ancha, en vez de
   heredar el ancho de 320px pensado para listas de dos columnas. */
.org-group-square{ width:172px; padding:22px 20px; }
.org-group-square .org-group-names-single{ gap:14px 0; margin-top:16px; }
/* Lista numerada de nombres (ej. Promotores de Ventas): más aire respecto
   al título de lo que tenía el grid de texto plano anterior, para que el
   contenido no se vea todo apretado justo debajo del título. Dos columnas;
   si el total es impar, el último nombre ocupa el ancho completo de la
   fila en vez de quedar solo a la izquierda con un hueco a la derecha. */
.org-group-names{
  list-style:none;
  counter-reset:org-group-item;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px 14px;
  text-align:left;
  font-size:.74rem;
  color:var(--text);
  margin:14px 0 0;
  padding:0;
}
.org-group-names li:last-child:nth-child(odd){ grid-column:1 / -1; }
/* Variante de una sola columna (ej. Equipo de Bienestar): lista corta que
   se lee mejor apilada verticalmente que repartida en dos columnas. */
.org-group-names-single{ grid-template-columns:1fr; }
.org-group-names li{
  counter-increment:org-group-item;
  display:flex;
  align-items:baseline;
  gap:5px;
  line-height:1.35;
  white-space:nowrap;
}
.org-group-names li::before{
  content:counter(org-group-item)'.';
  flex-shrink:0;
  font-weight:800;
  color:var(--cyan-dark);
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-darker); color:var(--gray-300); }
.footer-grid{
  display:grid;
  grid-template-columns:1.7fr .85fr .75fr .95fr;
  gap:44px;
  padding:80px 24px 56px;
}
.footer-brand-top{ display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.footer-logo{ width:128px; height:128px; object-fit:contain; }
.footer-logo-lider{ width:104px; height:104px; }
.footer-slogan{ font-style:italic; font-weight:600; color:var(--cyan-light); font-size:.95rem; margin-bottom:12px; }
.footer-brand p{ font-size:.88rem; color:var(--gray-300); margin-bottom:22px; }
.footer-map{ border-radius:var(--radius-sm); overflow:hidden; height:150px; border:1px solid rgba(255,255,255,.1); }
.footer-map iframe{ width:100%; height:100%; border:0; filter:grayscale(.2) invert(.92) contrast(.9); }

.footer-col h3, .footer-col h4{ color:var(--white); font-size:1rem; margin-bottom:20px; text-transform:uppercase; letter-spacing:.04em; }
.footer-contact{ display:flex; flex-direction:column; gap:6px; margin-bottom:22px; }
.footer-contact li{ font-size:.86rem; border-radius:var(--radius-sm); }
.footer-contact li a{
  display:flex; align-items:flex-start; gap:10px;
  padding:6px 8px; margin:0 -8px;
  border-radius:var(--radius-sm);
  transition:background .2s ease, transform .2s ease, color .2s ease;
}
.footer-contact li:not(:has(a)){ display:flex; align-items:flex-start; gap:10px; padding:6px 8px; margin:0 -8px; }
.footer-contact li a:hover{ background:rgba(255,255,255,.07); color:var(--cyan-light); transform:translateX(4px); }
.footer-contact .icon{ fill:var(--cyan-light); margin-top:2px; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.footer-social .icon{ width:15px; height:15px; fill:var(--gray-300); transition:fill .25s ease; }
.footer-social a:hover{ background:var(--cyan); transform:translateY(-4px); box-shadow:0 8px 18px rgba(14,163,208,.45); }
.footer-social a:hover .icon{ fill:var(--white); }

.footer-links{ display:flex; flex-direction:column; gap:4px; }
.footer-links a{
  display:flex; align-items:center; gap:8px;
  font-size:.88rem; color:var(--gray-300);
  padding:6px 8px; margin:0 -8px;
  border-radius:var(--radius-sm);
  transition:background .2s ease, color .2s ease, transform .2s ease, gap .2s ease;
}
.footer-links a::before{
  content:'';
  width:0; height:2px;
  background:var(--cyan-light);
  transition:width .2s ease;
}
.footer-links a:hover{ background:rgba(255,255,255,.07); color:var(--cyan-light); transform:translateX(4px); }
.footer-links a:hover::before{ width:10px; }

.footer-form{ display:flex; flex-direction:column; gap:10px; }
.footer-form input, .footer-form textarea{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  color:var(--white);
  font-family:inherit;
  font-size:.85rem;
  resize:none;
}
.footer-form input::placeholder, .footer-form textarea::placeholder{ color:var(--gray-300); }
.footer-form input:focus, .footer-form textarea:focus{ outline:none; border-color:var(--cyan); }
.form-note{ font-size:.8rem; min-height:18px; color:var(--cyan-light); }

.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; }
/* El texto de copyright (con "Inscribirse" y la etiqueta "Aceptamos pagos
   con:" incluidos dentro del mismo <p>, separados por "|") y los 4
   logotipos de pago viven como hijos directos del mismo contenedor flex
   (ya no hay un <div class="footer-quicklinks"> separado), para que se
   lean como una sola línea continua: "© 2026 CEFOPEC | Todos los derechos
   reservados | Inscribirse | Aceptamos pagos con:" seguido inmediatamente
   por los logotipos. justify-content:flex-start (en vez de space-between)
   evita que el bloque de logotipos quede separado del texto en pantallas
   anchas. flex-wrap:wrap sigue siendo necesario porque en móvil esta fila
   no cabe en una sola línea; sin él el navegador comprimía el ancho de
   cada <img> (su alto quedaba fijo por CSS, así que se veían aplastados
   en líneas verticales) en vez de pasar los elementos sobrantes a una
   segunda línea. flex-shrink:0 en los logotipos evita ese mismo
   aplastamiento incluso dentro de una fila que sí envuelve. */
.footer-bottom-inner{ display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; row-gap:12px; column-gap:20px; font-size:.8rem; color:var(--gray-300); }
.footer-bottom-inner p{ margin:0; }
.footer-bottom-inner a, .footer-bottom-inner > span{ flex-shrink:0; }
/* "Inscribirse" ahora va dentro del mismo <p> que el copyright, entre
   "Todos los derechos reservados" y "Aceptamos pagos con:" (separados por
   "|"), en vez de como elemento aparte empujado al final de la fila. Al
   quedar rodeado de texto gris apagado (.footer-bottom-inner), se le da
   color cyan y negrita para que siga leyéndose como un enlace/CTA. */
.footer-quicklink-inscribirse{ position:relative; padding-bottom:2px; color:var(--cyan-light); font-weight:600; transition:color .2s ease; }
.footer-quicklink-inscribirse::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--cyan-light);
  transition:width .25s ease;
}
.footer-quicklink-inscribirse:hover{ color:var(--white); }
.footer-quicklink-inscribirse:hover::after{ width:100%; background:var(--white); }
.footer-quicklink-yappy{ display:inline-flex; align-items:center; }
.footer-quicklink-yappy img{ width:auto; height:38px; display:block; transition:transform .2s ease; }
.footer-quicklink-yappy:hover img{ transform:translateY(-2px); }
/* Logos de Visa, Mastercard y Cuanto: mismo tamaño VISUAL que el de Yappy.
   Visa y Mastercard van como <span> (no <a>) porque no llevan enlace ni
   interacción de hover; Cuanto sí es un <a> (enlace de pago a
   cuanto.app/cefopec), por eso comparte el mismo selector de tamaño pero
   tiene su propia regla de hover más abajo. El PNG de Yappy trae bastante
   margen interno (el isotipo solo ocupa ~85% del alto del lienzo),
   mientras que los de Visa/Mastercard/Cuanto vienen recortados casi al
   borde (~99%). Si a los cuatro se les diera la misma altura de
   contenedor (38px) estos tres se verían visiblemente más grandes que el
   de Yappy pese a "medir lo mismo". Por eso su altura de contenedor es
   menor (33px): descontado ese margen, el alto real del isotipo queda
   igualado en los cuatro (~32px).*/
.footer-quicklink-visa, .footer-quicklink-mastercard, .footer-quicklink-cuanto{ display:inline-flex; align-items:center; }
.footer-quicklink-mastercard img, .footer-quicklink-cuanto img{ width:auto; height:33px; display:block; }
/* El de Visa se pidió un poco más pequeño que el resto (a diferencia de
   Mastercard/Cuanto, que sí quedan igualados a Yappy): 27px en vez de
   33px. */
.footer-quicklink-visa img{ width:auto; height:27px; display:block; }
/* Cuanto es el único de los tres con enlace (a diferencia de Visa y
   Mastercard, decorativos); se le da el mismo efecto hover que al logo
   de Yappy para señalar que es clicable. */
.footer-quicklink-cuanto img{ transition:transform .2s ease; }
.footer-quicklink-cuanto:hover img{ transform:translateY(-2px); }
/* Etiqueta "Aceptamos pagos con:" — va dentro del mismo <p> que el
   copyright para que ambos formen una sola frase visual, en el mismo
   tono apagado que el resto del texto del footer-bottom. */
.footer-payments-label{ color:var(--gray-300); font-size:.8rem; white-space:nowrap; }

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;
  right:24px; bottom:96px;
  width:48px; height:48px;
  background:var(--navy);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:all .3s;
  z-index:400;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top svg{ width:22px; height:22px; fill:var(--white); }
.back-to-top:hover{ background:var(--cyan); }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float{
  position:fixed;
  right:24px; bottom:24px;
  width:60px; height:60px;
  background:#25D366;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.5);
  z-index:450;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.whatsapp-float:hover{
  transform:scale(1.08);
  background:#1FBE5A;
  box-shadow:0 12px 32px rgba(37,211,102,.6);
}
.whatsapp-float svg{ width:30px; height:30px; fill:var(--white); position:relative; z-index:2; }
.whatsapp-ping{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#25D366;
  opacity:.55;
  animation:whatsappPing 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes whatsappPing{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}
.whatsapp-dot{
  position:absolute;
  top:0; right:0;
  width:14px; height:14px;
  background:#FF3B30;
  border-radius:50%;
  border:2px solid var(--white);
  z-index:3;
}
.whatsapp-tooltip{
  position:absolute;
  right:74px;
  top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--white);
  color:var(--text);
  font-size:.8rem;
  font-weight:600;
  padding:10px 16px;
  border-radius:10px;
  box-shadow:var(--shadow-lg);
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  pointer-events:none;
}
.whatsapp-tooltip::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-left-color:var(--white);
}
.whatsapp-float:hover .whatsapp-tooltip,
.whatsapp-float:focus-visible .whatsapp-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0);
}
@media (max-width:700px){
  .whatsapp-float{ right:16px; bottom:16px; width:54px; height:54px; }
  .whatsapp-float svg{ width:27px; height:27px; }
  .back-to-top{ right:16px; bottom:82px; width:44px; height:44px; }
  .whatsapp-tooltip{ display:none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .why-grid, .pilar-grid{ grid-template-columns:repeat(3,1fr); }
  .cards-grid.three{ grid-template-columns:repeat(2,1fr); }
  .mvv-grid{ grid-template-columns:1fr; }
  .mvv-grid.four{ grid-template-columns:repeat(2,1fr); }
  .news-grid{ grid-template-columns:repeat(2,1fr); }
  .diploma-grid{ grid-template-columns:repeat(2,1fr); }
  .google-reviews-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:2.4rem; }
}

@media (max-width: 900px){
  .topbar-contact a span{ display:none; }
  /* El menú se abre como un panel anclado al lado DERECHO de la pantalla
     (no a pantalla completa desde la izquierda): ancho limitado, pegado a
     right:0, y se desliza entrando desde afuera del borde derecho
     (translateX(100%) -> 0) en vez de desde la izquierda. */
  .main-nav{
    position:fixed;
    top:var(--header-h); right:0; left:auto; bottom:0;
    width:min(82vw, 360px);
    background:var(--white);
    padding:20px 24px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .3s ease;
    box-shadow:-10px 0 34px rgba(2,57,121,.18);
    z-index:499;
    display:flex;
    flex-direction:column;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:0; }
  .main-nav > ul > li > a{ padding:16px 4px; border-bottom:1px solid var(--gray-100); }
  .main-nav > ul > li.has-dropdown{ display:flex; flex-wrap:wrap; align-items:center; }
  .main-nav > ul > li.has-dropdown > a{ display:flex; justify-content:space-between; flex:1; }
  /* Submenú cerrado por defecto en móvil; solo .open lo muestra
     (el :hover de escritorio no aplica aquí). */
  .dropdown, .submenu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; display:none; padding-left:12px; width:100%; }
  .has-dropdown.open .dropdown,
  .has-dropdown.open .submenu,
  .dropdown.open,
  .submenu.open{ display:block; }
  .has-dropdown > a::after{ display:none; }
  .submenu-toggle{ display:inline-flex; }
  .header-cta{ display:none; }
  /* .header-cta (Portal Académico, Inscríbete) se oculta arriba porque no
     cabe junto al botón hamburguesa; sin este bloque esos accesos —y el de
     WhatsApp, que en escritorio solo existe como burbuja flotante—
     desaparecían por completo en móvil. Se muestran aquí dentro del propio
     menú, empujados al fondo con margin-top:auto (el <ul> ocupa el espacio
     que necesita arriba, overflow-y:auto en .main-nav permite scroll si la
     pantalla es muy baja). */
  .main-nav-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:auto;
    padding-top:28px;
  }
  .main-nav-actions .btn{ padding:14px 20px; font-size:.92rem; }
  .nav-toggle{ display:flex; }
  .about-grid, .digital-grid{ grid-template-columns:1fr; }
  .about-visual{ max-width:360px; margin:36px auto 0; }
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-content{ order:2; }
  .hero-badge{ order:1; margin-bottom:20px; }
  .hero-actions, .hero-stats{ justify-content:center; }
  .hero p{ margin-left:auto; margin-right:auto; }
}

@media (max-width: 700px){
  .section{ padding:64px 0; }
  .mascot-cta{ width:200px; }
  .why-grid, .pilar-grid{ grid-template-columns:1fr 1fr; }
  .cards-grid.three{ grid-template-columns:1fr; }
  .mvv-grid.four{ grid-template-columns:1fr; }
  .wellness-values{ gap:8px; }
  .enroll-inner.center blockquote{ font-size:1.15rem; }
  .diploma-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .google-reviews{ padding:22px; }
  .google-reviews-head{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns:1fr; padding:56px 24px 40px; }
  .table-row{ grid-template-columns:1fr; text-align:left; gap:4px; padding:16px; }
  .table-row .btn{ justify-self:start; margin-top:8px; }
  .table-head{ display:none; }
  .enroll-inner{ text-align:center; justify-content:center; }
  .hero h1{ font-size:2rem; }
  .brand-sub{ display:none; }
  .page-banner{ padding:100px 0 48px; }
  .page-banner h1{ font-size:1.9rem; }
  .org-tier{ gap:14px; }
  .orgchart-toolbar{ gap:10px; }
  .orgchart-viewport{ height:520px; }
  .orgchart-hint{ font-size:.78rem; padding:8px 14px; width:100%; box-sizing:border-box; justify-content:center; }
  .orgchart-zoom-controls{ margin-left:0; width:100%; justify-content:center; }
  .orgchart-zoom-btn:not(.orgchart-zoom-btn-wide){ width:36px; height:36px; }
  .orgchart-zoom-btn-wide{ width:auto; padding:0 12px; font-size:.76rem; }
  .org-group-names{ grid-template-columns:1fr; }
  /* La página activa del carrusel de noticias (3 .news-card) se ve en
     fila horizontal deslizable con snap — el JS de paginación ya se
     encarga de mostrar solo las tarjetas de la página actual
     (display:none en las demás), así que aquí solo se define cómo se
     acomodan esas pocas tarjetas visibles. */
  .news-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .news-grid::-webkit-scrollbar{ display:none; }
  .news-grid .news-card{
    flex:0 0 100%;
    width:100%;
    scroll-snap-align:start;
  }
  /* Cuerpo Docente Planta: las 4 tarjetas de la página activa se apilan
     en columna vertical (una debajo de otra) en vez de en fila horizontal
     deslizable — en móvil el sitio no debe pedir gestos de swipe
     lateral para ver el contenido, solo scroll vertical normal. El JS de
     paginación (setupTeamCarousel) sigue mostrando solo las 4 tarjetas de
     la página actual; aquí solo se define que esas 4 se acomoden en
     columna. */
  .team-grid-carousel{
    display:flex;
    flex-direction:column;
    grid-template-columns:none;
    gap:16px;
  }
  .team-grid-carousel .team-card{
    width:100%;
  }
  /* "Anterior" y "Siguiente" deben quedar SIEMPRE uno junto al otro en la
     misma fila, nunca uno debajo del otro. Si los 3 elementos (Anterior +
     puntos + Siguiente) no caben juntos en pantallas angostas (ej. 320px),
     lo que baja a su propia fila completa son los puntos de paginación
     (order:3 + flex-basis:100%) — nunca uno de los botones, que por eso
     van con order:1 y order:2, sin ningún elemento de por medio que
     pudiera forzar un salto de línea entre ambos. */
  .team-carousel-controls{ gap:10px; flex-wrap:wrap; row-gap:10px; }
  .team-carousel-controls .team-carousel-btn:first-of-type{ order:1; }
  .team-carousel-controls .team-carousel-btn:last-of-type{ order:2; }
  .team-carousel-controls .team-carousel-dots{ order:3; flex-basis:100%; justify-content:center; }
  .team-carousel-btn{ padding:9px 14px; font-size:.78rem; }
}

@media (min-width:701px) and (max-width:1024px){
  .team-grid-carousel{ grid-template-columns:repeat(2, 1fr); }
}