/* =========================================================
   Buckingham English Center — Sitio estático
   HTML + CSS + JavaScript puro (sin frameworks)
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --navy:        #23456F;
  --navy-dark:   #1B3557;
  --navy-soft:   #2C5687;
  --lime:        #DCE44B;
  --lime-dark:   #C6CE33;
  --ink:         #2F3A45;
  --muted:       #626D7A;
  --line:        #E4E9EE;
  --soft:        #F4F6F8;
  --white:       #FFFFFF;

  --container:   1180px;
  --radius-xl:   34px;
  --radius:      24px;
  --radius-sm:   14px;

  --shadow-card: 0 14px 38px rgba(27,53,87,.08);
  --shadow-soft: 0 6px 18px rgba(27,53,87,.06);
  --shadow-nav:  0 4px 20px rgba(27,53,87,.08);

  --ease: .25s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--white);
  font-size:15px;
  line-height:1.6;
  /* 'clip' y no 'hidden': hidden convierte al body en contenedor con scroll
     propio y el navegador lo desplaza al saltar a un ancla. */
  overflow-x:clip;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }   /* el navegador le pone 1em 40px por defecto */
h1,h2,h3,h4{ margin:0; line-height:1.25; font-weight:700; color:var(--navy); }
p{ margin:0; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input{ font:inherit; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 3. Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 26px;
  border-radius:999px;
  font-size:13.5px; font-weight:600;
  transition:transform var(--ease), background var(--ease), color var(--ease), box-shadow var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--lime{ background:var(--lime); color:var(--navy); }
.btn--lime:hover{ background:var(--lime-dark); }
.btn--ghost{ border:1.5px solid rgba(255,255,255,.75); color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); }
.btn__arrow{ transition:transform var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

/* Botón "pestaña" anclado a la esquina inferior derecha de una tarjeta */
.btn-tab{
  position:absolute; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center; gap:0;
  min-width:62%;
  padding:15px 30px;
  background:var(--lime); color:var(--navy);
  font-size:14px; font-weight:600;
  border-radius:26px 0 var(--radius-xl) 0;
  box-shadow:-6px -6px 22px rgba(27,53,87,.12);
  transition:background var(--ease);
}
.btn-tab:hover{ background:var(--lime-dark); }
.btn-tab--sm{ min-width:32%; }

/* La flecha aparece deslizándose al pasar el cursor */
.btn-tab svg{
  flex:0 0 auto;
  width:0; margin-left:0; opacity:0;
  transform:translateX(-8px);
  transition:width var(--ease), margin-left var(--ease),
             opacity var(--ease), transform var(--ease);
}
.btn-tab:hover svg,
.btn-tab:focus-visible svg{
  width:26px; margin-left:14px; opacity:1;
  transform:translateX(0);
}

/* ---------- 4. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(105deg,#FFFFFF 0%,#FFFFFF 45%,#EEF4FA 100%);
  border-bottom:1px solid rgba(228,233,238,.9);
  transition:box-shadow var(--ease);
}
.site-header.is-stuck{ box-shadow:var(--shadow-nav); }
.header__inner{
  display:flex; align-items:center; gap:22px;
  min-height:72px;
  max-width:1320px;      /* el header respira más ancho que el contenido */
}
.brand{ flex:0 0 auto; }
.brand img{ height:52px; width:auto; }

.nav{ display:flex; flex:1 1 auto; align-items:center; gap:20px; }
/* la lista ocupa todo el espacio entre logo y buscador, y se centra dentro */
.nav__list{
  display:flex; align-items:center; justify-content:center;
  flex:1 1 auto; gap:2px; flex-wrap:nowrap;
}
.nav__item{ position:relative; }
.nav__link{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 11px;
  font-size:13px; font-weight:500; color:var(--navy);
  white-space:nowrap;
  border-radius:6px;
  transition:color var(--ease), background var(--ease);
}
.nav__link:hover,
.nav__item.is-open > .nav__link,
.nav__link.is-active{ color:var(--navy-dark); background:rgba(35,69,111,.07); }
.nav__caret{ transition:transform var(--ease); }
.nav__item.is-open .nav__caret{ transform:rotate(180deg); }

.dropdown{
  position:absolute; top:calc(100% + 6px); left:6px;
  min-width:196px;
  background:var(--navy); color:#fff;
  border-radius:4px;
  padding:6px 0;
  box-shadow:0 14px 30px rgba(27,53,87,.22);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.nav__item.is-open .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{
  display:block; padding:9px 18px;
  font-size:12.5px; color:#fff;
  white-space:nowrap;
  transition:background var(--ease);
}
.dropdown a:hover{ background:var(--navy-soft); }

.search{
  position:relative; flex:0 0 auto;
}
.search svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#9AA6B2; pointer-events:none;
}
.search input{
  width:150px; height:30px;
  padding:0 12px 0 32px;
  border:1px solid #CFD8E1; border-radius:6px;
  background:#fff; color:var(--ink); font-size:12.5px;
  outline:none;
  transition:width var(--ease), border-color var(--ease);
}
.search input:focus{ width:200px; border-color:var(--navy-soft); }

/* Panel de resultados del buscador local */
.search__results{
  position:absolute; top:calc(100% + 9px); right:0;
  width:330px; max-height:392px; overflow-y:auto;
  padding:6px;
  background:var(--white);
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 42px rgba(27,53,87,.18);
  z-index:80;
  display:none;
}
.search__results.is-open{ display:block; }
.search__item{
  display:block; width:100%; text-align:left;
  padding:9px 12px; border-radius:8px;
  transition:background var(--ease);
}
.search__item:hover,
.search__item.is-active{ background:var(--soft); }
.search__tag{
  display:block;
  font-size:9.5px; font-weight:600; letter-spacing:.7px; text-transform:uppercase;
  color:var(--navy-soft);
}
.search__item strong{
  display:block; margin-top:2px;
  font-size:12.8px; font-weight:600; color:var(--navy);
}
.search__desc{
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden;
  margin-top:3px;
  font-size:11.4px; line-height:1.5; color:var(--muted);
}
.search__empty{
  padding:14px 12px;
  font-size:12.4px; color:var(--muted);
}

.nav-toggle{
  display:none; margin-left:auto;
  width:42px; height:42px; border-radius:8px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:22px; height:2px; border-radius:2px;
  background:var(--navy); transition:transform var(--ease), opacity var(--ease);
}
.nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 4.b Slider principal ---------- */
.hero-slider{
  position:relative;
  padding-bottom:46px;
}
.hero-slider__viewport{
  overflow:hidden;
  transition:height .45s cubic-bezier(.45,.05,.25,1);
}
.hero-slider__track{
  display:flex;
  align-items:flex-start;   /* cada slide conserva su altura natural */
  transition:transform .55s cubic-bezier(.45,.05,.25,1);
  will-change:transform;
}
.slide{
  flex:0 0 100%;
  min-width:100%;
  opacity:.25;
  transition:opacity .45s ease;
}
.slide.is-active{ opacity:1; }

.slider-arrow{
  position:absolute; top:52%; transform:translateY(-50%);
  z-index:5;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--navy);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  transition:background var(--ease), color var(--ease), transform var(--ease);
}
.slider-arrow:hover{ background:var(--lime); border-color:var(--lime); }
/* se apoyan justo por fuera del contenido; nunca se salen de la pantalla */
.slider-arrow--prev{ left:max(14px, calc(50% - 656px)); }
.slider-arrow--next{ right:max(14px, calc(50% - 656px)); }
.slider-arrow--prev:hover{ transform:translateY(-50%) translateX(-3px); }
.slider-arrow--next:hover{ transform:translateY(-50%) translateX(3px); }

