/* Poppins servida desde la propia web (brief de Eva): con Google Fonts cada visita
   mandaba la IP del visitante a Google. Subconjunto latin (incluye tildes, ñ, ¿ y ¡), woff2. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/poppins-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/poppins-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/poppins-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* <picture> solo aporta la version WebP: fuera del layout, la <img> manda igual que antes. */
picture { display: contents; }
picture > source { display: none; }  /* si no, cuenta como hueco en filas flex (sello de Cambridge) */
:root {
  --blue: #005AB4; --blue-dark: #004A94; --blue-tint: #EAF2FB;
  --gold: #FDCB34; --ink: #14202E; --ink-2: #4A5A6B;
  --line: #DCE4EE; --white: #FFFFFF; --radius: 18px; --wrap: 1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: clamp(27px, 3.6vw, 38px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; color: var(--blue);
  padding: 10px 16px; border-radius: 8px; z-index: 100; }

/* header */
header { position: sticky; top: 0; z-index: 50; background: var(--blue);
  box-shadow: 0 1px 0 rgba(255,255,255,.12); }
/* Vuelta a una sola fila (7-sep-2026): tres rondas de fila de contacto
   escrita encima del menu -- alineada a la izquierda, a la derecha, "por
   carriles" -- las tres rechazadas por el mismo motivo de fondo: la fila de
   contacto siempre tiene menos contenido que la de menu+CTA, y ese hueco
   desigual lee como "desorganizado" sin importar el alineado. Un logo
   cuadrado tampoco cabe legible en una sola fila de 76px. Se vuelve al
   header original que SI gustaba (logo horizontal, iconos mudos de
   contacto, una fila); el correo y los telefonos escritos se mueven al
   hero de portada, donde hay sitio real. Detalle completo: ver el informe
   de la ronda 3 en el hilo con Yovan. */
/* La barra la marca el logo, no al reves: el cuadrado mide 70px y en una
   barra de 76 le quedaban 3px arriba y 3 abajo, o sea pegado al borde
   superior y a la linea fina de abajo (Yovan, 7-sep-2026: "needs a
   little breathing room"). min-height en vez de height fija para que el
   aire sea el mismo aunque el logo cambie de tamano. */
.bar { display: flex; align-items: center; gap: 18px; min-height: 96px; }
/* Dos marcas: el cuadrado (logo.stack) en escritorio, el horizontal
   (logo.wide) en movil -- el cuadrado a esa altura es ilegible si se
   encoge mas. display:none saca la escondida del arbol de accesibilidad,
   asi que ambas llevan el mismo alt sin duplicar para lectores de pantalla. */
.bar .logo { width: auto; display: block; }
.bar .logo.stack { height: 70px; }
.bar .logo.wide { display: none; }

/* El menu va CENTRADO en el hueco que queda entre el logo y los iconos de
   contacto, no pegado a la derecha (Yovan, 7-sep-2026, anotando encima de
   la cabecera). Los dos margenes auto se reparten el espacio libre a
   partes iguales, asi que el menu queda a la misma distancia de sus dos
   vecinos sin numeros magicos. */
nav { margin-left: auto; margin-right: auto; display: flex;
  align-items: center; gap: 22px; }
nav a { color: #DCE9F8; text-decoration: none; font-size: 15.5px; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
nav a:hover { color: #fff; border-bottom-color: var(--gold); }
nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }
.btn { display: inline-block; background: var(--gold); color: #16233A;
  font-weight: 700; font-size: 15.5px; text-decoration: none; padding: 12px 22px;
  border-radius: 999px; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(0,0,0,.45); }
.btn.ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn.blue { background: var(--blue); color: #fff; }

/* video */
.video-wrap { max-width: 900px; margin: 0 auto; }
.video-frame { position: relative; display: block; border-radius: var(--radius);
  overflow: hidden; background: #04121F; text-decoration: none;
  box-shadow: 0 26px 64px -34px rgba(0,0,0,.6); }
.video-frame video, .video-frame img { display: block; width: 100%; height: auto; }
.video-play { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,40,84,.30); transition: background .18s ease; }
a.video-frame:hover .video-play { background: rgba(0,40,84,.10); }
.video-play i { width: 78px; height: 78px; border-radius: 50%; background: var(--gold);
  display: grid; place-items: center; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6);
  transition: transform .18s ease; }
a.video-frame:hover .video-play i { transform: scale(1.06); }
.video-play i::after { content: ""; border-left: 22px solid #16233A;
  border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  margin-left: 6px; }
.video-note { margin-top: 20px; text-align: center; color: var(--ink-2);
  font-size: 15.5px; }
.video-note a { color: var(--blue); font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid rgba(0,90,180,.28); }
.video-note a:hover { border-bottom-color: var(--blue); }
/* El reel del Premio de Excelencia bajo las tarjetas de Reconocimientos (Eva, 6-sep). */
.award-video { margin-top: 30px; }

/* social */
.social { display: inline-flex; align-items: center; gap: 9px; }
.social svg { width: 19px; height: 19px; flex: none; }

/* hero */
.hero { background: var(--blue); color: #fff; padding: 64px 0 92px;
  position: relative; overflow: hidden; }
/* interiores compactas: la banda azul no necesita 112px de relleno para
   un titulo y dos lineas. */
.hero.compact { padding: 40px 0 44px; }
.hero::after { content: ""; position: absolute; right: -180px; top: -120px;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(253,203,52,.18) 0%, rgba(253,203,52,0) 68%); }
.hero .wrap { position: relative; z-index: 1; max-width: 860px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gold);
  font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 20px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); }
