/* Español al Limón — hoja de estilos común a las tres páginas:
   /            estudiantes en inglés (por defecto)
   /es/         estudiantes en español
   /profes/     profes de ELE, en español
   Móvil primero. Cortes en 640, 900, 1100 y 1280 px. El menú se despliega en horizontal desde 1100. */

:root {
  --crema: #fffdf3;
  --papel: #ffffff;
  --tinta: #0b3b40;
  --tinta-suave: #3a5f64;
  --teal: #01a9b4;
  --teal-oscuro: #086972;
  --teal-noche: #06474d;
  --menta: #e2f5f3;
  --limon: #f8f27a;
  --limon-vivo: #f3e94e;
  --linea: rgba(8, 105, 114, .16);

  --titulo: "Fjalla One", "Haettenschweiler", Impact, sans-serif;
  --texto: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mano: "Caveat", "Bradley Hand", cursive;

  /* Bocadillo para la lista de «esto te suena»: son frases que el lector se dice a sí mismo */
  --icono-pensar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23086972' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a7.5 7.5 0 0 1-7.5 7.5H8l-4 3v-4.4A7.5 7.5 0 0 1 12.5 4a7.5 7.5 0 0 1 7.5 7.5z'/%3E%3C/svg%3E");

  --radio: 22px;
  --sombra: 0 1px 2px rgba(6, 71, 77, .06), 0 12px 32px -12px rgba(6, 71, 77, .22);
  --margen: clamp(20px, 5vw, 40px);
  --alto-cabecera: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--texto);
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

/* Fjalla One solo tiene un grosor: nada de negritas falsas */
h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 400; line-height: 1.04; letter-spacing: .005em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 8vw, 5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.3rem); }
h3 { font-size: 1.4rem; line-height: 1.15; }
p { text-wrap: pretty; }

.ancho { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--margen); }
.icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.manuscrita { font-family: var(--mano); font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: var(--teal-oscuro); }
.antetitulo { font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-oscuro); margin-bottom: 12px; font-family: var(--texto); }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 10px; }
.saltar:focus { left: 8px; }

