/* ============================================================
   YOGA & MINDFULNESS LOS ALMENDROS · hoja de estilos
   Paleta (del cartel acuarela):
     crema #FAF6EC · crema profundo #F1E9D6 · arena #E4D9BE
     salvia #8FA671 · oliva #45522F · oliva profundo #2F3A20
     girasol #D9A441 · amapola #A34F3B
   Tipos: Fraunces (display) · Manrope (texto)

   ---------- Puntos de ruptura ----------
   640  : de una columna a dos
   900  : de móvil/tablet a escritorio (coincide con el desktop de main.js)
   1200 : escritorio ancho
   Cualquier otro valor tiene que estar justificado en un comentario.

   Aviso técnico: las ilustraciones JPG vienen sobre blanco y se integran
   con mix-blend-mode: multiply. NUNCA poner transform, filter ni z-index
   en un ancestro suyo que no tenga fondo opaco propio: aislaría la mezcla
   y reaparecería la caja blanca.
   ============================================================ */

:root {
  /* ---------- Color: canales, para derivar transparencias de una sola fuente ---------- */
  --cream-rgb: 250 246 236;
  --cream-deep-rgb: 241 233 214;
  --sand-rgb: 228 217 190;
  --forest-rgb: 69 82 47;
  --forest-deep-rgb: 47 58 32;
  --ink-rgb: 56 64 43;
  --sage-rgb: 143 166 113;
  --gold-rgb: 217 164 65;
  --blush-rgb: 227 194 180;

  --cream: rgb(var(--cream-rgb));
  --cream-deep: rgb(var(--cream-deep-rgb));
  --sand: rgb(var(--sand-rgb));                 /* tono intermedio que faltaba */
  --forest: rgb(var(--forest-rgb));
  --forest-deep: rgb(var(--forest-deep-rgb));   /* el pie, un escalón por debajo */
  --forest-soft: #58643F;                       /* 5.9:1 sobre crema, 4.5:1 sobre arena */
  --ink: rgb(var(--ink-rgb));                   /* 10.0:1 sobre crema */

  /* Dos verdes y dos dorados: uno para pintar, otro para escribir.
     Los de pintar no llegan a 4.5:1 y no deben tocar nunca un texto pequeño. */
  --sage: rgb(var(--sage-rgb));   /* relleno, trazo, decoración */
  --sage-soft: #BFCBA4;           /* solo sobre fondo oscuro: 4.92:1 */
  --sage-ink: #5F7343;            /* texto sobre crema: 4.84:1 */
  --gold: rgb(var(--gold-rgb));   /* relleno y decoración */
  --gold-soft: #E9CE96;           /* sobre fondo oscuro: 5.49:1 */
  --gold-ink: #875C0E;            /* 5.46:1 sobre crema, 4.87:1 sobre crema profundo */

  /* Acento cálido, sacado de las amapolas del cartel. Un uso por página, no más. */
  --clay: #A34F3B;                /* texto: 5.20:1 sobre crema */
  --clay-soft: #C0705A;           /* relleno */
  --blush: rgb(var(--blush-rgb)); /* veladuras de acuarela */

  --focus: var(--forest);

  /* ---------- Tipos ---------- */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- Escala tipográfica ---------- */
  --step--2: 0.75rem;                                        /* 12px, microetiquetas */
  --step--1: 0.875rem;                                       /* 14px, texto de apoyo */
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);       /* cuerpo */
  --step-1:  clamp(1.0625rem, 1rem + 0.32vw, 1.25rem);       /* entradilla */
  --step-2:  clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);        /* títulos de tarjeta */
  --step-3:  clamp(1.5rem, 1.28rem + 1.1vw, 2rem);           /* h3 grandes */
  --step-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4rem);            /* h2 de sección */
  --step-5:  clamp(2.6rem, 1.8rem + 4.2vw, 4.6rem);          /* cifras, cierre */

  /* ---------- Espaciado ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;

  --pad: clamp(1.5rem, 6vw, 7rem);                  /* margen lateral */
  --section-y-tight: clamp(3.5rem, 7vw, 5.5rem);
  --section-y:       clamp(4.5rem, 10vw, 8rem);
  --section-y-loose: clamp(6rem, 14vw, 11rem);
  --head-gap:        clamp(2.25rem, 5vw, 3.75rem);

  /* ---------- Radios ---------- */
  --r-xs: 0.4rem;
  --r-s:  0.75rem;
  --r-m:  1.25rem;
  --r-l:  1.75rem;
  --r-pill: 999px;

  /* ---------- Sombras: dos capas, teñidas con la tinta ---------- */
  --shadow-1: 0 1px 2px rgb(var(--ink-rgb) / 0.05),
              0 3px 8px -4px rgb(var(--ink-rgb) / 0.07);
  --shadow-2: 0 2px 4px rgb(var(--ink-rgb) / 0.05),
              0 14px 28px -14px rgb(var(--ink-rgb) / 0.16);
  --shadow-3: 0 4px 8px rgb(var(--ink-rgb) / 0.06),
              0 32px 60px -28px rgb(var(--ink-rgb) / 0.26);
  --ring: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.08);

  /* ---------- Tiempos y curvas ---------- */
  --dur-1: 120ms;   /* respuesta al pulsar */
  --dur-2: 200ms;   /* cambio de estado: hover, foco */
  --dur-3: 320ms;   /* aparecer y desaparecer */
  --dur-4: 600ms;   /* entradas al hacer scroll */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease: var(--ease-out);          /* alias de compatibilidad */

  /* ---------- Orden de apilado, declarado de una vez ---------- */
  --z-decor: 1;
  --z-content: 2;
  --z-petalos: 40;
  --z-grain: 50;
  --z-menu: 95;
  --z-nav: 100;
  --z-fab: 110;
  --z-cookies: 120;
  --z-intro: 200;
  --z-skip: 400;

  /* ---------- Texturas y marcas reutilizables ---------- */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --hoja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8C76 30 82 60 50 92 18 60 24 30 50 8Z'/%3E%3C/svg%3E");
}

/* ============================================================
   1. Base
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;      /* los anclajes no aterrizan bajo la barra */
}
/* Sin scroll-margin-top en :target a propósito: se sumaba al scroll-padding
   de arriba y al llegar a /#contacto desde otra página la sección caía
   192 px por debajo del borde, el doble que al pinchar en el menú. */