.slider-dots{
  display:flex; justify-content:center; gap:9px;
  margin-top:26px;
}
.slider-dots button{
  width:9px; height:9px; border-radius:50%;
  background:#C6D0DA;
  transition:background var(--ease), width var(--ease);
}
.slider-dots button:hover{ background:var(--navy-soft); }
.slider-dots button.is-active{ width:28px; border-radius:5px; background:var(--lime); }

/* ---------- 5. Encabezado de página ---------- */
.page-head{
  text-align:center;
  padding:52px 0 40px;
}
.page-head h1,
.page-head h2{
  font-size:clamp(22px,3vw,29px);
  font-weight:700; letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--navy);
}
.page-head p{
  margin-top:12px;
  color:var(--muted); font-size:14px;
  max-width:760px; margin-inline:auto;
}

/* ---------- 6. Tarjetas de curso (home) ---------- */
.courses{ padding-bottom:56px; }
.courses__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:52px;
}
.course-card{
  position:relative;
  min-height:340px;
  border-radius:var(--radius-xl);
  overflow:hidden;
  color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding:34px 40px 92px;
  isolation:isolate;
}
.course-card__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.course-card:hover .course-card__bg{ transform:scale(1.06); }
.course-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(27,53,87,.72) 0%, rgba(27,53,87,.80) 100%);
}
.course-card h3{
  color:#fff; font-size:22px; text-align:center; margin-bottom:14px;
}
.course-card p{
  font-size:13px; line-height:1.75; text-align:justify;
  color:rgba(255,255,255,.92);
}

