/* ============================================================
   TIN — Tus Idiomas Nativos
   Sistema de diseño: mobile-first, accesible y animado.
   Un solo archivo, ordenado por capas:
   1. Fuentes · 2. Tokens · 3. Base · 4. Accesibilidad
   5. Animaciones · 6. Layout · 7. Componentes · 8. Utilidades
   ============================================================ */

/* ============================================================
   1. FUENTES (Satoshi, servidas en local)
   ============================================================ */
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi Static';
  src: url('../assets/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi Static';
  src: url('../assets/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi Static';
  src: url('../assets/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. TOKENS DE DISEÑO
   ============================================================ */
:root {
  /* --- Paleta oficial de marca ---
     Los hex marcados con (P) salen tal cual del documento de paleta.
     Los marcados con (D) son derivados nuestros para estados :hover y
     para los fondos de papel, que la paleta no define. */

  /* Fondos y neutros */
  --crema: #f5efe3;          /* (D) papel */
  --crema-2: #ece1d5;        /* (D) */
  --crema-3: #e2d4c4;        /* (D) */
  --blanco: #fdfaf4;         /* (D) */
  --marron: #3e2a25;         /* (P) */
  --marron-suave: #80564d;   /* (P) */

  /* Tierras */
  --tierra: #a66249;         /* (P) */
  --tierra-clara: #b67b69;   /* (P) */
  --rosa: #cd9f95;           /* (P) */

  /* Dorados */
  --amarillo: #eabd59;       /* (P) */
  --mostaza: #d9a047;        /* (P) */
  --mostaza-oscura: #c98a2a; /* (P) */

  /* Cálidos */
  --coral: #e8865b;          /* (P) */
  --salmon: #d67458;         /* (P) */
  --naranja: #d67458;        /* (P) */
  --terracota: #c45c39;      /* (P) */
  --rojo: #c9423d;           /* (P) */
  --rojo-oscuro: #a83531;    /* (D) hover de --rojo */

  /* Verdes */
  --verde-claro: #a1b547;    /* (P) */
  --oliva: #97a543;          /* (P) */
  --verde: #8cb759;          /* (P) */
  --verde-2: #88ad49;        /* (P) */
  --oliva-media: #8a9333;    /* (P) */
  --oliva-oscura: #6c8e3b;   /* (P) */

  /* Turquesas */
  --teal-palido: #9dc6c3;    /* (P) */
  --turquesa: #55bfb9;       /* (P) */
  --teal-claro: #71a8a5;     /* (P) */
  --teal-medio: #5fa09b;     /* (P) */
  --teal-2: #2a9d8f;         /* (P) */
  --teal: #0f8a8f;           /* (P) */
  --teal-oscuro: #0b6f74;    /* (D) hover de --teal */

  --hilo: #d67458;           /* (P) color del hilo de la mascota */

  /* --- Tipografía fluida --- */
  --tf-xs:   clamp(.7rem, .66rem + .18vw,  .75rem);
  --tf-sm:   clamp(.78rem, .74rem + .2vw,  .86rem);
  --tf-base: clamp(.9rem, .86rem + .24vw,  1rem);
  --tf-md:   clamp(.98rem, .92rem + .34vw, 1.12rem);
  --tf-lg:   clamp(1.08rem, .95rem + .62vw, 1.35rem);
  --tf-xl:   clamp(1.35rem, .95rem + 1.6vw, 2.15rem);
  --tf-2xl:  clamp(1.7rem, 1rem + 2.2vw, 3.3rem);

  /* --- Espaciado --- */
  --esp-1: .5rem;
  --esp-2: .875rem;
  --esp-3: 1.25rem;
  --esp-4: 1.75rem;
  /* El aire vertical mira también al alto de la ventana (vh): en pantallas
     bajas se comprime solo, para que cada sección quepa sin hacer scroll. */
  --esp-5: clamp(1.1rem, 1vw + 1.4vh, 2.5rem);
  --esp-6: clamp(1.75rem, 1.4vw + 3.2vh, 4.5rem);
  --canal: clamp(1rem, 2.4vw, 1.8rem);

  /* --- Radios --- */
  --radio-sm: 12px;
  --radio-md: 18px;
  --radio: 24px;
  --radio-lg: 30px;
  --radio-pill: 999px;

  /* --- Sombras --- */
  --sombra-xs: 0 2px 6px rgba(62, 42, 37, .10);
  --sombra-sm: 0 6px 14px -6px rgba(62, 42, 37, .22);
  --sombra: 0 12px 28px -10px rgba(62, 42, 37, .28);
  --sombra-md: 0 20px 42px -14px rgba(62, 42, 37, .32);
  --sombra-lg: 0 34px 66px -20px rgba(62, 42, 37, .38);

  /* --- Movimiento --- */
  --ease-suave: cubic-bezier(.22, .61, .36, 1);
  --ease-salida: cubic-bezier(.16, 1, .3, 1);
  --ease-rebote: cubic-bezier(.34, 1.4, .64, 1);
  --rapido: .18s;
  --medio: .34s;
  --lento: .7s;

  /* --- Papel cuadriculado ---
     Una sola retícula, todas las líneas iguales. La altura de la barra
     es un múltiplo exacto de --cuadro para que termine sobre una línea. */
  --cuadro: 16px;
  --linea-cuadricula: rgba(62, 42, 37, .07);

  /* --- Alturas --- */
  --alto-nav: 64px;   /* 4 × --cuadro */
}

/* ============================================================
   3. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Satoshi', 'Satoshi Static', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--tf-base);
  line-height: 1.6;
  color: var(--marron);
  background-color: var(--crema);
  /* papel cuadriculado dibujado con gradientes (más liviano que una textura) */
  background-image:
    linear-gradient(var(--linea-cuadricula) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea-cuadricula) 1px, transparent 1px);
  background-size: var(--cuadro) var(--cuadro);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* En móvil y en pantallas táctiles el fondo fijo penaliza el scroll */
@media (max-width: 860px), (hover: none) {
  body { background-attachment: scroll; }
}

/* Bloquea el scroll del fondo cuando el menú móvil está abierto */
body.sin-scroll { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  line-height: 1.14;
  margin: 0 0 .5em;
  text-wrap: balance;
  letter-spacing: -.015em;
}
h1 { font-weight: 900; font-size: var(--tf-2xl); }
h2 { font-weight: 800; font-size: var(--tf-xl); }
h3 { font-weight: 700; font-size: var(--tf-lg); }
h4 { font-weight: 800; font-size: var(--tf-md); }
p  { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--mostaza); color: var(--marron); }

/* Los anchors no quedan escondidos bajo la barra fija */
[id] { scroll-margin-top: calc(var(--alto-nav) + 1.5rem); }

/* ============================================================
   4. ACCESIBILIDAD
   ============================================================ */
.saltar-enlace {
  position: fixed;
  top: .6rem;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -160%);
  background: var(--marron);
  color: var(--blanco);
  font-weight: 700;
  font-size: var(--tf-sm);
  text-decoration: none;
  padding: .7em 1.4em;
  border-radius: var(--radio-pill);
  box-shadow: var(--sombra-md);
  transition: transform var(--medio) var(--ease-rebote);
}
.saltar-enlace:focus { transform: translate(-50%, 0); }

:focus-visible {
  outline: 3px solid var(--marron);
  outline-offset: 3px;
  border-radius: 4px;
}
.tarjeta-idioma :focus-visible,
.tarjeta-docente :focus-visible,
.nav-menu :focus-visible,
.pie-redes :focus-visible { outline-color: var(--blanco); }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   5. ANIMACIONES
   ============================================================ */
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes balanceo {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(-.6deg); }
}
@keyframes marquesina {
  to { transform: translateX(-50%); }
}
@keyframes pulso-punto {
  0%   { box-shadow: 0 0 0 4px var(--crema), 0 0 0 4px rgba(217, 160, 71, .5); }
  70%  { box-shadow: 0 0 0 4px var(--crema), 0 0 0 14px rgba(217, 160, 71, 0); }
  100% { box-shadow: 0 0 0 4px var(--crema), 0 0 0 14px rgba(217, 160, 71, 0); }
}
/* Entra desde la derecha, que es de donde viene: del botón que abrió el menú */
@keyframes aparecer-menu {
  from { opacity: 0; transform: translate(14px, -8px); }
  to   { opacity: 1; transform: translate(0, 0); }
}

/* --- Revelado al hacer scroll (solo si hay JS) --- */
.js [data-anim] {
  opacity: 0;
  transition:
    opacity var(--lento) var(--ease-salida),
    transform var(--lento) var(--ease-salida),
    filter var(--lento) var(--ease-salida);
  transition-delay: var(--retraso, 0ms);
}
.js [data-anim="arriba"]    { transform: translateY(34px); }
.js [data-anim="abajo"]     { transform: translateY(-26px); }
.js [data-anim="izquierda"] { transform: translateX(-40px); }
.js [data-anim="derecha"]   { transform: translateX(40px); }
.js [data-anim="zoom"]      { transform: scale(.9); }
.js [data-anim="difuso"]    { filter: blur(10px); transform: translateY(20px); }
/* Estado final. En cuanto termina la transición, el JS retira `data-anim`
   para que el elemento vuelva a sus estilos propios (si no, este `transform`
   ganaría por especificidad a los `:hover` de tarjetas, botones y logos). */
.js [data-anim].visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ============================================================
   6. LAYOUT
   ============================================================ */
.contenedor {
  width: min(1360px, 100%);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 3.25rem);
}
.contenedor-estrecho { width: min(960px, 100%); }

.seccion { padding-block: var(--esp-6); position: relative; }
.seccion-compacta { padding-block: clamp(1.4rem, 1vw + 1.8vh, 2.75rem); }
.seccion-sin-tope { padding-top: 0; }
.seccion-sin-base { padding-bottom: 0; }

.centrado { text-align: center; }
.derecha  { text-align: right; }

.ancho-texto { max-width: 62ch; }
.ancho-texto.centrado { margin-inline: auto; }

/* Encabezado de sección reutilizable */
.seccion-cabecera { margin-bottom: var(--esp-5); }
.seccion-cabecera.centrado { margin-inline: auto; max-width: 46ch; }