html.lenis { height: auto; scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

@supports (scrollbar-color: auto) {
  html { scrollbar-color: rgb(var(--forest-rgb) / 0.35) transparent; scrollbar-width: thin; }
}

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.7;
  /* clip recorta la decoración que se sale por los lados sin convertir el
     body en contenedor de scroll (hidden rompía cualquier sticky). */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
em { font-style: italic; }
a, button { -webkit-tap-highlight-color: rgb(var(--forest-rgb) / 0.12); }

/* Las ilustraciones vienen sobre blanco: multiplicar sobre crema
   para integrarlas sin recortar (los logos ya son PNG transparentes) */
.card__media img, .teacher__media img { mix-blend-mode: multiply; }

/* ---------- Reparto de línea ---------- */
h1, h2, h3,
.hero__title, .section__title, .contact__title,
.quoteband__quote, .card__title, .price h3, .benefit h3,
.pagehero__sub, .hero__eyebrow {
  text-wrap: balance;
}
p, li, figcaption, .card__desc, .price__desc, .manifesto__para, .hero__sub {
  text-wrap: pretty;
}

/* ---------- Fraunces variable ----------
   La óptica la ajusta el navegador y SOFT/WONK son lo que le da carácter
   de trazo hecho a mano. Los ejes solo responden si el .woff2 los trae:
   los de css/fuentes/ sí, y hay subconjuntos de Fraunces por ahí que no.
   Se comprueba con getComputedStyle(h1).fontVariationSettings. */
.hero__title,
.section__title,
.contact__title,
.quoteband__quote,
.footer__big,
.teacher__sign,
.card__index,
.price__amount,
.fact__num,
.section__eyebrow,
.hero__eyebrow,
.breath__word,
.intro__word {
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-optical-sizing: auto;
}
/* En textos pequeños en serif, WONK estorba: se deja liso. */
.card__title, .price h3, .legal h2, .benefit h3, .menu__links a {
  font-variation-settings: "SOFT" 25, "WONK" 0;
}

/* ---------- Cifras que no bailan al animarse ---------- */
.fact__num, .price__amount, .contact__where, .footer__row {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------- Selección ---------- */
::selection { background: var(--gold-soft); color: var(--forest); }
.benefits ::selection, .contact ::selection,
.footer ::selection, .menu ::selection { background: var(--sage-soft); color: var(--forest); }

/* ---------- Foco de teclado ----------
   No es una concesión: una web cara se nota al tabular por ella. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
.benefits, .contact, .footer, .menu, .cookies { --focus: var(--gold-soft); }

/* Enlace de salto: lo primero que encuentra el teclado. Fuera de pantalla
   hasta que recibe el foco, así que no estorba a nadie que use el ratón.
   Vale con cualquiera de los dos nombres de clase. */
.skip, .skip-link {
  position: fixed; top: 0.6rem; left: 0.6rem; z-index: var(--z-skip);
  display: inline-flex; align-items: center;
  background: var(--forest); color: var(--cream);
  font-family: var(--sans); font-weight: 600; font-size: var(--step--1);
  line-height: 1.2; text-decoration: none;
  padding: 0.65em 1.35em; border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  transform: translateY(-250%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip:focus, .skip-link:focus,
.skip:focus-visible, .skip-link:focus-visible { transform: translateY(0); }

/* ---------- Transición entre páginas ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtSale 160ms var(--ease-out) both; }
::view-transition-new(root) { animation: vtEntra 300ms var(--ease-out) both; }
@keyframes vtSale  { to   { opacity: 0; } }
@keyframes vtEntra { from { opacity: 0; transform: translateY(8px); } }

/* ============================================================
   2. Capas ambientales
   ============================================================ */

/* ---------- Pétalos que llueven ----------
   Van por la periferia: un elemento ambiental que interfiere con la
   lectura deja de ser ambiental. */
.petalo {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-petalos);
  will-change: transform;
  opacity: 0;                      /* la sube el JS; nunca por encima de 0.7 */
  filter: drop-shadow(0 4px 10px rgb(var(--forest-rgb) / 0.12)) saturate(0.92);
}

/* ---------- Grano de papel ----------
   Por debajo de la nav, de los botones flotantes y del aviso de cookies:
   antes teñía el icono de Instagram y el botón de WhatsApp. */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: var(--grano);
  contain: strict;
}

/* Textura en las bandas oscuras: multiplicar sobre verde no hace nada,
   así que ahí va una segunda capa en soft-light. De paso mata el banding
   del degradado radial del contacto. */
.benefits, .contact, .footer, .menu { position: relative; isolation: isolate; }
.benefits > *, .contact > *, .footer > *, .menu > * { position: relative; z-index: var(--z-content); }
.benefits::after, .contact::after, .footer::after, .menu::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: var(--z-decor);
  opacity: 0.42;
  mix-blend-mode: soft-light;
  background-image: var(--grano);
}

/* ---------- Progreso de scroll ----------
   Retirado: duplicaba la barra de scroll del navegador, chocaba con la
   decoración botánica y no significaba nada. La hoja del logotipo se
   reutiliza como viñeta de las listas, que es donde sí aporta.
   (Los <div class="progress"> siguen en el HTML; ver el documento de
   pendientes para retirarlos del marcado.) */
.progress { display: none; }

/* ---------- Intro respiración ---------- */
/* La cortina de la intro solo la quita el JS: si no hay JS o GSAP no llega,
   sin esta regla la portada se quedaría en una pantalla verde para siempre. */
html:not(.js-anim) .intro { display: none; }
.intro {
  position: fixed; inset: 0; z-index: var(--z-intro);
  background: var(--forest);
  display: grid; place-items: center;
}
.intro__circle {
  width: 14vmin; height: 14vmin; border-radius: 50%;
  border: 1px solid var(--sage-soft);
  position: absolute;
}
.intro__word {
  font-family: var(--serif); font-style: italic;
  color: var(--cream); font-size: clamp(1.1rem, 2.2vmin, 1.5rem);
  letter-spacing: 0.06em;
}

/* ---------- Decoraciones botánicas flotantes ---------- */
.decor {
  position: absolute;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: var(--z-decor);
}
.decor--almendro { right: -3%; top: 4%; width: clamp(9rem, 16vw, 15rem); transform: rotate(14deg); }
.decor--pajaro { right: 5%; top: 5%; width: clamp(6rem, 10vw, 9rem); transform: rotate(-6deg); }
.decor--amapola { left: 2%; bottom: -6%; width: clamp(7rem, 13vw, 12rem); transform: rotate(-10deg); }
.decor--diente { right: 3%; top: -4%; width: clamp(6rem, 11vw, 10rem); transform: rotate(12deg); }

/* ============================================================
   3. Botones
   ============================================================ */

.btn {
  --btn-bg: var(--forest);
  --btn-fg: var(--cream);
  --btn-ring: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em;
  min-height: 2.85rem;
  font-family: var(--sans); font-weight: 600;
  font-size: var(--step--1); line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none; text-align: center;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 0; border-radius: var(--r-pill);
  padding: 0.9em 1.8em;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--btn-ring);
  transition:
    background-color var(--dur-2) linear,
    color var(--dur-2) linear,
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.btn--small  { padding: 0.65em 1.35em; min-height: 2.4rem; font-size: var(--step--2); }
.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--forest); --btn-ring: var(--forest); }
.btn--light  { --btn-bg: var(--cream); --btn-fg: var(--forest); }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--cream); --btn-ring: rgb(var(--cream-rgb) / 0.55); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover             { --btn-bg: var(--gold-soft); --btn-fg: var(--forest); --btn-ring: transparent; }
  .btn--light:hover      { --btn-bg: var(--gold-soft); }
  .btn--ghost:hover      { --btn-bg: var(--forest); --btn-fg: var(--cream); --btn-ring: var(--forest); }
  .btn--ghost-light:hover{ --btn-bg: var(--cream); --btn-fg: var(--forest); --btn-ring: var(--cream); }
}
/* Cien milisegundos que hacen que el botón parezca físico */
.btn:active { transform: scale(0.975); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn[aria-disabled="true"], .btn:disabled {
  opacity: 0.45; pointer-events: none; cursor: not-allowed;
}

/* ============================================================
   4. Navegación
   ============================================================ */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--space-l);
  padding: var(--space-s) var(--pad);
  /* nada de animar el padding: dispara layout en cada fotograma */
  transition: background-color var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
}
.nav.is-scrolled {
  background: rgb(var(--cream-rgb) / 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 rgb(var(--forest-rgb) / 0.1);
}
.nav__logo {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--forest); margin-right: auto;
}
/* La sensación de "la barra se recoge" se consigue encogiendo la marca,
   que es transform y no dispara layout. */
.nav__mark {
  width: 2.6rem; height: 2.6rem; object-fit: contain;
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}
.nav.is-scrolled .nav__mark { transform: scale(0.86); }
.nav__word {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--step-1); letter-spacing: 0.01em;
  display: flex; flex-direction: column; line-height: 1.15;
}
.nav__word em {
  font-size: 0.6875rem;              /* 11px fijos: es la mitad del logotipo */
  letter-spacing: 0.18em;
  font-style: normal;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-family: var(--sans); font-weight: 700;
}
/* Centrado respecto a la ventana, no respecto al hueco entre logo y botón:
   así queda centrado de verdad aunque el logo sea mucho más ancho que el botón. */
.nav__links {
  display: flex; gap: 1.8rem;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.nav__links a {
  text-decoration: none; font-weight: 400; font-size: var(--step--1);
  color: var(--forest-soft); position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__links a[aria-current="page"] { color: var(--forest); font-weight: 600; }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__burger { display: none; }

/* Entre 901 y 1200 px el menú centrado se acercaba al logo hasta pisarlo:
   ahí deja de estar centrado por absoluto y vuelve al flujo. */
@media (min-width: 901px) and (max-width: 1200px) {
  .nav { gap: var(--space-s); }
  .nav__links {
    position: static; transform: none;
    margin-inline: auto;
    gap: clamp(0.7rem, 1.4vw, 1.6rem);
  }
}

/* ---------- Menú móvil ---------- */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--forest-deep); color: var(--cream);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--space-xl);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
}
.menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.menu__links { display: flex; flex-direction: column; gap: var(--space-s); text-align: center; }
.menu__links a {
  font-family: var(--serif); font-size: clamp(1.9rem, 7vw, 2.8rem);
  color: var(--cream); text-decoration: none;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: 60ms; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: 100ms; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: 140ms; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: 180ms; }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: 220ms; }
.menu.is-open .menu__links a:nth-child(6) { transition-delay: 260ms; }
.menu__links a[aria-current="page"] { color: var(--gold-soft); }
/* El botón del menú era verde sobre verde: aquí manda el claro */
.menu .btn { --btn-bg: var(--cream); --btn-fg: var(--forest); }
/* La barra queda por encima del panel verde: el logotipo tiene que
   cambiar de color o se pierde sobre su propio fondo */