/* ── Botones ── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px 28px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--texto); font-weight: 800; font-size: 1.05rem; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.boton .icono { transition: transform .2s ease; }
.boton:hover { transform: translateY(-2px); }
.boton:hover .icono { transform: translateX(3px); }
.boton--teal { background: var(--teal-oscuro); color: #fff; box-shadow: 0 10px 24px -10px rgba(8, 105, 114, .7); }
.boton--teal:hover { background: var(--teal-noche); }
.boton--limon { background: var(--limon-vivo); color: var(--tinta); box-shadow: 0 10px 24px -12px rgba(140, 130, 0, .7); }
.boton--limon:hover { background: #f7ee5f; }
.boton--linea { border-color: var(--teal-oscuro); color: var(--teal-oscuro); }
.boton--linea:hover { background: var(--menta); }
.boton--clara { border-color: rgba(255, 255, 255, .55); color: #fff; }
.boton--clara:hover { background: rgba(255, 255, 255, .12); }
.boton--grande { min-height: 62px; font-size: 1.15rem; padding: 16px 34px; }

.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--teal-oscuro); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.enlace-flecha .icono { transition: transform .2s ease; }
.enlace-flecha:hover .icono { transform: translateX(4px); }

/* ── Barra de ramas: tiene que verse ── */
.ramas { background: var(--teal-noche); color: #fff; border-bottom: 3px solid var(--limon-vivo); }
.ramas__fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; padding-block: 8px; }
.ramas__selector { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .25); }
.ramas__selector a {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px;
  font-family: var(--texto); font-weight: 800; font-size: .92rem; line-height: 1.1; letter-spacing: .01em;
  text-decoration: none; color: rgba(255, 255, 255, .82); white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.ramas__selector a .icono { width: 18px; height: 18px; }
.ramas__selector a:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.ramas__selector a[aria-current="page"] { background: var(--limon-vivo); color: var(--tinta); box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .4); }
.idiomas { display: flex; gap: 2px; flex: none; }
.idiomas a { padding: 7px 10px; border-radius: 8px; font-weight: 800; font-size: .82rem; text-decoration: none; color: rgba(255, 255, 255, .7); }
.idiomas a:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.idiomas a[aria-current="page"] { color: var(--tinta); background: #fff; }

/* En pantallas estrechas el selector pierde los iconos para que quepa el idioma */
@media (max-width: 459px) {
  .ramas .ancho { padding-inline: 12px; }
  .ramas__selector a { padding: 9px 11px; font-size: .82rem; }
  .ramas__selector a .icono { display: none; }
  .idiomas a { padding: 7px 8px; }
}

/* ── Cabecera ── */
.cabecera { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.cabecera::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 253, 243, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
.cabecera.con-sombra { border-color: var(--linea); box-shadow: 0 8px 24px -18px rgba(6, 71, 77, .5); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; min-height: var(--alto-cabecera); gap: 12px; }
.marca img { height: 70px; width: auto; }

.hamburguesa { width: 48px; height: 48px; border: 0; border-radius: 14px; background: var(--menta); cursor: pointer; display: grid; place-content: center; gap: 5px; flex: none; }
.hamburguesa span { width: 22px; height: 2.5px; border-radius: 2px; background: var(--teal-oscuro); transition: transform .25s ease, opacity .2s ease; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: var(--alto-cabecera) 0 0 0; z-index: 49;
  display: flex; flex-direction: column; gap: 4px; padding: 20px var(--margen) 32px;
  background: var(--crema); overflow-y: auto;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.menu.abierto { visibility: visible; opacity: 1; transform: none; }
.menu a:not(.boton) { padding: 15px 4px; font: 400 1.5rem/1.2 var(--titulo); text-decoration: none; border-bottom: 1px solid var(--linea); }
.menu__cta { margin-top: 20px; }
html:not(.js) .menu { position: static; visibility: visible; opacity: 1; transform: none; flex-direction: row; flex-wrap: wrap; padding: 0; }
html:not(.js) .hamburguesa { display: none; }

/* ── Portada de estudiantes ── */
.portada { position: relative; padding-top: clamp(28px, 6vw, 68px); overflow: hidden; }
.portada__rejilla { display: grid; gap: 40px; position: relative; z-index: 1; }
.portada h1 { margin: 6px 0 20px; }
.subrayado { position: relative; white-space: nowrap; z-index: 0; }
.subrayado::after {
  content: ""; position: absolute; z-index: -1; left: -.08em; right: -.08em; bottom: .02em; height: .36em;
  background: var(--limon-vivo); border-radius: .2em .5em .25em .6em; transform: rotate(-1.2deg);
}
.entradilla { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--tinta-suave); max-width: 34em; }
.entradilla strong { color: var(--tinta); font-weight: 800; }
.portada__lista { margin-top: 22px; max-width: 34em; }
.portada__botones { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.portada__nota { margin-top: 14px; font-size: .95rem; color: var(--tinta-suave); font-weight: 600; }

.lista-ok { display: grid; gap: 11px; }
.lista-ok li { display: flex; align-items: flex-start; gap: 11px; font-weight: 600; line-height: 1.45; }
.lista-ok .icono { margin-top: 3px; padding: 3px; border-radius: 50%; background: var(--limon-vivo); color: var(--tinta); stroke-width: 3; }

.retrato { position: relative; width: min(100%, 430px); margin-inline: auto; }
.retrato__fondo { position: absolute; inset: 4% -5% -4% 5%; background: var(--limon-vivo); border-radius: 58% 42% 50% 50% / 52% 46% 54% 48%; transform: rotate(-7deg); }
.retrato__marco { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #d9dce0; border-radius: 52% 48% 46% 54% / 50% 54% 46% 50%; box-shadow: var(--sombra); display: flex; align-items: center; transition: background-color .45s ease; }
.retrato__marco video { width: 100%; height: 100%; object-fit: cover; transition: height .45s ease, transform .45s ease; }
/* Al reproducir sigue el mismo óvalo vertical. El vídeo lleva los subtítulos incrustados (57 % de su
   ancho, entre el 72 % y el 87 % de su altura): a pantalla completa el óvalo los cortaría, así que el
   vídeo se aleja hasta 1,55 veces el ancho del óvalo y sube hasta dejar su borde al 6 % de la altura,
   para que el texto caiga donde el óvalo es más ancho. Medido frase a frase contra la forma real del
   óvalo: a 1,60 queda sin margen y a 1,65 ya se corta. Arriba y abajo se funde con el fondo, que es
   del mismo crema que la pared del vídeo. */
.retrato__marco.sonando { background: #fdfdf5; }
.retrato__marco.sonando video {
  height: 69.75%; transform: translateY(-13.1%); cursor: pointer;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 89%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 89%, transparent 100%);
}
.retrato__play {
  /* A la altura del subtítulo incrustado del vídeo (≈80 % del marco), para taparlo en el fotograma de portada */
  position: absolute; left: 50%; top: 80.5%; transform: translate(-50%, -50%); width: max-content; max-width: 94%;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 10px 18px 10px 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--tinta); font-weight: 800; font-size: .95rem;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .45); transition: transform .2s ease;
}
.retrato__play:hover { transform: translate(-50%, -50%) scale(1.04); }
.retrato__play .icono { width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--teal-oscuro); color: #fff; }
.sonando .retrato__play { display: none; }

.portada__rodaja { position: absolute; z-index: 0; opacity: .5; }
.portada__rodaja--a { width: 150px; height: 150px; right: -60px; top: 34%; animation: girar 50s linear infinite; }
.portada__rodaja--b { display: none; }

.cinta { margin-top: clamp(44px, 7vw, 80px); background: var(--teal-oscuro); color: #fff; overflow: hidden; transform: rotate(-1.2deg) scale(1.02); }
.cinta__pista { display: flex; align-items: center; gap: 28px; width: max-content; padding: 12px 0; animation: correr 36s linear infinite; }
.cinta span { font: 700 1.55rem/1 var(--mano); }
.cinta i { width: 10px; height: 10px; border-radius: 50%; background: var(--limon-vivo); flex: none; }
@keyframes correr { to { transform: translateX(-50%); } }
@keyframes girar { to { transform: rotate(360deg); } }

/* ── Bloques ── */
.bloque { padding-block: clamp(64px, 10vw, 112px); }
.bloque--menta { background: var(--menta); }
.bloque--oscuro { background: var(--teal-noche); color: #fff; }
.bloque--oscuro .antetitulo { color: var(--limon); }
.cabecera-bloque { max-width: 40em; margin-bottom: clamp(30px, 5vw, 52px); }
.cabecera-bloque p:not(.antetitulo) { margin-top: 14px; font-size: 1.12rem; color: var(--tinta-suave); }
.cabecera-bloque--fila { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }

/* ── «Te suena»: los dolores ── */
.dolor { padding-bottom: 0; }
.dolor__rejilla { display: grid; gap: 30px; }
.dolor__cierre { margin: 18px 0 26px; font: 400 clamp(1.3rem, 2.8vw, 1.7rem)/1.3 var(--titulo); }
.dolor__suena { margin: 22px 0 0; }
.dolor__cierre { margin-top: 6px; }
.dolor__lista { display: grid; gap: 26px; }
.dolor__lista li { display: flex; align-items: center; gap: 20px; font-weight: 700; font-size: 1.12rem; line-height: 1.42; }
.dolor__icono {
  width: 48px; height: 48px; flex: none; fill: none; stroke: var(--teal-oscuro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.dolor__lista li:hover .dolor__icono { transform: scale(1.12) rotate(-6deg); }
.dolor__remate { margin-top: clamp(36px, 6vw, 60px); text-align: center; font-size: clamp(1.6rem, 4vw, 2.2rem); transform: rotate(-1deg); }

/* ── Lo que vas a aprender ── */
.aprender { display: grid; gap: 16px; }
.aprender li { position: relative; padding: 30px 26px 32px; background: var(--papel); border: 0; border-radius: 26px; }
.aprender li:nth-child(even) { background: var(--teal-oscuro); color: #fff; }
.aprender__num {
  display: inline-grid; place-content: center; width: 60px; height: 60px; margin-bottom: 20px; border-radius: 50%;
  background: var(--limon-vivo); color: var(--tinta); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.aprender li:hover .aprender__num, .aprender__num:hover { transform: scale(1.25) rotate(-8deg); }
.aprender__num .icono { width: 28px; height: 28px; }
.aprender h3 { margin-bottom: 8px; font-size: 1.55rem; }
.aprender p { color: var(--tinta-suave); font-size: 1rem; }
.aprender li:nth-child(even) p { color: rgba(255, 255, 255, .86); }

/* ── Cómo funciona, en corto ── */
.practico { display: grid; grid-template-columns: 1fr; gap: 22px 18px; margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 480px) { .practico { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } }
.practico li { display: grid; grid-template-columns: auto 1fr; column-gap: 13px; align-items: center; font-size: .9rem; line-height: 1.35; color: var(--tinta-suave); }
.practico__icono { grid-row: span 2; width: 44px; height: 44px; fill: none; stroke: var(--teal-oscuro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.practico strong { font: 400 1.25rem/1.1 var(--titulo); color: var(--tinta); align-self: end; }
.practico span { align-self: start; }

/* ── Regalo: el ebook ── */
.regalo__rejilla { display: grid; gap: 36px; background: var(--limon); border-radius: calc(var(--radio) + 8px); padding: clamp(28px, 5vw, 64px); }
.regalo h2 { margin-bottom: 14px; }
.regalo__texto { max-width: 36em; font-weight: 600; }
.regalo__libro { display: grid; place-items: center; }
/* La portada imita la del PDF: fondo oscuro, el logo normal en blanco y el nombre en pequeño */
.libro {
  position: relative; overflow: hidden; width: min(100%, 250px); aspect-ratio: 148 / 210; padding: 22px 20px; display: flex; flex-direction: column;
  background: var(--teal-noche); color: #fff; border-radius: 6px 14px 14px 6px; transform: rotate(-4deg);
  box-shadow: inset 7px 0 0 rgba(0, 0, 0, .22), 0 26px 44px -18px rgba(6, 71, 77, .7); transition: transform .4s ease;
}
.regalo__rejilla:hover .libro { transform: rotate(-1deg) translateY(-4px); }
.libro__rodaja { position: absolute; width: 62%; aspect-ratio: 1; right: -20%; top: -13%; }
.libro__logo { position: relative; width: 28%; height: auto; filter: brightness(0) invert(1); opacity: .95; }
.libro__mano { margin-top: auto; font: 700 1.15rem/1.1 var(--mano); color: var(--limon-vivo); }
.libro__titulo { margin: 4px 0 10px; font: 400 2.2rem/.98 var(--titulo); }
.libro__titulo span { display: block; color: var(--limon-vivo); }
.libro__sub { font-size: .78rem; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.libro__autora { margin-top: 14px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: .68rem; color: rgba(255, 255, 255, .8); }
.regalo__formulario { display: grid; gap: 14px; margin-top: 26px; max-width: 460px; }
.regalo__formulario label { display: grid; gap: 6px; font-weight: 800; font-size: .95rem; }
.regalo__formulario input[type="text"], .regalo__formulario input[type="email"] { width: 100%; min-height: 54px; padding: 12px 15px; border: 2px solid rgba(11, 59, 64, .2); border-radius: 14px; background: var(--papel); font-size: 1rem; }
.regalo__formulario input:focus-visible { outline: 3px solid var(--teal-oscuro); outline-offset: 1px; }
.regalo__acepto { grid-template-columns: 24px 1fr; align-items: start; gap: 10px !important; font-weight: 400 !important; font-size: .88rem !important; line-height: 1.45; }
.regalo__acepto input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--teal-oscuro); }
.regalo__acepto input:focus-visible { outline: 3px solid var(--teal-oscuro); outline-offset: 3px; }
.regalo__aviso:empty { display: none; }
.regalo__aviso { padding: 12px 14px; border-radius: 14px; background: var(--papel); font-size: .92rem; font-weight: 600; }
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Opiniones ── */
.carrusel__botones { display: none; gap: 10px; flex: none; }
.carrusel__botones button { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; cursor: pointer; display: grid; place-content: center; transition: background-color .15s ease, border-color .15s ease; }
.carrusel__botones button:hover { background: var(--limon-vivo); border-color: var(--limon-vivo); color: var(--tinta); }
.carrusel {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px max(var(--margen), calc((100vw - 1180px) / 2 + var(--margen))) 12px;
  scroll-padding-inline: max(var(--margen), calc((100vw - 1180px) / 2 + var(--margen)));
}
.carrusel::-webkit-scrollbar { display: none; }
.opinion { flex: 0 0 min(86vw, 400px); scroll-snap-align: start; display: flex; flex-direction: column; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radio); padding: 26px 24px; }
.opinion__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.opinion__estrellas { color: var(--limon-vivo); letter-spacing: .12em; }
.opinion__fuente { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.opinion__titulo { margin-bottom: 9px; font: 400 1.2rem/1.2 var(--titulo); color: #fff; }
.opinion blockquote { font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .93); }
.js .opinion blockquote:not(.entera) p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.opinion__mas { margin-top: 12px; padding: 4px 0; background: none; border: 0; color: var(--limon-vivo); font-family: var(--texto); font-weight: 800; font-size: .92rem; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.opinion figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; font-size: .88rem; line-height: 1.35; color: rgba(255, 255, 255, .78); }
.opinion figcaption strong { display: block; font-size: 1rem; font-weight: 800; color: #fff; }
.opinion__foto { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--limon-vivo); }
.opinion__inicial { display: grid; place-content: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--limon-vivo); color: var(--tinta); font: 400 1.25rem/1 var(--titulo); }
.opiniones__resumen { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; font-size: .92rem; color: rgba(255, 255, 255, .82); }
.opiniones__resumen strong { margin-right: 7px; font: 400 1.25rem/1 var(--titulo); color: var(--limon-vivo); }

/* ── Sobre mí, con los avales dentro ── */
.sobre { display: grid; gap: 30px; }
.sobre__titulo h2 { margin-bottom: 16px; }
.sobre__foto { position: relative; margin: 26px 0 8px; width: min(100%, 360px); }
.sobre__foto::before { content: ""; position: absolute; inset: 5% -5% -4% 6%; background: var(--limon-vivo); border-radius: 30px; transform: rotate(-4deg); }
.sobre__foto img { position: relative; display: block; width: 100%; height: auto; border-radius: 26px; box-shadow: var(--sombra); background: #f4f4f4; }
.sobre__texto > p:not(.grande) { color: var(--tinta-suave); }

.avales { margin-top: clamp(24px, 4vw, 36px); }
.avales__titulo { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-oscuro); margin-bottom: 14px; }
.avales__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.avales__lista li { display: flex; flex-direction: column; gap: 3px; padding: 18px 16px; background: var(--crema); font-size: .85rem; line-height: 1.4; color: var(--tinta-suave); }
.avales__lista strong { font: 400 1.1rem/1.15 var(--titulo); color: var(--tinta); }
.avales__icono { display: grid; place-content: center; width: 48px; height: 48px; margin-bottom: 10px; background: var(--limon-vivo); color: var(--tinta); border-radius: 58% 42% 50% 50% / 52% 46% 54% 48%; transform: rotate(-6deg); transition: transform .3s ease; }
.avales__icono .icono { width: 24px; height: 24px; transform: rotate(6deg); }
.avales__lista li:nth-child(even) .avales__icono { background: var(--menta); color: var(--teal-oscuro); transform: rotate(5deg); }
.avales__lista li:nth-child(even) .avales__icono .icono { transform: rotate(-5deg); }
.avales__lista li:hover .avales__icono { transform: rotate(0) scale(1.08); }

/* ── Pasos ── */
.pasos { display: grid; gap: 34px; }
.pasos li { position: relative; max-width: 22em; }
.pasos li:nth-child(2) { margin-left: 12%; }
.pasos li:nth-child(3) { margin-left: 24%; }
.pasos__num { display: block; font: 400 4.6rem/.9 var(--titulo); color: var(--teal-oscuro); }
.pasos__num::after { content: ""; display: block; height: 7px; margin: 14px 0 18px; border-radius: 99px; background: var(--limon-vivo); }
.pasos h3 { margin-bottom: 8px; font-size: 1.55rem; }
.pasos p { color: var(--tinta-suave); }

/* ── Dudas ── */
.dudas { display: grid; gap: 8px; }
.dudas .cabecera-bloque { margin-bottom: 16px; }
.dudas__lista { display: grid; gap: 10px; }
.dudas details { background: var(--papel); border-radius: 18px; padding: 0 22px; }
.dudas summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 0; font: 400 1.22rem/1.25 var(--titulo); cursor: pointer; list-style: none; }
.dudas summary::-webkit-details-marker { display: none; }
.dudas summary::after { content: "+"; flex: none; display: grid; place-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--menta); color: var(--teal-oscuro); font-family: var(--texto); font-size: 1.4rem; transition: transform .2s ease, background-color .2s ease; }
.dudas details[open] summary::after { transform: rotate(45deg); background: var(--limon-vivo); }
.dudas details p { padding-bottom: 20px; color: var(--tinta-suave); max-width: 46em; }

/* ── Contacto ── */
.contacto { position: relative; overflow: hidden; background: var(--teal-oscuro); color: #fff; padding-block: clamp(64px, 10vw, 112px); }
.contacto__rodaja { position: absolute; width: 240px; height: 240px; right: -110px; top: -110px; opacity: .22; animation: girar 70s linear infinite; }
.contacto__rejilla { position: relative; display: grid; gap: 36px; }
.contacto__solo { position: relative; display: grid; gap: 36px; }
.contacto .manuscrita { color: var(--limon); margin-bottom: 8px; }
.contacto h2 { margin-bottom: 16px; }
.contacto h2 + p { color: rgba(255, 255, 255, .9); max-width: 34em; }
.contacto__vias { display: grid; gap: 10px; margin-top: 26px; }
.contacto__vias a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.contacto__vias .icono { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: background-color .2s ease, color .2s ease; }
.contacto__vias a:hover .icono { background: var(--limon-vivo); color: var(--tinta); }
.contacto__vias li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.copiar {
  min-height: 36px; padding: 6px 15px; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 99px; background: transparent;
  color: inherit; font: 700 .82rem/1 var(--texto); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.copiar:hover, .copiar:focus-visible { background: var(--limon-vivo); border-color: var(--limon-vivo); color: var(--tinta); }
.contacto__redes-titulo { margin-top: 26px; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--limon); }
.contacto__redes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.contacto__redes a { display: grid; place-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.contacto__redes a:hover { background: var(--limon-vivo); color: var(--tinta); transform: translateY(-2px); }

.formulario { display: grid; gap: 15px; background: var(--crema); color: var(--tinta); border-radius: var(--radio); padding: clamp(24px, 4vw, 36px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.formulario h3 { margin-bottom: 2px; }
.formulario label { display: block; font-weight: 800; font-size: .95rem; }
.formulario label input, .formulario label textarea { display: block; margin-top: 6px; }
.formulario .opcional { font-weight: 400; color: var(--tinta-suave); }
.formulario input, .formulario textarea {
  width: 100%; min-height: 54px; padding: 12px 15px; border: 2px solid var(--linea); border-radius: 14px; background: var(--papel);
  font-weight: 400; font-size: 1rem; transition: border-color .15s ease;
}
.formulario textarea { resize: vertical; min-height: 110px; }
.formulario input:focus-visible, .formulario textarea:focus-visible { outline: 3px solid var(--teal-oscuro); outline-offset: 1px; border-color: var(--teal-oscuro); }
.formulario__nota { font-size: .85rem; color: var(--tinta-suave); text-align: center; }
.formulario__nota a { color: var(--teal-oscuro); font-weight: 800; }
.formulario__nota [data-correo] { font-weight: 800; color: var(--tinta); overflow-wrap: anywhere; }

/* ── Páginas de texto (privacidad, 404) ── */
.legal__cabecera { padding: 22px var(--margen); border-bottom: 6px solid var(--limon-vivo); background: var(--papel); }
.legal__cabecera img { display: block; width: auto; height: 58px; }
.legal { max-width: 760px; padding-block: clamp(40px, 7vw, 72px) clamp(56px, 9vw, 96px); }
.legal h1 { margin-bottom: 8px; }
.legal h2 { margin-top: 38px; font-size: 1.5rem; }
.legal p, .legal ul { margin-top: 14px; }
.legal ul { padding-left: 1.2em; list-style: disc; }
.legal li + li { margin-top: 10px; }
.legal a { color: var(--teal-oscuro); font-weight: 700; }
.legal__fecha { color: var(--tinta-suave); font-size: .92rem; }
.regalo__acepto a { color: inherit; font-weight: 700; }

/* ── Pie ── */
.pie { background: var(--teal-noche); color: rgba(255, 255, 255, .82); padding-block: 28px; font-size: .92rem; }
.pie__fila { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.pie a { color: #fff; text-underline-offset: 3px; }
.pie__redes { display: flex; gap: 8px; }
.pie__redes a { display: grid; place-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .12); transition: background-color .2s ease, color .2s ease; }
.pie__redes a:hover { background: var(--limon-vivo); color: var(--tinta); }

/* ── Rama de profes ── */
.rasgo__icono { display: grid; place-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--menta); color: var(--teal-oscuro); margin-bottom: 18px; }
.rasgo__icono .icono { width: 26px; height: 26px; }
.rasgo__icono--limon { background: var(--limon); color: var(--tinta); }

.portada-profes { position: relative; overflow: hidden; background: var(--teal-noche); color: #fff; padding-block: clamp(44px, 7vw, 96px) clamp(52px, 8vw, 92px); }
.portada-profes .antetitulo { color: var(--limon); }
.portada-profes h1 { font-size: clamp(2.3rem, 6.2vw, 4.2rem); max-width: 16em; margin-bottom: 20px; }
.portada-profes .entradilla { color: rgba(255, 255, 255, .88); max-width: 40em; }
.portada-profes__rodaja { position: absolute; width: 300px; height: 300px; right: -120px; top: -90px; opacity: .2; animation: girar 70s linear infinite; }
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: clamp(36px, 5vw, 60px); background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radio); overflow: hidden; }
.cifras li:last-child { grid-column: 1 / -1; }
.cifras li { display: flex; flex-direction: column; gap: 6px; padding: 22px 18px; background: var(--teal-noche); font-size: .87rem; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.cifras strong { font: 400 clamp(1.5rem, 4.6vw, 2.1rem)/1.05 var(--titulo); color: var(--limon-vivo); }

.tarjetas { display: grid; gap: 18px; }
.tarjeta { position: relative; overflow: hidden; background: var(--papel); border-radius: 26px; padding: 30px 26px; box-shadow: 0 2px 4px rgba(6, 71, 77, .06), 0 22px 44px -22px rgba(6, 71, 77, .45); display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
.tarjeta:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(6, 71, 77, .06), 0 30px 54px -22px rgba(6, 71, 77, .55); }
.tarjeta__logo { display: grid; place-items: center; height: 130px; margin: -30px -26px 26px; padding: 22px 26px; background: var(--crema); border-bottom: 7px solid var(--limon-vivo); }
.tarjeta__logo img { width: auto; height: auto; max-width: 78%; max-height: 82px; object-fit: contain; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.tarjeta:hover .tarjeta__logo img { transform: scale(1.07); }
.tarjeta h3 { font-size: 1.6rem; }
.tarjeta h3 { margin-bottom: 11px; }
.tarjeta > p { color: var(--tinta-suave); }
.tarjeta .enlace-flecha { margin-top: auto; padding-top: 20px; align-self: flex-start; }

/* Línea de tiempo con icono por entrada */
.trayecto { display: grid; gap: 44px; }
.trayecto__titulo { font-size: 1.6rem; margin-bottom: 22px; }
.linea { display: grid; gap: 24px; }
.linea li { position: relative; display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: start; }
.linea__logo { display: grid; place-items: center; width: 104px; height: 64px; padding: 9px 11px; border-radius: 14px; background: var(--papel); box-shadow: 0 1px 2px rgba(6, 71, 77, .06), 0 8px 18px -12px rgba(6, 71, 77, .4); }
.linea__logo img { width: auto; height: auto; max-width: 82px; max-height: 46px; object-fit: contain; }
.linea__logo--icono { color: var(--teal-oscuro); }
.linea__logo--icono .icono { width: 28px; height: 28px; }
.linea__icono { display: grid; place-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--menta); color: var(--teal-oscuro); }
.linea li:nth-child(even) .linea__icono { background: var(--limon); color: var(--tinta); }
.bloque--menta .linea li:nth-child(odd) .linea__icono { background: var(--papel); }
.bloque--menta .barra { background: rgba(8, 105, 114, .2); }
.linea__icono .icono { width: 25px; height: 25px; }
.linea__fecha { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-oscuro); margin-bottom: 4px; }
.linea h4 { font-size: 1.15rem; margin-bottom: 3px; }
.linea__donde { font-weight: 800; color: var(--teal-oscuro); font-size: .97rem; }
.linea li > div > p:not(.linea__fecha):not(.linea__donde) { margin-top: 7px; color: var(--tinta-suave); font-size: .97rem; }

.idiomas-lista { display: grid; gap: 12px; margin-top: 8px; }
.idiomas-lista li { display: grid; grid-template-columns: 7.5em 1fr; gap: 14px; align-items: center; font-weight: 700; }
.barra { height: 10px; border-radius: 99px; background: var(--linea); overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: 99px; background: var(--teal-oscuro); }
.idiomas-lista em { font-style: normal; font-size: .85rem; font-weight: 600; color: var(--tinta-suave); }

.ponencias { display: grid; gap: 30px; }
.cita { margin-top: 22px; padding-left: 20px; border-left: 4px solid var(--limon-vivo); font: 400 clamp(1.2rem, 2.5vw, 1.5rem)/1.3 var(--titulo); }
.ponencias__lista { display: grid; gap: 12px; }
.ponencias__lista li { background: var(--papel); border-radius: var(--radio); padding: 22px 24px; }
.ponencias__fecha { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-oscuro); margin-bottom: 7px; }
.ponencias__lista h3 { margin-bottom: 7px; font-size: 1.25rem; }
.ponencias__lista p:not(.ponencias__fecha) { color: var(--tinta-suave); font-size: .99rem; }

.puente { align-self: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radio); padding: clamp(24px, 4vw, 36px); }
.puente .antetitulo { color: var(--limon); }
.puente p:not(.antetitulo) { color: rgba(255, 255, 255, .9); margin-bottom: 20px; }

/* Aparición al bajar (solo con JavaScript) */
.js .aparece { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .aparece.visto { opacity: 1; transform: none; }

/* ── 640 px ── */
@media (min-width: 640px) {
  .portada__botones { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .aprender, .lista-ok { grid-template-columns: repeat(2, 1fr); }
  .avales__lista { grid-template-columns: repeat(3, 1fr); }
  .carrusel__botones { display: flex; }
  .cifras { grid-template-columns: repeat(3, 1fr); }
  .cifras li:last-child { grid-column: auto; }
  .pie__fila { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ── 900 px ── */
@media (min-width: 900px) {
  :root { --alto-cabecera: 96px; }
  .marca img { height: 82px; }

  .ramas__selector a { font-size: 1rem; padding: 10px 20px; }
  .portada__rejilla { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 50px; }
  .portada__rodaja--a { width: 240px; height: 240px; right: -90px; top: 8%; }
  .portada__rodaja--b { display: block; width: 110px; height: 110px; left: -40px; bottom: 18%; animation: girar 40s linear infinite reverse; }

  .dolor__rejilla { grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
  .dolor__titulo { position: sticky; top: calc(var(--alto-cabecera) + 32px); }
  .aprender { grid-template-columns: repeat(3, 1fr); }
  .regalo__rejilla { grid-template-columns: .7fr 1.3fr; gap: 60px; align-items: center; }
  .libro { width: min(100%, 300px); padding: 28px 26px; }
  .libro__titulo { font-size: 2.7rem; }
  .sobre { grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
  .sobre__titulo { position: sticky; top: calc(var(--alto-cabecera) + 28px); }
  .avales__lista { grid-template-columns: repeat(3, 1fr); }
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
  .pasos li:nth-child(1) { margin: 150px 0 0; }
  .pasos li:nth-child(2) { margin: 75px 0 0; }
  .pasos li:nth-child(3) { margin: 0; }
  .dudas { grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
  .dudas .cabecera-bloque { position: sticky; top: calc(var(--alto-cabecera) + 32px); }
  .contacto__rejilla { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .contacto__solo { grid-template-columns: 1.2fr .8fr; gap: 64px; }
  .contacto__rodaja { width: 380px; height: 380px; right: -140px; top: -140px; }

  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .tarjeta { padding: 34px 30px; }
  .tarjeta__logo { margin: -34px -30px 28px; }
  .trayecto { grid-template-columns: 1fr 1fr; gap: 64px; }
  .ponencias { grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
  .ponencias__titulo { position: sticky; top: calc(var(--alto-cabecera) + 32px); }
  .portada-profes__rodaja { width: 460px; height: 460px; right: -160px; top: -140px; }
}

/* ── 1100 px ── */
@media (min-width: 1100px) {
  .practico { grid-template-columns: repeat(4, 1fr); }
  .opinion { flex-basis: 420px; }
  :root { --alto-cabecera: 108px; }
  .marca img { height: 94px; }
  .hamburguesa { display: none; }
  .menu { position: static; inset: auto; flex-direction: row; align-items: center; gap: 2px; padding: 0; background: none; overflow: visible; visibility: visible; opacity: 1; transform: none; }
  .menu a:not(.boton) { padding: 10px 11px; border: 0; border-radius: 999px; font: 700 .95rem/1 var(--texto); transition: background-color .15s ease; }
  .menu a:not(.boton):hover { background: var(--menta); }
  .menu__cta { margin: 0 0 0 8px; min-height: 48px; padding: 11px 20px; font-size: .95rem; }
}

/* ── 1280 px ── */
@media (min-width: 1280px) {
  .menu a:not(.boton) { padding: 10px 16px; font-size: .98rem; }
  .menu__cta { margin-left: 10px; padding: 11px 22px; font-size: .97rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .aparece { opacity: 1; transform: none; }
}