/* ---------- 7. Certificaciones (Exámenes oficiales) ---------- */
.certs{ padding-bottom:64px; }
.certs__grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
}
/* El relleno del contenedor es el hueco por donde asoma la forma de color:
   22 px a la izquierda y 46 px por debajo de la tarjeta. */
.cert-card{
  display:block;
  position:relative;
  padding:0 0 38px 20px;      /* hueco por donde asoma la forma de color */
}
/* La forma repite la silueta de la tarjeta desplazada abajo-izquierda:
   por eso comparte los mismos radios y se lee pegada, no como un bloque suelto. */
.cert-card__shape{
  position:absolute; left:0; right:0; top:56px; bottom:0;
  border-radius:22px 46px 16px 46px;
  z-index:0;
}
/* Color sólido en el tramo visible; el desvanecido entra al final */
.cert-card--1 .cert-card__shape{ background:linear-gradient(157deg,#00B3A4 0%,#12BFA8 26%,#7FDCA6 62%,rgba(255,255,255,0) 100%); }
.cert-card--2 .cert-card__shape{ background:linear-gradient(157deg,#E4002B 0%,#E11540 26%,#F2718F 62%,rgba(255,255,255,0) 100%); }
.cert-card--3 .cert-card__shape{ background:linear-gradient(157deg,#0E2A47 0%,#1D3F63 26%,#6B8CA8 62%,rgba(255,255,255,0) 100%); }
.cert-card--4 .cert-card__shape{ background:linear-gradient(157deg,#F5C233 0%,#F5C233 26%,#F7D46B 62%,rgba(255,255,255,0) 100%); }
.cert-card--5 .cert-card__shape{ background:linear-gradient(157deg,#E4002B 0%,#E8332F 26%,#F79176 62%,rgba(255,255,255,0) 100%); }

.cert-card__body{
  display:block;
  position:relative; z-index:1;
  background:linear-gradient(168deg,#F1F4FA 0%,#E3E9F3 100%);
  border-radius:16px 46px 16px 46px;
  padding:52px 22px 34px;
  min-height:340px;
  transition:transform var(--ease), box-shadow var(--ease);
}
.cert-card:hover .cert-card__body{
  transform:translateY(-6px); box-shadow:var(--shadow-card);
}
/* el logo va al ras izquierdo del párrafo, no centrado */
.cert-card__logo{
  height:64px; display:flex; align-items:center; justify-content:flex-start;
  margin-bottom:24px;
}
.cert-card__logo img{ max-height:64px; max-width:100%; width:auto; }
.cert-card__text{ display:block; font-size:13px; line-height:1.75; color:var(--ink); }

/* ---------- 8. Convenios ---------- */
.agreements{ padding-bottom:64px; }
.agreements__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:52px;
}
.agreement{
  display:block;
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  aspect-ratio:16/11;
}
.agreement img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.agreement:hover img{ transform:scale(1.05); }
.agreement__badge{
  position:absolute; right:0; bottom:0;
  width:112px; height:92px;
  border-radius:18px 0 var(--radius-xl) 0;
  overflow:hidden;
  box-shadow:-6px -6px 20px rgba(27,53,87,.18);
}
.agreement__badge img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 9. Banda LinguaTech ---------- */
.journal{
  position:relative;
  background:var(--navy);
  border-radius:90px 0 130px 0;
  color:#fff;
  padding:66px 0 74px;
  overflow:hidden;
}
.journal__deco{
  position:absolute; inset:0; pointer-events:none;
  opacity:.5;
}
.journal__deco span{
  position:absolute; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.09);
}
.journal__deco span:nth-child(1){ width:190px; height:190px; left:6%;  top:8%; }
.journal__deco span:nth-child(2){ width:120px; height:120px; left:14%; top:58%; }
.journal__deco span:nth-child(3){ width:260px; height:260px; right:2%; bottom:-14%; }
.journal__deco span:nth-child(4){ width:90px;  height:90px;  left:44%; bottom:6%; }
.journal__deco span:nth-child(5){
  width:300px; height:340px; left:20%; top:6%;
  border:0; border-radius:44% 56% 48% 52% / 40% 44% 56% 60%;
  background:rgba(255,255,255,.035);
}
.journal__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center;
}
.journal__content{ text-align:center; }
.journal__logo{ width:180px; margin:0 auto 22px; }
.journal__content h2{
  color:var(--lime); font-size:19px; letter-spacing:.4px; margin-bottom:14px;
}
.journal__content p{
  font-size:12.8px; line-height:1.75; color:rgba(255,255,255,.9);
  max-width:430px; margin-inline:auto;
}
.journal__actions{
  display:flex; flex-wrap:nowrap; justify-content:center; gap:12px;
  margin-top:30px;
}
.journal__actions .btn{ padding:11px 20px; }
.journal__media{
  border:7px solid #fff; border-radius:20px; overflow:hidden;
  box-shadow:0 20px 44px rgba(0,0,0,.22);
  aspect-ratio:4/3;
}
.journal__media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 10. Sobre Nosotros ---------- */
.about{ padding:64px 0 56px; }
.about__card{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:44px 46px 92px;
  background:var(--white);
  box-shadow:var(--shadow-soft);
}
.about__top{
  display:grid; grid-template-columns:130px 1fr 320px; gap:34px; align-items:start;
}
.about__label{
  font-size:13px; font-weight:700; line-height:1.35;
  color:var(--navy); letter-spacing:.6px; text-transform:uppercase;
  padding-top:4px;
}
.about__text h2{ font-size:20px; margin-bottom:14px; }
.about__text p{ font-size:13.4px; line-height:1.8; color:var(--ink); }

/* Miniatura del video: foto con marco blanco y el play montado en el borde */
.about__media{
  position:relative;
  padding:11px;                       /* el marco blanco */
  background:var(--white);
  border-radius:22px;
  box-shadow:0 12px 30px rgba(27,53,87,.16);
}
.about__media img,
.about__media video{
  display:block;
  width:100%;
  aspect-ratio:16/15;
  object-fit:cover;
  border-radius:13px;
  background:var(--soft);
}
.about__thumb{ cursor:pointer; }
.about__play{
  position:absolute; left:-30px; top:50%; transform:translateY(-50%);
  width:62px; height:62px; border-radius:50%;
  background:var(--lime); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  padding-left:4px;                   /* centra ópticamente el triángulo */
  box-shadow:0 8px 22px rgba(27,53,87,.24);
  transition:transform var(--ease), background var(--ease);
}
.about__play:hover{ background:var(--lime-dark); transform:translateY(-50%) scale(1.08); }
.about__play svg{ width:19px; height:22px; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:38px;
  border:1px solid var(--line); border-radius:20px;
  background:#fff; box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.stat{
  display:flex; align-items:center; gap:13px;
  padding:18px 20px;
  border-right:1px solid var(--line);
  min-width:0;
}
.stat:last-child{ border-right:0; }
/* sin esto el texto no encoge y se sale del recuadro */
.stat > div{ min-width:0; }
.stat__icon{
  flex:0 0 auto;
  width:44px; height:44px; border-radius:50%;
  background:var(--lime); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
}
.stat__num{ font-size:21px; font-weight:700; color:var(--navy); line-height:1.1; }
.stat__label{ font-size:11px; line-height:1.35; color:var(--ink); overflow-wrap:break-word; }

/* ---------- 10.b Ventana del video ---------- */
.video-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.video-modal[hidden]{ display:none; }
.video-modal__fondo{
  position:absolute; inset:0;
  background:rgba(16,32,52,.86);
  backdrop-filter:blur(3px);
  animation:vm-fade .25s ease;
}
.video-modal__caja{
  position:relative;
  width:100%; max-width:960px;
  border-radius:16px; overflow:hidden;
  background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:vm-in .3s cubic-bezier(.4,0,.2,1);
}
.video-modal__caja video{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; background:#000;
}
.video-modal__cerrar{
  position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); color:var(--navy);
  transition:background var(--ease), transform var(--ease);
}
.video-modal__cerrar:hover{ background:var(--lime); transform:rotate(90deg); }
.video-modal__error{
  padding:26px; text-align:center;
  font-size:13px; color:#fff; background:var(--navy-dark);
}
.video-modal__error code{
  background:rgba(255,255,255,.12); padding:2px 6px; border-radius:4px;
}
@keyframes vm-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes vm-in{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .video-modal__fondo, .video-modal__caja{ animation:none; }
}

/* ---------- 11. Aliados ---------- */
.allies{ padding-bottom:70px; }
.section-head{ display:flex; align-items:center; gap:22px; margin-bottom:30px; }
.section-head h2{ font-size:17px; white-space:nowrap; }
.section-head__rule{
  position:relative; flex:1 1 auto; height:1px; background:var(--navy);
}
.section-head__rule::after{
  content:""; position:absolute; right:0; top:50%;
  width:9px; height:9px;
  border-top:1.5px solid var(--navy); border-right:1.5px solid var(--navy);
  transform:translateY(-50%) rotate(45deg);
}
/* Banda de aliados: una sola imagen con todos los logos.
   En pantallas angostas se desplaza en horizontal en vez de encogerse
   hasta volverse ilegible. */
.allies__banda{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding-bottom:6px;
}
.allies__banda img{
  display:block;
  width:100%; height:auto;
  min-width:820px;                /* por debajo de esto, se desplaza */
  filter:grayscale(1); opacity:.66;
  transition:filter .35s ease, opacity .35s ease;
}
.allies__banda:hover img{ filter:grayscale(0); opacity:1; }
.allies__banda::-webkit-scrollbar{ height:6px; }
.allies__banda::-webkit-scrollbar-thumb{ background:#CFD8E1; border-radius:3px; }
.allies__banda::-webkit-scrollbar-track{ background:transparent; }

/* ---------- 12. Footer ---------- */
.site-footer{
  background:var(--navy);
  border-radius:90px 0 0 0;
  color:rgba(255,255,255,.9);
  padding:56px 0 0;
  margin-top:10px;
}
.footer__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
  padding-bottom:44px;
}
.footer__col + .footer__col{ border-left:1px solid rgba(255,255,255,.14); padding-left:40px; }
.footer__col h3{
  color:var(--lime); font-size:12.5px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; margin-bottom:18px;
}
.footer__list li{
  display:flex; align-items:center; gap:9px;
  font-size:12.4px; line-height:1.5;
  margin-bottom:11px;
  color:rgba(255,255,255,.88);
}
.footer__list li svg{ flex:0 0 auto; opacity:.85; }
.footer__list a{ transition:color var(--ease); }
.footer__list a:hover{ color:var(--lime); }

.footer__bottom{
  border-top:1px solid rgba(220,228,75,.55);
  padding:16px 0 20px;
  text-align:center;
  font-size:11.6px; color:rgba(255,255,255,.78);
}
.footer__bottom a{ transition:color var(--ease); }
.footer__bottom a:hover{ color:var(--lime); }

/* ---------- 12.b Enlaces a páginas aún no construidas ---------- */
a.is-pending{ cursor:default; }
a.is-pending:hover{ transform:none; }
.nav__link.is-pending:hover,
.dropdown a.is-pending:hover{ background:transparent; }
.dropdown a.is-pending:hover{ color:#fff; }
.btn--lime.is-pending:hover{ background:var(--lime); }
.btn--ghost.is-pending:hover{ background:transparent; }
.btn-tab.is-pending:hover{ background:var(--lime); }
.btn.is-pending:hover .btn__arrow{ transform:none; }
.footer__list a.is-pending:hover,
.footer__bottom a.is-pending:hover{ color:inherit; }

/* ---------- 13. Animación de entrada ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   14. Responsive
   ========================================================= */
@media (max-width:1100px){
  .certs__grid{ grid-template-columns:repeat(3,1fr); }
  .about__top{ grid-template-columns:120px 1fr; }
  .about__media{ grid-column:1 / -1; max-width:360px; }
  .about__play{ left:-26px; }
}

/* El menú colapsa antes que el resto: los enlaces van en una sola línea */
@media (max-width:1120px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-nav);
    padding:12px 24px 22px;
    max-height:calc(100vh - 72px); overflow-y:auto;
    transform:translateY(-14px); opacity:0; visibility:hidden;
    transition:transform var(--ease), opacity var(--ease), visibility var(--ease);
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; }
  .nav__list{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px; }
  .nav__link{ padding:13px 4px; font-size:14px; justify-content:space-between; }
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    display:none; box-shadow:none; margin:2px 0 8px; border-radius:8px;
  }
  .nav__item.is-open .dropdown{ display:block; }
  .search{ margin-top:12px; margin-left:0; }
  .search input, .search input:focus{ width:100%; height:38px; }
  .search__results{
    position:static; width:100%; max-height:260px;
    margin-top:8px; box-shadow:none;
  }
}

@media (max-width:960px){
  .journal__inner{ grid-template-columns:1fr; gap:36px; }
  /* sin tope, la foto se estiraría a ~840px y perdería su proporción */
  .journal__media{ max-width:520px; margin-inline:auto; }
  .journal{ border-radius:60px 0 80px 0; }
  .site-footer{ border-radius:60px 0 0 0; }
}

@media (max-width:820px){
  /* En una sola columna se acotan: a ancho completo las tarjetas quedarían
     achatadas (2.3:1) y perderían la proporción del diseño. */
  .courses__grid{ grid-template-columns:1fr; gap:38px; max-width:560px; margin-inline:auto; }
  .agreements__grid{ grid-template-columns:1fr; gap:38px; max-width:560px; margin-inline:auto; }
  .certs__grid{ grid-template-columns:repeat(2,1fr); }
  /* 2 columnas: se aprieta el relleno y los saltos de línea forzados
     se anulan para que el texto fluya con el ancho disponible */
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat{ padding:15px 14px; gap:10px; }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .stat__label br{ display:none; }
  .stat__icon{ width:38px; height:38px; }
  .stat__icon svg{ width:19px; height:19px; }
  .about__card{ padding:34px 26px 88px; }
  .about__top{ grid-template-columns:1fr; gap:22px; }
  /* deja hueco a la izquierda para que el play no se salga de la tarjeta */
  .about__media{ max-width:440px; margin-left:34px; }
  .about__play{ left:-26px; }
  .footer__grid{ grid-template-columns:1fr; gap:30px; }
  .footer__col + .footer__col{ border-left:0; padding-left:0; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); }
}

@media (max-width:560px){
  /* En celular las 4 cifras van una debajo de otra: en 2 columnas
     quedan ~50px de texto y las etiquetas se parten feo. */
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:0; border-bottom:1px solid var(--line); padding:14px 16px; }
  .stat:last-child{ border-bottom:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--line); }

  .certs__grid{ grid-template-columns:1fr; }
  .course-card{ padding:28px 24px 88px; min-height:300px; }
  .btn-tab{ min-width:78%; padding:14px 20px; }
  .journal__actions{ flex-wrap:wrap; }
  .journal__actions .btn{ width:100%; }
  .page-head{ padding:36px 0 30px; }
}