body:has(.menu.is-open) .nav__logo { color: var(--cream); }
body:has(.menu.is-open) .nav__word em { color: var(--gold-soft); }
body:has(.menu.is-open) .nav__mark { filter: brightness(0) invert(1); opacity: 0.92; }
body:has(.menu.is-open) .nav { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ============================================================
   5. Portada
   ============================================================ */

.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(6rem, 14vh, 8rem) var(--pad) clamp(3rem, 8vh, 5rem);
  background: var(--cream);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
/* El póster (LCP) y el vídeo ocupan el mismo hueco y se encuadran igual, para que
   el relevo del uno por el otro no se note. El vídeo va después en el marcado, así
   que tapa al póster sin necesidad de z-index. */
.hero__video, .hero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(var(--cream-rgb) / 0.94) 0%, rgb(var(--cream-rgb) / 0.72) 40%, rgb(var(--cream-rgb) / 0.08) 78%),
    linear-gradient(to top, var(--cream) 0%, rgb(var(--cream-rgb) / 0) 22%);
}
/* En vertical el velo tiene que venir de arriba, no de la izquierda */
@media (max-aspect-ratio: 4 / 5) {
  .hero__veil {
    background:
      linear-gradient(to bottom,
        rgb(var(--cream-rgb) / 0.93) 0%,
        rgb(var(--cream-rgb) / 0.90) 50%,
        rgb(var(--cream-rgb) / 0.34) 76%,
        rgb(var(--cream-rgb) / 0.82) 100%);
  }
}

/* Todo el bloque de portada cuelga de una sola medida, --hero-h1, que
   respeta a la vez el ancho y el ALTO del viewport: en un portátil de
   768 px de alto el titular encoge solo y los botones nunca se van
   fuera de pantalla. El ritmo vertical también es función del alto. */
.hero__content {
  position: relative; z-index: var(--z-content);
  width: min(100%, 58rem);
  display: flex; flex-direction: column;
  gap: clamp(0.75rem, 1.9vh, 1.55rem);
  --hero-h1: clamp(3rem, min(11vw, 11.4vh), 6.8rem);
}
.hero__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: var(--step-0);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--gold-ink);
}
.hero__title {
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--serif); font-weight: 300;
  font-size: var(--hero-h1);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--forest);
  margin-left: -0.035em;             /* alineación óptica de la R */
}
.hero__title em { color: var(--sage-ink); }
/* Cuarta línea del titular: la que dice de qué va esto, para quien llega de Google */
.hero__title-tag {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(0.95rem, calc(var(--hero-h1) * 0.2), 1.2rem);
  line-height: 1.4; letter-spacing: 0.01em;
  color: var(--forest-soft);
  margin-top: clamp(0.9rem, 2.2vh, 1.5rem);
  margin-left: 0.035em;              /* deshace la compensación óptica del h1 */
}
.hero__sub {
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: clamp(1rem, calc(var(--hero-h1) * 0.18), 1.12rem);
  line-height: 1.55;
  color: var(--forest-soft); max-width: 52rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.hero__scroll {
  position: absolute; right: var(--pad); bottom: clamp(1.5rem, 4vh, 3rem);
  z-index: var(--z-content); display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  color: var(--forest-soft);
  font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase;
}
.hero__scroll span { writing-mode: vertical-rl; }
.hero__scroll-line { width: 1px; height: 4rem; background: rgb(var(--forest-rgb) / 0.3); overflow: hidden; position: relative; }
.hero__scroll-line::after {
  content: ""; position: absolute; left: 0; top: -100%;
  width: 100%; height: 100%; background: var(--forest);
  animation: scrollhint 2.2s var(--ease-out) infinite;
}
@keyframes scrollhint { 0% { top: -100%; } 60%, 100% { top: 100%; } }

/* Móvil: se reserva sitio abajo para el aviso de cookies de la primera
   visita, de modo que el bloque sube y los dos botones quedan siempre
   por encima de él. Es permanente, así que no hay salto al aceptarlo. */
@media (max-width: 900px) {
  .hero { padding-top: clamp(6rem, 16vh, 8rem); padding-bottom: clamp(6rem, 15vh, 9rem); }
}

/* Pantallas bajas: el subtítulo son cinco frases y en un móvil de 640 px
   de alto no caben con dos botones debajo. Se aprieta el conjunto entero
   en vez de recortar una sola cosa. */
@media (max-width: 900px) and (max-height: 740px) {
  .hero { padding-top: clamp(5rem, 13vh, 6.5rem); padding-bottom: clamp(3.5rem, 9vh, 5rem); }
  .hero__content { --hero-h1: clamp(2.2rem, min(10vw, 9.6vh), 3.4rem); gap: 0.6rem; }
  .hero__sub { line-height: 1.45; }
  .hero__title-tag { margin-top: 0.5rem; }
}

/* Móvil apaisado: no hay alto para una portada a pantalla completa */
@media (max-height: 540px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 5.5rem 2.5rem; }
  .hero__content { --hero-h1: clamp(2rem, 6.5vw, 3rem); }
  .hero__sub { font-size: var(--step-0); max-width: 34rem; }
}

/* ---------- Reveal de líneas ----------
   La máscara del reveal tiene que ser MAYOR que la caja de línea: con un
   interlineado cercano a 1 se comía las ascendentes (la J de "Juega" se
   cortaba por arriba). El padding y el margen negativo se anulan entre sí,
   así que el texto no se mueve ni un píxel; solo crece la zona visible.
   Los contenedores son flex para que los márgenes negativos no colapsen. */
.reveal-line {
  display: block;
  overflow: hidden;
  padding: 0.18em 0.1em 0.26em;
  margin: -0.18em -0.1em -0.26em;
}
.reveal-line > span { display: inline-block; will-change: transform; }

/* ============================================================
   6. Secciones base
   ============================================================ */

/* overflow-x: clip en cada sección, no en el body: el overflow del body se
   propaga al viewport y deja de recortar, así que la decoración botánica
   que sale por la derecha generaba scroll horizontal de verdad. */
.section { padding: var(--section-y) var(--pad); overflow-x: clip; }
/* Para las secciones que van pegadas a una cabecera de página y no
   necesitan el aire completo (sustituye al style en línea de blog.html). */
.section--tight { padding-top: var(--section-y-tight); }

/* Cadencia: el proyecto y la cita abren, las actividades aprietan,
   el cierre abre del todo. Si todos los bloques miden lo mismo, la
   página se lee como una lista de cajas y no como un recorrido. */
.manifesto  { padding-block: var(--section-y-loose); }
.classes    { padding-block: var(--section-y); }
.benefits   { padding-block: var(--section-y); }
.quoteband  { padding-block: var(--section-y-loose); }
.teacher    { padding-block: var(--section-y); }
.contact    { padding-block: var(--section-y-loose); }

/* El antetítulo en cursiva se apoya en la voz que ya tiene la marca
   (la firma de Providencia, los números de las tarjetas) en vez de
   repetir las versalitas espaciadas de cualquier plantilla. */
.section__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: var(--step-1);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--gold-ink);
  margin-bottom: var(--space-xs);
}
.benefits .section__eyebrow { color: var(--gold-soft); }
.section__title {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--step-4);
  line-height: 1.08; letter-spacing: -0.018em; color: var(--forest);
  margin-bottom: var(--space-m);
  margin-left: -0.022em;             /* alineación óptica */
}
.section__head { max-width: 48rem; margin-bottom: var(--head-gap); }

/* Palabras que aparecen al hacer scroll.
   text-indent se hereda, y un inline-block abre su propio contenedor de
   bloque: sin este reset, el text-indent negativo de la cita se aplicaba
   a CADA palabra y las pintaba unas encima de otras. */
.split-words .w { display: inline-block; text-indent: 0; }

/* ============================================================
   7. El proyecto
   ============================================================ */