/* Rejillas */
.fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--canal);
  align-items: center;
}
.fila > * { flex: 1 1 300px; min-width: 0; }
.fila-arriba { align-items: flex-start; }
.fila-estirada { align-items: stretch; }

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--canal);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--canal);
}
@media (min-width: 800px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.pila {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.pila-centrada { align-items: center; }

/* ============================================================
   7. COMPONENTES
   ============================================================ */

/* ---------- 7.1 Botones ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  border: 0;
  border-radius: var(--radio-pill);
  padding: .78em 1.7em;
  font: inherit;
  font-size: var(--tf-sm);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sombra-sm);
  transition:
    transform var(--medio) var(--ease-rebote),
    box-shadow var(--medio) var(--ease-suave),
    background-color var(--rapido) var(--ease-suave),
    color var(--rapido) var(--ease-suave);
}
/* destello diagonal al pasar el cursor */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .65s var(--ease-salida);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(120%); }
.btn:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }
.btn:active { transform: translateY(-1px) scale(.985); }

.btn-crema   { background: var(--crema);          color: var(--marron); }
.btn-blanco  { background: var(--blanco);         color: var(--marron); }
/* El mostaza es demasiado claro para texto blanco (2,2:1). Con marrón
   sube a 6,1:1, y a 4,8:1 sobre el mostaza oscuro del hover. */
.btn-mostaza { background: var(--mostaza);        color: var(--marron); }
.btn-rojo    { background: var(--rojo);           color: var(--blanco); }
/* --teal (#0f8a8f) con texto blanco se queda en 4,0:1; el oscuro sube a 5,7:1 */
.btn-teal    { background: var(--teal-oscuro);    color: var(--blanco); }
.btn-terracota { background: var(--terracota);    color: var(--blanco); }
/* Para botones sobre fondos claros (amarillo, mostaza), donde cualquier
   color de la paleta se confunde con la tarjeta */
.btn-marron  { background: var(--marron);         color: var(--crema); }
.btn-mostaza:hover { background: var(--mostaza-oscura); }
.btn-rojo:hover    { background: var(--rojo-oscuro); }
.btn-marron:hover  { background: var(--marron-suave); }

.btn-fantasma {
  background: transparent;
  color: var(--marron);
  box-shadow: inset 0 0 0 2px rgba(62, 42, 37, .25);
}
.btn-fantasma:hover { box-shadow: inset 0 0 0 2px var(--marron), var(--sombra-sm); }

.btn-grande { font-size: var(--tf-md); padding: .9em 2.1em; }
.btn-chico  { font-size: var(--tf-xs); padding: .6em 1.25em; }
.btn-ancho  { width: 100%; }
.btn-flecha svg { width: 1.05em; height: 1.05em; transition: transform var(--medio) var(--ease-rebote); }
.btn-flecha:hover svg { transform: translateX(4px); }

/* ---------- 7.2 Navegación ---------- */
/* En reposo la barra es transparente: deja ver el papel cuadriculado del body,
   así la retícula no se corta y siempre queda alineada. Solo al desplazarse
   se opaca, y entonces su borde inferior cae justo sobre una línea de la
   cuadrícula (va como sombra interior para no sumar 1px a la altura). */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  transition: background-color var(--medio) var(--ease-suave),
              box-shadow var(--medio) var(--ease-suave);
}
.nav.desplazada {
  background-color: rgba(245, 239, 227, .94);
  box-shadow: inset 0 -1px 0 rgba(62, 42, 37, .12),
              0 10px 30px -18px rgba(62, 42, 37, .5);
}
@supports (backdrop-filter: blur(1px)) {
  .nav.desplazada { backdrop-filter: blur(14px) saturate(1.3); }
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--alto-nav);
}
.nav-logo {
  display: block;
  flex: 0 0 auto;
  transition: transform var(--medio) var(--ease-rebote),
              opacity var(--medio) var(--ease-suave),
              visibility var(--medio);
}
.nav-logo img { height: 40px; width: auto; }
.nav-logo:hover { transform: rotate(-3deg) scale(1.05); }
/* En la portada el logotipo grande ya preside el héroe, así que el pequeño de
   la barra sobra hasta que ese héroe empieza a irse. Se oculta con opacidad y
   visibilidad, no con display, para que el hueco siga ocupado y el menú de la
   derecha no dé un salto al aparecer. `visibility` además lo saca del foco
   del teclado mientras no se ve. */
.nav-con-heroe .nav-logo {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.92);
}
.nav-con-heroe.desplazada .nav-logo {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-menu a {
  display: inline-block;
  position: relative;
  background: var(--rojo);
  color: var(--blanco);
  font-weight: 700;
  font-size: clamp(.72rem, .64rem + .24vw, .84rem);
  text-decoration: none;
  /* Rectángulo redondeado, no píldora: con --radio-pill el navegador recorta
     el radio a la mitad de la altura y los extremos salen semicirculares. */
  border-radius: var(--radio-sm);
  padding: .5em 1.05em;
  box-shadow: var(--sombra-xs);
  transition: transform var(--medio) var(--ease-rebote),
              background-color var(--rapido) var(--ease-suave),
              box-shadow var(--medio) var(--ease-suave);
}
.nav-menu a:hover {
  transform: translateY(-3px);
  background: var(--rojo-oscuro);
  box-shadow: var(--sombra-sm);
}
.nav-menu a[aria-current="page"] { background: var(--mostaza-oscura); }
.nav-menu a[aria-current="page"]:hover { background: var(--mostaza); }

/* Botón hamburguesa animado */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  background: var(--rojo);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: var(--sombra-xs);
  transition: background var(--rapido) var(--ease-suave), transform var(--rapido) var(--ease-suave);
}
.nav-toggle:active { transform: scale(.94); }
.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--blanco);
  transition: transform var(--medio) var(--ease-salida), opacity var(--rapido) linear;
}
.nav-toggle span:nth-child(1) { transform: translate(-50%, -7px); top: 50%; }
.nav-toggle span:nth-child(2) { transform: translate(-50%, 0);     top: 50%; }
.nav-toggle span:nth-child(3) { transform: translate(-50%, 7px);   top: 50%; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translate(-50%, 0) scaleX(.4); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

.nav-velo {
  position: fixed;
  inset: var(--alto-nav) 0 0;
  z-index: 55;
  background: rgba(62, 42, 37, .38);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--medio) var(--ease-suave), visibility var(--medio);
}
.nav-velo.activo { opacity: 1; visibility: visible; }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  /* Panel compacto colgado del botón que lo abre, no una franja de lado a
     lado: ocupa solo lo que ocupan los enlaces y queda del lado del pulgar.
     De separar el menú del resto de la página ya se encarga .nav-velo. */
  .nav-menu {
    position: absolute;
    top: calc(100% + .5rem);
    left: auto;
    /* El mismo margen lateral que el contenedor, así el panel queda a ras del
       botón que lo despliega. */
    right: clamp(1.15rem, 4vw, 3.25rem);
    width: min(15rem, calc(100vw - 2.5rem));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
    background: var(--crema);
    padding: .85rem;
    /* Vértice recto arriba a la derecha, mirando al botón que lo abrió: el
       mismo rasgo que el resto de bloques de la marca. */
    border-radius: var(--radio-md) 0 var(--radio-md) var(--radio-md);
    box-shadow: var(--sombra-lg);
    transform-origin: top right;
    transform: translateY(-12px) scale(.97);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--medio) var(--ease-salida),
                opacity var(--medio) var(--ease-suave),
                visibility var(--medio);
  }
  .nav-menu.abierto {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-menu.abierto li {
    animation: aparecer-menu .38s var(--ease-salida) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  /* En bloque, cada enlace llena el ancho del panel: todos miden igual sin
     depender de lo largo que sea su texto. */
  .nav-menu a {
    display: block;
    text-align: center;
    font-size: 1rem;
    padding: .75em 1.2em;
  }
  .nav-menu a:hover { transform: none; }
}

/* ---------- 7.3 Hero ---------- */
.hero { position: relative; overflow: hidden; }
/* La portada arranca casi pegada a la barra: el logo grande hace de encabezado */
.hero-portada { padding-top: clamp(.5rem, 1.6vh, 1.25rem); }
/* Logo grande que abre la portada */
.hero-logo {
  display: inline-block;
  margin-bottom: clamp(.5rem, 1.2vh, 1rem);
  transition: transform var(--medio) var(--ease-rebote);
}
.hero-logo img { width: clamp(90px, 9.5vw, 150px); }
.hero-logo:hover { transform: rotate(-3deg) scale(1.03); }

.hero-titulo { max-width: 30ch; margin-bottom: .28em; }
.hero-bajada {
  font-size: clamp(.98rem, .74rem + 1vw, 1.45rem);
  font-weight: 500;
  color: var(--marron-suave);
  max-width: 60ch;
  margin: 0 0 1.15em;
}
.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}
.centrado .hero-acciones,
.hero-acciones.centrado { justify-content: center; }

/* Escaparate inferior: teléfono + descargas, con la mascota al fondo */
.hero-vitrina {
  position: relative;
  display: grid;
  gap: var(--esp-4);
  justify-items: center;
  margin-top: var(--esp-5);
}
.hero-telefono,
.hero-descarga { position: relative; z-index: 1; }
.hero-telefono {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  /* flota el conjunto (teléfono + botón) para que no se despeguen al superponerse */
  animation: flotar 6.5s var(--ease-suave) infinite;
}
.hero-telefono .telefono { animation: none; }
.hero-descarga {
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
}
/* La mascota rompe el contenedor: su hilo tiene que llegar a los bordes
   de la página aunque el resto del contenido respete los márgenes.
   `calc(50% - 50vw)` funciona porque .hero-vitrina está centrada. */
.hero-mascota {
  order: 3;
  justify-self: start;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  animation: balanceo 7s var(--ease-suave) infinite;
}

/* En móvil la mascota no es capa de fondo sino una banda suelta al final del
   héroe, descolgada de todo lo demás. Es decorativa, así que se retira: mismo
   criterio que en preguntas frecuentes y en la fila de fundadores. */
@media (max-width: 700px) {
  .hero-mascota { display: none; }
}

/* A 560 px ya caben el teléfono (252) y las descargas (216) uno al lado del
   otro con su hueco: quedan 533 de ancho útil y hacen falta 491. Con el salto
   antiguo en 700, un móvil grande apilaba todo y desperdiciaba el ancho. */