.hero h1 { font-size: clamp(33px, 5.4vw, 56px); font-weight: 800; }
.hero.compact h1 { font-size: clamp(28px, 4vw, 40px); }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p.lead { font-size: clamp(16px, 1.9vw, 18.5px); color: #CFE0F4; margin-top: 14px;
  max-width: 640px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

/* sections */
section { padding: 46px 0; }
section.tint { background: #D6E7F8; }  /* tono Cielo --sky (Yovan, 16-sep): era casi blanco #F6F9FD */
section.blue { background: var(--blue); color: #fff; }
section.blue .section-head .kicker,
section.blue .kicker { color: var(--gold); }
section.blue .section-head p { color: #CFE0F4; }
/* el texto de las listas heredaba el gris de --ink-2 y sobre azul no se leia */
section.blue .ticks li, section.blue .cam-notas li { color: #EAF2FB; }
section.blue .ticks li strong { color: #fff; }
.section-head { max-width: 680px; margin-bottom: 24px; }
.section-head p { color: var(--ink-2); margin-top: 10px; font-size: 17px; }
.kicker { color: var(--blue); font-weight: 700; font-size: 13.5px;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.why { padding: 28px 26px; background: var(--blue-tint); border-radius: var(--radius); }
.why h3 { color: var(--blue); margin-bottom: 10px; font-size: 19px; }
.why p { color: var(--ink-2); font-size: 15.5px; }

.card { background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 20px;
  transition: border-color .15s ease, transform .15s ease; }
.card:hover { border-color: var(--blue); transform: translateY(-3px); }
.card-age { display: inline-block; background: var(--gold); color: #16233A;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; padding: 5px 12px;
  border-radius: 999px; margin-bottom: 16px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: 15.5px; }
/* Las lineas doradas de examenes al mismo alto (Yovan, 17-sep): el grid ya
   iguala la altura de las cuatro tarjetas, pero .leads iba pegada al final de
   un parrafo de longitud variable, asi que la de Adultos (3 lineas) caia 26 px
   por debajo de las otras. El parrafo de cuerpo crece y la empuja al borde.
   Solo de 621 px en adelante: por debajo las tarjetas van a fila entera (no hay
   nada que alinear) y ademas display:flex bloquearia la edad y el h3, que ahi
   comparten linea a proposito. */
@media (min-width: 621px) {
  .card { display: flex; flex-direction: column; }
  .card > p:not(.card-age):not(.leads) { flex: 1 0 auto; }
}
.card .leads { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--blue); font-weight: 600; }

.exam-list { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.exam { display: flex; flex-direction: column; gap: 2px; padding: 15px 18px;
  border-radius: 14px; background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--blue); }
.exam-code { font-weight: 800; font-size: 19px; color: var(--blue); }
.exam-name { font-size: 14.5px; }
.exam-level { font-size: 13.5px; color: var(--ink-2); }
.note { margin-top: 30px; padding: 22px 26px; border-radius: var(--radius);
  background: var(--blue-tint); color: var(--ink-2); font-size: 15.5px; }
.note strong { color: var(--ink); }
.cam-badge { display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 34px; margin-top: 34px; }
.cam-badge img { width: 300px; max-width: 100%; height: auto; display: block; }
.cam-badge p { color: var(--ink-2); font-size: 15.5px; flex: 1 1 260px; margin: 0; }
.award { background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 30px 32px; }
.award-mark { display: block; width: 38px; height: 38px; margin-bottom: 18px;
  color: var(--blue); }
.award-mark svg { width: 100%; height: 100%; display: block; }
.award-from { color: var(--blue); font-weight: 700; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 9px; }
.award h3 { color: var(--ink); font-size: 21px; margin-bottom: 12px; }
.award p { color: var(--ink-2); font-size: 15.5px; }
.award p strong { color: var(--ink); }
.award p a { color: var(--blue); font-weight: 600; }
section.blue .award { background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16); }
section.blue .award-mark, section.blue .award-from { color: var(--gold); }
section.blue .award h3 { color: #fff; }
section.blue .award p { color: #CFE0F4; }
section.blue .award p strong { color: #fff; }
section.blue .award p a { color: var(--gold); }

section.blue .note { background: rgba(255,255,255,.08); color: #CFE0F4; }
section.blue .note strong { color: #fff; }

.teach h3 { color: var(--gold); margin-bottom: 10px; font-size: 18px; }
.teach p { color: #CFE0F4; font-size: 15.5px; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: start; }
.contact dl { margin: 0; display: grid; gap: 22px; }
.contact dt { font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
.contact dd { margin: 0; font-size: 17px; }
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; }
/* Se veian como texto plano y nadie sabia que WhatsApp, Instagram y Facebook
   llevan a algun sitio (Yovan, 22-sep). Subrayado suave siempre, solido al pasar. */
.contact dd a { text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); }
.contact dd a:hover { text-decoration-color: currentColor; }
.map-card { display: flex; gap: 20px; align-items: flex-start; text-decoration: none;
  background: var(--blue-tint); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 28px;
  transition: border-color .15s ease, transform .15s ease; }
.map-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.map-card:hover .map-go { text-decoration: underline; }
.map-pin { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: var(--blue); position: relative; }
.map-pin::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 13px; border-radius: 50%; border: 3.5px solid var(--gold);
  transform: translate(-50%, -50%); }
.map-text { display: flex; flex-direction: column; gap: 3px; font-size: 16px;
  color: var(--ink-2); line-height: 1.5; }
.map-text strong { color: var(--ink); font-size: 18px; font-weight: 600; }
.map-go { margin-top: 10px; color: var(--blue); font-weight: 600; font-size: 15px; }

/* cta strip */
.cta { background: var(--blue-tint); border-radius: var(--radius);
  padding: 40px 38px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta h3 { font-size: 24px; }
.cta p { color: var(--ink-2); margin-top: 8px; }
.cta .btn { margin-left: auto; }

/* El pie deja el azul casi negro (#0E1A28) y pasa al AZUL DE LA MARCA, el mismo
   var(--blue) de la cabecera y el hero (Yovan, 11-sep-2026).
   OJO: el azul de marca de ESTE sitio es #005AB4, no el #0D7FD0 de los carteles
   publicados. Es una decision suya del rediseno de agosto, tomada dos veces y a
   sabiendas; ver la memoria project-lenguasol-brand-palette.
   AL SUBIR EL FONDO HAY QUE SUBIR EL TEXTO: los grises del pie se calcularon
   contra el casi negro y sobre azul se caen. Contraste medido:
     #93A6BA sobre #0E1A28 = 7.02  ->  sobre #005AB4 = 2.69  (ilegible)
     #BFD3EA sobre #0E1A28 = 11.46 ->  sobre #005AB4 = 4.40  (justo)
   Todo el texto secundario pasa a #CFE0F4, que da 5.0 y NO es un color nuevo:
   es el que ya usa .hero p.lead para texto sobre azul. Los enlaces fuertes se
   quedan en blanco (6.73). La linea divisoria sube de .1 a .22 de blanco porque
   sobre azul a .1 no se veia. */
footer { background: var(--blue); color: #CFE0F4; padding: 34px 0 26px; font-size: 14.5px; }
.foot-top { display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.22); }
.foot-top .logo, .foot-brand .logo { height: 41px; width: auto; }
.foot-links { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a { color: #CFE0F4; text-decoration: none; }
.foot-links a:hover { color: #fff; }
.foot-bottom { padding-top: 22px; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }

@media (max-width: 860px) {
  /* nav is hidden here, so the bar has room -- spend it on the logo,
     which is where INGLES is hardest to read. Vuelve el horizontal: el
     cuadrado necesita ~70px de alto para que INGLES se lea, y esta franja
     movil no tiene esa altura de sobra sin invadir el resto de la barra. */
  .bar .logo.stack { display: none; }
  .bar .logo.wide { display: block; height: 54px; }
  .contact-grid { grid-template-columns: 1fr; }
  section { padding: 58px 0; }
  .hero { padding: 46px 0 62px; }
  .cta .btn { margin-left: 0; }
}

/* ---------- v2: pieces from Eva's brief, in our existing brand ---------- */

/* Mobile menu (brief 3). Desktop keeps the plain inline nav. */
.burger { display: none; }

@media (max-width: 860px) {
  .bar { position: relative; flex-wrap: wrap; row-gap: 0; }
  .bar > a:first-child { margin-right: auto; }
  .burger { display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 42px; height: 42px; padding: 0 9px; cursor: pointer;
    border-radius: 11px; order: 3; }
  .burger:hover { background: rgba(255,255,255,.12); }
  .burger span { display: block; height: 2px; background: #fff;
    border-radius: 2px; }
  header nav { order: 4; display: none; width: 100%; flex-direction: column;
    gap: 2px; padding: 6px 0 12px; }
  .nav-toggle:checked ~ nav { display: flex; }
  header nav a { padding: 11px 4px; border-bottom: 1px solid rgba(255,255,255,.14); }
  .bar-cta { order: 5; width: 100%; display: none; gap: 10px; padding-bottom: 12px; }
  .nav-toggle:checked ~ .bar-cta { display: flex; }
  .bar-cta .btn { flex: 1; text-align: center; }
}

.bar-cta .btn { padding: 11px 18px; font-size: 15px; }
.btn.tel-cta { display: inline-flex; align-items: center; gap: 7px; padding-top: 8px; padding-bottom: 8px; color: var(--blue-dark); }  /* el movil en la cabecera, en el sitio del test de nivel (11-sep) */
.btn.tel-cta svg { width: 16px; height: 16px; flex: none; }

/* Contacto + social DENTRO de la barra (brief 2), como iconos mudos --
   version original que a Eva le parecio "prolija, sin hueco". El correo y
   los telefonos ESCRITOS se probaron aqui tres veces (fila propia, franja
   de color, fila compartida con distintos alineados) y las tres veces el
   texto volvio: la fila de contacto es mas corta que la de menu+CTA, y ese
   hueco desigual es lo que leia como desordenado, no el alineado. El texto
   completo vive ahora en el hero de portada (ver hero_home) y en la pagina
   de Contacto/footer; aqui solo hace falta que el icono sea reconocible. */
/* Sin margin-left propio: ese margen existia para separar los iconos del
   menu cuando el menu iba pegado a la derecha, pero ahora el menu va
   centrado y ese margen le sumaba 16px solo al hueco derecho, o sea que
   descentraba justo lo que se quiere centrar. La separacion la da el gap
   de .bar. */
.bar-contact { display: flex; align-items: center; gap: 2px; }
.bar-contact a { display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 9px; color: #CFE0F3; text-decoration: none; }
.bar-contact a:hover { color: #fff; background: rgba(255,255,255,.13); }
.bar-contact svg { width: 17px; height: 17px; flex: none; }
.bar-contact .bc-sep { width: 1px; height: 20px; margin: 0 7px;
  background: rgba(255,255,255,.22); }

/* Header stays visible while scrolling (brief 3) without eating the screen. */
header { position: sticky; top: 0; z-index: 50; }
.bar-cta { display: flex; gap: 9px; align-items: center; }

/* Hero (brief 4): copy left, the real classroom photo right. */
.hero.home { padding-bottom: 0; }
.hero.home .wrap { max-width: var(--wrap); }
.hero-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 40px;
  align-items: center; }
.hero.home .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero.home .actions .btn { white-space: nowrap; }
.hero.home { padding-top: 40px; padding-bottom: 40px; }
.hero-copy h1 { margin-bottom: 16px; font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1; letter-spacing: -.015em; }
.hero.home p.lead { max-width: 50ch; font-size: 16.5px; line-height: 1.6;
  margin-top: 14px; }
.hero.home .actions { margin-top: 22px; }
.hero.home .claim { margin: 14px 0 0; }
/* El correo y los telefonos escritos que Eva pedia en el header: no caben
   ahi sin desequilibrar sus dos filas (ver el comentario en .bar-contact),
   asi que se quedan aqui, en la portada, con sitio real y sin competir con
   el menu. */
.hero-contact { display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px; margin-top: 18px; font-size: 14px; color: #CFE0F4; }
.hero-contact a { display: inline-flex; align-items: center; gap: 6px;
  color: inherit; text-decoration: none; }
.hero-contact a:hover { color: #fff; }
.hero-contact svg { width: 15px; height: 15px; flex: none; }
/* El movil de la academia en grande (11-sep) con el test de nivel al lado. Es
   el numero con WhatsApp. Texto en azul OSCURO: el azul de marca sobre el oro
   se queda en 4,4:1 y no pasa AA en la pastilla pequena de la cabecera. */
.btn.tel-pill { display: inline-flex; align-items: center; gap: 10px;
  font-size: 22px; padding: 9px 26px; letter-spacing: .01em; color: var(--blue-dark); }
.btn.tel-pill svg { width: 22px; height: 22px; flex: none; }
/* Yovan (12-sep): pastillas del telefono mas finas, sobraba alto para el numero.
   El selector con header gana a la regla movil .bar-cta .btn.tel-cta de abajo. */
.btn.tel-pill { padding-top: 5px; padding-bottom: 5px; }
.btn.tel-cta, header .bar-cta .btn.tel-cta { padding-top: 5px; padding-bottom: 5px; }
header .bar-cta .btn.ghost { padding-top: 4px; padding-bottom: 4px; }  /* Contactanos al mismo alto que la pastilla (12-sep) */
/* Paginas legales (aviso legal, privacidad, cookies; 13-sep): texto largo en columna estrecha. */
.legal-text { max-width: 780px; }
.legal-text h2 { font-size: 22px; margin: 36px 0 10px; scroll-margin-top: 110px; }
.legal-text h2:first-child { margin-top: 0; }
.legal-text p, .legal-text li { color: var(--ink-2); }
.legal-text p + p { margin-top: 12px; }
.legal-text ul { padding-left: 22px; margin: 0 0 14px; }
.legal-text li { margin-bottom: 8px; }
.legal-text a { color: var(--blue); }
.legal-datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 14px 0 0;
  padding: 20px 24px; background: var(--blue-tint); border-radius: var(--radius); }
.legal-datos div { display: contents; }
.legal-datos dt { font-weight: 600; color: var(--ink); }
.legal-datos dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.legal-fecha { margin-top: 36px; font-size: 14px; }
@media (max-width: 560px) {
  .legal-datos { grid-template-columns: 1fr; gap: 0; padding: 18px 20px; }
  .legal-datos dd { margin-bottom: 10px; }
}
.hero .actions { align-items: center; }  /* la pastilla es mas alta: sin esto el otro boton se estira */
.porque-cta { margin-top: 22px; }

/* "Por que elegir" en azul y, debajo, su foto a todo el ancho con el MISMO formato
   que la de arriba del hero: 340px de alto (330 en movil), recortada con cover
   (Yovan, 11-sep). Es el original de 2000px del Drive de Eva (EV2_0318): a todo
   el ancho la de 1400 se quedaba corta en pantallas retina. */
.porque-azul .ticks li { color: #CFE0F4; }
.porque-azul .ticks li strong { color: #fff; }
.porque-azul { border-bottom: 1px solid rgba(255,255,255,.22); }  /* misma linea que el horizonte de .paso: separa "Por que" del pie, los dos azules */

/* Final de la home (Eva, 6-sep 12:38): en vez de "Pasate por la academia", que
   repetia lo que dice el pie justo debajo, dos botones grandes: Contactanos y
   WhatsApp. Mismo tamano de letra que la pastilla del telefono del hero. */
.porque-botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.porque-botones .btn { display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 20px; padding: 13px 30px; min-width: 230px; }
.porque-botones .btn svg { width: 22px; height: 22px; flex: none; }
.porque-botones .btn.wa { background: #D6E7F8; color: var(--blue-dark); }  /* tono Cielo de la app (--sky), no blanco puro */
@media (max-width: 560px) { .porque-botones .btn { flex: 1 1 100%; min-width: 0; } }
.porque-banda { margin: 0; }

/* "¡Da el paso!" (Eva, 6-sep): banda pequena con cursos, examenes y el test, SIN
   precios. Justo despues de la portada, en el azul de la web y con las tarjetas en
   el amarillo de Lenguasol (Yovan, 11-sep). Texto de tarjeta en --ink y no en
   --ink-2: el gris sobre el oro se queda en ~4,7:1. */
.paso { background: var(--blue); color: #fff; padding: 36px 0 40px;
  border-top: 1px solid rgba(255,255,255,.22); }  /* horizonte: el sol del hero se corta aqui y asi se lee como a proposito */
.paso .section-head { text-align: center; margin: 0 auto 22px; }
.paso .section-head p { color: #CFE0F4; }
.paso .card { display: flex; flex-direction: column; align-items: flex-start; color: var(--ink);
  background: var(--gold); border-color: var(--gold); }
.paso .card p { flex: 1; margin-bottom: 16px; color: var(--ink); }
.paso .card .btn { padding: 10px 18px; font-size: 15px; }
.porque-banda img { display: block; width: 100%; height: clamp(340px, 23.6vw, 520px);
  object-fit: cover; object-position: center 8%; }
@media (max-width: 900px) {
  .porque-banda img { height: 330px; }
}
.hero .claim { color: var(--gold); font-weight: 700; font-size: 17px;
  margin: 18px 0 4px; }
.hero-photo { margin: 0; align-self: stretch; display: flex; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius); box-shadow: 0 18px 44px rgba(0,0,0,.28); }

.video-cta { margin-top: 26px; }

/* Why-choose + request form (brief 6 + 7). */
.porque-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
  align-items: start; }
.porque-col h2, .form-card h2 { font-size: 27px; margin: 0 0 18px; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 0 0 0 38px; margin-bottom: 15px;
  color: var(--ink-2); line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1px;
  width: 23px; height: 23px; border-radius: 50%; background: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2314202E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 15px; background-repeat: no-repeat; background-position: center; }

/* porque-grid dos columnas: foto | motivos. La foto pasa a la izquierda con
   `order`, no moviendo el HTML, para que en movil el texto siga primero. */
.porque-grid { align-items: center; }
.porque-photo { margin: 0; order: -1; }
.porque-photo img { display: block; width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: 0 16px 40px -22px rgba(0,0,0,.45); }
@media (max-width: 900px) {
  .porque-photo { margin-top: 4px; order: 0; }
}

.form-card { background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; }
.form-card > p { color: var(--ink-2); margin-top: -8px; }
.form { display: grid; gap: 11px; margin-top: 16px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--ink); }
.form input, .form select, .form textarea { font: inherit; font-size: 15px;
  font-weight: 400; color: var(--ink); padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
  width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.form textarea { resize: vertical; }
.form .check { grid-template-columns: auto 1fr; align-items: start; gap: 10px;
  font-weight: 400; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.form .check input { width: 17px; height: 17px; margin-top: 1px; }
.form button { justify-self: start; margin-top: 4px; border: 0; cursor: pointer; }

/* Footer (brief 8): accreditations on white cards, never recoloured. */
.foot-main { display: grid; grid-template-columns: 1.35fr 1fr; gap: 46px;
  padding-bottom: 26px; }
.foot-brand > p { color: #CFE0F4; max-width: 38ch; margin: 16px 0 20px; }
.acc { display: flex; flex-wrap: wrap; gap: 12px; }
.acc-card { background: #fff; border-radius: 12px; padding: 11px 15px;
  display: inline-flex; align-items: center; }
.acc-card img { display: block; height: 44px; width: auto; }
/* Yovan, 20-sep: el bloque de contacto baja hasta la altura de la placa, para
   que las dos columnas del pie arranquen en la misma linea en vez de que la
   derecha empiece arriba del todo. 109 px es justo lo que ocupan el logo del
   pie y su claim, que es lo que va encima de la placa en la columna izquierda
   (medido identico a 1024, 1100, 1280, 1440 y 1600). Solo de 901 para arriba:
   por debajo el pie va a una columna y no hay nada con lo que alinear. */
@media (min-width: 901px) { .foot-contact { padding-top: 109px; } }
.foot-contact h3 { font-size: 16px; margin: 0 0 12px; }
.foot-contact p { color: #CFE0F4; margin: 0 0 12px; line-height: 1.65; }
.foot-contact a { color: #fff; }
/* Redes en el pie (Jenny, 6-sep: "falta Facebook"). En movil la cabecera las
   esconde dentro del menu, asi que el pie es donde se ven sin buscar. */
.foot-social { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-social a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.foot-social a:hover { text-decoration: underline; }
.foot-social svg { width: 18px; height: 18px; flex: none; }
.foot-bottom .legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot-bottom .legal a { color: #CFE0F4; }

/* Pie compacto en movil (5-sep). A 390px ocupaba 756px, casi una pantalla
   entera. Los sellos bajan de 44 a 30px y asi los TRES entran en una fila
   (54+89+84 + huecos = ~300 de los 342 disponibles) en vez de partirse 2+1,
   que era el mordisco mas gordo (144px). El resto son margenes de escritorio
   apretados. Nada se oculta: el pie dice lo mismo, ocupa ~200px menos. */
@media (max-width: 620px) {
  footer { padding: 26px 0 20px; }
  .foot-main { gap: 22px; padding-bottom: 18px; }
  .foot-brand > p { margin: 10px 0 14px; font-size: 13.5px; line-height: 1.45; }
  .acc { gap: 8px; }
  .acc-card { padding: 7px 10px; border-radius: 10px; }
  .acc-card img { height: 30px; }
  .foot-contact h3 { margin: 0 0 8px; }
  .foot-contact p { margin: 0 0 8px; line-height: 1.5; }
  /* Los tres enlaces suman 294px y el hueco de 24 los pasaba de 342 justo:
     caian a dos filas con "Examenes Cambridge" solo abajo. Con 14 caben. */
  .foot-links { gap: 6px 14px; }
  .foot-bottom { padding-top: 16px; gap: 10px; }
  /* El boton flotante de WhatsApp (52px, fijo abajo a la derecha) se comia la
     mitad de "Configuracion de cookies": tocar ahi abria WhatsApp en vez del
     panel de cookies. Se le reserva la esquina. Cuesta una fila mas de enlaces
     legales; un enlace de cookies que no se puede pulsar no es una opcion. */
  .foot-bottom .legal { gap: 4px 14px; padding-right: 62px; }
}

/* Floating WhatsApp (brief 10) -- clear of the form and the footer links.
   bottom 20px -> 12px (Yovan, 10-sep-2026): a 1600x1000 el borde de arriba del
   boton caia en y=924 y el hero acababa en y=930, o sea le mordia 6px a la
   esquina de abajo del hero y se leia como un pegote verde. A 12px empieza en
   932 y lo deja libre.
   OJO CON LO QUE ESTO NO ARREGLA: el boton es position:fixed, o sea esta
   siempre a la misma distancia del BORDE DE LA VENTANA, no del hero. Bajarlo
   solo cambia donde se posa en pantalla; con otra altura de ventana volvera a
   solaparse con lo que toque estar abajo en ese momento. Eso es lo que hace un
   boton flotante. Si algun dia molesta de verdad, lo que hay que hacer es
   esconderlo mientras el hero esta a la vista, no seguir bajandolo. */
.wa-float { position: fixed; right: 20px; bottom: 12px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.wa-float svg { width: 31px; height: 31px; }
.wa-float:hover { transform: translateY(-2px); }

@media (max-width: 900px) {
  /* Brief 4: on mobile the text comes first, the photo after. */
  .hero-grid, .porque-grid, .foot-main { grid-template-columns: 1fr; gap: 30px; }
  .hero-photo img { max-height: 330px; }
  .f-row { grid-template-columns: 1fr; }
  .form-card { padding: 22px; }
  .wa-float { width: 52px; height: 52px; right: 14px; bottom: 14px; }
}

/* ---- home compacta, pasada movil ----
   En una columna cada tarjeta suma su relleno entero, y hay catorce. La foto de
   la profesora ocupaba media pantalla ella sola: se limita el alto igual que se
   hizo con la del hero. Ningun texto se toca. */
@media (max-width: 620px) {
  /* Cuatro tarjetas de curso apiladas eran media pagina ellas solas. */
  .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .card { padding: 16px 14px; }
  .card h3 { font-size: 17px; }
  /* exam-list dos columnas: ocho fichas de tres lineas en columna eran casi
     dos pantallas de movil. minmax(220px,1fr) a 390px da una sola. */
  .exam-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .exam { padding: 12px 14px; }
  .exam-code { font-size: 17px; }
  /* Las tarjetas de parrafo largo ocupan la fila entera: a media columna
     salian a dos palabras por linea. (No se puede seleccionar la rejilla por
     su contenido, asi que se estira el hijo.) .card entra aqui desde el 5-sep:
     las de Cursos llevan parrafo + lista de examenes y a 164px de ancho no se
     leian (Yovan). Cuesta ~120px mas de scroll en las cuatro (955 vs 834):
     se acepta, en dos columnas salia a tres palabras por linea. */
  .grid > .award, .grid > .why, .grid > .teach, .grid > .card { grid-column: 1 / -1; }
  /* Ya a fila completa, la edad puede ir al lado del titulo en vez de encima. */
  .card-age { display: inline-block; margin-right: 10px; vertical-align: 2px; }
  .card h3 { display: inline; }
}

@media (max-width: 900px) {
  section { padding: 40px 0; }
  .section-head { margin-bottom: 22px; }
  .card { padding: 22px 20px; }
  .award { padding: 24px 22px 26px; }
  .grid { gap: 14px; }
  .porque-photo { margin-top: 20px; }
  .porque-photo img { max-height: 260px; object-fit: cover; }
  .ticks li { margin-bottom: 11px; }
  .form-card { padding: 20px; }
  .form { gap: 11px; }
}

/* ---- mobile header, final pass (source order matters: keep this last) ---- */
.nav-contact { display: none; }

@media (max-width: 860px) {
  /* Gold CTA stays out on the bar; everything else lives behind the burger. */
  .bar-cta { display: flex; order: 3; width: auto; padding-bottom: 0; gap: 8px; }
  .bar-cta .btn.ghost { display: none; }
  .bar-cta .btn { flex: none; font-size: 14px; padding: 10px 16px; }
  .burger { order: 4; margin-left: 2px; width: 38px; padding: 0 7px; }
  .bar { height: auto; min-height: 76px; align-items: center; }
  header nav { margin-left: 0; align-items: stretch; }
  header nav a { text-align: left; }
  .bar { gap: 10px; }
  .bar .logo.wide { height: 48px; }   /* the burger now needs the room */
  header nav { order: 5; }
  .nav-contact { display: block; }
  /* contact + social ride inside the burger menu, not on the closed bar */
  .bar-contact { order: 6; width: 100%; display: none; margin-left: 0;
    gap: 4px; padding: 4px 0 14px; }
  .nav-toggle:checked ~ .bar-contact { display: flex; }
}

@media (max-width: 380px) {
  /* Very narrow phones: the CTA label alone would push the burger off. */
  .bar-cta .btn { padding: 9px 12px; font-size: 13px; }
}

/* La pastilla del telefono lleva icono y era ~10px mas ancha que "Test de
   nivel": empujaba la hamburguesa a una segunda fila en 375-390px (11-sep). */
@media (max-width: 860px) {
  .bar-cta .btn.tel-cta { padding: 7px 12px; gap: 5px; }
  .bar-cta .btn.tel-cta svg { width: 14px; height: 14px; }
}

/* Franja de portatil pequeno (861-1001): la barra de escritorio entera no cabe
   — pide 1002 px — pero los que sobran son los iconos de contacto y redes, no
   el menu. Asi que el menu se queda donde esta y solo los iconos se meten
   detras de una hamburguesa, que los despliega en una fila debajo. Sin ellos
   la barra pide 816, y la franja empieza en 861. */
@media (min-width: 861px) and (max-width: 1001px) {
  .bar { position: relative; flex-wrap: wrap; row-gap: 0; }
  .bar > a:first-child { order: 1; }
  header nav { order: 2; }
  .bar-cta { order: 3; }
  .burger { order: 4; display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 38px; height: 42px; padding: 0 7px; cursor: pointer;
    border-radius: 11px; margin-left: 2px; }
  .burger:hover { background: rgba(255,255,255,.12); }
  .burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
  .bar-contact { order: 6; width: 100%; display: none; margin-left: 0;
    justify-content: flex-end; gap: 4px; padding: 4px 0 14px; }
  .nav-toggle:checked ~ .bar-contact { display: flex; }
}
@media (max-width: 380px) {
  .bar-cta .btn.tel-cta svg { display: none; }
}

/* El formulario ya no comparte fila con los motivos: en Contacto va solo y
   centrado, sin pasar de 720px para que los campos no queden larguisimos. */
.contacto-2col { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px;
  align-items: start; }
.contacto-2col .map-card { margin-top: 26px; }
/* Columna derecha de Contacto: el mapa arriba y UNA foto debajo (Eva, 22-sep).
   El .map-foto lleva margin-top porque antes iba debajo de los datos; aqui va
   el primero de la columna y sobra. */
.contacto-visual { display: grid; gap: 18px; align-content: start; }
/* El mapa manda su alto y la foto se come lo que sobre, asi la columna acaba
   justo donde acaba el formulario. Antes la foto tenia un 4/3 fijo y quedaba
   un escalon: la tarjeta bajaba mas que la foto.
   La imagen va ABSOLUTA dentro del <picture>: si se deja en el flujo, su alto
   natural (900x1200) manda y es la columna la que estira el formulario — que
   es justo lo que no se quiere. Asi aporta cero y se recorta a lo que sobre. */
.contacto-2col .contacto-visual { align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr); }
.contacto-2col .contacto-visual figure { display: flex; flex-direction: column;
  min-height: 0; }
/* El mapa cede alto para que la foto no salga en una rebanada: la columna la
   fija el formulario, asi que todo lo que se recorta del mapa se lo lleva la
   foto. 240 px sigue dejando la calle y el pin centrado. */
.contacto-2col .map-foto img { height: 240px; object-fit: cover; object-position: center; }
.contacto-2col .contacto-visual figure { position: relative; }
.contacto-2col .contacto-visual figure picture { position: relative; display: block;
  flex: 1; min-height: 190px; }
/* object-position arriba, no al centro: Eva (23-sep) pidio expresamente "can you
   not cut of the top part of the house, less street". Anclado al centro el
   recorte se come el tejado y deja acera; anclado arriba pasa al reves. */
.contacto-2col .contacto-visual figure img { position: absolute; inset: 0;
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
  object-position: 50% 0; }
/* El pie iba DEBAJO de la foto, asi que el borde de la foto quedaba por encima
   del borde del formulario aunque las dos columnas midieran igual: lo que se ve
   acabar antes es la foto, no el texto. Va dentro, sobre la imagen. */
.contacto-2col .contacto-visual figcaption { position: absolute; left: 0; right: 0;
  bottom: 0; margin: 0; padding: 26px 16px 12px; color: #fff; font-size: 14px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(to bottom, rgba(6,32,60,0), rgba(6,32,60,.72)); }
/* En movil no hay columna que igualar (el formulario va debajo), asi que todo
   el apano de arriba sobra: la foto vuelve al flujo con su recorte apaisado y
   el pie debajo, o se quedaba en una rebanada de 190 px. */
@media (max-width: 900px) {
  .contacto-2col .map-foto img { height: auto; }
  .contacto-2col .contacto-visual figure picture { position: static; min-height: 0; }
  .contacto-2col .contacto-visual figure img { object-position: 50% 0;
    position: static; height: auto;
    aspect-ratio: 4 / 3; }
  .contacto-2col .contacto-visual figcaption { position: static; padding: 0;
    margin-top: 10px; background: none; color: #CFE0F4; }
}
.contacto-visual .map-foto { margin-top: 0; }
.contacto-visual figure { margin: 0; }
.contacto-visual figure img { display: block; width: 100%; height: auto;
  border-radius: var(--radius); }
/* La foto de la calle es vertical (900x1200) y estirada dejaba la columna de
   datos medio vacia. Se recorta a apaisada, como en la captura de Eva; el
   fichero no se toca. */
.contacto-visual figure img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.contacto-visual figcaption { margin-top: 10px; color: #CFE0F4; font-size: 14.5px; }
/* Reparto que marco Yovan el 22-sep: los datos a lo ancho arriba y, debajo,
   dos columnas — mapa con la foto debajo a la izquierda, formulario a la
   derecha. Los seis datos se reparten solos en la fila ancha. */
.contacto-datos { margin-bottom: 40px; }
.contacto-datos .contact dl { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px 34px; }
.contacto-2col .form-card { margin: 0; }
/* El formulario iguala la altura de la columna de la izquierda (mapa + foto):
   la fila estira las dos celdas y la tarjeta ocupa la suya entera. */
.contacto-2col { align-items: stretch; }
.contacto-2col .form-card { display: flex; flex-direction: column; }
.contacto-2col .form-card .form { flex: 1; }
/* Mismos iconos que la barra de la cabecera, delante de cada dato. */
.contact dt .ci { display: inline-flex; width: 15px; height: 15px;
  margin-right: 8px; vertical-align: -2px; }
.contact dt .ci svg { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  /* Desde el movil se suele querer llamar, no rellenar: los datos primero. */
  .contacto-2col { grid-template-columns: 1fr; gap: 28px; }
}

/* Video de la home a dos columnas: el mismo texto de Eva, al lado del
   reproductor en vez de encima. Es lo que mas scroll ahorra de toda la pagina. */
.video-2col { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px;
  align-items: center; }
.video-2col .section-head { margin-bottom: 0; max-width: none; }
.video-2col .video-wrap { max-width: none; }
.video-2col .video-note { text-align: left; margin-top: 12px; font-size: 14px; }
.video-2col .video-cta { margin-top: 20px; }

/* Reconocimientos en la home: titular + tres lineas. El detalle de cada premio
   sigue entero en cambridge.html. */
.premios { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 16px; }
.premios li { display: flex; gap: 12px; align-items: flex-start; }
.premios .pm { flex: none; width: 26px; height: 26px; color: var(--gold); }
.premios .pm svg { width: 100%; height: 100%; }
.premios b { display: block; font-size: 16px; line-height: 1.3; color: #fff; }
.premios span { font-size: 13px; color: #CFE0F4; }
.premios-cta { margin: 26px 0 0; }
@media (max-width: 900px) {
  .video-2col { grid-template-columns: 1fr; gap: 22px; }
  .premios { grid-template-columns: 1fr; gap: 13px; }
}

/* Cursos y Cambridge comparten seccion: los chips van pegados a las tarjetas. */
.exam-chips { margin-top: 18px; }
.dos-botones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 22px 0 0; }
.dos-botones .btn.ghost.blue { background: transparent; color: var(--blue);
  border: 1.5px solid rgba(0,90,180,.35); }
.dos-botones .btn.ghost.blue:hover { border-color: var(--blue); }

/* El sello oficial era un recuadro alto para dos lineas de texto. */
.cam-badge { padding: 14px 18px; gap: 18px; align-items: center; }

/* Home compacta: la escalera de Cambridge cabe en una linea de chips. La
   version con tarjetas sigue entera en cambridge.html, que es su sitio. */
.exam-chips { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 9px; }
.exam-chips li { display: flex; align-items: baseline; gap: 7px;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; }
.exam-chips b { color: var(--blue); font-weight: 800; font-size: 15px; }
.exam-chips span { color: var(--ink-2); font-size: 13px; }

/* Contacto en la home: el pie repite justo debajo direccion, telefono,
   WhatsApp e email, asi que aqui solo van el mapa y los accesos directos. */
.contacto-rapido { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  align-items: center; }
@media (max-width: 900px) {
  .contacto-rapido { grid-template-columns: 1fr; }
}

/* Formulario: el honeypot se esconde sin display:none, que algunos bots leen. */
.hp { position: absolute !important; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 6px 0 0; padding: 12px 14px; border-radius: 12px;
  font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.form-status.ok { background: #E8F2FB; color: #00427F; border: 1px solid #B9D6EF; }
.form-status.err { background: #FDECEC; color: #8E1B1B; border: 1px solid #F3C4C4; }
.form button[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---- Hero home, variante B: la foto llega al borde derecho (elegida 04/09) ---- */
.hero.home { padding: 0; }
.hero.home .wrap { max-width: none; padding: 0; width: 100%; }
/* SUSTITUIDA EL 10-09 POR LA VARIANTE O (abajo). La B ponia la foto en la mitad
   derecha, a media altura; la O la sube a portada de lado a lado. Se conservan
   las dos reglas de arriba (.hero.home padding 0 y .wrap a ancho completo)
   porque la O las da por hechas: sin ellas el hero recupera su relleno y el
   contenido se mete otra vez en la columna de 1140. Las reglas de movil de la B
   se van con ella: solo afinaban su rejilla de dos columnas. */

/* ---- Hero home, variante O + sol (elegida 10/09) ----
   Como la K pero al reves: la foto es lo PRIMERO que se ve bajo la cabecera, de
   lado a lado, y el bloque azul con el texto va debajo. La foto deja de competir
   con el titular y hace de portada.
   ESTO TIENE QUE IR AL FINAL DEL FICHERO. Vivia en el <style> de
   _h_o_arriba.html, o sea despues de toda la hoja, y por eso ganaba. Puesto
   arriba del todo (junto a las reglas .hero) NO hace nada: la B de aqui tiene la
   misma especificidad y va despues. Comprobado: el hero salia de 635px de alto
   en vez de 834 y la rejilla seguia en dos columnas de 800px. */
.hero.home .hero-grid { grid-template-columns: 1fr; gap: 0; }
.hero.home .hero-photo { order: -1; width: 100%; align-self: auto; }
.hero.home .hero-photo img { width: 100%; height: 340px; min-height: 0;
                             object-fit: cover; object-position: center 45%;
                             border-radius: 0; box-shadow: none; }
.hero.home .hero-copy { order: 1; padding: 46px max(24px, calc((100vw - var(--wrap))/2 + 24px)) 44px; }
.hero.home p.lead { max-width: 68ch; }

/* El sol asomando por el pie del bloque azul, pegado al borde derecho: se ve poco
   mas que la corona. Colocado a mano por Yovan en el editor de la pestana Layout.
   EN vw, NO EN px: lo coloco sobre un hero de 1600 de ancho, y en px se quedaba
   de 955 pase lo que pase, o sea cuanto mas estrecha la ventana mas grande en
   proporcion -- a 1024 los rayos ya cruzaban el parrafo. 955/1600 = 59.7vw,
   631/1600 = 39.4vw, 46/1600 = 2.9vw: a 1600 sale clavado lo que coloco y en
   tabletas se encoge solo.
   VA EN ::before A PROPOSITO: .hero::after ya es el resplandor dorado de la
   esquina y no se puede pisar. Ademas ::before se pinta POR DEBAJO de .hero .wrap
   (los dos con z-index 1, gana el ultimo del DOM), o sea el texto queda ENCIMA
   del sol, que es lo que interesa para poder leerlo.
   La ruta es relativa a ESTA hoja, que vive en assets/ -- por eso "icon.svg" y
   no "assets/icon.svg". */
.hero.home::before { content: ""; position: absolute; z-index: 1;
   right: -2.9vw; bottom: -39.4vw;
   width: 59.7vw; height: 59.7vw;
   background: url("icon.svg") no-repeat center / contain;
   opacity: 0.55; }

/* Sin sol en movil: con el texto a todo el ancho no hay sitio limpio -- arriba se
   come el parrafo (ya paso con las variantes U/V/W) y abajo cae detras de la
   linea del telefono y el correo. Se probo a 300px con la corona a -150px (sucio)
   y a -235px (solo las puntas de los rayos) antes de quitarlo. Es un gesto de
   ESCRITORIO. */
@media (max-width: 900px) {
  .hero.home::before { display: none; }
}

/* ---- La portada llena la primera pantalla (Yovan, 11-sep-2026) ----
   "en iPad o portatil quiero ver toda la pagina azul, ahora se ve un trozo
   blanco". Medido antes de tocar nada: iPad vertical 820x1180 dejaba 296px de
   blanco por debajo del hero y 1920x1080 dejaba 150px. A 1440x900 entraba justo
   por 30px, o sea con la barra de marcadores puesta tambien asomaba.
   EL HUECO QUE SOBRA SE LO QUEDA LA FOTO, no el azul (corregido el 11-09). El
   primer intento se lo daba al bloque azul con el texto centrado en vertical, y
   en un iPad de 13 apaisado (1366x1024) eso dejaba ~95px de vacio encima del
   titulillo y otros tantos debajo del telefono: "demasiado espacio vacio".
   Dandoselo a la foto, la portada crece y el azul conserva el aire que ya tenia
   (53px arriba, 44px abajo). La foto nunca baja de los 340px aprobados
   (min-height en la figura), asi que en ventanas bajas sale lo de siempre.
   El sol va anclado al pie del hero, asi que baja con el solo.
   svh Y NO vh: en Safari de iPad/iPhone 100vh cuenta tambien la franja que tapa
   la barra de herramientas, o sea el hero saldria MAS ALTO que la pantalla y
   habria que hacer scroll para ver el final del azul -- justo lo contrario de lo
   que se pide. Se deja el calc con vh delante como respaldo para navegadores sin
   svh; el de svh lo pisa donde se entiende.
   Se restan los 96px de la cabecera (76 por debajo de 861px, que es donde la
   propia cabecera se encoge). De 700px para abajo no se toca: en movil el hero
   ya pasa de largo de la pantalla. */
@media (min-width: 701px) {
  .hero.home { min-height: calc(100vh - 96px); min-height: calc(100svh - 96px); }
  /* La fila de la foto es minmax(340px, 1fr): nunca menos de los 340 aprobados y
     se queda con lo que sobre.
     LA IMAGEN VA ABSOLUTA, y no es capricho -- dos intentos antes fallaron por lo
     mismo: mientras la <img> tenga alto propio (340px, 100% o auto) es ELLA la
     que manda sobre el alto del figure, no la fila. Con height:100% el
     porcentaje no tiene contra que resolverse (un min-height no da alto
     "definido") y se cae a auto; con auto toma su proporcion sobre el ancho. Las
     dos veces la foto acabo midiendo ancho x 0.666 -- 1279px de alto en una
     pantalla de 1080. Sacandola del flujo con inset:0, el figure lo dimensiona
     la fila y la imagen rellena lo que sea, con object-fit:cover recortando. */
  .hero.home .hero-grid { min-height: inherit; grid-template-rows: minmax(340px, 1fr) auto; }
  /* align-self:stretch OBLIGATORIO: .hero-grid trae align-items:center de serie y
     la variante O deja el figure en align-self:auto, o sea center. Con la imagen
     ya fuera del flujo el figure no tiene de donde sacar alto: se quedaba en 0px
     centrado dentro de una fila de 490px, y la foto desaparecia del todo. */
  .hero.home .hero-photo { position: relative; align-self: stretch; min-height: 0; }
  .hero.home .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
@media (min-width: 701px) and (max-width: 860px) {
  .hero.home { min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); }
}


/* ==== Revision de Eva (16-sep-2026), portada ====
   Sus puntos, en orden: cabecera (logo e iconos mas grandes, dos grupos),
   titulo de la seccion 1 mas pequeno, foto de la profesora mas pequena y sin
   ocupar todo el ancho, boton flotante de WhatsApp mas arriba y despegado del
   borde, y pie con iconos mas grandes y el sello de Centro Oficial Preparador
   con mas protagonismo, a la derecha. */
.bar .logo.stack { height: 80px; }  /* 92 -> 80 (Yovan, 16-sep: algo mas pequeno) */
/* El logo de 92px vivia en una barra de 96: 2px arriba y 2 abajo. Se le da aire
   (10 y 10) sin tocar el tamano de la marca. Solo en escritorio: en movil manda
   la barra de 76px con el logo horizontal. */
@media (min-width: 901px) { .bar { min-height: 104px; } }
/* la cabecera crece de 96 a 112: lo que restan el hero a pantalla completa y el
   desplazamiento a un ancla tienen que crecer igual. */
@media (min-width: 901px) {
  .hero.home { min-height: calc(100vh - 104px); min-height: calc(100svh - 104px); }
}
.bar-contact a { width: 44px; height: 44px; border-radius: 12px; }  /* 38 -> 44 (Yovan, 16-sep) */
.bar-contact a { color: #fff; }  /* macizos: en #CFE0F3 se apagaban; la variante H que se eligio es blanco puro */
.bar-contact svg { width: 25px; height: 25px; }                     /* 21 -> 25 */
.bar-contact .bc-sep { height: 28px; margin: 0 11px; }

/* Seccion 1: el titulo pesaba demasiado frente al texto que lleva debajo. */
.hero-copy h1 { font-size: clamp(26px, 2.6vw, 34px); }

/* Seccion 3: la foto iba a sangre de lado a lado. Se queda centrada, con el
   mismo encuadre (profesora + alumnos) pero sin comerse la pagina. */
.porque-banda { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.porque-banda img { height: clamp(260px, 17vw, 380px); border-radius: var(--radius); }

/* El flotante se perdia pegado a la esquina de abajo. */
.wa-float { right: 30px; bottom: 84px; }

/* Pie: iconos de redes solos (sin la palabra) y mas grandes. */
.foot-social a { gap: 0; }
.foot-social svg { width: 25px; height: 25px; }

/* El sello de Centro Oficial Preparador manda sobre los otros dos y se va a la derecha. */
.acc { align-items: center; }
.acc-card.acc-main { margin-left: auto; }
.acc-card.acc-main img { height: 68px; }

@media (max-width: 900px) {
  .bar .logo.wide { height: 64px; }
  .porque-banda { padding: 0 16px; }
  .porque-banda img { height: 240px; }
  .wa-float { right: 18px; bottom: 76px; }
  .acc-card.acc-main { margin-left: 0; }
  .acc-card.acc-main img { height: 46px; }
}

/* El menu ya pide "Contacto" como quinta entrada (Eva, 16-sep): antes se
   escondia en escritorio porque el boton "Contactanos" de la cabecera hacia
   ese trabajo, y ese boton ya no esta. */
.nav-contact { display: block; }

/* Encuadre de la seccion 3: con la banda mas baja el recorte se comia a los
   alumnos. Se baja el punto de interes y se le da algo mas de alto para que
   sigan viendose la profesora Y los ninos. */
.porque-banda { max-width: var(--wrap); padding: 0 24px; }  /* alineada con .wrap: mismos bordes que las tarjetas de arriba (Yovan, 16-sep) */
.porque-banda img { height: clamp(300px, 34vw, 540px); object-position: center 42%; }
@media (max-width: 900px) { .porque-banda img { height: 260px; object-position: center 40%; } }


/* ==== Revision de Eva (16-sep-2026), pagina de Examenes ====
   Sello de Exams Andalucia en la seccion principal, la escalera de niveles
   Pre-A1 -> C2 (hecha con HTML, asi no hay que recortar Linguaskill ni IELTS
   de la lamina de Cambridge), y el cierre con dos botones. */
.hero-sello { margin: 18px 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-sello img { display: block; height: 108px; width: auto; background: #fff;
  border-radius: 12px; padding: 12px 18px; box-shadow: 0 10px 26px rgba(0,0,0,.2); }

.escalera { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px;
  list-style: none; margin: 26px 0 30px; padding: 0; counter-reset: nivel; }
.escalera .nivel { background: var(--blue-tint); border-radius: 12px;
  padding: 14px 10px; text-align: center; position: relative; }
.escalera .nivel + .nivel::before { content: ""; position: absolute; left: -8px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid var(--blue);
  border-top: 2px solid var(--blue); transform: rotate(45deg); }
.nivel-mcer { display: block; font-weight: 800; color: var(--blue); font-size: 17px; }
.nivel-nombre { display: block; color: var(--ink-2); font-size: 13.5px; margin-top: 3px; }
.cam-notas { max-width: 78ch; }
.cam-notas p { margin: 0 0 12px; }
.ticks-azul li { margin-bottom: 6px; }
.video-intro { max-width: 78ch; margin: 26px 0 14px; }


@media (max-width: 900px) {
  .hero-sello img { height: 72px; padding: 10px 16px; }
  .escalera { grid-template-columns: repeat(2, 1fr); }
  .escalera .nivel + .nivel::before { display: none; }
}


/* Menos blanco en Examenes (Yovan, 16-sep): "Entendiendo Cambridge" va en banda
   azul, asi la pagina alterna azul / blanco / azul en vez de un bloque blanco largo. */
/* la portada usa esta misma linea de horizonte entre dos azules seguidos */
#entendiendo-cambridge.blue { border-top: 1px solid rgba(255,255,255,.22); }
section.blue .escalera .nivel { background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28); }
section.blue .nivel-mcer { color: var(--gold); }
section.blue .nivel-nombre { color: #DCE9F8; }
section.blue .escalera .nivel + .nivel::before { border-color: rgba(255,255,255,.75); }
section.blue .cam-notas, section.blue .cam-notas p { color: #EAF2FB; }
section.blue .cam-notas strong { color: #fff; }
section.blue .section-head p { color: #CFE0F4; }
/* el texto de las listas heredaba el gris de --ink-2 y sobre azul no se leia */
section.blue .ticks li, section.blue .cam-notas li { color: #EAF2FB; }
section.blue .ticks li strong { color: #fff; }


/* Test de nivel tambien en azul (Yovan, 16-sep). Las tarjetas .why viven sobre
   --blue-tint, que sobre azul desaparece: se pasan a blanco translucido. */
#test-de-nivel.blue { border-top: 1px solid rgba(255,255,255,.22); }



/* Yovan (16-sep): el titulo de las paginas interiores tenia el hero a 860px
   mientras el resto del contenido va a 1140 -> mismo ancho para todo. */
.hero.compact .wrap { max-width: var(--wrap); }

/* Y los sellos en UNA pastilla blanca larga, no tres rectangulos sueltos. */
.hero-sello { display: inline-flex; align-items: center; gap: 36px;
  background: #fff; border-radius: 999px; padding: 16px 38px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.hero-sello img { display: block; height: 72px; width: auto;
  background: none; border-radius: 0; padding: 0; box-shadow: none; }
@media (max-width: 900px) {
  .hero-sello { gap: 20px; padding: 14px 20px; border-radius: 26px; flex-wrap: wrap; }
  .hero-sello img { height: 46px; }
}


/* ==== Examenes, pasada de compactado (Yovan, 16-sep: "way too long") ====
   Solo afecta a esta pagina (body.pag-examenes). Ningun texto se quita: se
   aprieta el aire, el titular baja de tamano, las notas van a dos columnas y
   el video deja de ocupar el ancho entero. */
.pag-examenes main section { padding: 34px 0; }
.pag-examenes .hero.compact { padding: 26px 0 30px; }
.pag-examenes .hero-sello { padding: 12px 30px; gap: 28px; margin: 14px 0 2px; }
.pag-examenes .hero-sello img { height: 58px; }
.pag-examenes .hero.compact h1 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 10px; }
.pag-examenes .hero .lead { margin-top: 10px; }
.pag-examenes .section-head { margin-bottom: 16px; }
.pag-examenes .section-head h2 { font-size: clamp(23px, 2.3vw, 30px); }
.pag-examenes .section-head p { margin-top: 6px; font-size: 16px; }

.pag-examenes .escalera { margin: 16px 0 18px; }
.pag-examenes .escalera .nivel { padding: 9px 8px; }
.pag-examenes .cam-notas { max-width: none; columns: 2; column-gap: 46px; }
.pag-examenes .cam-notas > * { break-inside: avoid; }
.pag-examenes .cam-notas p { margin: 0 0 10px; }

.pag-examenes .why { padding: 18px 20px; }
.pag-examenes .note { margin-top: 16px; padding: 14px 20px; }

.pag-examenes .award { padding: 18px 20px; }
.pag-examenes .award p { font-size: 14.5px; line-height: 1.5; }
.pag-examenes .video-intro { margin: 16px 0 10px; }
.pag-examenes .award-video .video-frame { max-width: 680px; margin: 0 auto; }

@media (max-width: 900px) { .pag-examenes .cam-notas { columns: 1; } }


/* Segunda pasada de compactado: el video de reconocimientos ocupaba 380px de
   alto el solo, y la cabecera de cada seccion repetia aire. */
.pag-examenes main section { padding: 26px 0; }
.pag-examenes .section-head { margin-bottom: 12px; }
.pag-examenes .award-video .video-frame { max-width: 520px; }
.pag-examenes .award { padding: 15px 17px; }
.pag-examenes .award p { font-size: 14px; line-height: 1.45; }
.pag-examenes .award h3 { font-size: 17px; }
.pag-examenes .grid { gap: 13px; }
.pag-examenes .escalera { margin: 12px 0 14px; }
.pag-examenes .note { margin-top: 12px; }
.pag-examenes .hero .lead { max-width: 74ch; font-size: 16px; }


/* Reconocimientos como lo pidio Yovan (16-sep): las tres tarjetas apiladas a la
   izquierda y el video a la derecha ocupando el alto de las tres. Las tarjetas
   van mas apretadas para que la columna no se dispare. */
.pag-examenes .rec-2col { display: grid; grid-template-columns: .82fr 1.18fr;
  gap: 14px 26px; align-items: start; }
.pag-examenes .rec-2col .grid { grid-column: 1; grid-row: 1 / span 2;
  grid-template-columns: 1fr; gap: 10px; }
.pag-examenes .rec-2col .award-video { grid-column: 2; grid-row: 1; margin: 0; align-self: start; }
/* el texto de entrada baja bajo el video: si no, la derecha se quedaba vacia */
.pag-examenes .rec-2col .video-intro { grid-column: 2; grid-row: 2; margin: 12px 0 0; align-self: start; }
.pag-examenes .rec-2col .award-video .video-frame { max-width: none; }
.pag-examenes .rec-2col .award { padding: 12px 15px; }
.pag-examenes .rec-2col .award p { font-size: 13.8px; line-height: 1.45; margin-bottom: 0; }
.pag-examenes .rec-2col .award h3 { font-size: 16px; margin-bottom: 4px; }
.pag-examenes .rec-2col .award-mark svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .pag-examenes .rec-2col { grid-template-columns: 1fr; }
  .pag-examenes .rec-2col .grid, .pag-examenes .rec-2col .video-intro,
  .pag-examenes .rec-2col .award-video { grid-column: 1; grid-row: auto; }
}


/* Las tres tarjetas, ya con el texto corto, deben sumar el alto del video:
   el video manda y ellas se reparten esa altura. */
.pag-examenes .rec-2col .grid { align-content: stretch; }
.pag-examenes .rec-2col .award { display: flex; flex-direction: column; justify-content: center; }


/* Tarjeta de premio en horizontal: el icono al lado del texto, no encima.
   Asi las tres caben en el alto del video. */
.pag-examenes .rec-2col .award { display: grid; grid-template-columns: auto 1fr;
  column-gap: 13px; align-items: center; padding: 12px 16px; }
.pag-examenes .rec-2col .award .award-mark { grid-column: 1; grid-row: 1 / span 3;
  margin: 0; align-self: center; }
.pag-examenes .rec-2col .award .award-from { grid-column: 2; grid-row: 1; margin: 0; }
.pag-examenes .rec-2col .award h3 { grid-column: 2; grid-row: 2; margin: 1px 0 3px; }
.pag-examenes .rec-2col .award > p:last-child { grid-column: 2; grid-row: 3; margin: 0; }


/* Al llegar por enlace (#test-de-nivel desde la portada) la cabecera fija tapaba
   el titulo de la seccion. */
#test-de-nivel, #entendiendo-cambridge { scroll-margin-top: 116px; }


/* ==== Pie: los tres sellos en UNA pastilla, como la de Examenes (Yovan, 16-sep).
   Sustituye al "premium suelto a la derecha" de esta manana; el Premium sigue
   siendo el mas grande dentro de la pastilla. ==== */
/* Yovan, 18-sep: "I prefer to have the pill with the three logos and above
   that the diploma in big with the same height of the pill". Vuelve la pastilla
   blanca con los tres, y el diploma encima, a su misma altura (12 + 54 + 12). */
.acc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 26px;
  background: #fff; border-radius: 999px; padding: 12px 28px; }
.acc-card { background: none; border-radius: 0; padding: 0; box-shadow: none; }
.acc-card img { height: 38px; }
.acc-card.acc-main { margin-left: 0; }
.acc-card.acc-main img { height: 54px; }
/* Yovan, 21-sep: los tres sellos dejan de ir DEBAJO del diploma y pasan a ir
   AL LADO, en vertical, en el hueco que quedaba a su derecha — el mismo
   principio que en la seccion de Examenes. El diploma NO encoge: sigue a 445
   porque a menos no se lee ni el codigo ES456 ni lo del Platinum Examination
   Centre, que es justo lo que aporta. Los dos bloques se alinean arriba y
   abajo y comparten esquina (--pie-radio). De 1100 para abajo no caben al
   lado y vuelven a como estaban, uno encima del otro.
   (Antes, 18-sep: la pastilla con los tres y el diploma encima a su mismo
   ancho. Esto lo sustituye.) */
.foot-brand { --pie-radio: 34px; }
.acc-diploma { display: block; margin-bottom: 12px; }
.acc-diploma img { display: block; width: 445px; max-width: 100%; height: auto;
  border-radius: var(--pie-radio); }
/* La fila: diploma a la izquierda, pastilla vertical a la derecha. El alto lo
   manda el diploma (align-items stretch), asi que las dos cajas empiezan y
   acaban a la misma altura sin numeros a mano. Los tres sellos van al MISMO
   ANCHO, no al mismo alto: en vertical el de Cambridge es mucho mas cuadrado
   que los otros dos y por altura quedarian descuadrados. */
/* TODO lo de la fila vive dentro de la consulta: por debajo de 1100 no existe
   y el pie vuelve solo a como estaba, sin reglas mias que deshacer. La columna
   de marca necesita sitio para las dos cajas y se lo quita a la de contacto,
   que con 380 sigue teniendo de sobra. La pastilla puede encoger (flex 0 1 y
   los sellos con max-width) porque entre 1101 y 1140 el wrap aun no ha llegado
   a su tope y si fuera rigida se saldria por unos pocos pixeles. */
@media (min-width: 1101px) {
  .foot-main { grid-template-columns: 1.75fr 1fr; }
}
/* De 900 para abajo el pie va a una columna, como siempre (eso lo hace el
   bloque general de 900). Por encima, el contacto se queda a la derecha en
   todos los anchos: la fila del diploma es elastica y se adapta a lo que le
   quede a la columna de marca, asi que ya no hace falta mandarlo abajo. La
   rejilla de 1.75fr solo se pide por encima de 1100, donde sobra sitio; entre
   901 y 1100 se queda la de siempre y el par encoge. */
/* La fila va en TODO menos en el movil. Por encima de 1100 la marca da de si
   con la rejilla de arriba; por debajo, el pie es de una columna y tiene el
   ancho entero. De 561 a 719 el diploma ya es de 311 (bloque de movil) y la
   pastilla encoge sola, asi que tambien caben. */
@media (min-width: 561px) {
  .acc-fila-pie { display: flex; align-items: stretch; gap: 24px; }
  /* elastico: manda el ancho de la columna, no un numero fijo */
  /* 0 1: encoge cuando la columna aprieta, pero NO crece. Con 1 1 la caja
     del diploma se estiraba hasta el final de la columna mientras la imagen
     se quedaba en sus 445, y eso empujaba la pastilla lejos dejando un hueco
     muerto en medio (se veia a 768). */
  .acc-fila-pie .acc-diploma { margin: 0; flex: 0 1 auto; min-width: 0; }
  .acc-fila-pie .acc-diploma img { width: 100%; max-width: 445px; }
  .acc-fila-pie .acc { flex: 0 1 auto; min-width: 0; flex-direction: column;
    flex-wrap: nowrap; justify-content: space-around; align-items: center;
    gap: 0; padding: 18px 22px; border-radius: var(--pie-radio); }
  .acc-fila-pie .acc-card img,
  .acc-fila-pie .acc-card.acc-main img { width: 100%; max-width: 150px; height: auto; }
}
/* Por debajo de 900px los logos de la pastilla encogen y esta pasa a 311px:
   el diploma la sigue, si no sobresaldria por la derecha. */
@media (max-width: 900px) {
  .acc-diploma img { width: 311px; }
}
@media (min-width: 720px) and (max-width: 900px) {
  /* aqui el diploma no tiene por que encoger: va al lado, no encima */
  .acc-diploma img { width: 445px; }
}
@media (min-width: 561px) and (max-width: 719px) {
  /* aqui si: con 311 + la pastilla encogida es lo que cabe */
  .acc-fila-pie .acc-card img,
  .acc-fila-pie .acc-card.acc-main img { max-width: 120px; }
}

/* Mapa de Contacto. Es una imagen ALOJADA AQUI, no un iframe de Google: la
   politica de cookies de la web dice "no instala cookies propias ni de
   terceros ... visitarla no conecta tu navegador con servicios externos", y un
   embed de Google lo haria en cuanto se abre la pagina. Al pulsarlo si se va a
   Google Maps, que es lo que la politica ya contempla. Teselas de
   OpenStreetMap, con su atribucion incrustada en la propia imagen. */
.map-foto { display: block; margin-top: 22px; border-radius: var(--radius);
  overflow: hidden; background: #E6F0FA; text-decoration: none;
  border: 1px solid rgba(255,255,255,.28); }
.map-foto img { display: block; width: 100%; height: auto; }
/* Con "section.blue" delante a proposito: las reglas section.blue .map-text
   pintan ese texto en claro para el mapa antiguo sobre azul, y aqui la ficha
   es Cielo -- sin esto el texto salia en blanco sobre Cielo (contraste 1.15). */
section.blue .map-foto .map-text { display: block; padding: 14px 18px 16px;
  color: #12233A; font-size: 15px; line-height: 1.5; }
section.blue .map-foto .map-text strong { display: block; color: #12233A; }
section.blue .map-foto .map-go { display: block; margin-top: 6px;
  color: var(--blue-dark); font-weight: 700; }
.map-foto:hover .map-go { text-decoration: underline; }

/* Las dos fotos de la academia que pidio Eva ("En contactos no estan las fotos
   ni el mapa"). Las dos van recortadas a 3:4 para que casen de alto. */
.fotos-academia { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 34px; }
.fotos-academia figure { margin: 0; }
.fotos-academia img { display: block; width: 100%; height: auto;
  border-radius: var(--radius); }
.fotos-academia figcaption { margin-top: 10px; color: #CFE0F4; font-size: 14.5px; }
@media (max-width: 620px) {
  .fotos-academia { grid-template-columns: 1fr; gap: 22px; }
}

/* Punto 1 del brief de Eva: una foto de CLASE COMPLETA debajo del titulo de
   Cursos, "integrada en la seccion sin ocupar toda la pantalla" -- por eso va
   dentro del wrap y no a sangre como la banda de mas abajo. */
.foto-clase { margin: 0 0 30px; }
.foto-clase img { display: block; width: 100%; height: auto;
  border-radius: var(--radius); }
@media (max-width: 620px) {
  .foto-clase { margin-bottom: 22px; }
}
/* En Examenes la foto va mas baja (Yovan: "it's a little bit tall"). Recorta,
   no encoge: se queda a todo el ancho y se le quita alto por arriba y por
   abajo, con el encuadre al 38% para no perder la cara ni el lapiz.
   Solo de 621px en adelante: en movil la foto ya mide 228px de alto, asi que
   fijar 460 la haria MAS alta, justo lo contrario. Y solo en Examenes: la de
   clase completa de Cursos usa la misma clase y se queda como esta. */
@media (min-width: 621px) {
  .pag-examenes .foto-clase img { height: 460px; object-fit: cover;
    object-position: center 38%; }
}

/* CABECERA EN MOVIL, UNA SOLA FILA (Yovan, 19-sep: "two lines are supposed to
   be only one"). Medido a 390px: logo 209 + pastilla 119 + burger 38 + huecos
   20 = 386, y solo hay 342 de ancho util, asi que la barra partia en dos.
   La regla de max-width:900px habia subido el logo a 64px de alto y pisaba los
   48px que dejaban sitio al burger. A 46px el logo mide ~150 y suman 327.
   Yovan, 19-sep noche: se VUELVE a esta cabecera. Eva habia pedido (16:48) el
   logo cuadrado centrado con el telefono a la derecha y la hamburguesa a la
   izquierda; se monto en rejilla y se descarto porque no le gusta. Si alguien
   la quiere recuperar, esta en el commit 9359e93. */
@media (max-width: 620px) {
  .bar .logo.wide { height: 46px; }
}
/* Moviles muy estrechos (iPhone SE, 320px): a 46px todavia no cabe -- 150 + 95
   + 38 + huecos son 303 y solo hay 272. Se baja el logo y se recorta el margen
   lateral de la barra. */
@media (max-width: 380px) {
  .bar .logo.wide { height: 38px; }
  header .bar { padding-left: 16px; padding-right: 16px; }
}

/* Punto 1 del brief de Examenes: el logo de Exams Andalucia "en un tamano
   grande y claramente visible ... como un elemento importante de esta seccion,
   no como un logotipo secundario". Por eso es la placa entera, encima de la
   pastilla de los tres sellos y no dentro de ella. */
/* Yovan, 21-sep: la pastilla de los tres sellos deja de ir DEBAJO y pasa a ir
   AL LADO de la placa, en vertical, alineada con ella arriba y abajo (antes,
   19-sep, iba encima y con su mismo ancho; el ancho sigue en --acc-ancho
   porque lo usa la placa y la vuelta atras de movil). Los tres sellos van
   todos al MISMO ANCHO, no a la misma altura: el de Cambridge es mucho mas
   cuadrado que los otros dos y por altura quedaban descuadrados. */
.pag-examenes .hero .wrap { --acc-ancho: 559px; --acc-radio: 34px; }
.sello-exams { display: block; width: var(--acc-ancho, 430px); max-width: 100%;
  background: #fff; border-radius: var(--acc-radio, 24px); padding: 0; overflow: hidden;
  margin: 20px 0 0; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.sello-exams img { display: block; width: 100%; height: auto; }
/* la pastilla deja de encogerse a su contenido: toma el ancho de la placa y
   reparte los tres sellos dentro. */
.pag-examenes .hero .hero-sello { display: flex; width: var(--acc-ancho);
  max-width: 100%; justify-content: space-around; margin: 12px 0 2px;
  /* con ancho fijo los tres sellos rozaban los 559 y el Premium caia a una
     segunda linea: aqui reparte space-around, no hacen falta ni hueco ni salto. */
  flex-wrap: nowrap; gap: 0; padding: 12px 18px; }
/* La fila: placa a la izquierda, pastilla vertical a la derecha. La altura de
   la pastilla la manda la placa (align-items stretch), asi que las dos cajas
   empiezan y acaban a la misma altura sin numeros a mano. El radio es 34: la
   capsula de siempre (999) no vale en vertical porque la curva se come el
   "We prepare for" de arriba y el "Sede de Matriculaciones" de abajo. */
.pag-examenes .hero .acc-fila { display: flex; align-items: stretch;
  gap: 24px; margin: 20px 0 0; }
.pag-examenes .hero .acc-fila .sello-exams { margin: 0; flex: 0 0 auto; }
.pag-examenes .hero .acc-fila .hero-sello { width: auto; flex: 0 0 auto;
  flex-direction: column; flex-wrap: nowrap; justify-content: space-around;
  align-items: center; gap: 0; margin: 0; padding: 18px 26px;
  border-radius: var(--acc-radio, 34px); }
.pag-examenes .hero .acc-fila .hero-sello img { width: 240px; height: auto; }
/* Por debajo de 900 no caben los dos al lado: la fila se deshace y queda lo de
   siempre, la placa arriba y los tres sellos en linea debajo. */
@media (max-width: 900px) {
  .pag-examenes .hero .acc-fila { display: block; }
  .pag-examenes .hero .acc-fila .hero-sello { width: var(--acc-ancho);
    flex-direction: row; margin: 12px 0 2px; padding: 12px 18px;
    border-radius: 999px; }
  .pag-examenes .hero .acc-fila .hero-sello img { width: auto; height: 58px; }
}
@media (max-width: 620px) {
  /* en movil el diploma es la placa entera (no el leon recortado) y los dos
     bloques ocupan la columna: antes la "pastilla" era un bloque blanco de
     342x254 con los tres sellos apilados. */
  .pag-examenes .hero .wrap { --acc-ancho: 100%; }
  .sello-exams { border-radius: 14px; }
  /* los tres, en una sola linea: a 58px de alto no caben en 342px. */
  .pag-examenes .hero .acc-fila .hero-sello,
  .pag-examenes .hero .hero-sello { gap: 14px; padding: 10px 16px; }
  /* con .acc-fila delante: la regla de <=900 lleva ese selector y es mas
     especifica, asi que sin el los sellos se quedaban a 58px y los tres se
     salian de la pastilla por la derecha (Eva, movil, 22-sep). */
  .pag-examenes .hero .acc-fila .hero-sello img,
  .pag-examenes .hero .hero-sello img { width: auto; height: 30px; }
}
/* Este bloque TIENE que ir detras del de 620px: las dos consultas se cumplen a
   la vez en un movil estrecho y gana la ultima que aparece en el fichero. */
@media (max-width: 380px) {
  .pag-examenes .hero .acc-fila .hero-sello,
  .pag-examenes .hero .hero-sello { gap: 10px; padding: 9px 14px; }
  .pag-examenes .hero .acc-fila .hero-sello img,
  .pag-examenes .hero .hero-sello img { width: auto; height: 26px; }
}

/* ==== Zona de niveles mas simple: un solo carril, sin ocho cajas con flechas ==== */
.escalera { display: flex; flex-wrap: wrap; gap: 0; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22); border-radius: 14px; overflow: hidden; }
.escalera .nivel { flex: 1 1 0; min-width: 96px; background: none !important;
  border: 0 !important; border-left: 1px solid rgba(255,255,255,.18) !important;
  padding: 10px 6px; text-align: center; }
.escalera .nivel:first-child { border-left: 0 !important; }
.escalera .nivel + .nivel::before { display: none !important; }
.nivel-mcer { font-size: 15.5px; }
.nivel-nombre { font-size: 12.5px; }

@media (max-width: 900px) {
  .acc { gap: 16px; padding: 10px 18px; border-radius: 26px; }
  .acc-card img { height: 28px; } .acc-card.acc-main img { height: 38px; }
  .escalera .nivel { min-width: 33%; }
}


/* Bloque de niveles: la prosa a dos columnas se reparte en tres tarjetas
   (infantiles / la escala / que hacemos nosotros). Mismo texto, mejor lectura. */
.cam-cards { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 16px; margin-top: 16px; }
.cam-card { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px; padding: 16px 18px; }
.cam-card h3 { font-size: 15px; color: var(--gold); margin: 0 0 8px;
  letter-spacing: .01em; }
.cam-card p { color: #EAF2FB; font-size: 14.5px; line-height: 1.5; margin: 0 0 8px; }
.cam-card p:last-child { margin-bottom: 0; }
.cam-card .cam-pie { font-size: 13.5px; color: #CFE0F4; }
.grades { list-style: none; margin: 0 0 8px; padding: 0; }
/* Eva pidio el texto exacto del brief ("Grade A: resultado excelente; ..."), asi
   que la pastilla dorada con la letra suelta se cambia por la linea entera, con
   el "Grade X" en dorado para que siga cantando a la misma distancia. */
.grades li { color: #EAF2FB; font-size: 14.5px; line-height: 1.45; margin-bottom: 6px;
  padding-left: 14px; position: relative; }
.grades li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.grades strong { color: var(--gold); font-weight: 800; }
@media (max-width: 900px) { .cam-cards { grid-template-columns: 1fr; } }


/* Tarjetas .why sobre banda azul: valen para cualquier pagina, no solo Examenes
   (Cursos las usa en "Como trabajamos"). */
section.blue .why { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); }
section.blue .why h3 { color: #fff; }
section.blue .why p { color: #DCE9F8; }
section.blue .card { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #EAF2FB; }

/* Una banda azul que termina la pagina necesita la misma linea de horizonte que
   usa la portada (.porque-azul), si no se funde con el pie azul en un solo bloque. */
section.blue.azul-final { border-bottom: 1px solid rgba(255,255,255,.22); }

/* Cursos entera en azul (Yovan, 16-sep): lo unico blanco que quedaba eran las
   tarjetas de edades y el hueco alrededor de la foto; el fondo de la pagina
   pasa a azul y las tarjetas usan el mismo tratamiento que sobre banda azul. */
body.pag-azul, body.pag-azul main { background: var(--blue); }
/* Examenes es la unica pagina que no lleva .pag-azul, asi que su body se
   quedaba BLANCO: en el iPhone eso asoma como una franja blanca al estirar
   la pagina arriba o abajo, mientras el resto del sitio la muestra azul. */
body.pag-examenes { background: var(--blue); }
section.blue .card h3 { color: #fff; }
section.blue .card p { color: #DCE9F8; }
/* el chip de edad es un <p class="card-age">, asi que la regla de arriba le ganaba
   por especificidad y salia texto blanco sobre amarillo: ilegible. */
section.blue .card .card-age { color: #16233A; }
section.blue .card .leads { color: var(--gold); border-top-color: rgba(255,255,255,.28); }
section.blue .card:hover { border-color: rgba(255,255,255,.6); }
/* Con toda la pagina en azul, el resplandor dorado del hero (.hero::after, cortado
   por overflow:hidden) dejaba una costura visible al pie del hero: la misma linea de
   horizonte que usa la portada hace que ese corte se lea a proposito. */
body.pag-azul .hero { border-bottom: 1px solid rgba(255,255,255,.22); }
/* en la portada NO: el hero ya tiene su linea de horizonte puesta por .paso
   (border-top), y las dos juntas dan una raya doble. */
body.pag-azul .hero.home { border-bottom: 0; }

/* Conocenos entera en azul (Yovan, 16-sep): el pie del video era gris oscuro
   y el enlace azul, los dos ilegibles sobre la banda azul. */
section.blue .video-note { color: #CFE0F4; }
section.blue .video-note a { color: var(--gold); }
/* dos bandas azules seguidas sin nada en medio se leen como un solo bloque con un
   hueco raro: la misma linea de horizonte las separa (Conocenos, 16-sep). */
body.pag-azul section.blue + section.blue { border-top: 1px solid rgba(255,255,255,.22); }

/* Contacto en azul (Yovan, 16-sep): la ficha de datos y la tarjeta del mapa
   estaban pensadas para fondo claro. La tarjeta del formulario se queda BLANCA
   a proposito: un formulario se rellena mejor sobre blanco y ademas destaca. */
section.blue .contact dt { color: var(--gold); }
section.blue .contact dd, section.blue .contact a { color: #fff; }
section.blue .map-card { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
section.blue .map-card:hover { border-color: rgba(255,255,255,.6); }
section.blue .map-text { color: #DCE9F8; }
section.blue .map-text strong { color: #fff; }
section.blue .map-go { color: var(--gold); }
section.blue .map-pin { background: var(--gold); }
section.blue .map-pin::after { border-color: var(--blue); }
/* La tarjeta del formulario sobre la banda azul, en los tonos "Cielo" del modo
   claro de la app (Lenguasol-Online, 14-sep): fondo #E6F0FA en vez de blanco puro
   -- el blanco destacaba demasiado --, campos blancos, lineas #CFDEEE y la tinta
   de la app (#12233A / #3D5169 / #61768F). El color de texto hay que ponerlo
   siempre: si no, hereda el blanco de section.blue y el titulo desaparece. */
section.blue .form-card { background: #E6F0FA; border-color: #CFDEEE; }
section.blue .form-card, section.blue .form-card h2 { color: #12233A; }
section.blue .form-card > p { color: #61768F; }
section.blue .form-card a { color: var(--blue); }
section.blue .form label { color: #3D5169; }
section.blue .form input, section.blue .form select, section.blue .form textarea {
  background: #fff; border-color: #CFDEEE; color: #12233A; }
section.blue .form .check { color: #61768F; }

/* Lo ultimo que quedaba blanco en Examenes: las tarjetas de Reconocimientos y el
   pie del video. Pasan al fondo Cielo de la app sobre la banda --sky, asi que ya
   no hay blanco puro en la pagina. Los sellos SI se quedan en pastilla blanca:
   son logos acreditados y no se recolorean (punto 8 del brief de Eva). */
section.tint .award { background: #E6F0FA; border-color: #CFDEEE; }
section.tint .video-intro { color: #3D5169; }

/* Paginas legales en azul (Yovan, 16-sep). El texto largo NO va suelto sobre el
   azul: vive en un panel Cielo, que es lo que hace legible un parrafo de 40 lineas. */
body.pag-azul .legal-text { background: #E6F0FA; border: 1px solid #CFDEEE;
  border-radius: var(--radius); padding: 34px 38px; max-width: 860px; }
body.pag-azul .legal-text h2 { color: #12233A; }
body.pag-azul .legal-text p, body.pag-azul .legal-text li { color: #3D5169; }
body.pag-azul .legal-text a { color: var(--blue); }
body.pag-azul .legal-datos dt { color: #12233A; }
body.pag-azul .legal-datos dd { color: #3D5169; }

/* La foto de Conocenos va entre la banda del video y las tarjetas de profesorado.
   Con todo azul a los dos lados el aire tiene que ser simetrico (antes era 34/6
   porque debajo empezaba una banda distinta). */
.foto-profesorado { margin: 34px auto; }

/* Conocenos: "Formacion continua" y "¿Hablamos?" eran dos bandas seguidas; van en
   UNA (Yovan, 17-sep). Dos columnas con un filete en medio en escritorio, una
   debajo de otra en movil. */
.nota-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.nota-doble .nota-par { margin: 0; }
.nota-doble .nota-par + .nota-par { border-left: 1px solid rgba(255,255,255,.22); padding-left: 34px; }
@media (max-width: 900px) {
  .nota-doble { grid-template-columns: 1fr; gap: 14px 0; }
  .nota-doble .nota-par + .nota-par { border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.22); padding-top: 14px; }
}

/* Recuadro de la prueba de nivel (brief de Eva, 16-sep): el texto a la izquierda
   y el boton al lado. Por debajo de ~700px de recuadro el boton no cabe en la
   misma linea, asi que envuelve debajo en vez de apretar el texto. */
.nota-test { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 26px; }
.nota-test p { flex: 1 1 320px; margin: 0; }

/* Cierre de Cursos y Examenes (brief de Eva, puntos 5 y 6): fuera el ¿Hablamos?,
   solo dos botones -- Contactanos y el movil, que llama directamente desde el
   telefono. Centrados porque son lo ultimo de la pagina. */
.cierre-botones { display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 14px; margin-top: 34px; }
.btn.tel-cierre { display: inline-flex; align-items: center; gap: 9px; }
.btn.tel-cierre svg { width: 18px; height: 18px; flex: none; }
/* .btn.ghost es blanco sobre azul. En Examenes la fila cae dentro de la banda
   Cielo de Reconocimientos, y ahi el blanco sobre #D6E7F8 daba contraste 1.26,
   o sea invisible. Sobre banda clara el boton va en azul. */
section.tint .btn.ghost { color: var(--blue-dark); border-color: rgba(0, 90, 180, .45); }
section.tint .btn.ghost:hover { border-color: var(--blue); color: var(--blue); }

/* El grafico oficial que pidio Eva sustituye a la escalera de pastillas. Va
   sobre blanco porque el original lo es: sobre azul habria que recortarlo. */
.cam-grafico { margin: 26px 0 18px; background: #E6F0FA; border-radius: 14px;
  padding: 18px 20px 12px; }
.cam-grafico img { display: block; width: 100%; height: auto; }
.cam-flecha { display: none; }
.cam-grafico figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
/* La linea de niveles, con el texto exacto del brief. */
.escalera-linea { margin: 0 0 30px; text-align: center; font-weight: 700;
  font-size: 15.5px; line-height: 1.7; color: #fff; }
@media (max-width: 620px) {
  /* A 390px el grafico entero mide 318px de ancho y no se lee ni una etiqueta.
     Se deja a un ancho legible y se arrastra de lado. */
  /* El scroll pasa al div interior: si lo hace la <figure>, las flechas de
     abajo (position:absolute) se arrastran con el contenido y desaparecen. */
  .cam-grafico { padding: 12px; position: relative; overflow: visible; }
  .cam-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cam-grafico img { min-width: 620px; }
  /* Eva (23-sep): el aviso de texto no basta, "la gente no lee". Dos flechas
     doradas sobre el grafico que dicen que se arrastra. */
  /* display:block OBLIGATORIO: fuera del movil van con display:none y la regla
     de dentro del @media no lo deshace sola. */
  .cam-flecha { display: block; position: absolute; top: 46%; width: 34px; height: 34px;
    border-radius: 50%; background: var(--gold, #FDCB34);
    box-shadow: 0 2px 8px rgba(6,32,60,.35); pointer-events: none; z-index: 2; }
  .cam-flecha::before { content: ""; position: absolute; top: 50%; left: 50%;
    width: 9px; height: 9px; border-right: 2.5px solid #0A1524;
    border-bottom: 2.5px solid #0A1524; }
  .cam-flecha.izq { left: 4px; }
  .cam-flecha.der { right: 4px; }
  .cam-flecha.izq::before { transform: translate(-40%, -50%) rotate(135deg); }
  .cam-flecha.der::before { transform: translate(-60%, -50%) rotate(-45deg); }
  /* Eva lo vio "cortado" (22-sep): se arrastra de lado a proposito, pero nada
     lo decia. El aviso va en el pie del grafico. (Probe un degradado en el
     borde con ::after sticky y no pinta dentro de un contenedor con
     overflow-x: auto; no merece mas CSS por eso.) */
  .cam-grafico figcaption::before { content: "Desliza el gráfico para verlo entero. ";
    font-weight: 700; color: var(--blue); }
  .cam-grafico figcaption { position: sticky; left: 0; }
  .escalera-linea { font-size: 14px; text-align: left; }
}

/* El sol de Lenguasol llenando el hueco de la derecha del footer.
   Medidas colocadas por Yovan en el editor del Layout (20/09/2026): 687 px,
   saliendose por la esquina de abajo a la derecha — el footer lo recorta.
   Va colgado del FOOTER, no de la columna de contacto: asi se queda pegado a
   la esquina a cualquier ancho. Colgado de la columna se iba desplazando y a
   1024 un rayo se ponia encima de "Configuracion de cookies".
   z-index 0 + la caja de texto a 1: el sol nunca puede tapar un enlace. */
footer { overflow: hidden; position: relative; }
footer > .wrap { position: relative; z-index: 1; }
/* Blanco flojito, no amarillo: el amarillo de la marca al 50 % sobre este azul
   mezcla a verde oliva, que no es un color de Lenguasol. Blanco al 22 % se queda
   en la familia del azul y no le pelea nada al texto.
   Las medidas de cada ancho las coloca Yovan a mano en el editor del Layout
   (Output/lenguasol-footer-sol/editor.html). Recolocadas el 21/09/2026, cuando
   los tres sellos pasaron a ir al lado del diploma y el pie cambio de alto
   (544 en escritorio donde antes 634, 894 a 1024 donde antes 634). El orden de
   las medias importa: a 430 valen la de 900 y la de 560, y gana la ultima. */
.foot-sol { position: absolute; z-index: 0; pointer-events: none;
            display: block;
            right: -219px; bottom: -760px; width: 1032px; height: 1032px;
            opacity: .22; }
.foot-sol img { display: block; width: 100%; height: 100%; }

@media (max-width: 1400px) {
  .foot-sol { right: -84px; bottom: -530px; width: 724px; height: 724px; }
}
@media (max-width: 1100px) {
  .foot-sol { right: -293px; bottom: -605px; width: 844px; height: 844px; }
}
/* A partir de aqui el pie ya venia de una sola columna. */
@media (max-width: 900px) {
  .foot-sol { right: -152px; bottom: -479px; width: 844px; height: 844px; }
}
/* En el movil no va sol: es la version que Eva dio por buena. */
@media (max-width: 560px) {
  .foot-sol { display: none; }
}

/* La frase que acompana a la foto de Ray va fuera de un section.blue, asi que
   por defecto le tocaba el recuadro claro. Sobre el azul de la pagina queda como
   un elemento raro: se le pone el mismo tratamiento translucido que tiene .note
   dentro de section.blue, que es como se ve en el resto del sitio. */
.foto-profesorado + .wrap .note { background: rgba(255,255,255,.08); color: #CFE0F4; }

/* La banda recorta por el centro (object-position 50% 42%) y en esta foto eso
   se comia justo el brazo levantado, que es lo que Eva queria que se viera.
   Se sube el encuadre al borde de arriba. */
.foto-profesorado img { object-position: 50% 4%; }

/* La banda de Ray, encima de los recuadros (Eva, 21-sep). El encuadre por
   defecto (50% 42%) le corta la cabeza: sube a 18%, igual que en la captura
   que se les mando para elegir. */
.foto-ray img { object-position: 50% 18%; }

/* Las dos fotos de profesorado en formacion, ya unidas en una sola imagen
   (Eva, 21-sep 08:15: "como has hecho con los logos"). Van contenidas dentro
   de la seccion, no a ancho completo, y sin recorte: el alto lo manda la foto. */
.foto-formacion { margin: 30px 0 0; }
.foto-formacion img { display: block; width: 100%; height: auto;
                      border-radius: var(--radius); }

/* Sol en el hueco de la derecha del hero de Examenes (Yovan, 21-sep). Mismo
   tratamiento que el del pie: blanco al 22 %, detras del texto y recortado por
   el hero. El contenido del hero vive todo en la columna izquierda (la placa
   mide 559 y acaba en x 815), asi que la mitad derecha estaba vacia. */
.pag-examenes .hero { position: relative; overflow: hidden; }
.pag-examenes .hero > .wrap { position: relative; z-index: 1; }
.hero-sol { position: absolute; right: -542px; top: 33px;
            width: 1120px; height: 1120px; z-index: 0; opacity: .22;
            pointer-events: none; }
.hero-sol img { display: block; width: 100%; height: 100%; }
@media (max-width: 1400px) { .hero-sol { right: -672px; top: 60px;
                                         width: 1044px; height: 1044px; } }
@media (max-width: 1100px) { .hero-sol { right: -579px; top: 159px;
                                         width: 832px; height: 832px; } }
@media (max-width: 900px)  { .hero-sol { right: -375px; top: 92px;
                                         width: 560px; height: 560px; } }
@media (max-width: 560px)  { .hero-sol { display: none; } }