.manifesto {
  position: relative;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(3rem, 7vw, 6rem); align-items: center;
}
.manifesto__breath { display: grid; place-items: center; }
.breath { position: relative; width: min(46vw, 22rem); aspect-ratio: 1; display: grid; place-items: center; }
.breath__wash {
  position: absolute; inset: -18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 32%, rgb(var(--gold-rgb) / 0.13), transparent 52%),
    radial-gradient(circle at 70% 66%, rgb(var(--sage-rgb) / 0.16), transparent 55%),
    radial-gradient(circle at 52% 48%, rgb(var(--blush-rgb) / 0.10), transparent 50%);
}
.breath__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--sage);
}
.breath__ring--b { inset: 12%; border-color: var(--sage-soft); }
/* La órbita ya no gira por girar: respira con el círculo (lo mueve el JS) */
.breath__orbit {
  position: absolute; inset: -7%;
  color: var(--gold);
}
.breath__core {
  width: 44%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #FFFDF4, var(--cream-deep));
  box-shadow: var(--shadow-2), inset 0 0 0 1.5px rgb(var(--sage-rgb) / 0.3);
  display: grid; place-items: center;
}
.breath__core img { width: 64%; height: auto; }
.breath__word {
  position: absolute; bottom: -3rem;
  font-family: var(--serif); font-style: italic;
  font-size: var(--step-1); color: var(--forest-soft); letter-spacing: 0.04em;
}
.manifesto__para { max-width: 34rem; margin-bottom: var(--space-xl); color: var(--forest-soft); }
.manifesto__facts { list-style: none; display: flex; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; }
.fact { display: flex; flex-direction: column; }
.fact__num {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--step-4); color: var(--sage-ink); line-height: 1;
}
.fact__label {
  font-size: var(--step--1); color: var(--forest-soft);
  max-width: 11ch; margin-top: var(--space-2xs); text-wrap: pretty;
}

/* ============================================================
   8. Actividades
   ============================================================ */

.classes { background: var(--cream-deep); position: relative; }
.classes__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--cream); border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--shadow-1), var(--ring);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
/* El enlace estira su área de clic a toda la tarjeta: el hover deja de mentir.
   Una tarjeta sin enlace no se levanta, porque no lleva a ninguna parte.

   Hacen falta dos pseudoelementos y no uno. El enlace vive dentro de
   .card__body, que es position: relative por el círculo del "01", así que un
   ::after con inset: 0 solo alcanza el cuerpo y deja la ilustración muerta.
   El ::before la cubre: bottom: 100% lo coloca justo encima del cuerpo y el
   aspect-ratio le da exactamente la altura de .card__media, que usa el mismo.
   Si algún día cambia esa proporción, hay que cambiarla en los dos sitios.

   Se hace con pseudoelementos en vez de envolver la tarjeta en un <a> para
   que siga habiendo un único enlace por tarjeta: así el lector de pantalla
   anuncia el título y no lee de corrido la imagen, la etiqueta y el resumen. */
.card__link,
.card:not(:has(.card__link)) .card__title a { position: static; }

.card__link::after,
.card:not(:has(.card__link)) .card__title a::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
}
.card:has(.card__media) .card__link::before,
.card:has(.card__media):not(:has(.card__link)) .card__title a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  aspect-ratio: 4 / 3; z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .card:has(a):hover { transform: translateY(-6px); box-shadow: var(--shadow-3), var(--ring); }
  .card:has(a):hover .card__media img { transform: scale(1.035); }
}
.card:not(:has(a)):hover { transform: none; box-shadow: var(--shadow-1), var(--ring); }
.card:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }

/* Cabeceras: ilustraciones acuarela dedicadas.
   Tres proporciones y tres encuadres distintos convierten una repetición
   en una serie. */
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-out);
}
/* Las tres ilustraciones comparten proporción: los títulos, los datos y los
   enlaces de las tres tarjetas caen exactamente a la misma altura. El encuadre
   sigue siendo distinto en cada una, que es lo que da variedad sin descuadrar. */
.classes__grid .card:nth-child(1) .card__media img { object-position: 50% 42%; }
.classes__grid .card:nth-child(2) .card__media img { object-position: 50% 55%; }
.classes__grid .card:nth-child(3) .card__media img { object-position: 62% 48%; }
.classes__grid .card:has(.card__tag):nth-child(1) .card__media img { object-position: 38% 46%; }
.classes__grid .card:has(.card__tag):nth-child(2) .card__media img { object-position: 62% 38%; }
.classes__grid .card:has(.card__tag):nth-child(3) .card__media img { object-position: 44% 60%; }
/* fundido inferior hacia el cuerpo de la tarjeta */
.card__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 26%;
  background: linear-gradient(to bottom, rgb(var(--cream-rgb) / 0), var(--cream));
  pointer-events: none;
}
.card__body {
  padding: var(--space-m) var(--space-m) var(--space-l); position: relative;
  display: flex; flex-direction: column; flex: 1;
}
/* Descripciones de distinto largo no deben mover los datos de abajo */
.card__desc { flex: 1; }
.card__meta { margin-top: auto; }
.card__meta + .card__link { margin-top: var(--space-2xs); }
/* El "01" tenía asiento sobre la acuarela, que ahí es clara pero muy movida */
.card__index {
  position: absolute; top: -1.55rem; right: 1.4rem;
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--cream);
  box-shadow: var(--shadow-1);
  font-family: var(--serif); font-style: italic; font-size: 1.4rem;
  color: var(--gold-ink);
}
.card__title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--step-2); color: var(--forest);
  letter-spacing: -0.006em; line-height: 1.16;
  margin-bottom: var(--space-2xs);
}
/* Reserva dos líneas de título en todas las tarjetas: así las descripciones
   arrancan a la misma altura aunque un título sea más largo que otro. */
@media (min-width: 641px) {
  .classes__grid .card__title { min-height: 2.32em; }
}
.card__desc { font-size: var(--step-0); color: var(--forest-soft); margin-bottom: var(--space-s); }
.card__meta {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sage-ink);
}

/* ---------- Qué hay dentro de cada clase ---------- */
.classes__inside {
  margin: var(--space-2xl) 0 0;
  max-width: 46rem; text-align: left;
}
.classes__inside-label {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-ink); margin-bottom: var(--space-m);
}
.classes__chips {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  text-align: left;
}
.classes__chips li {
  display: flex; align-items: flex-start; gap: var(--space-xs);
  padding: 0.85rem 0.2rem;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.13);
  font-size: var(--step--1); color: var(--forest-soft);
}
/* La viñeta es la hoja del logotipo: la marca aparece en el sitio más
   humilde de la web. Eso es coherencia, no adorno. */
.classes__chips li::before {
  content: "";
  flex: none;
  width: 0.6em; height: 0.6em; margin-top: 0.55em;
  background-color: var(--sage-ink);
  -webkit-mask: var(--hoja) center / contain no-repeat;
          mask: var(--hoja) center / contain no-repeat;
}
@media (max-width: 640px) {
  .classes__chips { grid-template-columns: 1fr; }
}

/* ============================================================
   9. Beneficios (carril horizontal fijado en escritorio)
   ============================================================ */

.benefits { background: var(--forest); color: var(--cream); overflow: clip; }
.benefits .section__title { color: var(--cream); }
.benefits__grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: beneficio;
}

@media (min-width: 901px) {
  /* El carril sale a sangre: las tarjetas entran y salen por el borde de la
     pantalla, no por el margen, y se desvanecen en vez de cortarse a media
     palabra. */
  .benefits__viewport {
    margin-inline: calc(var(--pad) * -1);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 90%, transparent 100%);
  }
  .benefits__track {
    display: flex;
    gap: clamp(2rem, 4vw, 3.5rem);
    width: max-content;
    padding-inline: var(--pad);
  }
  .benefits__track .benefit { width: clamp(19rem, 26vw, 24rem); flex: none; }

  /* Cuando el carril está fijado, el contenido se centra en la pantalla:
     antes quedaban 120 px de verde vacío debajo de las tarjetas. */
  .benefits--pinned {
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .benefits--pinned .section__head { margin-bottom: var(--head-gap); }
  .benefits--pinned .benefits__rail { display: block; }
}

.benefit {
  counter-increment: beneficio;
  border-top: 1px solid rgb(var(--cream-rgb) / 0.22);
  padding-top: var(--space-m);
}
/* Los seis iconos pasan a numeración en cursiva, el mismo recurso que ya
   usan las tarjetas de actividades: dos bloques que hablan el mismo idioma
   en lugar de un glifo de relleno. */
.benefit__icon { visibility: hidden; font-size: 0.9rem; line-height: 1; }
.benefit__icon::before {
  visibility: visible;
  content: counter(beneficio, decimal-leading-zero);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.1rem; letter-spacing: 0.02em;
  color: var(--gold-soft);
  font-variation-settings: "WONK" 1;
}
.benefit h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--step-2); letter-spacing: -0.006em;
  margin: var(--space-2xs) 0 var(--space-xs);
}
.benefit p { font-size: var(--step--1); color: rgb(var(--cream-rgb) / 0.78); max-width: 30ch; }

/* Indicador de avance del carril: le dice al usuario que esto es horizontal */
.benefits__rail {
  display: none; height: 1px; margin-top: var(--space-xl);
  background: rgb(var(--cream-rgb) / 0.18);
}
.benefits__rail span {
  display: block; height: 100%; background: var(--gold-soft);
  transform: scaleX(0); transform-origin: left;
}