@media (min-width: 560px) {
  .hero-vitrina {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: start;
    column-gap: clamp(1.5rem, 4vw, 4rem);
  }
  .hero-descarga { padding-top: 1rem; }
  .hero-mascota { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .hero-vitrina {
    padding-bottom: clamp(.75rem, 1.5vw, 1.75rem);
    min-height: max(400px, 24vw);
  }

  /* La mascota pasa a capa de fondo, anclada abajo y a sangre:
     su hilo cruza por detrás del teléfono, de las descargas y del texto. */
  .hero-mascota {
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    grid-column: auto;   /* si no, la caja contenedora sería su área de rejilla */
  }

  /* El botón se apoya sobre el borde inferior del teléfono, como en la maqueta.
     Va anclado al fondo del marco (no a un % de su alto), así que cuando se
     sustituya el mock por la captura real —más larga— seguirá quedando abajo
     y despejado del QR. Si con la captura definitiva se prefiere dentro del
     marco, basta con subir este `bottom` a un valor positivo. */
  .hero-telefono { display: block; }
  .hero-telefono .btn {
    position: absolute;
    left: 68%;
    bottom: -1.5rem;
    z-index: 2;
    white-space: nowrap;
  }
}

/* ---------- 7.4 Tarjetas ---------- */
.tarjeta {
  position: relative;
  border-radius: var(--radio);
  padding: clamp(1.35rem, 3vw, 2.2rem);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.tarjeta > * { position: relative; z-index: 1; }
.tarjeta h3, .tarjeta h4 { margin-top: 0; }

/* Brillo que sigue al cursor */
.tarjeta-brillo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(22rem 22rem at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .22), transparent 62%);
  transition: opacity var(--medio) var(--ease-suave);
}
.tarjeta-brillo:hover::after { opacity: 1; }

.tarjeta-elevable {
  transition: transform var(--medio) var(--ease-salida),
              box-shadow var(--medio) var(--ease-suave);
}
.tarjeta-elevable:hover { transform: translateY(-7px); box-shadow: var(--sombra-lg); }

/* Centra el contenido en vertical cuando la tarjeta se estira para igualar
   la altura de su pareja y le sobra espacio */
.tarjeta-centrada { display: flex; flex-direction: column; justify-content: center; }

/* Botonera de redes: apilada, con los tres botones del mismo ancho */
.redes-lista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
}
.redes-lista .btn { width: min(300px, 100%); }
.redes-lista svg { width: 1.2em; height: 1.2em; flex: 0 0 auto; }

/* Tarjeta de nivel (Freemium): una tira horizontal, nombre a un lado y
   módulos al otro, pensada para apilarse en columna. */
.tarjeta-nivel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.65rem, 1vw, .9rem) clamp(1rem, 1.6vw, 1.4rem);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
  text-align: left;
}
.tarjeta-nivel.esquina-recta { border-radius: var(--radio-md) var(--radio-md) var(--radio-md) 0; }
.tarjeta-nivel h3 {
  font-size: clamp(.95rem, .88rem + .3vw, 1.15rem);
  margin: 0;
}
.tarjeta-nivel .chip {
  font-size: clamp(.66rem, .6rem + .2vw, .74rem);
  padding: .35em .95em;
  box-shadow: none;
}
.tarjeta-nivel.tarjeta-elevable:hover { transform: translateY(-4px); box-shadow: var(--sombra); }

/* Etiqueta de sección tipo "pestaña" */
.etiqueta {
  display: inline-block;
  color: var(--blanco);
  font-weight: 800;
  font-size: var(--tf-md);
  border-radius: var(--radio-pill) var(--radio-pill) var(--radio-pill) 0;
  padding: .5em 1.8em;
  box-shadow: var(--sombra-sm);
}
.derecha .etiqueta { border-radius: var(--radio-pill) var(--radio-pill) 0 var(--radio-pill); }
/* La tarjeta que va debajo de una etiqueta comparte con ella el vértice
   recto: el de la etiqueta abajo y el de la tarjeta arriba, enfrentados.
   Las demás esquinas de ambas quedan redondeadas. */
.etiqueta + .tarjeta { border-top-left-radius: 0; }
.derecha .etiqueta + .tarjeta {
  border-top-left-radius: var(--radio);
  border-top-right-radius: 0;
}

/* ---------- 7.5 Hilo decorativo ---------- */
/* Sube por detrás del último bloque de la página: sin esto quedaba un hueco
   muerto entre la última tarjeta y los textos del pie. */
/* SIN USAR: el hilo cerraba todas las páginas justo encima del pie y se
   retiró por petición del cliente. Se conservan las reglas porque volver a
   ponerlo es solo añadir el <div class="hilo"> antes del <footer>. */
.hilo {
  position: relative;
  z-index: -1;
  width: 100%;
  margin-top: -7%;
  pointer-events: none;
  overflow: hidden;
}
.hilo img { width: 100%; min-width: 620px; height: auto; }
/* En páginas alternas se voltea, para que el mismo dibujo no se repita
   idéntico de una a otra */
.hilo-invertido img { transform: scaleX(-1); }

/* ---------- 7.6 Tarjetas de idioma ---------- */
.grilla-idiomas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
  gap: var(--canal);
}
/* Con tres tarjetas, dos columnas dejan siempre un hueco vacío. Ese tramo va
   de ~590 a ~885 px, y ahí la rejilla pasa a desplazamiento horizontal: se ve
   una tarjeta entera y el borde de la siguiente, que es lo que invita a
   arrastrar sin necesidad de flechas. Por debajo cabe una sola columna y por
   encima caben las tres, así que en ninguno de los dos casos sobra sitio. */
@media (min-width: 560px) and (max-width: 899px) {
  .grilla-idiomas {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: .75rem;
    padding: .25rem .75rem 1.5rem;
    margin-inline: -.75rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .grilla-idiomas::-webkit-scrollbar { display: none; }
  .grilla-idiomas > * {
    flex: 0 0 min(300px, 76%);
    scroll-snap-align: start;
  }
}
.tarjeta-idioma {
  color: var(--blanco);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-items: center;
}
.tarjeta-idioma h3,
.tarjeta-idioma h4 { font-size: var(--tf-lg); font-weight: 800; margin: 0; }
/* Dos datos en dos renglones: arriba el nombre que la lengua se da a sí misma
   y abajo dónde se habla. Lo usan las tarjetas de idioma y las de docentes, así
   que el reparto va sin acotar y solo el tamaño se ajusta por tipo de tarjeta.
   En columna y no con <br> porque este bloque es flex: un <br> suelto se
   convertiría en un elemento más y dejaría de partir línea. */
.nativo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1em;
  line-height: 1.3;
  margin: 0;
}
.nativo .region { font-weight: 500; opacity: .85; }
.tarjeta-idioma .nativo {
  font-weight: 600;
  font-size: var(--tf-sm);
  opacity: .92;
  min-height: 2.8em;
}
.tarjeta-idioma .nativo .region { font-size: .92em; }
.tarjeta-idioma .niveles {
  font-size: var(--tf-xs);
  font-weight: 700;
  opacity: .9;
  margin: 0 0 .6em;
}
.niveles-fila {
  display: flex;
  gap: clamp(.9rem, 3vw, 1.5rem);
  justify-content: center;
  font-size: var(--tf-xs);
  font-weight: 600;
}
.niveles-fila > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4em;
}
.puntos { display: flex; gap: .3em; }
.puntos i {
  width: .5em; height: .5em;
  border-radius: 50%;
  background: currentColor;
  opacity: .95;
}
.puntos i.vacio { opacity: .32; }
.tarjeta-idioma .botones {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 100%;
  align-items: center;
  margin-top: auto;
  padding-top: .3rem;
}
.tarjeta-idioma .btn { width: min(250px, 100%); }

.idioma-rojo      { background: var(--rojo); }
.idioma-terracota { background: var(--terracota); }
.idioma-salmon    { background: var(--salmon); }
.idioma-mostaza   { background: var(--mostaza-oscura); }
.idioma-ocre      { background: var(--mostaza); }
.idioma-amarillo  { background: var(--amarillo); }

/* ---------- 7.7 Carrusel ---------- */
.carrusel {
  display: flex;
  gap: var(--canal);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* `overflow-x: auto` obliga al navegador a recortar también en vertical, así
     que este hueco inferior no es decorativo: sin él la sombra de :hover se
     corta en seco y la ficha parece apoyada en un suelo. --sombra-lg baja
     47 px (34 de desplazamiento + 33 de difuminado - 20 de extensión) y el
     :hover levanta la ficha 6, así que con 52 px se difumina entera. */
  scroll-padding-inline: .75rem;
  padding: .75rem .75rem 3.25rem;
  margin-inline: -.75rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* Si las tarjetas caben todas, se centran; si desbordan, `safe` hace que
     vuelvan a alinearse a la izquierda para que no queden inalcanzables. */
  justify-content: flex-start;
  justify-content: safe center;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel.arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.carrusel.arrastrando * { pointer-events: none; }
.carrusel > * { scroll-snap-align: start; flex: 0 0 auto; }
/* Cuando todas las fichas caben, no hay nada que desplazar: el JS marca la
   pista y los controles desaparecen en lugar de quedarse apagados. */
.carrusel.sin-desplazamiento { cursor: default; }
.carrusel-controles.sin-desplazamiento { display: none; }

.carrusel-controles {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  /* La separación la pone ya el hueco inferior de la pista */
  margin-top: 0;
}
.flecha {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 0;
  background: var(--mostaza);
  color: var(--marron);
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-sm);
  transition: transform var(--medio) var(--ease-rebote),
              opacity var(--medio) var(--ease-suave),
              background var(--rapido) var(--ease-suave);
}
.flecha svg { width: 18px; height: 18px; }
.flecha:hover:not(:disabled) { transform: scale(1.12); background: var(--mostaza-oscura); }
.flecha:active:not(:disabled) { transform: scale(.96); }
.flecha:disabled { opacity: .3; cursor: default; }
.flecha-teal { background: var(--teal-claro); }
.flecha-teal:hover:not(:disabled) { background: var(--teal); }

.carrusel-barra {
  position: relative;
  width: min(240px, 42vw);
  height: 6px;
  border-radius: var(--radio-pill);
  background: rgba(62, 42, 37, .14);
  overflow: hidden;
}
.carrusel-barra i {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--ancho, 34%);
  border-radius: var(--radio-pill);
  background: var(--mostaza);
  transform: translateX(var(--x, 0px));
  transition: transform var(--medio) var(--ease-salida), width var(--medio) var(--ease-salida);
}
.carrusel-barra-teal i { background: var(--teal-claro); }

/* ---------- 7.8 Docentes ---------- */
.tarjeta-docente {
  color: var(--blanco);
  width: min(340px, 82vw);
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.docente-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.docente-cabecera h3 { margin: 0; font-size: var(--tf-md); }
.docente-cabecera .rol { font-size: var(--tf-xs); opacity: .9; font-weight: 600; margin: .2em 0 0; }
.docente-foto {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  border-radius: 20px;
  object-fit: cover;
  object-position: top center;
  /* Los retratos son recortes con fondo transparente, así que lo que se ve
     detrás es este color. Un velo translúcido en lugar de un crema sólido deja
     pasar el color de la tarjeta y el marco deja de leerse como una pegatina
     blanca. La sombra es lo que sigue definiendo el borde. */
  background: rgba(255, 255, 255, .24);
  box-shadow: var(--sombra-sm);
  transition: transform var(--medio) var(--ease-rebote);
}
/* Sobre tarjetas claras el mismo velo apenas se notaría, así que sube: es el
   mismo criterio que ya usa .docente-relato. */
.texto-oscuro .docente-foto { background: rgba(255, 255, 255, .4); }
.tarjeta-docente:hover .docente-foto { transform: scale(1.07) rotate(-2deg); }
/* Hueco de retrato para las docentes que aún no tienen foto */
.docente-foto-vacia {
  background: rgba(255, 255, 255, .45);
  box-shadow: inset 0 0 0 2px rgba(62, 42, 37, .14);
}
.docente-relato {
  font-size: var(--tf-xs);
  line-height: 1.6;
  background: rgba(255, 255, 255, .16);
  border-radius: var(--radio-sm);
  padding: .95rem 1.05rem;
  /* `flex: 1` hace que el relato se quede con el espacio sobrante, así que es
     lo que mantiene el botón apoyado en el pie de la tarjeta. */
  flex: 1;
}
/* SIN USAR: el cliente decidió no publicar los precios por hora hasta acordar
   con cada docente tarifa, comisión, pago y condiciones de cancelación. La
   regla se conserva porque volver a mostrarlos es reponer el <p> en las tres
   fichas de `clases-en-vivo.html`. */
.docente-precio {
  font-weight: 800;
  font-size: var(--tf-md);
  text-align: center;
  margin: .2rem 0 0;
}
/* `margin-top: auto` mantiene el botón en el pie aunque la tarjeta no tenga
   relato. Con relato es redundante —su `flex: 1` ya se quedó con el hueco— y
   el margen automático resuelve a cero, así que no estorba. */
.tarjeta-docente .btn { align-self: center; width: min(250px, 100%); margin-top: auto; }

/* ---------- 7.8 bis · Presentaciones en vídeo ----------
   El retrato de cada docente pasa a ser el disparador: se envuelve en un
   botón que conserva el aspecto de la foto y le añade una insignia de play. */
.docente-play {
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 20px;
}
.docente-play .docente-foto { display: block; }
.docente-play-icono {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--marron);
  color: var(--blanco);
  box-shadow: var(--sombra-sm);
  transition: transform var(--medio) var(--ease-rebote), background-color var(--rapido) var(--ease-suave);
}
.docente-play-icono svg { width: 12px; height: 12px; }
.docente-play:hover .docente-play-icono { transform: scale(1.14); background: var(--rojo); }
.docente-play:hover .docente-foto { transform: scale(1.07) rotate(-2deg); }
.docente-play:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; }

/* La ventana. Mismo patrón que el velo del menú: se controla con una clase y
   no con `display`, para que la transición de opacidad tenga algo que animar. */
.video-capa {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(31, 21, 18, .82);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--medio) var(--ease-suave), visibility var(--medio);
}
.video-capa.activo { opacity: 1; visibility: visible; pointer-events: auto; }

.video-caja {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  max-width: min(100%, 900px);
  transform: scale(.96);
  transition: transform var(--medio) var(--ease-salida);
}
.video-capa.activo .video-caja { transform: scale(1); }

/* Los límites en vh son los que hacen que un vídeo vertical —lo más probable
   si se grabó con el móvil— quepa entero sin desbordar la pantalla. */
.video-media {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--radio-md);
  background: #000;
  box-shadow: var(--sombra-lg);
}
.video-pie {
  margin: 0;
  color: var(--crema);
  font-weight: 700;
  font-size: var(--tf-sm);
  text-align: center;
}
.video-cerrar {
  position: absolute;
  top: -.6rem;
  right: -.6rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--crema);
  color: var(--marron);
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform var(--medio) var(--ease-rebote), background-color var(--rapido) var(--ease-suave);
}
.video-cerrar svg { width: 18px; height: 18px; }
.video-cerrar:hover { transform: scale(1.08); background: var(--blanco); }
.video-cerrar:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 2px; }

@media (max-width: 560px) {
  .video-cerrar { top: -.4rem; right: -.4rem; width: 36px; height: 36px; }
  .video-media { max-height: 68vh; }
}