/* ============================================================
   10. Banda cita
   ============================================================ */

.quoteband {
  position: relative;
  background: var(--cream-deep);
  padding-inline: var(--pad);
  display: grid; place-items: center;
  overflow: clip;
}
.quoteband__quote {
  position: relative; z-index: var(--z-content);
  font-family: var(--serif); font-weight: 300; font-style: italic;
  /* Excepción consciente a la escala: la cita es el único bloque de la
     web que necesita un tamaño intermedio entre el cuerpo y el h2. */
  font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--forest); text-align: center;
  max-width: 46rem;
  text-indent: -0.42em;              /* la « vuela fuera de la caja */
  hanging-punctuation: first;
}

/* ============================================================
   11. Quién soy
   ============================================================ */

.teacher {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(3rem, 7vw, 6rem); align-items: center;
}
.teacher__media {
  border-radius: var(--r-l);
  background: var(--cream);      /* fondo opaco propio: la mezcla multiply
                                     necesita algo debajo o reaparece el blanco */
}
/* La foto sube y rompe la simetría de las dos columnas */
@media (min-width: 901px) {
  .teacher { align-items: start; }
  .teacher__media { margin-top: calc(var(--section-y) * -0.5); box-shadow: var(--shadow-2); }
  .teacher__text { padding-top: var(--space-l); }
}
.teacher__text p:not(.section__eyebrow):not(.teacher__sign) {
  color: var(--forest-soft); max-width: 34rem; margin-bottom: var(--space-s);
}
/* "Quién soy" abre con un filete y con la firma, no con otra etiqueta:
   siete secciones con la misma apertura son una plantilla, no capítulos. */
.teacher .section__eyebrow { display: none; }
.teacher .section__title::before {
  content: "";
  display: block; width: 2.5rem; height: 1px;
  background: var(--gold); margin-bottom: var(--space-m);
}
.teacher__sign {
  font-family: var(--serif); font-style: italic;
  font-size: var(--step-3); color: var(--gold-ink); margin-top: var(--space-m);
}
/* La carta se cierra con la firma y, al lado, el sello de la escuela que la
   tituló. El sello va en la tinta de la casa (PNG con transparencia) y la
   frase de debajo dice lo que pone en el sello, para quien no lo lea. */
.teacher__firma {
  display: flex; align-items: center; gap: var(--space-m);
  margin-top: var(--space-m);
}
.teacher__firma .teacher__sign { margin-top: 0; }
.teacher__sello { width: 5.75rem; height: 5.75rem; flex: none; opacity: 0.88; }
.teacher__text .teacher__cred { margin-top: var(--space-xs); font-size: var(--step--1); }

/* Reveal de imágenes con clip */
.img-reveal { overflow: hidden; }
.img-reveal img { width: 100%; height: auto; }

/* ============================================================
   12. Contacto
   ============================================================ */

.contact {
  position: relative; overflow: clip;
  padding-inline: var(--pad);
  display: grid; place-items: center; text-align: center;
  /* tres paradas en vez de dos: el degradado de dos hacía escalones
     visibles (banding) a media banda */
  background:
    radial-gradient(ellipse 85% 70% at 50% 118%,
      rgb(var(--sage-rgb) / 0.34) 0%,
      rgb(var(--sage-rgb) / 0.16) 42%,
      rgb(var(--sage-rgb) / 0) 72%),
    var(--forest);
}
.contact__inner { position: relative; z-index: var(--z-content); max-width: 46rem; color: var(--cream); }
.contact__title {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--step-5); line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-m);
}
.contact__sub { color: rgb(var(--cream-rgb) / 0.85); max-width: 34rem; margin: 0 auto var(--space-l); }
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; margin-bottom: var(--space-l); }
.contact__actions .btn { text-wrap: nowrap; }
.contact__where { font-size: var(--step--1); letter-spacing: 0.02em; color: rgb(var(--cream-rgb) / 0.72); text-wrap: pretty; }
.contact__where a { color: var(--sage-soft); text-decoration: none; }
.contact__where a:hover { color: var(--cream); }

/* ============================================================
   13. Cabecera de páginas interiores
   ============================================================ */

.pagehero {
  padding: clamp(9rem, 18vh, 12rem) var(--pad) clamp(3rem, 6vw, 5rem);
  max-width: 60rem;
}
.pagehero .section__title { margin-left: -0.022em; }
.pagehero__sub { color: var(--forest-soft); max-width: 36rem; margin-top: calc(var(--space-2xs) * -1); }

/* ============================================================
   14. Páginas legales
   ============================================================ */

.legal { max-width: 38rem; margin: 0 auto; }
.legal h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--step-2); color: var(--forest);
  margin: var(--space-xl) 0 var(--space-xs);
}
.legal p, .legal li { color: var(--forest-soft); font-size: var(--step-0); margin-bottom: var(--space-xs); }
.legal ul { padding-left: 0; list-style: none; margin-bottom: var(--space-xs); }
.legal li { position: relative; padding-left: 1.2rem; margin-bottom: var(--space-2xs); }
.legal li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.5em; height: 0.5em;
  background-color: var(--sage-ink);
  -webkit-mask: var(--hoja) center / contain no-repeat;
          mask: var(--hoja) center / contain no-repeat;
}
.legal__updated { font-size: var(--step--1); font-style: italic; }

/* Resumen en claro antes del articulado. La AEPD pide información por capas:
   primero lo esencial en dos líneas, y debajo el detalle para quien lo quiera. */
.legal__resumen {
  background: var(--cream-deep);
  border-radius: var(--r-m);
  padding: var(--space-m) var(--space-m) calc(var(--space-m) - var(--space-xs));
  margin-bottom: var(--space-l);
  box-shadow: var(--ring);
}
.legal__resumen h2 {
  margin-top: 0;
  font-size: var(--step-1);
}
.legal__resumen p:last-child, .legal__resumen ul:last-child { margin-bottom: 0; }
.legal__resumen li:last-child { margin-bottom: 0; }

.legal h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: var(--step-0); color: var(--forest);
  letter-spacing: 0.005em;
  margin: var(--space-m) 0 var(--space-2xs);
}

/* Los datos del titular y las fichas de almacenamiento son pares de dato y
   valor, no prosa: una tabla de cuatro columnas no cabe en los 38rem de la
   caja y obligaría a hacer scroll lateral en el móvil. */
.legal__datos { margin-bottom: var(--space-xs); }
.legal__datos > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-s);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.09);
}
.legal__datos > div:last-child { border-bottom: 0; }
@media (min-width: 640px) {
  .legal__datos > div { grid-template-columns: 9.5rem 1fr; }
}
.legal__datos dt {
  font-size: var(--step--1); font-weight: 700;
  color: var(--forest); line-height: 1.55;
}
.legal__datos dd { color: var(--forest-soft); font-size: var(--step-0); line-height: 1.6; }

/* Una ficha por cada cosa que la web guarda en el navegador. */
.legal__ficha {
  border: 1px solid rgb(var(--ink-rgb) / 0.12);
  border-radius: var(--r-s);
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-s);
}
.legal__ficha h3 {
  margin-top: 0;
  font-family: var(--sans);
  font-size: var(--step-0); letter-spacing: 0.01em;
  color: var(--sage-ink);
}
.legal__ficha .legal__datos > div { border-bottom-color: rgb(var(--ink-rgb) / 0.07); }

/* ============================================================
   15. Aviso de cookies
   ============================================================ */

/* Va a la derecha, no a la izquierda: en la portada la esquina inferior
   izquierda es donde viven "Reserva tu plaza" y "Mira cómo trabajamos",
   y el aviso se los comía en la primera visita. Mientras está en pantalla
   los botones flotantes se apartan: una sola cosa flotando cada vez. */
.cookies {
  position: fixed; z-index: var(--z-cookies);
  right: var(--space-m); bottom: var(--space-m);
  width: min(23rem, calc(100vw - 2 * var(--space-m)));
  background: var(--forest-deep); color: var(--cream);
  border-radius: var(--r-m); padding: var(--space-m);
  display: flex; flex-direction: column; gap: var(--space-s);
  box-shadow: var(--shadow-3), inset 0 0 0 1px rgb(var(--cream-rgb) / 0.12);
}
.cookies p { font-size: var(--step--1); line-height: 1.55; color: rgb(var(--cream-rgb) / 0.88); }
.cookies a { color: var(--gold-soft); text-underline-offset: 3px; }
.cookies .btn { align-self: flex-start; }
/* En móvil, hoja pegada al borde inferior: gana el ancho completo para el
   texto y baja de 150 a 120 px de alto, que es lo que hace falta para que
   no alcance a los botones de la portada. */