/* ---------- 7.9 Acordeón (FAQ) ---------- */
.faq { border-top: 2px solid rgba(62, 42, 37, .8); }
.faq details { border-bottom: 2px solid rgba(62, 42, 37, .8); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .72rem .6rem;
  font-weight: 800;
  font-size: var(--tf-base);
  transition: color var(--rapido) var(--ease-suave), padding var(--medio) var(--ease-suave);
}
.faq summary:hover { color: var(--rojo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  /* signo "+" dibujado con gradientes para poder rotarlo */
  background-image:
    linear-gradient(var(--blanco), var(--blanco)),
    linear-gradient(var(--blanco), var(--blanco));
  background-size: 12px 2.5px, 2.5px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform var(--medio) var(--ease-rebote), background-color var(--rapido) var(--ease-suave);
}
.faq details[open] summary::after { transform: rotate(135deg); background-color: var(--marron); }
/* Al cerrar mantenemos el atributo [open] hasta que termina la animación,
   así que el icono vuelve a su estado con esta clase auxiliar. */
.faq details.cerrando summary::after { transform: none; background-color: var(--rojo); }
.faq .respuesta-envoltura {
  overflow: hidden;
  transition: height var(--medio) var(--ease-salida);
}
/* Mascota de las preguntas frecuentes. Va anclada ARRIBA a propósito: si se
   anclara abajo, al desplegar una pregunta el acordeón crece y la arrastra
   hacia abajo. Desde arriba se queda quieta pase lo que pase.
   El margen negativo la sube por encima del título; el ancho manda sobre
   cuánto baja, porque la altura sale de la proporción del PNG. */
.faq-mascota {
  flex: 0 1 39%;
  max-width: 480px;
  align-self: flex-start;
  margin-top: -4.7%;
  margin-inline: auto;
}
@media (max-width: 760px) {
  /* En móvil la mascota queda descolgada del acordeón y solo añade scroll,
     así que se retira. Es decorativa: no se pierde información. */
  .faq-mascota { display: none; }
}

.faq .respuesta {
  padding: 0 .6rem 1.1rem;
  color: var(--marron-suave);
  max-width: 64ch;
  margin: 0;
  font-size: var(--tf-sm);
}

/* ---------- 7.10 Marquesina de testimonios ---------- */
.marquesina {
  overflow: hidden;
  padding-block: .6rem;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquesina-pista {
  display: flex;
  gap: var(--canal);
  width: max-content;
  animation: marquesina 52s linear infinite;
}
.marquesina:hover .marquesina-pista,
.marquesina:focus-within .marquesina-pista { animation-play-state: paused; }
.tarjeta-testimonio {
  width: min(320px, 78vw);
  background: var(--crema-2);
  border-radius: var(--radio-md);
  padding: 1.5rem;
  box-shadow: var(--sombra-sm);
  transition: transform var(--medio) var(--ease-salida), box-shadow var(--medio) var(--ease-suave);
}
.tarjeta-testimonio:hover { transform: translateY(-6px); box-shadow: var(--sombra-md); }
.tarjeta-testimonio .cita {
  color: var(--rojo);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: .55;
  margin-bottom: .5rem;
}
.tarjeta-testimonio .nombre { font-weight: 800; margin: 0; }
.tarjeta-testimonio .curso { font-size: var(--tf-xs); color: var(--marron-suave); margin: 0 0 .7rem; }
.tarjeta-testimonio .texto { font-size: var(--tf-sm); color: var(--marron-suave); margin: 0; }

/* ---------- 7.11 Escalera (Cómo funciona en cuatro pasos) ----------
   Tiras que se van sumando: todas arrancan en el mismo borde izquierdo,
   cada una es más ancha y más intensa que la anterior, y se apoya sobre
   ella. El vértice inferior izquierdo va a 90°; los demás, redondeados.
   Cada paso se dibuja por detrás del anterior (z-index descendente), así
   su esquina superior izquierda queda oculta y el lateral es continuo. */
.escalera {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.escalon {
  /* --sangria = dónde termina el paso anterior. Como el relleno en % se
     resuelve contra el ancho de .escalera, marca el límite por el que el
     texto no puede pasar: las frases nunca invaden el escalón anterior. */
  --sangria: 0%;
  --respiro: clamp(1rem, 2vw, 1.6rem);

  position: relative;
  display: flex;
  align-items: center;
  /* El texto se apoya en el final de su tira, así que acompaña al borde que
     va creciendo y la escalera se lee en diagonal. La sangría de la izquierda
     sigue impidiendo que invada el escalón anterior. */
  justify-content: flex-end;
  min-height: calc(var(--cuadro) * 4);
  padding: 1.1rem var(--respiro) 1.1rem calc(var(--sangria) + var(--respiro));
  font-weight: 800;
  font-size: var(--tf-md);
  line-height: 1.3;
  text-align: right;
  text-wrap: balance;
  border-radius: var(--radio-md) var(--radio-md) var(--radio-md) 0;
  box-shadow: var(--sombra);
  transition: transform var(--medio) var(--ease-salida), box-shadow var(--medio) var(--ease-suave);
}
.escalon + .escalon { margin-top: -.9rem; }
.escalon:hover { transform: translateX(5px); box-shadow: var(--sombra-md); }

/* Numeración opcional, HOY APAGADA: se probó y se retiró porque el hueco entre
   el número y su frase cambiaba de un paso a otro. Al ir el contenido alineado
   al final de la tira, el número queda a la izquierda del texto y su posición
   depende de cuánto ocupe cada frase, de manera que los cuatro no guardan la
   misma distancia. Si se recupera, hay que resolver eso antes.
   Se enciende añadiendo .escalera-numerada al contenedor. Los números salen de
   un contador CSS, así que reordenar pasos no obliga a tocar el HTML. */
.escalera-numerada { counter-reset: escalon; }
.escalera-numerada .escalon::before {
  counter-increment: escalon;
  content: counter(escalon, decimal-leading-zero);
  flex: 0 0 auto;
  margin-right: .5em;
  font-size: 1.35em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  opacity: .55;
}

/* Rampa de intensidad: cada paso, un turquesa más profundo de la paleta.
   El color de texto cambia en el último para mantener el contraste. */
.escalon:nth-child(1) { width: 28%;  z-index: 4; background: var(--teal-palido); color: var(--marron); }
.escalon:nth-child(2) { width: 52%;  z-index: 3; background: var(--teal-claro);  color: var(--marron); --sangria: 28%; }
.escalon:nth-child(3) { width: 82%;  z-index: 2; background: var(--teal-medio);  color: var(--marron); --sangria: 52%; }
.escalon:nth-child(4) { width: 100%; z-index: 1; background: var(--teal);        color: var(--blanco); --sangria: 82%; }

/* En pantallas estrechas las franjas se estrecharían demasiado, así que
   se ensanchan las tiras y se reduce la sangría, conservando la escalera. */
@media (max-width: 860px) {
  .escalon:nth-child(1) { width: 66%; }
  .escalon:nth-child(2) { width: 80%;  --sangria: 16%; }
  .escalon:nth-child(3) { width: 92%;  --sangria: 32%; }
  .escalon:nth-child(4) { width: 100%; --sangria: 46%; }
}

/* ---------- 7.12 Paso numerado (páginas interiores) ---------- */
.paso {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.3rem);
  margin: 0 0 var(--esp-4);
}
.paso .numero {
  flex: 0 0 auto;
  font-weight: 900;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  color: var(--marron);
  opacity: .85;
  letter-spacing: -.04em;
}
.paso .barra {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--mostaza);
  color: var(--marron);
  font-weight: 800;
  font-size: var(--tf-base);
  line-height: 1.35;
  letter-spacing: 0;
  /* vértice inferior izquierdo recto, como el resto de bloques de la marca */
  border-radius: var(--radio-pill) var(--radio-pill) var(--radio-pill) 0;
  padding: .75em 1.5em;
  box-shadow: var(--sombra-sm);
}
@media (max-width: 520px) {
  .paso .barra {
    border-radius: var(--radio-md) var(--radio-md) var(--radio-md) 0;
    padding: .8em 1.2em;
  }
}

/* Variante con el número a la derecha y la barra pegada a él.
   `row-reverse` invierte el orden visual y empaqueta el grupo a la derecha. */
.paso-derecha { flex-direction: row-reverse; justify-content: flex-start; }
.paso-derecha .barra {
  flex: 0 1 auto;
  min-width: min(520px, 100%);
  /* el vértice recto se va al lado por el que la barra queda anclada */
  border-radius: var(--radio-pill) var(--radio-pill) 0 var(--radio-pill);
}
@media (max-width: 520px) {
  .paso-derecha .barra { border-radius: var(--radio-md) var(--radio-md) 0 var(--radio-md); }
}
/* Por debajo de ~620 px el `min-width` de arriba se resuelve a `100%`, así que
   la barra reclama el contenedor entero y empuja el número fuera de pantalla.
   Aquí la barra pasa a ocupar lo que sobre después del número, que es lo que
   debe ceder el sitio. */
@media (max-width: 640px) {
  .paso-derecha .barra { flex: 1 1 auto; min-width: 0; }
}

/* ---------- 7.12 bis · Vitrina de un paso ----------
   Mismo patrón que la portada: la mascota es una capa de fondo anclada
   abajo a la izquierda y su hilo cruza por detrás de las descargas y del
   móvil, que van agrupados a la derecha. */
.vitrina-paso {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.vitrina-descarga,
.vitrina-paso .telefono { position: relative; z-index: 1; }
.vitrina-descarga {
  order: 1;
  flex: 0 1 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
}
.vitrina-descarga > .tarjeta { width: min(280px, 100%); }
.vitrina-descarga-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
}
/* el `margin-inline: auto` de la regla base separaría el QR de las insignias */
.vitrina-descarga-fila .qr-caja { width: 142px; height: 142px; margin-inline: 0; }
.vitrina-descarga-fila .insignias-columna { width: min(200px, 100%); }
.vitrina-paso .telefono { order: 2; flex: 0 0 auto; }
.vitrina-mascota { order: 3; width: min(760px, 100%); margin-inline: auto; }

/* Apilado el orden se invierte: primero la captura de la app, que es la prueba
   de lo que se está contando, después la tarjeta que invita a descargarla y al
   final las tiendas. La mascota se retira por lo mismo que en el héroe: sin
   capa de fondo se queda en una banda suelta que solo alarga la sección.
   Va en media query y no en la regla base porque en escritorio el reparto es
   el contrario, con las descargas a la izquierda del teléfono. */
@media (max-width: 999px) {
  .vitrina-paso .telefono { order: 1; }
  .vitrina-descarga { order: 2; }
  .vitrina-mascota { display: none; }
}

@media (min-width: 1000px) {
  .vitrina-paso {
    justify-content: flex-end;
    align-items: flex-end;
    min-height: max(380px, 26vw);
    padding-bottom: clamp(1rem, 2vw, 2rem);
  }
  /* Anclada por la derecha para que el final del hilo caiga por detrás de
     la captura del móvil. `bottom` negativo la baja en vez de estirarla
     solo hacia arriba. */
  .vitrina-mascota {
    position: absolute;
    left: auto;
    right: 4%;
    bottom: -3%;
    width: min(1050px, 100%);
    max-width: none;
    margin: 0;
    z-index: -1;
  }
}

/* ---------- 7.12 ter · Encaje de dos pasos ----------
   El panel alto de la izquierda acompaña a los dos pasos y el segundo queda
   indentado a su derecha, encajado bajo el primero. */
.encaje {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--canal);
  align-items: start;
}
@media (min-width: 900px) {
  .encaje { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
.encaje-columna {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.encaje-columna .paso { margin: 0; }          /* el hueco lo pone el gap */
.encaje-columna .paso .barra { min-width: min(78%, 100%); }

/* Puntos decorativos dentro de una tarjeta de color */
.puntos-tarjeta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--esp-3);
}
.puntos-tarjeta::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .4);
}
/* Van creciendo hacia la derecha: leen como progreso, no como una lista */
.puntos-tarjeta span {
  position: relative;
  width: calc(clamp(17px, 2vw, 28px) * var(--escala, 1));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--crema-2);
  box-shadow: 0 2px 5px -2px rgba(62, 42, 37, .45);
  transition: transform var(--medio) var(--ease-rebote);
}
.puntos-tarjeta span:nth-child(1) { --escala: .6; }
.puntos-tarjeta span:nth-child(2) { --escala: .74; }
.puntos-tarjeta span:nth-child(3) { --escala: .87; }
.puntos-tarjeta:hover span:last-child { transform: scale(1.15); }

/* ---------- 7.12 quater · Bloque de voz (paso 05) ----------
   La frase se mete por debajo de la tarjeta del botón de voz, que la solapa
   por su extremo derecho. El relleno extra evita que el texto quede pillado
   bajo la imagen. */
.bloque-voz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.bloque-voz-frase {
  flex: 1 1 320px;
  margin-right: -2%;
  padding-right: clamp(2rem, 4vw, 3.5rem);
}
.bloque-voz-imagen {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: min(390px, 100%);
  border-radius: var(--radio-md);
}
@media (max-width: 700px) {
  .bloque-voz { gap: var(--esp-3); }
  .bloque-voz-frase {
    margin-right: 0;
    padding-right: clamp(1.35rem, 3vw, 2.2rem);
  }
}

/* ---------- 7.13 Línea temporal Premium ---------- */
.linea-tiempo {
  --hueco: 1.4rem;
  --eje: -2.22rem;                    /* desplazamiento horizontal del punto */
  --centro-punto: calc(1rem + 8px);   /* su centro vertical dentro del hito */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--hueco);
  padding-left: 2.4rem;
}
.hito { position: relative; }
.hito::before {
  content: '';
  position: absolute;
  left: var(--eje);
  top: 1rem;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--punto, var(--mostaza));
  box-shadow: 0 0 0 4px var(--crema);
  z-index: 1;
}
/* El hilo nace en cada punto y muere en el siguiente, en lugar de ser una
   línea única del contenedor: así no sobresale ni por encima del primer
   punto ni por debajo del último. */
.hito::after {
  content: '';
  position: absolute;
  left: calc(var(--eje) + 6.5px);
  top: var(--centro-punto);
  height: calc(100% + var(--hueco));
  border-left: 3px dotted var(--mostaza);
}
.hito:last-child::after { content: none; }
.hito.pulsando::before { animation: pulso-punto 2.4s var(--ease-suave) .3s 2; }
/* El color del texto lo pone la clase .fondo-* de cada tarjeta, que ya lo
   ajusta al contraste de su color. Fijarlo aquí lo pisaba por especificidad y
   dejaba en blanco ilegible las de coral y mostaza. */
.hito .tarjeta {
  padding: 1.15rem 1.5rem;
  /* vértice recto en la esquina inferior que mira al hilo */
  border-radius: var(--radio-md) var(--radio-md) var(--radio-md) 0;
  transition: transform var(--medio) var(--ease-salida), box-shadow var(--medio) var(--ease-suave);
}
.hito .tarjeta:hover { transform: translateX(6px); box-shadow: var(--sombra-md); }
.hito h3 { font-size: var(--tf-base); margin: 0 0 .25em; }
.hito p { font-size: var(--tf-sm); margin: 0; opacity: .94; }

/* En pantallas anchas la línea se centra y los hitos alternan de lado */
@media (min-width: 940px) {
  .linea-tiempo { --hueco: 1.6rem; --eje: -3.1rem; padding-left: 0; }
  .hito { width: calc(50% - 2.6rem); }
  .hito:nth-child(odd) { align-self: flex-start; }
  .hito:nth-child(even) { align-self: flex-end; }
  /* Los impares quedan a la izquierda del hilo: punto, hilo y vértice
     recto pasan al borde derecho de la tarjeta. */
  .hito:nth-child(odd)::before { left: auto; right: var(--eje); }
  .hito:nth-child(odd)::after  { left: auto; right: calc(var(--eje) + 6.5px); }
  .hito:nth-child(odd) .tarjeta { border-radius: var(--radio-md) var(--radio-md) 0 var(--radio-md); }
  .hito:nth-child(odd) .tarjeta:hover { transform: translateX(-6px); }
}

/* ---------- 7.13 ter · Recompensa del plan gratuito ----------
   La mascota es protagonista a la izquierda; el texto y el botón, a su lado. */
/* Se mantiene como un grupo compacto y centrado: si se estira a todo el
   ancho, la mascota queda descolgada a un extremo y el texto flotando. */
/* ---------- 7.13 ter · Panel del plan gratuito ----------
   Tin a la izquierda ocupando la altura del bloque; a su derecha, los
   niveles apilados y debajo la recompensa. Así el ancho se aprovecha y
   no quedan huecos entre columnas. */
.panel-freemium {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  /* Acotado y centrado: en pantallas muy anchas evita que las tiras se
     estiren de más y que Tin se quede pequeño en comparación. */
  width: min(1140px, 100%);
  margin-inline: auto;
}
.panel-freemium-mascota {
  flex: 0 1 46%;
  min-width: 170px;
  max-width: 560px;
  /* El PNG trae ~15 % de aire transparente arriba y ~9 % a los lados;
     se recorta con márgenes negativos para que no separe las columnas. */
  margin: -3% -1.5% -1.5% -2%;
}
.panel-freemium-detalle {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.niveles-lista {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.recompensa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .65rem;
}
.recompensa > * { margin: 0; }

@media (max-width: 760px) {
  .panel-freemium { justify-content: center; }
  .panel-freemium-mascota {
    flex: 0 0 auto;
    width: min(240px, 62%);
    margin: 0 auto -2%;
  }
  .recompensa { align-items: center; text-align: center; }
}

/* ---------- 7.13 quater · Planes de suscripción ----------
   La especificación pide que el plan anual tenga más peso visual, así que
   lleva el fondo saturado, la insignia de ahorro y la sombra más marcada. */
.planes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--canal);
}
@media (min-width: 760px) {
  .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.plan {
  position: relative;
  /* la insignia sobresale por el borde superior, así que esta tarjeta
     no recorta lo que se sale (a diferencia del resto de .tarjeta) */
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-align: center;
}
/* Fuera del flujo: es el elemento "extra". Así el nombre del plan, el
   precio, la descripción y el botón arrancan a la misma altura en las
   dos tarjetas en lugar de bajar solo en la destacada. */
.plan-insignia {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  white-space: nowrap;
  background: var(--amarillo);
  color: var(--marron);
  font-size: var(--tf-xs);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--radio-pill);
  padding: .4em 1.1em;
  margin: 0;
  box-shadow: var(--sombra-sm);
}
.plan-nombre {
  font-size: var(--tf-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  margin: 0;
}
.plan-precio {
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0;
}
.plan-precio span {
  font-size: .32em;
  font-weight: 700;
  letter-spacing: 0;
}
.plan-nota {
  font-size: var(--tf-sm);
  /* holgado para que el segundo renglón forzado con <br> no se vuelva
     a partir: si no, el salto de línea no se notaría */
  max-width: 46ch;
  margin: 0;
  opacity: .92;
}
/* `auto` empuja el botón al fondo: aunque las descripciones ocupen
   distinto número de líneas, los dos botones quedan alineados. */
.plan .btn { width: min(240px, 100%); margin-top: auto; }
.plan-destacado { box-shadow: var(--sombra-lg); }
.planes-incluye {
  font-size: var(--tf-sm);
  color: var(--marron-suave);
  text-align: center;
  max-width: 62ch;
  margin: var(--esp-3) auto 0;
}

/* ---------- 7.14 Chips ---------- */
.chip {
  display: inline-block;
  background: var(--teal-claro);
  color: var(--marron);
  font-weight: 700;
  font-size: var(--tf-sm);
  border-radius: var(--radio-pill);
  padding: .55em 1.35em;
  box-shadow: var(--sombra-xs);
  transition: transform var(--medio) var(--ease-rebote);
}
.chip:hover { transform: translateY(-2px); }
.lista-chips {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
}
.lista-chips .chip { text-align: center; }

/* ---------- 7.15 Lista con marca de verificación ---------- */
.lista-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7em;
  font-weight: 700;
}
.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: .6em;
}
.lista-check li::before {
  content: '';
  flex: 0 0 auto;
  width: 1.35em; height: 1.35em;
  margin-top: .1em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdfaf4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 68%;
  background-position: center;
  background-repeat: no-repeat;
}
.lista-guiones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55em;
  line-height: 1.6;
}
.lista-guiones li {
  position: relative;
  padding-left: 1.2em;
}
.lista-guiones li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: .7em;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .7;
}
/* Alineado a la derecha cada renglón arranca en una x distinta, así que el
   guion no puede ir posicionado contra un borde fijo: entra en el flujo del
   texto, delante de la primera palabra. Los guiones quedan escalonados en
   lugar de en columna, que es justo lo buscado. */
.derecha .lista-guiones li { padding-left: 0; }
.derecha .lista-guiones li::before {
  position: static;
  display: inline-block;
  vertical-align: middle;
  margin-right: .5em;
}

/* ---------- 7.16 QR e insignias de tienda ---------- */
/* El SVG del QR es transparente y sus módulos van en --marron, así que se
   apoya directamente sobre el fondo que tenga detrás, sin recuadro. */
.qr-caja {
  width: 158px;
  height: 158px;
  margin-inline: auto;
  padding: 8px;
  background: transparent;
  transition: transform var(--medio) var(--ease-rebote);
}
.qr-caja:hover { transform: scale(1.06) rotate(-1.5deg); }

/* En un móvil el QR no cumple ninguna función: no se puede escanear un código
   con el mismo teléfono que lo está mostrando. Sirve para saltar de una
   pantalla grande al móvil, así que ahí se retira —son casi 200 px de alto— y
   el trabajo lo hacen las insignias, que sí llevan directas a la tienda.
   En fila ocupan la mitad de alto que apiladas, y envuelven solas si no caben. */
@media (max-width: 699px) {
  .hero-descarga .qr-caja,
  .vitrina-descarga .qr-caja { display: none; }
}

/* Por debajo de 560 el héroe vuelve a una sola columna y las insignias sí
   necesitan ir en fila. `justify-self: stretch` es imprescindible: la rejilla
   centra sus celdas con `justify-items: center`, así que .hero-descarga se
   encogía a su contenido y el `width: 100%` de las insignias se resolvía
   contra unos 300 px, insuficientes para las dos en fila. */
@media (max-width: 559px) {
  .hero-descarga { justify-self: stretch; }
  .hero-descarga .insignias-columna,
  .vitrina-descarga .insignias-columna {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .hero-descarga .insignias-columna .insignia,
  .vitrina-descarga .insignias-columna .insignia {
    flex: 1 1 9.5rem;
    justify-content: center;
  }
  /* Sin el QR el bloque es mucho más corto; el hueco puede apretarse. */
  .hero-vitrina { gap: var(--esp-3); }
}

.insignias { display: flex; gap: .7rem; flex-wrap: wrap; }
.insignias-columna { flex-direction: column; align-items: stretch; gap: .6rem; width: min(216px, 100%); }
.insignias-columna .insignia { justify-content: flex-start; padding: .6em 1.1em; }
.insignia {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: #17110f;
  color: #fff;
  border-radius: var(--radio-sm);
  padding: .55em 1em;
  text-decoration: none;
  line-height: 1.15;
  box-shadow: var(--sombra-xs);
  transition: transform var(--medio) var(--ease-rebote), box-shadow var(--medio) var(--ease-suave);
}
.insignia:hover { transform: translateY(-3px); box-shadow: var(--sombra-sm); }
.insignia small { display: block; font-size: .58rem; opacity: .8; font-weight: 500; letter-spacing: .04em; }
.insignia strong { display: block; font-size: .92rem; font-weight: 700; }
.insignia svg { width: 22px; height: 22px; flex: 0 0 auto; }

/* ---------- 7.17 Teléfono simulado ----------
   MARCADOR: reproduce la pantalla de la app hasta tener la captura real.
   Cuando exista, basta con sustituir el contenido de .pantalla por un <img>. */
.telefono {
  position: relative;
  width: min(252px, 68vw);
  border-radius: 38px;
  background: linear-gradient(158deg, var(--teal-palido), var(--teal-claro));
  padding: 10px;
  box-shadow: var(--sombra-lg);
  animation: flotar 6.5s var(--ease-suave) infinite;
}
.telefono .pantalla {
  border-radius: 30px;
  background: var(--blanco);
  overflow: hidden;
  font-size: .64rem;
  line-height: 1.4;
  padding-bottom: 1em;
}

/* Barra de estado */
.estado-app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9em 1.1em .3em;
  font-size: .56rem;
  font-weight: 700;
}
.estado-iconos { display: inline-flex; align-items: flex-end; gap: 1.5px; }
.estado-iconos i { width: 2.5px; border-radius: 1px; background: var(--marron); }
.estado-iconos i:nth-child(1) { height: 3px; }
.estado-iconos i:nth-child(2) { height: 5px; }
.estado-iconos i:nth-child(3) { height: 7px; }
.estado-iconos i:nth-child(4) { height: 9px; }
.estado-iconos b {
  width: 17px; height: 9px;
  margin-left: 4px;
  border-radius: 3px;
  border: 1px solid var(--marron);
  background: linear-gradient(90deg, var(--marron) 72%, transparent 72%);
  background-clip: content-box;
  padding: 1px;
}