@media (max-width: 640px) {
  .cookies {
    left: 0; right: 0; bottom: 0;
    width: auto;
    border-radius: var(--r-m) var(--r-m) 0 0;
    padding: var(--space-s) var(--space-m) calc(var(--space-s) + env(safe-area-inset-bottom, 0px));
    gap: var(--space-2xs);
  }
}
/* Pantallas bajas: el texto y el botón comparten fila */
@media (max-height: 740px) {
  .cookies {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: var(--space-2xs) var(--space-s);
    padding: var(--space-s) var(--space-m);
  }
  .cookies p { flex: 1 1 11rem; font-size: var(--step--2); line-height: 1.5; }
  .cookies .btn { align-self: center; }
}

/* ============================================================
   16. Botones flotantes de contacto
   ============================================================ */

.fab-dock {
  position: fixed; z-index: var(--z-fab);
  right: clamp(0.9rem, 2.2vw, 1.5rem);
  bottom: clamp(0.9rem, 2.2vw, 1.5rem);
  display: flex; flex-direction: column-reverse; align-items: flex-end;
  gap: 0.7rem;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
/* Los dos botones eran los únicos colores saturados de la web: el verde de
   WhatsApp y el degradado corporativo de Instagram cantaban sobre la
   acuarela. Ahora hablan la paleta de la casa y tienen jerarquía: el de
   WhatsApp es la acción, el de Instagram acompaña. */
.fab {
  position: relative;
  display: grid; place-items: center;
  width: 3.35rem; height: 3.35rem;
  border-radius: 50%;
  background: var(--forest); color: var(--cream);
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-2) linear,
              color var(--dur-2) linear;
  animation: fabEntra var(--dur-4) var(--ease-out) both;
}
.fab svg { width: 1.6rem; height: 1.6rem; position: relative; z-index: 2; }
.fab--wa { animation-delay: 0.9s; }
.fab--ig {
  width: 2.85rem; height: 2.85rem;
  background: rgb(var(--cream-rgb) / 0.9);
  color: var(--forest);
  box-shadow: inset 0 0 0 1.5px rgb(var(--forest-rgb) / 0.3), var(--shadow-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation-delay: 1.05s;
}
.fab--ig svg { width: 1.3rem; height: 1.3rem; }
@media (hover: hover) and (pointer: fine) {
  .fab:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
  .fab--wa:hover { background: var(--forest-deep); }
  .fab--ig:hover { background: var(--forest); color: var(--cream); box-shadow: var(--shadow-2); }
}
.fab:active { transform: scale(0.94); }
.fab:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

/* Una respiración lenta alrededor del de WhatsApp (decisión del cliente) */
.fab--wa::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--sage);
  animation: fabRespira 4.2s var(--ease-out) infinite;
}

/* Etiqueta que asoma al pasar el ratón */
.fab__label {
  position: absolute; right: calc(100% + 0.6rem);
  white-space: nowrap;
  font-size: var(--step--2); font-weight: 600;
  background: var(--forest-deep); color: var(--cream);
  padding: 0.45em 0.9em; border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px rgb(var(--cream-rgb) / 0.18), var(--shadow-2);
  opacity: 0; transform: translateX(8px);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.fab:hover .fab__label, .fab:focus-visible .fab__label { opacity: 1; transform: translateX(0); }

@keyframes fabEntra { from { opacity: 0; transform: translateY(18px) scale(0.85); } }
@keyframes fabRespira {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

/* Se apartan cuando el menú móvil o el aviso de cookies ocupan la pantalla */
.menu.is-open ~ .fab-dock,
body.con-aviso .fab-dock { opacity: 0; transform: translateY(14px); pointer-events: none; }
/* Y el aviso de cookies se aparta mientras el menú está abierto: su capa va
   por encima del panel verde y tapaba el botón de WhatsApp del menú. */
.menu.is-open ~ .cookies { opacity: 0; pointer-events: none; }

@media (max-width: 640px) {
  .fab { width: 3.1rem; height: 3.1rem; }
  .fab svg { width: 1.45rem; height: 1.45rem; }
  .fab--ig { width: 2.7rem; height: 2.7rem; }
  .fab__label { display: none; }
}

/* ============================================================
   17. Precios
   ============================================================ */

.pricing { background: var(--cream-deep); position: relative; }
/* H2 que cierra el salto de H1 a H3. Mismo eje izquierdo que la cabecera
   de la página: la retícula manda más que centrarlo todo. */
.pricing__title {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.15; letter-spacing: -0.012em;
  color: var(--forest);
  max-width: 30ch;
  margin: 0 0 var(--head-gap);
  margin-left: -0.018em;
}
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}
/* La cuarta opción no tiene precio: deja de competir con las otras tres
   y se convierte en una banda ancha al pie de la tabla. */
@media (min-width: 901px) {
  .pricing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price--custom,
  .pricing__grid .price:nth-child(4) {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
    background: var(--sand);
  }
  .price--custom h3,
  .pricing__grid .price:nth-child(4) h3 { grid-column: 1; margin-bottom: var(--space-2xs); }
  .price--custom .price__desc,
  .pricing__grid .price:nth-child(4) .price__desc { grid-column: 1; }
  .price--custom .price__amount,
  .pricing__grid .price:nth-child(4) .price__amount { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}
@media (max-width: 640px) { .pricing__grid { grid-template-columns: 1fr; } }

.price {
  background: var(--cream); border-radius: var(--r-l);
  padding: var(--space-l) clamp(1.3rem, 1.6vw, 2rem); position: relative;
  box-shadow: var(--shadow-1), var(--ring);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.price:hover { transform: none; box-shadow: var(--shadow-2), var(--ring); }
.price--featured { background: var(--forest); color: var(--cream); }
.price--featured .price__desc { color: rgb(var(--cream-rgb) / 0.78); }
.price__tag {
  position: absolute; top: -0.85rem; left: 2rem;
  background: var(--gold-soft); color: var(--forest);
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.4em 1em; border-radius: var(--r-pill);
}
.price h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--step-2); letter-spacing: -0.006em; margin-bottom: var(--space-s);
}
.price__amount {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--step-5); line-height: 1; margin-bottom: var(--space-s);
}
/* En español el símbolo va detrás de la cifra y separado: "12 €".
   Y ópticamente sube hasta la altura de mayúsculas, no cuelga de la línea base. */
.price__amount span {
  display: inline-block;
  font-size: 0.3em; font-style: italic;
  color: var(--gold-ink);
  vertical-align: 0.9em;
  margin-left: 0.22em;
  letter-spacing: 0.01em;
}
.price--featured .price__amount span { color: var(--sage-soft); }
/* La cuarta tarifa no lleva cifra, solo "a medida": ni vuela ni se separa */
.price--custom .price__amount span,
.pricing__grid .price:nth-child(4) .price__amount span,
.price__amount--text {
  font-size: 0.46em; vertical-align: baseline; margin-left: 0;
  font-style: italic; color: var(--gold-ink);
}
.price__desc { font-size: var(--step-0); color: var(--forest-soft); }
.pricing__note {
  max-width: 34rem; margin: var(--space-xl) 0 0; text-align: left;
  font-size: var(--step--1); color: var(--forest-soft);
}

/* ============================================================
   18. Blog
   ============================================================ */

/* El título de la tarjeta es el enlace al artículo */
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* En el blog el H2 de la parrilla no compite con el H1 de la página */
.blog .classes .section__title { font-size: var(--step-3); margin-bottom: 0; }

.card__tag {
  display: inline-block;
  background: var(--gold-soft); color: var(--forest);
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.35em 1em; border-radius: var(--r-pill);
  margin-bottom: var(--space-2xs);
}

/* ============================================================
   18b. Preguntas frecuentes (portada)
   Ocho respuestas cortas y a la vista, sin acordeón: lo que se lee sin
   pulsar es lo que leen también Google y los resúmenes con IA. Dos
   columnas en escritorio; la retícula alinea las preguntas de cada fila.
   ============================================================ */

.preguntas { background: var(--cream-deep); position: relative; }
.preguntas__grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4.5rem);
}
/* Cada tarjeta es una subretícula de dos filas (pregunta, respuesta): así la
   fila de la pregunta mide lo mismo en las dos columnas y las respuestas de
   una misma fila arrancan a la misma altura aunque una pregunta ocupe dos
   líneas y la de al lado una. Sin subgrid se apilan igual, solo sin cuadrar. */
.preguntas__item {
  display: grid; grid-template-rows: subgrid; grid-row: span 2;
  align-content: start;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.13);
  padding: var(--space-m) 0 var(--space-l);
}
.preguntas__item h3 {
  font-family: var(--serif); font-weight: 400;
  font-variation-settings: "SOFT" 25, "WONK" 0;
  font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.006em;
  color: var(--forest);
  margin-bottom: var(--space-xs);
  text-wrap: balance;
  align-self: start;
}
.preguntas__item p { font-size: var(--step-0); color: var(--forest-soft); max-width: 34rem; align-self: start; }
.preguntas__item a {
  color: var(--forest);
  text-decoration-line: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--forest-rgb) / 0.35); text-underline-offset: 0.18em;
  transition: text-decoration-color var(--dur-2) linear;
}
.preguntas__item a:hover { text-decoration-color: currentColor; }
@media (max-width: 900px) {
  .preguntas__grid { grid-template-columns: 1fr; }
  .preguntas__item { padding-bottom: var(--space-m); }
}

/* ============================================================
   19. Pie
   ============================================================ */

/* Un escalón por debajo del contacto: si los dos son del mismo verde,
   el pie parece la continuación de la banda anterior. */
.footer {
  background: var(--forest-deep);
  color: var(--cream);
  padding: var(--section-y-tight) var(--pad) var(--space-l);
  overflow: clip;
}

/* Cuatro columnas: la de marca pesa más que las tres de enlaces porque
   lleva logotipo, claim y redes.
   Sin max-width a propósito: el pie arranca y termina exactamente en el
   mismo margen que las secciones de arriba, que solo usan --pad. Si se le
   pone un ancho máximo, el borde izquierdo deja de coincidir con el del
   contenido y el descuadre se ve al hacer scroll. */
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl) var(--space-l);
  padding-bottom: var(--space-xl);
}
@media (min-width: 640px) {
  /* Dos columnas de enlaces; la marca ocupa la fila entera por encima. */
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .footer__inner {
    grid-template-columns:
      minmax(0, 1.45fr) minmax(0, 0.95fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
    gap: var(--space-l) clamp(1.5rem, 3.6vw, 3.5rem);
  }
  .footer__brand { grid-column: auto; }
}

/* ---------- Columna de marca ---------- */

.footer__logo {
  display: inline-flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--cream);
  transition: opacity var(--dur-2) linear;
}
@media (hover: hover) {
  .footer__logo:hover { opacity: 0.82; }
}
/* El isotipo viene en tinta oscura sobre transparente: sobre el verde del
   pie hay que pasarlo a blanco, igual que se hace con el menú abierto. */
.footer__mark {
  width: 2.9rem; height: 2.9rem; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.92;
}
.footer__word {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--step-1); letter-spacing: 0.01em;
  display: flex; flex-direction: column; line-height: 1.15;
}
.footer__word em {
  font-size: 0.6875rem;              /* 11px fijos: la mitad del logotipo */
  letter-spacing: 0.18em;
  font-style: normal;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-family: var(--sans); font-weight: 700;
}
.footer__claim {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: var(--step-2); line-height: 1.35;
  color: var(--cream);
  margin-top: var(--space-m);
  max-width: 22ch;
}
.footer__where {
  margin-top: var(--space-s);
  font-size: var(--step--1); line-height: 1.6;
  color: rgb(var(--cream-rgb) / 0.7);
  max-width: 36ch;
}
.footer__social {
  display: flex; gap: var(--space-xs);
  margin-top: var(--space-m);
}
.footer__social a {
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  color: rgb(var(--cream-rgb) / 0.8);
  box-shadow: inset 0 0 0 1.5px rgb(var(--cream-rgb) / 0.28);
  transition: background-color var(--dur-2) linear, color var(--dur-2) linear,
              transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .footer__social a:hover {
    background: var(--gold-soft); color: var(--forest);
    box-shadow: inset 0 0 0 1.5px var(--gold-soft);
    transform: translateY(-4px);
  }
}
.footer__social svg { width: 1.15rem; height: 1.15rem; }
/* Mientras el aviso de almacenamiento esta en pantalla ocupa la esquina
   inferior derecha y llegaba a tapar el ultimo enlace legal. Se le da
   sitio; al cerrarlo, la linea vuelve a su altura. */
body.con-aviso .footer__row { padding-bottom: 11rem; }
@media (max-width: 640px) {
  body.con-aviso .footer__row { padding-bottom: 10rem; }
}

/* ---------- Columnas de enlaces ---------- */

/* Los tres encabezados son h2 reales para que el pie tenga estructura en un
   lector de pantalla; el tamaño de microetiqueta es lo que los baja de rango
   a la vista sin quitarles el papel semántico. */
.footer__title {
  font-family: var(--sans); font-weight: 700;
  font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: var(--space-xs);
}
.footer__list { list-style: none; }
.footer__list a {
  display: inline-block;
  color: rgb(var(--cream-rgb) / 0.78);
  text-decoration: none;
  font-size: var(--step--1); line-height: 1.5;
  padding-block: 0.4rem;                /* área de toque cómoda sin separar la lista */
  transition: color var(--dur-2) linear;
}
@media (hover: hover) {
  .footer__list a:hover { color: var(--cream); }
}
/* La página en la que estás no puede distinguirse solo por el color: el punto
   dorado la marca también para quien no aprecia ese contraste. */
.footer__list a[aria-current="page"] { color: var(--cream); }
.footer__list a[aria-current="page"]::before {
  content: ""; display: inline-block;
  width: 0.3rem; height: 0.3rem; border-radius: 50%;
  background: var(--gold-soft);
  margin-right: 0.5rem; vertical-align: 0.18em;
}
.footer__list--contacto a { word-break: break-word; }
/* Con .footer__wa a secas gana ".footer__list a { display: inline-block }",
   que es mas especifica, y entonces el gap no separa el icono del texto. */
.footer__list a.footer__wa { display: inline-flex; align-items: center; gap: 0.55rem; }
.footer__wa svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--sage-soft); }
/* Dirección postal: mismo cuerpo que los enlaces de la lista, sin ser enlace */
.footer__dir {
  font-size: var(--step--1); line-height: 1.5;
  color: rgb(var(--cream-rgb) / 0.78);
  padding-block: 0.4rem;
  font-style: normal;
}
.footer__nota {
  margin-top: var(--space-s);
  font-size: var(--step--2); line-height: 1.6;
  color: rgb(var(--cream-rgb) / 0.6);
  max-width: 32ch;
}

/* ---------- Marca de agua y línea legal ---------- */

/* Un contorno de 1 px en una letra de 250 px es un alambre, no una marca de
   agua: el trazo tiene que crecer con la letra. */
.footer__big {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(4.5rem, 17vw, 15rem); line-height: 0.82;
  letter-spacing: -0.025em;
  color: rgb(var(--cream-rgb) / 0.07);
  -webkit-text-stroke: 0.008em rgb(var(--cream-rgb) / 0.22);
  text-align: center; user-select: none;
  margin: 0 0 var(--space-m);
}
/* Centrada, no repartida a los lados: los botones flotantes ocupan la esquina
   inferior derecha de la ventana y taparían el último enlace legal. El
   padding-inline deja libres las dos esquinas, y la simetría hace que ese
   hueco no se lea como un descuadre. */
.footer__row {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: var(--space-2xs) var(--space-m);
  border-top: 1px solid rgb(var(--cream-rgb) / 0.15); padding-top: var(--space-m);
  font-size: var(--step--2); color: rgb(var(--cream-rgb) / 0.62);
  text-align: center;
  padding-inline: 4.8rem;
}
@media (max-width: 640px) {
  .footer__row { padding-inline: 0; padding-bottom: 7rem; }
}
.footer__copy { line-height: 1.6; }
.footer__sep { margin-inline: 0.55rem; color: var(--sage-soft); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.3rem; }
.footer__legal a {
  color: rgb(var(--cream-rgb) / 0.62); text-decoration: none;
  padding-block: 0.4rem;
  transition: color var(--dur-2) linear;
}
@media (hover: hover) {
  .footer__legal a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
}
.footer__legal a[aria-current="page"] { color: var(--cream); }

/* ============================================================
   20. Enlaces de texto dentro del contenido
   ============================================================ */

.classes__inside-more {
  margin-top: var(--space-m); font-size: var(--step--1); color: var(--forest-soft);
  max-width: 34rem; margin-inline: 0; text-align: left;
}
.teacher__more { margin-top: var(--space-m); font-size: var(--step--1); color: var(--forest-soft); }
.card__link {
  display: inline-block; margin-top: var(--space-2xs);
  font-size: var(--step--1); font-weight: 600; color: var(--forest);
  text-wrap: balance;
}
/* Entre 901 y 1200 px la columna mide unos 280 px: el enlace de dos de las
   tres tarjetas y la línea de datos de la tercera pasan a dos líneas. Se
   reserva ese alto (dos líneas a 1.7 de interlineado) en las tres tarjetas
   para que datos y enlaces caigan a la misma altura en todas. */