/* Cabecera con avatar y ajustes */
.telefono .cabecera-app {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .35em 1.1em .8em;
  font-weight: 700;
  font-size: .7rem;
}
.telefono .cabecera-app span:nth-child(2) { flex: 1; text-align: center; }
.avatar-app {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--amarillo), var(--mostaza-oscura));
  box-shadow: 0 0 0 1.5px rgba(62, 42, 37, .12);
}
.telefono .cabecera-app svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .5; }

/* Tarjeta de bienvenida */
.telefono .bienvenida {
  position: relative;
  margin: 0 .8em;
  border-radius: 14px;
  background: linear-gradient(112deg, var(--oliva-oscura), var(--mostaza-oscura) 52%, var(--amarillo));
  /* El degradado termina en amarillo, donde el blanco cae a 1,69:1. En marrón
     el peor tramo es 3,56:1. */
  color: var(--marron);
  padding: .85em 1em;
  overflow: hidden;
}
.telefono .bienvenida strong { display: block; font-size: .78rem; margin-bottom: .25em; }
.telefono .bienvenida p { margin: 0; font-size: .56rem; max-width: 72%; opacity: .95; }
.telefono .bienvenida::after {
  content: '';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .5);
  background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 62%);
}

/* Tarjetas de idioma */
.telefono .item-idioma {
  margin: .7em .8em 0;
  border-radius: 12px;
  background: var(--blanco);
  border: 1px solid rgba(62, 42, 37, .12);
  box-shadow: 0 3px 8px -4px rgba(62, 42, 37, .28);
  padding: .7em .85em;
  transition: transform var(--rapido) var(--ease-suave), box-shadow var(--rapido) var(--ease-suave);
}
.telefono .item-idioma:hover { transform: translateY(-2px); box-shadow: var(--sombra-sm); }
.item-nombre { text-align: center; font-weight: 800; font-size: .68rem; margin: 0 0 .45em; }
.item-cuerpo { display: flex; align-items: center; gap: .7em; }
.item-cuerpo > div { min-width: 0; }
.item-region {
  display: flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  font-size: .58rem;
  margin: 0 0 .25em;
}
.item-texto { margin: 0; font-size: .55rem; color: var(--marron-suave); line-height: 1.45; }
.item-flecha {
  flex: 0 0 auto;
  width: 21px; height: 21px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--crema-2);
}
.item-flecha svg { width: 11px; height: 11px; }

/* Banderitas dibujadas con CSS (los emoji de bandera no existen en Windows) */
.bandera {
  display: inline-block;
  width: 1.15em; height: .8em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(62, 42, 37, .15);
}
.bandera-pe { background: linear-gradient(90deg, #d91023 0 33.34%, #fff 33.34% 66.67%, #d91023 66.67%); }
.bandera-mx { background: linear-gradient(90deg, #006847 0 33.34%, #fff 33.34% 66.67%, #ce1126 66.67%); }

/* ---------- 7.18 Medidores de progreso (gamificación) ---------- */
.panel-juego {
  background: var(--blanco);
  padding: 0;
  overflow: hidden;
  width: 100%;
}
.panel-juego-cabecera { background: var(--teal-palido); padding: 1.05rem 1.25rem; color: var(--marron); }
.panel-juego-cuerpo { padding: 1.2rem 1.25rem 1.4rem; }
.medidor {
  height: 8px;
  border-radius: var(--radio-pill);
  background: var(--crema-2);
  overflow: hidden;
}
.medidor > i {
  display: block;
  height: 100%;
  border-radius: var(--radio-pill);
  background: var(--mostaza);
  width: var(--valor, 0%);
  transition: width 1.1s var(--ease-salida);
}
.medidor-fino { height: 6px; }
.mision { margin-bottom: 1rem; }
.mision:last-child { margin-bottom: 0; }
.mision p { margin: 0 0 .35em; font-size: var(--tf-xs); font-weight: 600; }
.mision span { font-size: .7rem; color: var(--marron-suave); }

/* ---------- 7.18 bis · Fila de fundadores ----------
   La mascota es capa de fondo a sangre por la izquierda: su hilo entra por
   el borde de la página y sube hasta el hocico, cruzando por detrás de los
   retratos. El bocadillo arranca a la misma altura que los retratos. */
.fila-fundadores {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--canal);
}
.fundadores-retratos {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(.7rem, 2.5vw, 1.4rem);
  /* Sin `flex-grow`: si crece, se lleva por delante el sitio del bocadillo y
     este acaba empujado sobre la mascota en vez de quedar a su izquierda. */
  flex: 0 1 620px;
}
/* La medida de los retratos vive aquí y no en un `style` del HTML: en línea
   ganaba por especificidad y ninguna media query podía corregirla. Con
   proporción en vez de alto fijo, encogen sin volverse tiras estrechas. */
.fundadores-retratos > .retrato {
  flex: 1 1 0;
  min-width: 0;
  max-width: 290px;
  min-height: 0;
  aspect-ratio: 4 / 5;
}
.fila-fundadores > .chip { position: relative; z-index: 1; flex: 0 0 auto; }
.fundadores-mascota { order: 3; }

/* Por debajo del salto de escritorio la mascota deja de ser capa de fondo y
   pasa a ser una fila más. En tableta cabe entera y se comporta. */
@media (max-width: 999px) {
  /* Sin la capa de fondo, el orden de lectura pasa a contar la escena:
     primero Tin, luego lo que dice, y después las dos fotos a las que se
     refiere. Con la mascota al final, el bocadillo quedaba huérfano. */
  .fundadores-mascota { width: 100%; order: 1; }
  .fila-fundadores > .chip { order: 2; flex: 0 0 auto; margin-inline: auto; }
  /* Aquí sí conviene que ocupen todo el ancho: no hay mascota de fondo a la
     que dejar sitio, porque ha pasado a ser una fila más. */
  .fundadores-retratos { order: 3; flex: 1 1 100%; }
}
/* En móvil se retiran la mascota y su bocadillo. El dibujo es muy apaisado
   (2,89:1) y a esos anchos no hay forma de que se lea bien; el bocadillo va
   con él porque sin quien lo dice se queda sin sentido. No se pierde
   información: los nombres siguen en el pie de cada retrato. */
@media (max-width: 700px) {
  .fundadores-mascota,
  .fila-fundadores > .chip { display: none; }
}

@media (min-width: 1000px) {
  /* La fila la miden los retratos; la mascota sobresale por arriba sin
     empujar, así no queda hueco muerto debajo. */
  .fila-fundadores { min-height: 340px; }
  /* recurso-46 trae el hilo mucho más largo, así que la imagen puede nacer
     en el borde de la ventana sin que el animal se vaya de tamaño: ocupa
     solo el 27 % del ancho y queda a la derecha de los retratos.
     `calc(50% + 50vw)` la estira del borde de la ventana al del contenedor. */
  .fundadores-mascota {
    position: absolute;
    left: 0;
    margin-left: calc(50% - 50vw);
    /* apoya las patas a la altura del pie de los retratos: el PNG deja un
       7 % de aire bajo la sombra, que es lo que compensa este desplazamiento */
    bottom: -25px;
    width: calc(50% + 50vw);
    max-width: none;
    z-index: -1;
  }
}

/* ---------- 7.19 Retratos de equipo ---------- */
.retrato {
  position: relative;
  margin: 0;
  border-radius: var(--radio) var(--radio) var(--radio) 0;
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--teal-palido);
  min-height: 230px;
  transition: transform var(--medio) var(--ease-salida), box-shadow var(--medio) var(--ease-suave);
}
.retrato:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); }
.retrato figcaption {
  position: absolute;
  left: 0; right: 0;
  background: var(--teal-claro);
  color: var(--marron); /* 5,02:1 — en blanco se quedaba en 2,57:1 */
  font-weight: 700;
  font-size: var(--tf-sm);
  padding: .6em 1em;
}
.retrato-pie figcaption { bottom: 0; }
/* La esquina a 90° acompaña a la etiqueta: si el nombre va arriba, el vértice
   recto sube con él a la esquina superior izquierda. */
.retrato-tope { border-radius: 0 var(--radio) var(--radio) var(--radio); }
.retrato-tope figcaption { top: 0; }

/* Carrusel de equipo: las fichas se reparten el ancho del contenedor en vez
   de llevar una medida fija, así la fila llega a los dos márgenes. Si mañana
   el cliente añade personas, sobra ancho y el carrusel se desplaza solo. */
.carrusel-equipo { --por-vista: 1.15; }
@media (min-width: 600px) { .carrusel-equipo { --por-vista: 2; } }
/* El máximo es 3 porque hoy el equipo son tres personas y así llenan la fila
   justa. Con una cuarta el carrusel empieza a desplazarse solo; si se prefiere
   verlas todas de golpe, se sube este número al total. */
@media (min-width: 900px) { .carrusel-equipo { --por-vista: 3; } }
.carrusel-equipo > .retrato {
  flex: 0 0 calc((100% - (var(--por-vista) - 1) * var(--canal)) / var(--por-vista));
  aspect-ratio: 9 / 10;
}
/* Los nombres se alternan arriba y abajo. Va por :nth-child y no por clase
   para que la alternancia se mantenga sola al cambiar el número de fichas,
   sin que nadie tenga que acordarse de repartir las clases a mano. */
.carrusel-equipo > .retrato { border-radius: 0 var(--radio) var(--radio) var(--radio); }
.carrusel-equipo > .retrato figcaption { top: 0; bottom: auto; }
.carrusel-equipo > .retrato:nth-child(even) { border-radius: var(--radio) var(--radio) var(--radio) 0; }
.carrusel-equipo > .retrato:nth-child(even) figcaption { top: auto; bottom: 0; }

/* ---------- 7.19 bis · Páginas legales ---------- */
.legal { max-width: 68ch; }
.legal h2 { font-size: var(--tf-lg); margin: var(--esp-5) 0 .45em; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: var(--tf-md); margin: var(--esp-4) 0 .35em; }
.legal p, .legal li { color: var(--marron-suave); }
.legal strong { color: var(--marron); }
.legal ul { padding-left: 1.25em; margin: 0 0 1em; }
.legal li { margin: .35em 0; }
.legal-fecha { font-size: var(--tf-xs); color: var(--marron-suave); margin: 0; }