@media (min-width: 901px) and (max-width: 1200px) {
  .classes__grid .card__meta,
  .classes__grid .card__link { min-height: 3.4em; }
}
/* Subrayado que no atropella las descendentes */
.classes__inside-more a, .teacher__more a, .pricing__note a,
.legal a, .error404__links a, .card__link {
  color: var(--forest);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--forest-rgb) / 0.35);
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--dur-2) linear, color var(--dur-2) linear;
}
.classes__inside-more a:hover, .teacher__more a:hover, .pricing__note a:hover,
.legal a:hover, .error404__links a:hover, .card__link:hover { text-decoration-color: currentColor; }

/* ============================================================
   21. Página 404
   ============================================================ */

.error404__links { margin-top: var(--space-l); font-size: var(--step--1); color: var(--forest-soft); }
.error404__links a { display: inline-block; padding-block: 0.3rem; }

/* ============================================================
   22. Responsive
   ============================================================ */

@media (max-width: 900px) {
  .nav__links, .nav .btn--small { display: none; }
  .nav__burger {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 6px;
    width: 44px; height: 44px; margin-right: -0.5rem;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .nav__burger span {
    width: 26px; height: 2px; border-radius: 2px; background: var(--forest);
    transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2) linear;
  }
  .nav__burger.is-open span:first-child { transform: translateY(4px) rotate(45deg); background: var(--cream); }
  .nav__burger.is-open span:last-child  { transform: translateY(-4px) rotate(-45deg); background: var(--cream); }

  .manifesto, .teacher { grid-template-columns: 1fr; }
  .manifesto__breath { order: 2; margin-top: var(--space-l); }
  .classes__grid, .pricing__grid { grid-template-columns: 1fr; max-width: 28rem; margin: 0 auto; }
  .classes__grid .card .card__media { aspect-ratio: 4 / 3; }
  .benefits__grid { grid-template-columns: 1fr; max-width: 30rem; }
  .teacher__media { max-width: 24rem; }

  .hero__scroll { display: none; }
  /* En móvil se pierde toda la ilustración botánica: se conservan dos,
     pequeños y pegados al margen, donde no estorban la lectura. */
  .decor { display: none; }
  .decor--almendro { display: block; right: -14%; top: 1%; width: 9rem; opacity: 0.85; }
  .decor--diente   { display: block; right: -10%; top: -2%; width: 6rem; opacity: 0.8; }
}

/* ============================================================
   23. Estado de partida de las animaciones
   El texto solo se esconde si el JS ha podido arrancar y GSAP ha llegado.
   Sin JS, con el CDN caído o con un adblocker, la web se ve entera.
   ============================================================ */

html.js-anim .reveal-line > span { transform: translateY(125%); }
html.js-anim .split-words .w { opacity: 0; transform: translateY(0.6em); }
html.js-anim .img-reveal img { clip-path: inset(0 0 100% 0); transform: scale(1.12); }

/* ============================================================
   24. Movimiento reducido
   Se quita el movimiento, no la retroalimentación: los cambios de color
   y de opacidad se conservan porque ayudan a entender la interfaz.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  html.js-anim .reveal-line > span { transform: none; }
  html.js-anim .split-words .w { opacity: 1; transform: none; }
  html.js-anim .img-reveal img { clip-path: none; transform: none; }
  .hero__scroll-line::after,
  .fab { animation: none; }
  .fab--wa::before { animation: none; opacity: 0; }
  .menu__links a { transition-delay: 0s !important; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color, box-shadow, fill, stroke, outline-color !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ============================================================
   25. Impresión
   Una página de precios que se imprime con el fondo verde y los botones
   flotantes no parece una web cara.
   ============================================================ */

@media print {
  .nav, .menu, .fab-dock, .cookies, .grain, .progress, .petalo, .intro, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .contact, .benefits, .footer, .menu { background: #fff !important; color: #000 !important; }
  .contact::after, .benefits::after, .footer::after { display: none !important; }
  .contact__inner, .benefit p, .footer__row, .contact__where { color: #000 !important; }
  .section, .pagehero { padding: 1.5cm 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .card, .price { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .footer__big { display: none; }
  /* En papel el pie se reduce a quien es y como contactar: los menus de
     navegacion no llevan a ninguna parte cuando la pagina esta impresa. */
  .footer__social, .footer__col:not(:last-child) { display: none !important; }
  .footer__inner { display: block !important; padding-bottom: 0.4cm; }
  .footer__mark { filter: none !important; }
  .footer__logo, .footer__claim, .footer__where, .footer__title,
  .footer__nota, .footer__copy,
  .footer__list a, .footer__legal a { color: #000 !important; }
  .footer__word em { color: #444 !important; }
}

/* ============================================================
   26. Aviso de apertura
   El local todavia no esta abierto. La pastilla y su nota lo dicen sin
   frenar la reserva: quien entra ahora coge sitio en el primer grupo.
   Va al final de la hoja a proposito, para poder retirarla entera el dia
   que se abra sin tocar ninguna otra regla.
   ============================================================ */

.apertura {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sans);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.015em;
  color: var(--gold-ink);
  background: rgb(var(--gold-rgb) / 0.13);
  border: 1px solid rgb(var(--gold-rgb) / 0.42);
  border-radius: 999px;
  padding: 0.34rem 0.9rem 0.36rem;
  white-space: nowrap;
}
.apertura::before {
  content: ""; flex: none;
  width: 0.48rem; height: 0.48rem; border-radius: 50%;
  background: var(--gold);
  animation: respira-apertura 3.6s var(--ease-in-out) infinite;
}
/* Sobre el verde de la seccion de contacto y del pie */
.apertura--claro {
  color: var(--gold-soft);
  background: rgb(var(--cream-rgb) / 0.08);
  border-color: rgb(233 206 150 / 0.45);   /* --gold-soft, que no tiene canales sueltos */
}
.apertura--claro::before { background: var(--gold-soft); }

@keyframes respira-apertura {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.6); opacity: 0.5; }
}

/* La frase que acompana a la pastilla */
.apertura-nota {
  font-size: var(--step--1);
  color: var(--forest-soft);
  max-width: 34rem;
  text-wrap: pretty;
}
.apertura-nota--claro { color: rgb(var(--cream-rgb) / 0.78); max-width: 40rem; }
/* Pastilla y frase en la misma linea, con la frase alineada consigo misma
   cuando pasa de una linea. Se usa dentro del bloque final de los articulos. */
.apertura-linea {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.85rem;
  margin-bottom: var(--space-m);
}
.apertura-linea > span:last-child { flex: 1 1 16rem; }

/* Hero: pastilla y frase van en la misma pieza, encima del antetitulo.
   En movil el hero cabe justo en una pantalla, asi que ahi se queda solo la
   pastilla: ya dice lo esencial y la frase entera se lee en el bloque de
   contacto de mas abajo. */
.hero__apertura {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 0.9rem;
  max-width: 48rem;
  font-size: var(--step--1);
  color: var(--forest-soft);
  text-wrap: pretty;
}

/* Cabecera de paginas interiores */
.pagehero .apertura { margin-bottom: var(--space-xs); }
.pagehero .apertura-nota { margin-top: var(--space-s); }

/* Seccion de contacto: la pastilla y su frase forman un bloque, separado de
   los botones por el mismo aire que el subtitulo tiene por arriba. */
/* El margen negativo recorta el space-l que ya empuja el subtitulo, en vez
   de tocar la regla de .contact__sub: asi las paginas sin aviso no cambian. */
.contact__apertura {
  margin-top: calc(var(--space-m) - var(--space-l));
  margin-bottom: var(--space-2xs);
}
.contact .apertura-nota { margin: 0 auto var(--space-l); }

@media (max-width: 640px) {
  .apertura { font-size: var(--step--2); padding: 0.3rem 0.75rem 0.32rem; }
  .apertura-nota { font-size: var(--step--2); }
  .hero__apertura-txt { display: none; }
}

/* El hero cabia justo en una pantalla y el aviso le anade una linea. En las
   pantallas mas bajas (portatiles de 720 px y moviles antiguos) se recorta el
   respiro de arriba y abajo lo justo para que siga cabiendo exacto. Punto de
   ruptura por altura, no por ancho: es la altura la que va escasa. */
@media (max-height: 760px) {
  .hero {
    padding-top: clamp(5rem, 12vh, 7rem);
    padding-bottom: clamp(2rem, 5vh, 3.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .apertura::before { animation: none; }
}