/* Ficha de datos de la entidad: dos columnas que se apilan en móvil */
.datos-entidad {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35em 1.3em;
  margin: 0;
  font-size: var(--tf-sm);
}
.datos-entidad dt { font-weight: 700; color: var(--marron); }
.datos-entidad dd { margin: 0; color: var(--marron-suave); }
@media (max-width: 560px) {
  .datos-entidad { grid-template-columns: 1fr; gap: 0; }
  .datos-entidad dd { margin-bottom: .7em; }
}

/* Información que el cliente todavía no ha confirmado. Es deliberadamente
   llamativo: mientras quede un solo bloque de estos, la página NO puede
   publicarse. No es decoración, es un freno. */
.pendiente {
  border-left: 4px solid var(--rojo);
  background: rgba(201, 66, 61, .09);
  border-radius: var(--radio-sm) var(--radio-sm) var(--radio-sm) 0;
  padding: .9rem 1.1rem;
  margin: 1.1rem 0;
  font-size: var(--tf-sm);
}
.pendiente b {
  display: block;
  font-size: var(--tf-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rojo-oscuro);
  margin-bottom: .2em;
}
.pendiente p { margin: 0; }

/* ---------- 7.20 Pie de página ---------- */
.pie {
  padding: var(--esp-5) 0 var(--esp-4);
  background: linear-gradient(180deg, transparent, rgba(236, 225, 213, .5));
}
/* Son cuatro columnas fijas, así que tres nunca es una opción válida: dejaría
   una suelta debajo. Se reparten en dos y dos hasta que caben las cuatro, sin
   pasar por el reparto automático que aterrizaba en tres. */
.pie-columnas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-4) var(--canal);
}
@media (min-width: 760px) {
  .pie-columnas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Los títulos de las columnas son <h2>, no <h4>: son agrupaciones de primer
   nivel dentro del pie y con <h4> se saltaban el <h3>, un hueco en la jerarquía
   que despista a quien navega por encabezados con lector de pantalla. El
   tamaño lo fija esta regla, así que se ven igual que antes. */
.pie h2 { font-size: var(--tf-base); font-weight: 800; margin-bottom: .7em; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin: .4em 0; }
.pie a {
  display: inline-block;
  text-decoration: none;
  color: var(--marron-suave);
  font-size: var(--tf-sm);
  transition: color var(--rapido) var(--ease-suave), transform var(--rapido) var(--ease-suave);
}
.pie-columnas a:hover { color: var(--rojo); transform: translateX(4px); }
.pie-bajo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: var(--esp-5);
  padding-top: var(--esp-3);
  border-top: 1px solid rgba(62, 42, 37, .12);
}
.pie-bajo img { height: 42px; width: auto; }
.pie-redes { display: flex; gap: .55rem; }
.pie-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--rojo);
  color: var(--blanco);
  border-radius: 50%;
  box-shadow: var(--sombra-xs);
  transition: transform var(--medio) var(--ease-rebote), background var(--rapido) var(--ease-suave);
}
.pie-redes a:hover { background: var(--rojo-oscuro); transform: translateY(-3px) scale(1.06); }
.pie-redes svg { width: 19px; height: 19px; }
.pie-legal {
  font-size: var(--tf-xs);
  color: var(--marron-suave);
  margin: var(--esp-2) 0 0;
  width: 100%;
}

/* ---------- 7.21 Barra de progreso de lectura y botón "subir" ---------- */
.progreso-lectura {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 70;
  background: linear-gradient(90deg, var(--rojo), var(--mostaza), var(--teal-2));
  transform: scaleX(var(--avance, 0));
  transform-origin: left center;
  pointer-events: none;
}
.subir {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 55;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--marron);
  color: var(--blanco);
  cursor: pointer;
  box-shadow: var(--sombra-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.85);
  transition: opacity var(--medio) var(--ease-suave),
              visibility var(--medio),
              transform var(--medio) var(--ease-rebote),
              background var(--rapido) var(--ease-suave);
}
.subir.visible { opacity: 1; visibility: visible; transform: none; }
.subir:hover { background: var(--rojo); transform: translateY(-3px); }
.subir svg { width: 20px; height: 20px; }

/* ============================================================
   8. UTILIDADES
   ============================================================ */
.texto-suave { color: var(--marron-suave); }
.texto-fuerte { font-weight: 700; }
.nota { font-size: var(--tf-xs); opacity: .88; }
.sin-margen { margin: 0; }
/* Declaradas DESPUÉS de .sin-margen a propósito: cuando un elemento lleva las
   dos clases, el margen superior explícito debe ganar. Al revés, `margin: 0`
   lo anulaba en silencio y el hueco desaparecía sin que se notara en el HTML. */
.mt-1 { margin-top: var(--esp-2); }
.mt-2 { margin-top: var(--esp-3); }
.mt-3 { margin-top: var(--esp-4); }
.mt-4 { margin-top: var(--esp-5); }
/* Empuja un bloque al fondo de su tarjeta: con tarjetas de la misma altura,
   los botones quedan alineados aunque el texto de arriba ocupe distinto. */
.empuja-abajo { margin-top: auto; padding-top: var(--esp-3); }

.fondo-rojo      { background: var(--rojo);      color: var(--blanco); }
.fondo-rojo-oscuro { background: var(--rojo-oscuro); color: var(--blanco); }
.fondo-terracota { background: var(--terracota); color: var(--blanco); }
.fondo-salmon    { background: var(--salmon);    color: var(--blanco); }
.fondo-amarillo  { background: var(--amarillo);  color: var(--marron); }
.fondo-teal      { background: var(--teal);      color: var(--blanco); }
.fondo-teal-oscuro { background: var(--teal-oscuro); color: var(--blanco); }
.fondo-teal-2    { background: var(--teal-2);    color: var(--blanco); }
.fondo-teal-palido { background: var(--teal-palido); color: var(--marron); }
.fondo-crema-2   { background: var(--crema-2); }

/* Tonos claros: el texto va en MARRÓN, no en blanco. Con blanco ninguno de
   estos llega ni al 3:1 que WCAG pide para texto grande —el mostaza se queda
   en 2,22:1 frente a los 4,5 necesarios— y el texto se lee lavado. En marrón
   todos superan el 4,5:1. Si se añade un fondo nuevo, medirlo antes: la regla
   es que cuanto más claro es el color, más obligatorio es el texto oscuro. */
.fondo-coral     { background: var(--coral);      color: var(--marron); } /* 5,11:1 */
.fondo-mostaza   { background: var(--mostaza);    color: var(--marron); } /* 5,80:1 */
.fondo-mostaza-oscura { background: var(--mostaza-oscura); color: var(--marron); } /* 4,58:1 */
.fondo-teal-claro{ background: var(--teal-claro); color: var(--marron); } /* 5,02:1 */
.fondo-oliva     { background: var(--oliva);      color: var(--marron); } /* 4,98:1 */
.fondo-verde     { background: var(--verde);      color: var(--marron); } /* 5,78:1 */
.fondo-rosa      { background: var(--rosa);       color: var(--marron); } /* 5,75:1 */

.chip-translucido { background: rgba(255, 255, 255, .22); }

/* Fuerza texto marrón sobre fondos claros (coral, mostaza, turquesa pálido),
   donde el blanco de las utilidades .fondo-* queda ilegible. */
.texto-oscuro { color: var(--marron); }
.texto-oscuro :focus-visible { outline-color: var(--marron); }
.texto-oscuro .docente-relato { background: rgba(255, 255, 255, .34); }

/* Vértice inferior izquierdo recto: el mismo rasgo que la escalera de pasos.
   Dentro de un bloque alineado a la derecha el vértice se va al lado
   contrario, para que siempre caiga del lado por el que el bloque se ancla. */
.esquina-recta { border-radius: var(--radio) var(--radio) var(--radio) 0; }
.derecha .esquina-recta { border-radius: var(--radio) var(--radio) 0 var(--radio); }
/* Variante explícita, para bocadillos y bloques que apuntan a su derecha */
.esquina-recta-der { border-radius: var(--radio) var(--radio) 0 var(--radio); }

/* ---------- Velo de papel ----------
   Una mancha del mismo crema del fondo, difuminada por el propio degradado,
   que apaga la cuadrícula bajo los bloques con información. No introduce
   ningún color nuevo: solo da profundidad y movimiento al papel.
   Se coloca detrás del contenido con z-index negativo. */
.velo::before {
  content: '';
  position: absolute;
  /* Se desborda solo en vertical. En horizontal tiene que quedarse dentro
     de la sección: si sobresale, ensancha el documento y la barra sticky
     —que mide lo que mide el cuerpo— deja de llegar al borde derecho. */
  inset: -10% 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse var(--velo-ancho, 64%) var(--velo-alto, 56%)
    at var(--velo-x, 50%) var(--velo-y, 50%),
    rgba(245, 239, 227, .96) 0%,
    rgba(245, 239, 227, .78) 44%,
    rgba(245, 239, 227, 0) 76%
  );
}
/* Variantes para que la mancha no caiga siempre en el mismo sitio */
.velo-izq    { --velo-x: 33%; --velo-ancho: 58%; }
.velo-der    { --velo-x: 67%; --velo-ancho: 58%; }
.velo-amplio { --velo-ancho: 80%; --velo-alto: 62%; }

/* Bloque interior dentro de una tarjeta de color.
   El color lo pone una clase .fondo-* o .bloque-translucido. */
.bloque-interior {
  border-radius: var(--radio-md);
  padding: 1.25rem;
  transition: transform var(--medio) var(--ease-salida), box-shadow var(--medio) var(--ease-suave);
}
.bloque-interior:hover { transform: translateY(-4px); box-shadow: var(--sombra-sm); }
.bloque-translucido { background: rgba(255, 255, 255, .18); }

/* ============================================================
   9. PREFERENCIAS DEL SISTEMA
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .marquesina-pista { animation: none; }
}

@media (prefers-contrast: more) {
  .texto-suave { color: var(--marron); }
  .nota { opacity: 1; }
  .tarjeta { box-shadow: 0 0 0 2px rgba(62, 42, 37, .35); }
}

@media print {
  .nav, .subir, .progreso-lectura, .carrusel-controles, .saltar-enlace { display: none !important; }
  .velo::before { display: none !important; }
  body { background: #fff; color: #000; }
  .tarjeta, .escalon, .paso .barra { box-shadow: none; border: 1px solid #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}