/* ==========================================================
   NOTA SOBRE LOS ":hover" DE ESTE ARCHIVO
   ----------------------------------------------------------
   Van envueltos en "@media (hover:hover)". En un movil no existe
   pasar por encima: el navegador finge un hover al tocar y lo
   deja PUESTO hasta que toques otra cosa. Resultado: pulsas un
   boton, te lleva a otro sitio, vuelves y el boton sigue
   iluminado como si tuvieras el dedo encima.

   La envoltura va rule a rule y en su sitio, no agrupada al
   final: una media query no cambia la especificidad ni el orden,
   asi que la cascada queda exactamente igual que antes en un
   ordenador, y en el movil esas reglas sencillamente no existen.
   ========================================================== */

/* =============================================================
   EFECTO MARIPOSA — landing v8
   ============================================================= */

:root {
  /* LA CORRECCIÓN ÓPTICA DE LA SERIF — UN SOLO NÚMERO.
     ----------------------------------------------------------
     Esta web mezcla dos tipografías en la misma línea: Space
     Grotesk para el cuerpo y Instrument Serif en cursiva para la
     palabra que canta ("¿Por qué *Efecto Mariposa*?"). Este número
     compensa lo que se descuadre entre las dos.

     Estaba escrito a mano en TREINTA Y TRES sitios con cinco
     valores distintos —1.05, 1.06, 1.08, 1.1 y 1.14— puestos a ojo
     cada vez que hacía falta. Ahora los treinta y tres apuntan aquí.

     Y el valor sale de las tipografías, no del ojo. Preguntado al
     navegador con las fuentes REALES cargadas, por cada 100 de
     cuerpo:

         Space Grotesk 700   mayúscula 70   equis 49,6
         Instrument Serif    mayúscula 72   equis 51,0

     O sea que la serif NO es más baja: es dos puntos más ALTA. El
     factor que iguala las mayúsculas es 0,97 — hay que encogerla,
     no agrandarla.

     Aquí estuvo puesto un 1,18, sacado de medir píxeles en la
     grabación de un móvil. Estaba mal: el recorte de la captura
     cortaba la parte de arriba de las letras y salían más bajas de
     lo que son. Con ese 1,18 las palabras en serif crecían un 21 %
     y todo lo que tenían al lado —el nombre de la marca en el
     manifiesto, sin ir más lejos— parecía encogido.

     Se queda en 1,04: las mayúsculas quedan a menos de un 5 % y ese
     pelo de más compensa que la cursiva, a peso 400 contra un 700,
     se lee más ligera. La lección: medir el fichero, no la foto. */
  --serif-cuerpo: 1.04em;

  --white: #ffffff;
  --black: #000000;
  --paper: #f6f4ef;
  --paper-2: #efece5;
  --ink: #0a0a0a;
  --ink-soft: #1a1a1a;
  --mute: #6a6a6a;
  --mute-2: #a09c92;
  --line: #e6e2d9;
  --line-strong: #cfc9bc;
  --video-bg: #0a0a0a;

  --dark: #0e0d0b;
  --dark-2: #14120f;
  --dark-line: #2a2622;
  --dark-mute: #7a736a;
  --gold: #d7c7a1;

  --sans:  "Space Grotesk", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;

  --fs-phrase: clamp(2rem, 7vw, 5.2rem);
  --fs-brand:  clamp(1.9rem, 6vw, 4.4rem);
  --fs-phrase-small: clamp(0.82rem, 1.2vw, 1.05rem);
  --fs-wordmark: clamp(0.86rem, 1.3vw, 1rem);
  --fs-cta: clamp(0.9rem, 1.3vw, 1rem);
  --fs-m: clamp(0.95rem, 1.4vw, 1rem);
  --fs-s: 0.84rem;
  --fs-xs: 0.74rem;

  --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.25rem; --sp-5: 3.5rem; --sp-6: 5.5rem;
  --r-rect: clamp(20px, 3vw, 34px);
  --r-btn: 999px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --frame: clamp(12px, 2vw, 28px);
  --video-fit: cover;

  /* Aquí vivía --cursor-butterfly, una mariposa que sustituía al
     puntero del sistema. Se ha quitado.

     Un cursor propio parece un detalle de marca y en realidad es
     una molestia: tapa lo que estás señalando, deja de indicar en
     qué estado está cada cosa —el navegador cambia el puntero para
     decirte "esto se pulsa", "esto se escribe", "esto se
     arrastra"— y el sustituto no cambia nunca. Además solo salía
     en las páginas que cargan esta hoja, así que el puntero
     cambiaba al pasar de la portada a cualquier otra, que es peor
     que no tenerlo. */

  --scroll-room: 160vh;

  --strip-h:   clamp(58px, 5.4vw, 82px);
  --strip-gap: clamp(2rem, 4.5vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  font-family: var(--sans);
  font-size: var(--fs-m);
  color: var(--ink);
  background: var(--white);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  /* OJO: 'overflow-x: hidden' aquí convierte el body en contenedor de
     scroll y ROMPE position:sticky del hero. En escritorio algunos
     navegadores lo toleran; Safari en móvil no, y el rectángulo del
     vídeo se iba con el scroll en vez de quedarse fijo (el vídeo
     parecía congelado).
     'clip' recorta igual pero NO crea contenedor de scroll. */
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

a, button, .cta, .ui__menu, .side__close, input, textarea, label { cursor: pointer; }

body.is-prereveal { overflow: hidden; }
body.is-popup-open { overflow: hidden; }

em, .em {
  font-style: italic;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0;
}

/* ============ LANG TOGGLE ============ */
.lang-toggle {
  position: fixed;
  top: clamp(0.9rem, 1.6vw, 1.4rem);
  right: clamp(0.9rem, 1.6vw, 1.4rem);
  z-index: 50;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px) saturate(0.9);
  -webkit-backdrop-filter: blur(10px) saturate(0.9);
  border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.25);
}
.lang-toggle button {
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}
.lang-toggle button.is-active {
  background: var(--white);
  color: var(--ink);
}
body.page-inner .lang-toggle {
  background: rgba(0,0,0,0.06);
}
body.page-inner .lang-toggle button {
  color: var(--mute);
}
body.page-inner .lang-toggle button.is-active {
  background: var(--ink);
  color: var(--white);
}

/* ============ PRE-REVEAL ============ */
.prereveal {
  position: fixed; inset: 0; z-index: 200;
  background: var(--white);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  transition: opacity 800ms var(--ease-out), visibility 800ms;
  overflow: hidden;
}
body.is-revealed .prereveal { opacity: 0; visibility: hidden; pointer-events: none; }

/* Patrón sutil de mariposas simétricas de fondo */
.prereveal::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("img/marca/patron-mariposa.svg");
  background-repeat: repeat;
  background-size: 44px 44px;
  background-position: center;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

.prereveal__text {
  position: relative; z-index: 1;
  margin: 0; text-align: center; color: var(--ink);
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.65rem, 5.6vw, 4.2rem);
  line-height: 1.08; letter-spacing: -0.02em;
  text-shadow: 0 2px 1px rgba(10,10,10,0.06), 0 12px 24px rgba(10,10,10,0.14);
  max-width: min(100%, 22ch);
  padding: 0 clamp(1.2rem, 4vw, 3rem);
  word-break: keep-all;
  hyphens: none;
  opacity: 0; transform: translateY(10px);
  animation: prereveal-in 1000ms var(--ease-out) 150ms forwards;
}
.prereveal__line { display: block; }
.prereveal__line:nth-child(1) { animation: line-in 850ms var(--ease-out) 150ms both; }
.prereveal__line:nth-child(2) { animation: line-in 850ms var(--ease-out) 470ms both; }
@keyframes prereveal-in { to { opacity: 1; transform: none; } }
@keyframes line-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.prereveal__text em, .hero__phrase em, .popup__title em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400;
  font-size: var(--serif-cuerpo, 1.04em);
  padding: 0 0.02em;
}

/* ============ HERO ============ */
.page-home .hero {
  position: relative;
  height: calc(100dvh + var(--scroll-room));
  padding: 0 var(--frame);
}
.hero__rect {
  position: sticky; top: var(--frame);
  width: 100%;
  height: calc(100dvh - (var(--frame) * 2));
  min-height: 560px;
  background: var(--video-bg);
  border-radius: var(--r-rect);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.25);
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: var(--video-fit);
  object-position: center center;
  pointer-events: none;
  filter: brightness(0.82) saturate(0.92);
  /* fuerza capa GPU propia → el seek no repinta el resto del layout */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.glass {
  position: absolute; inset: 0; z-index: 1;
  /* Sin backdrop-filter: recalcularlo en cada frame del scrub
     era lo que provocaba los tirones. Gradiente equivalente. */
  background: linear-gradient(180deg, rgba(15,15,15,0.34) 0%, rgba(15,15,15,0.20) 45%, rgba(15,15,15,0.40) 100%);
  pointer-events: none;
}
.hero__scrim { position: absolute; inset-inline: 0; height: 22%; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 800ms var(--ease-out) 200ms; }
.hero__scrim--top    { top: 0;    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0)); }
.hero__scrim--bottom { bottom: 0; background: linear-gradient(0deg,   rgba(0,0,0,0.30), rgba(0,0,0,0)); }
body.is-revealed .hero__scrim { opacity: 1; }

/* EFECTO MARIPOSA — logo SVG oficial */
.hero__brand {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px) scale(1.04);
  filter: blur(6px);
  transition:
    opacity 900ms var(--ease-out) 250ms,
    transform 900ms var(--ease-out) 250ms,
    filter 900ms var(--ease-out) 250ms;
}
.hero__brand-img {
  width: clamp(240px, 42vw, 560px);
  height: auto;
  object-fit: contain;
  /* SVG viene en gris/negro → forzamos blanco puro sobre el vídeo */
  filter: brightness(0) invert(1) drop-shadow(0 4px 20px rgba(0,0,0,0.4));
}
body.is-revealed .hero__brand { opacity: 1; transform: none; filter: none; }

/* Frase pequeña abajo */
.hero__phrase {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 0; right: 0;
  z-index: 3;
  margin: 0;
  padding: 0 clamp(1rem, 3vw, 2rem);
  text-align: center;
  color: var(--white);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-phrase-small);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 800ms var(--ease-out) 650ms, transform 800ms var(--ease-out) 650ms;
  pointer-events: none;
}
body.is-revealed .hero__phrase { opacity: 0.95; transform: none; }

/* ============ UI TOP ============ */
.ui {
  position: absolute; inset-inline: 0; z-index: 4;
  padding: clamp(0.9rem, 2vw, 1.6rem) clamp(1rem, 2.6vw, 2rem);
  opacity: 0; pointer-events: none;
  transition: opacity 800ms var(--ease-out) 250ms, transform 800ms var(--ease-out) 250ms;
}
.ui--top {
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  transform: translateY(-8px);
}
.ui--top > * { min-width: 0; }
.ui--top .cta--hero { justify-self: center; }
body.is-revealed .ui { opacity: 1; transform: none; pointer-events: auto; }

.ui__logo { display: inline-flex; align-items: center; justify-self: start; }
.ui__logo img {
  /* height fija + width:auto: mantiene la proporción original.
     Nunca poner width y height a la vez, o se aplasta. */
  height: clamp(38px, 4.2vw, 54px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 14px rgba(0,0,0,0.4));
}

.ui__menu {
  justify-self: end;
  width: clamp(34px, 3.8vw, 42px);
  aspect-ratio: 1;
  height: auto;
  display: grid; place-items: center;
  padding: 2px;
  border-radius: 999px; color: var(--white);
  transition: background-color 240ms var(--ease); position: relative;
}
@media (hover:hover){.ui__menu:hover{ background: rgba(255,255,255,0.14); }}
/* ---- Menú: sticker del logo ---- */
.menu-sticker {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.menu-sticker img {
  /* width:auto + height:auto + object-fit:contain = NUNCA se deforma,
     pase lo que pase con el tamaño del botón. */
  width: auto;
  height: auto;
  /* 76%: deja aire dentro del botón y hace que la mariposa se lea
     más pequeña que el sticker del cazamariposas del logo. */
  max-width: 76%;
  max-height: 76%;
  object-fit: contain;
  /* Halo permanente: esta mariposa es la que abre el menú y sobre
     el vídeo se perdía. El resplandor la despega del fondo sea
     cual sea el fotograma que haya detrás. */
  transition: transform 340ms var(--ease-out), filter 340ms var(--ease-out);
  animation: mariposa-latido 2.8s ease-in-out infinite;
}
@keyframes mariposa-latido {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,255,255,0.9))
                     drop-shadow(0 0 18px rgba(255,255,255,0.45)); }
  50%      { filter: drop-shadow(0 0 15px rgba(255,255,255,1))
                     drop-shadow(0 0 32px rgba(255,255,255,0.75)); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-sticker img { animation: none;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.95)); }
}
@media (hover:hover){.ui__menu:hover .menu-sticker img, .page__menu:hover .menu-sticker img, .method-hero__menu:hover .menu-sticker img{ transform: scale(1.1) rotate(-5deg); }}

/* ============ CTA ============ */
.cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.7rem;
  background: var(--white); color: var(--ink);
  border-radius: var(--r-btn);
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-cta); line-height: 1;
  /* Todos los botones en mayúscula. Se hace aquí y no escribiendo el
     texto en mayúsculas en el HTML: así el contenido se sigue leyendo
     y editando en normal, los lectores de pantalla no deletrean, y no
     hay forma de que a un botón nuevo se le olvide.
     El letter-spacing sube porque en mayúsculas, junto, se apelmaza. */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  overflow: hidden; isolation: isolate;
  transition: transform 260ms var(--ease), background-color 260ms var(--ease),
              color 260ms var(--ease), padding 260ms var(--ease);
  will-change: transform;
  white-space: nowrap;
}
.cta__label { position: relative; z-index: 2; }
.cta__arrow { display: inline-grid; place-items: center; transition: transform 260ms var(--ease); position: relative; z-index: 2; }
/* Al pasar por encima el botón invierte el color y se ABRE: crece
   un poco por los cuatro lados, para quien navega con el teclado. */
.cta:hover, se levanta y proyecta sombra, así
   que parece que se despega del papel. Es el gesto más visible que
   se puede hacer sin que el botón dé un salto y despiste.
   :focus-visible va igual, .cta:focus-visible{
  padding-left: 2rem;
  padding-right: 2rem;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-3px) scale(1.035);
  box-shadow: 0 14px 30px rgba(0,0,0,0.20);
  letter-spacing: 0.11em;
}
.cta:focus-visible .cta__arrow{ transform: translateX(4px); }
@media (hover:hover){.cta:hover .cta__arrow{ transform: translateX(4px); }}
/* Al soltar vuelve a su sitio: confirma que se ha pulsado. */
.cta:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0,0,0,0.14); }
.cta { transition: transform 300ms var(--ease-out), background-color 260ms var(--ease),
                   color 260ms var(--ease), padding 300ms var(--ease-out),
                   letter-spacing 300ms var(--ease-out),
                   box-shadow 300ms var(--ease-out); }

.cta__glow {
  position: absolute; inset: -14px; border-radius: var(--r-btn);
  background: radial-gradient(closest-side, rgba(255,255,255,0.85), rgba(255,255,255,0));
  filter: blur(14px); opacity: 0; z-index: -1; pointer-events: none;
}
body.is-revealed .cta--hero .cta__glow { animation: cta-pulse 3s ease-in-out 1.4s infinite; }
.cta--foot .cta__glow, .cta--popup .cta__glow { animation: cta-pulse 3s ease-in-out 0.8s infinite; }
@keyframes cta-pulse {
  0%, 100% { opacity: 0.28; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.22); }
}
.cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.75) 48%, rgba(255,255,255,0.75) 52%, transparent 70%);
  transform: translateX(-140%); pointer-events: none; z-index: 1;
}
body.is-revealed .cta--hero::before, .cta--foot::before, .cta--popup::before {
  animation: cta-shimmer 4.2s ease-in-out 2.4s infinite;
}
@keyframes cta-shimmer {
  0% { transform: translateX(-140%); } 55% { transform: translateX(140%); } 100% { transform: translateX(140%); }
}
@media (hover:hover){.cta:hover .cta__glow, .cta:hover::before{ animation-play-state: paused; opacity: 0; }}
.cta--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); overflow: visible; }
.cta--ghost .cta__glow, .cta--ghost::before { display: none; }
@media (hover:hover){.cta--ghost:hover{ background: var(--ink); color: var(--white); }}
.cta--hero {
  padding: 0.85rem 1.5rem;
  font-size: clamp(0.86rem, 1.2vw, 0.98rem);
  max-width: 100%;
  min-width: 0;
}
.cta--hero .cta__label { overflow: hidden; text-overflow: ellipsis; }
.cta--dark { background: var(--ink); color: var(--white); }
.cta--dark:focus-visible{
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}
@media (hover:hover){/* Inversión de verdad: el oscuro se vuelve claro. Antes pasaba a
   un negro un punto más suave y el cambio no se apreciaba. */
.cta--dark:hover{
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}}
.cta--big { padding: 1.15rem 2rem; font-size: 1.05rem; }

/* ============ STRIP (con nuevos SVG) ============ */
.strip { padding: clamp(1.2rem, 2.5vw, 2rem) 0; background: var(--white); overflow: hidden; }
.strip__scroller {
  width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.strip__track {
  display: flex;
  align-items: center;
  width: max-content;
  /* animacion continua; -50% cae exactamente en el inicio del 2o grupo */
  /* 5 grupos idénticos. La animación desplaza exactamente el ancho
     de UN grupo (100/5 = 20%), así que al reiniciar el grupo 2 cae
     donde estaba el 1: costura invisible.
     Con solo 2 grupos y -50% quedaba ~1000 px de contenido visible,
     menos que cualquier pantalla de escritorio -> hueco a la derecha. */
  animation: strip-scroll 19s linear infinite;
  will-change: transform;
}
/* Cada grupo es identico e incluye su separacion final:
   asi el salto de -50% es invisible. */
.strip__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--strip-gap);
  padding-right: var(--strip-gap);
}
.strip__item {
  flex: 0 0 auto;
  height: var(--strip-h);
  width: auto;
  object-fit: contain;
  opacity: 0.9;
}
@keyframes strip-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-20%,0,0); } }

/* ============ ¿POR QUÉ EM? ============ */
.why-em { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.2rem, 3vw, 2.5rem); background: var(--white); }
.why-em__card {
  max-width: 1400px; margin: 0 auto;   /* mismo ancho que .cats y .fam */
  background: var(--paper);
  border-radius: var(--r-rect);
  padding: clamp(2rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: 1.15fr 0.4fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  min-height: 460px;
}
.why-em__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}
.why-em__title {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.6rem);
  letter-spacing: -0.02em; line-height: 1;
  color: var(--mute-2);
}
.why-em__title em { font-family: var(--serif); font-style: italic; font-size: var(--serif-cuerpo, 1.04em); color: var(--ink); }

/* El título es el disparador: al pasarle el cursor (o al enfocar con
   teclado) se despliega el texto. Sustituye al antiguo <details>. */
.why-em__left {
  outline: none;
  cursor: default;
}
.why-em__title {
  position: relative;
  width: fit-content;
  cursor: help;
  transition: color 420ms var(--ease);
}
/* Subrayado que se dibuja de izquierda a derecha */
.why-em__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.12em;
  height: 2px;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--ease-out);
}
.why-em__left:focus-within .why-em__title{ color: var(--ink); }
@media (hover:hover){.why-em__left:hover .why-em__title{ color: var(--ink); }}
.why-em__left:focus-within .why-em__title::after{ transform: scaleX(1); }
@media (hover:hover){.why-em__left:hover .why-em__title::after{ transform: scaleX(1); }}

/* Mismo truco que en las tarjetas: 0fr -> 1fr anima la altura real
   sin tener que adivinar cuánto ocupa el párrafo. */
.why-em__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 620ms var(--ease-out),
    opacity 460ms var(--ease);
}
.why-em__left:focus-within .why-em__reveal{
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 90ms;
}
@media (hover:hover){.why-em__left:hover .why-em__reveal{
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 90ms;
}}
.why-em__text {
  overflow: hidden;
  min-height: 0;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 48ch;
  text-wrap: pretty;
}


.why-em__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.why-em__center { min-height: 200px; }
.why-em__right { display: flex; flex-direction: column; gap: 0.9rem; }
.insight {
  padding: 1.2rem 2rem; background: var(--white); border-radius: 999px;
  text-align: center; color: var(--mute-2);
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  box-shadow: 0 2px 10px -4px rgba(0,0,0,0.1);
  transition: transform 240ms var(--ease), color 240ms var(--ease);
}
@media (hover:hover){.insight:hover{ transform: translateY(-2px); color: var(--ink); }}
.insight em { font-family: var(--serif); font-style: italic; color: var(--ink); }
/* Las tres frases destacan en NEGRITA, no en cursiva serif: aquí la
   palabra clave tiene que sonar a afirmación, no a matiz. */
.insight strong { font-family: var(--sans); font-weight: 700; font-style: normal; color: var(--ink); }

/* ============ BOOKING FLOW ============ */
.booking { padding: clamp(2rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem); background: var(--white); }
.booking__inner {
  max-width: 1400px; margin: 0 auto;   /* mismo ancho que .cats y .fam */
  background: var(--paper);
  border-radius: var(--r-rect);
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
}
.booking__title {
  margin: 0 0 0.4rem;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -0.02em; line-height: 1;
  color: var(--ink);
}
.booking__title em { font-family: var(--serif); font-style: italic; font-size: var(--serif-cuerpo, 1.04em); }
.booking__lead {
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  color: var(--mute);
  max-width: 52ch;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
}
.booking__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  text-align: left;
}
.booking__step {
  background: var(--white);
  border-radius: 22px;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: flex; flex-direction: column; gap: 0.5rem;
  min-height: 200px;
}
.booking__step-num {
  display: inline-block;
  font-family: var(--sans); font-weight: 700; font-size: 2.4rem;
  letter-spacing: -0.02em; color: var(--mute-2); line-height: 1;
  margin-bottom: 0.4rem;
}
.booking__step h3 { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 1.1rem; }
.booking__step p { margin: 0.2rem 0 0; color: var(--mute); font-size: 0.93rem; line-height: 1.5; }
.booking__note {
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  max-width: 56ch;
  color: var(--mute);
  font-size: 0.88rem;
}
.booking__note em { font-family: var(--serif); font-style: italic; font-size: var(--serif-cuerpo, 1.04em); color: var(--ink); }

/* ============ MEGA FOOTER — ilustración de fondo + contenido dentro ============ */
.mega-foot {
  /* negro puro: continúa la franja inferior de la ilustración sin costura */
  background: var(--black);
  position: relative;
}

/* Stack: la ilustración y el contenido comparten la misma celda de grid */
.mega-foot__stack {
  display: grid;
  grid-template-areas: "stack";
  width: 100%;
}
.mega-foot__stack > * { grid-area: stack; min-width: 0; }

/* Ilustración completa, sin recortes */
.mega-foot__art {
  width: 100%;
  display: block;
  line-height: 0;
  align-self: start;
  /* Alarga la franja negra por debajo de la hierba. El contenido
     va anclado abajo, así que baja con ella y deja de estar
     pegado a la ilustración. En móvil el pie ya es alto de por
     sí (las columnas se apilan), por eso el mínimo es pequeño. */
  margin-bottom: clamp(1rem, 5vw, 5rem);
}
.mega-foot__art img {
  width: 100%;
  height: auto;
  display: block;
}

/* Contenido: anclado abajo, sobre la zona beige de la ilustración */
.mega-foot__body {
  align-self: end;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.2fr) minmax(180px, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  /* Más aire por abajo en pantallas grandes: el contenido quedaba
     pegado al borde de la ilustración y se leía apretado. */
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 4rem) clamp(1.6rem, 4vw, 4rem);
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* Columna izquierda — enlaces */
.mega-foot__nav {
  display: flex; flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.mega-foot__col { min-width: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.mega-foot__title {
  margin: 0 0 0.2rem;
  font-family: var(--sans); font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--white);
}
.mega-foot__list { display: flex; flex-direction: column; gap: 0.5rem; }
.mega-foot__list a {
  color: rgba(255,255,255,0.62); font-size: 0.95rem;
  transition: color 200ms var(--ease);
  display: inline-flex; align-items: center; gap: 0.5rem;
  width: fit-content;
}
@media (hover:hover){.mega-foot__list a:hover{ color: var(--white); }}

/* Columna central — CTA */
.mega-foot__center {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 0.9rem;
  padding-top: 0.1rem;
}
.mega-foot__signup-title {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  letter-spacing: -0.01em; color: var(--white);
}
.mega-foot__signup-copy {
  margin: 0;
  color: rgba(255,255,255,0.62);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 34ch;
}
.mega-foot__signup-copy em { font-family: var(--serif); font-style: italic; color: var(--white); font-size: var(--serif-cuerpo, 1.04em); }
.mega-foot__cta {
  margin-top: 0.4rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  background: var(--white); color: var(--ink);
  border-radius: 999px;
  font-family: var(--sans); font-weight: 600;
  font-size: 0.98rem; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.08em;   /* igual que .cta */
  transition: transform 240ms var(--ease), background-color 240ms var(--ease);
}
/* En el pie el botón es blanco sobre negro: al invertir se queda
   negro con borde blanco, que sobre ese fondo sigue leyéndose. */
.mega-foot__cta:focus-visible{
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--white), 0 12px 26px rgba(0,0,0,0.5);
  transform: translateY(-3px) scale(1.035);
  letter-spacing: 0.11em;
}
@media (hover:hover){.mega-foot__cta:hover{
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--white), 0 12px 26px rgba(0,0,0,0.5);
  transform: translateY(-3px) scale(1.035);
  letter-spacing: 0.11em;
}}
.mega-foot__cta {
  transition: transform 300ms var(--ease-out), background-color 260ms var(--ease),
              color 260ms var(--ease), letter-spacing 300ms var(--ease-out),
              box-shadow 300ms var(--ease-out);
}

/* Columna derecha — redes + copyright */
.mega-foot__right {
  display: flex; flex-direction: column;
  align-items: flex-end; text-align: right;
  gap: 0.9rem;
}
.mega-foot__social {
  display: flex; gap: 0.5rem;
}
.mega-foot__social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  transition: transform 220ms var(--ease), background-color 220ms var(--ease);
}
@media (hover:hover){.mega-foot__social a:hover{ transform: translateY(-2px) scale(1.06); background: var(--paper); }}
.mega-foot__copy {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: 0.9rem; color: var(--white);
}
.mega-foot__badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  font-size: 0.78rem; color: rgba(255,255,255,0.62);
  transition: border-color 220ms var(--ease), color 220ms var(--ease);
}
@media (hover:hover){.mega-foot__badge:hover{ border-color: var(--white); color: var(--white); }}

/* Wordmark gigante inferior — cubre todo el ancho */
.mega-foot__wordmark {
  display: block;
  width: 100%;
  padding: 0 clamp(0.5rem, 1.5vw, 1.2rem);
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  /* clip solo lo que sobresale por los lados; deja respirar en vertical */
  overflow: hidden;
}
.mega-foot__wordmark span {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.2vw;
  /* line-height >= 1 para que la caja contenga las mayusculas enteras */
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--white);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  /* sin scaleY: era lo que empujaba las letras fuera de la caja */
}


/* ---- Widget de Calendly incrustado ----
   Se abre sobre la web, así que el cursor mariposa y nuestros estilos
   no deben interferir dentro del iframe. */
.calendly-overlay { z-index: 400 !important; }
.calendly-overlay .calendly-popup {
  border-radius: 18px !important;
  overflow: hidden !important;
  max-height: min(92vh, 900px) !important;
}
.calendly-overlay .calendly-popup-close { cursor: pointer; }
.calendly-overlay iframe { cursor: auto; }


/* ============ PÁGINA DE GRACIAS ============ */
.gracias {
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  padding: clamp(2rem, 6vw, 4.5rem) 0;
}
.gracias__title { text-align: center; margin-bottom: 0.6rem; }
.gracias__lead {
  margin: 0 auto clamp(1.5rem, 3vw, 2.2rem);
  max-width: 44ch;
}
.gracias__cuenta {
  margin: 0 0 clamp(1.5rem, 3vw, 2.2rem);
  color: var(--mute);
  font-size: 0.86rem;
}
.gracias__cuenta button {
  color: var(--ink);
  font-size: inherit;
  font-family: inherit;
  border-bottom: 1px solid var(--line-strong);
  padding: 0;
  transition: border-color 200ms var(--ease);
}
@media (hover:hover){.gracias__cuenta button:hover{ border-color: var(--ink); }}
#graciasSegundos {
  font-variant-numeric: tabular-nums;   /* el número no baila al cambiar */
  font-weight: 700;
  color: var(--ink);
}

.gracias__detalle {
  background: var(--paper);
  border-radius: 18px;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  margin: 0 auto clamp(1.2rem, 2.5vw, 1.8rem);
  max-width: 34rem;
}
.gracias__cuando {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.gracias__donde {
  margin: 0;
  color: var(--mute);
  font-size: 0.92rem;
  line-height: 1.5;
}
.gracias__pasos {
  list-style: none;
  margin: 0 auto clamp(1.8rem, 3vw, 2.4rem);
  padding: 0;
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: left;
}
.gracias__pasos li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.gracias__pasos li::before {
  content: "";
  position: absolute;
  left: 0.2rem; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink);
}
.gracias__acciones {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ POPUP MODAL FULLSCREEN ============ */
.popup-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15,15,15,0.55);
  backdrop-filter: blur(8px) saturate(0.85);
  -webkit-backdrop-filter: blur(8px) saturate(0.85);
  display: grid; place-items: center;
  padding: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 500ms var(--ease-out);
}
.popup-overlay.is-open { opacity: 1; pointer-events: auto; }
.popup {
  position: relative;
  background: var(--white);
  border-radius: var(--r-rect);
  padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 520px; width: 100%;
  text-align: center;
  transform: scale(0.94) translateY(20px);
  transition: transform 500ms var(--ease-out);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.4);
}
.popup-overlay.is-open .popup { transform: scale(1) translateY(0); }
.popup__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 999px; color: var(--mute);
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
@media (hover:hover){.popup__close:hover{ background: var(--paper); color: var(--ink); }}
.popup__title {
  margin: 0 0 0.8rem;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  letter-spacing: -0.02em; line-height: 1.1;
}
.popup__body { margin: 0 0 2rem; color: var(--mute); font-size: 0.98rem; max-width: 40ch; margin-left: auto; margin-right: auto; }
.cta--popup { background: var(--ink); color: var(--white); }
.cta--popup:focus-visible{ background: var(--white); color: var(--ink); }
@media (hover:hover){.cta--popup:hover{ background: var(--white); color: var(--ink); }}

/* ============ WAIVER MODAL ============ */
.waiver-overlay {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(15,15,15,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center;
  padding: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.waiver-overlay.is-open { opacity: 1; pointer-events: auto; }
.waiver {
  background: var(--white);
  border-radius: var(--r-rect);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  max-width: 620px; width: 100%;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  transform: scale(0.95) translateY(20px);
  transition: transform 400ms var(--ease-out);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.4);
  position: relative;
}
.waiver-overlay.is-open .waiver { transform: scale(1) translateY(0); }
.waiver__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 999px; color: var(--mute);
}
@media (hover:hover){.waiver__close:hover{ background: var(--paper); color: var(--ink); }}
.waiver__title {
  margin: 0 0 0.4rem;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  letter-spacing: -0.01em;
}
.waiver__lead { margin: 0 0 1.2rem; color: var(--mute); font-size: 0.95rem; }
.waiver__body { margin: 0 0 1.2rem; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.waiver__body ul { list-style: disc; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.waiver__accept { display: flex; align-items: flex-start; gap: 0.7rem; margin: 1.2rem 0; font-size: 0.95rem; color: var(--ink); cursor: pointer; }
.waiver__accept input { margin-top: 0.25rem; cursor: pointer; }
.waiver__cta {
  width: 100%; justify-content: center;
  background: var(--ink); color: var(--white);
  padding: 1.1rem 2rem;
  opacity: 0.4; pointer-events: none;
  transition: opacity 240ms var(--ease);
}
.waiver.is-accepted .waiver__cta { opacity: 1; pointer-events: auto; }

/* ============ MENÚ LATERAL ============ */
/* El menú se oculta desde AQUÍ, no desde el panel de dentro. Antes lo
   escondía una regla del panel antiguo; al cambiar el contenido, la
   ruleta se quedó visible siempre y el botón de cerrar parecía no
   hacer nada. El contenedor manda: lo que haya dentro puede cambiar
   sin que se rompa el abrir y cerrar. */
.side {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 260ms var(--ease), visibility 0s linear 260ms;
}
.side.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: opacity 260ms var(--ease), visibility 0s;
}
.side__scrim { position: absolute; inset: 0; background: rgba(20,20,20,0.28); backdrop-filter: blur(4px); opacity: 0; transition: opacity 340ms var(--ease); }
.side.is-open .side__scrim { opacity: 1; }
.side__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 88vw);
  background: var(--white); padding: clamp(1.2rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; gap: var(--sp-4);
  transform: translateX(100%);
  transition: transform 480ms var(--ease-out);
  box-shadow: -20px 0 60px -20px rgba(0,0,0,0.2);
}
.side.is-open .side__panel { transform: translateX(0); }
.side__head { display: flex; align-items: center; justify-content: space-between; }
.side__brand { font-family: var(--sans); font-weight: 700; font-size: var(--fs-wordmark); letter-spacing: 0.22em; text-transform: uppercase; }
.side__close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; transition: background-color 200ms var(--ease); }
@media (hover:hover){.side__close:hover{ background: var(--paper); }}
.side__list { display: flex; flex-direction: column; gap: 1.2rem; margin-top: var(--sp-3); }
.side__list a {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--ink); line-height: 1;
  position: relative; display: inline-block; letter-spacing: -0.01em;
}
.side__list a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 1.5px; background: var(--ink); transition: right 320ms var(--ease);
}
@media (hover:hover){.side__list a:hover::after{ right: 0; }}
.side__foot { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.side__foot .cta { width: 100%; justify-content: center; }

/* ============ PÁGINAS INTERNAS ============ */
.page { min-height: 100dvh; background: var(--paper); padding: var(--frame); }
.page__wrap {
  background: var(--white); border-radius: var(--r-rect);
  min-height: calc(100dvh - var(--frame) * 2);
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 4vw, 3rem);
  display: flex; flex-direction: column;
  /* Tope de ancho, como el resto de la web. Sin esto, en un monitor
     grande el contenido se estiraba de borde a borde: el mapa salía
     como una tira larguísima y el texto quedaba diminuto al lado.
     1500 va en línea con los 1400 de las secciones del inicio, más
     el relleno propio de esta caja. */
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
}
.page__nav { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page__logo { justify-self: start; display: inline-flex; align-items: center; }
.page__logo img { height: clamp(36px, 4vw, 48px); width: auto; object-fit: contain; }
.page__wordmark { justify-self: center; font-family: var(--sans); font-weight: 700; font-size: var(--fs-wordmark); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.page__menu {
  justify-self: end;
  width: clamp(34px, 3.8vw, 42px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  padding: 2px;
  border-radius: 999px; color: var(--ink);
  transition: background-color 240ms var(--ease);
}
@media (hover:hover){.page__menu:hover{ background: var(--paper); }}
.page__title { margin: 0 0 0.4rem; font-family: var(--sans); font-weight: 700; font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.page__title em { font-family: var(--serif); font-style: italic; font-size: var(--serif-cuerpo, 1.04em); }
.page__lead {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  /* El mínimo sube a 1.02rem: con vw puro, en pantallas grandes el
     texto crecía y en las pequeñas se quedaba por debajo de lo
     cómodo de leer. */
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  color: var(--mute);
  max-width: 60ch;
  text-wrap: pretty;
}
.page__body { flex: 1; display: block; }
.page__section { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page__section h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.6rem); margin: 0 0 0.6rem; }
.page__section p { margin: 0 0 0.6rem; color: var(--ink-soft); max-width: 70ch; line-height: 1.55; }

/* Formulario */
.form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 640px; margin: 0 auto; }
.form input, .form textarea {
  width: 100%; padding: 1.15rem 1.4rem;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); font-family: var(--sans); font-size: 1rem; color: var(--ink);
  transition: border-color 240ms var(--ease);
}
.form textarea { border-radius: 22px; min-height: 130px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--ink); }
.form input::placeholder, .form textarea::placeholder { color: var(--mute); }

/* LA ETIQUETA DE CADA CAMPO.
   ----------------------------------------------------------
   Va encima y se queda ahí mientras escribes, que es la
   diferencia con el "placeholder": ese desaparece con la primera
   letra y te deja sin saber qué campo estabas rellenando.
   También es lo que un lector de pantalla anuncia al llegar.

   El <label> envuelve al campo, así que además crece la zona
   pulsable: tocar el texto enfoca el campo. */
.form__campo { display: flex; flex-direction: column; gap: 0.42rem; }
.form__etiqueta {
  padding-left: 1.4rem;               /* alineada con el texto de dentro */
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
/* El asterisco del obligatorio, en el gris secundario: marca sin
   gritar, y ya está explicado debajo del formulario. */
.form__etiqueta b { font-weight: 600; color: var(--mute); }

/* El foco, visible. Sin esto solo cambia el filo un tono y con el
   teclado no se sabe dónde estás. */
.form input:focus-visible, .form textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.form__submit {
  margin-top: 0.6rem; padding: 1.1rem 2rem;
  border-radius: 999px; background: var(--mute); color: var(--white);
  font-family: var(--sans); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: background-color 240ms var(--ease);
}
@media (hover:hover){.form__submit:hover{ background: var(--ink); }}
.form__legal { text-align: center; color: var(--mute); font-size: 0.8rem; margin-top: 0.4rem; }

/* Mapa */
.map-wrap {
  border-radius: var(--r-rect);
  overflow: hidden;
  /* Proporción fija con suelo y techo: antes iba a 60vh, así que en
     una ventana ancha y baja el mapa era una tira de dos dedos. */
  aspect-ratio: 16 / 9;
  min-height: 320px;
  max-height: 620px;
  box-shadow: 0 10px 40px -20px rgba(0,0,0,0.15);
  margin-bottom: 1.5rem;
}
#map { width: 100%; height: 100%; }

/* Nota sobre cómo aparece el sitio en Google Maps: el nombre oficial
   del punto no coincide con la dirección postal, y sin avisar la gente
   busca "Efecto Mariposa" y no encuentra nada. */
.tienda-nota {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
  padding: 0.85rem 1.1rem;
  background: var(--paper);
  border-radius: 14px;
  border-left: 2px solid var(--ink);
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 62ch;
}
.tienda-nota svg { flex: 0 0 auto; margin-top: 0.18em; color: var(--ink); }
.tienda-nota a {
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 200ms var(--ease);
}
@media (hover:hover){.tienda-nota a:hover{ border-color: var(--ink); }}

.tienda-info {
  /* Rejilla en vez de fila suelta: en una pantalla ancha los tres
     bloques se apelotonaban a la izquierda y sobraba medio metro de
     blanco a la derecha. Ahora se reparten y en móvil se apilan. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem 3rem;
  padding: 1.2rem 0;
  color: var(--ink-soft);
}
.tienda-info strong { display: block; font-weight: 600; color: var(--ink); margin-bottom: 0.15rem; }

/* FAQ */
.faq { border-bottom: 1px solid var(--line); padding: 0.4rem 0; }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 12px; height: 12px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg); transition: transform 260ms var(--ease);
}
.faq[open] summary::after { transform: rotate(-135deg); }
.faq__answer { padding: 0 0 1.2rem; color: var(--ink-soft); max-width: 70ch; line-height: 1.6; }

/* ============ MÉTODO — carrusel Better light ============ */
.page-method { overscroll-behavior: none; }
.method-hero {
  height: 100dvh;
  background: var(--paper);
  padding: var(--frame);
  display: grid; place-items: stretch;
  overflow: hidden;
}
.method-hero__wrap {
  background: var(--white);
  border-radius: var(--r-rect);
  height: calc(100dvh - var(--frame) * 2);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  display: flex; flex-direction: column;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.method-hero__nav {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  padding-bottom: clamp(1rem, 2vw, 1.6rem);
}
.method-hero__nav .method-hero__wordmark { align-self: center; justify-self: center; }
.method-hero__menu { justify-self: end; align-self: start; }
.method-hero__logo img { height: clamp(36px, 4vw, 48px); width: auto; object-fit: contain; }
.method-hero__wordmark { font-weight: 700; letter-spacing: 0.22em; font-size: 0.9rem; color: var(--ink); text-transform: uppercase; }
.method-hero__menu {
  width: clamp(34px, 3.8vw, 42px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  padding: 2px;
  border-radius: 999px; color: var(--ink);
  transition: background 200ms;
}
@media (hover:hover){.method-hero__menu:hover{ background: var(--paper); }}

.method-hero__title-row {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 0.6rem;
  /* center, no baseline: la pastilla tiene relleno propio, así que
     por línea de base quedaba descolgada respecto al número. */
  /* Sin sangría: el título tiene que arrancar en la misma vertical que
     el escenario y el pie que van debajo. Antes llevaba padding-left y
     era el único elemento del bloque desplazado. */
}
.method-hero__step-num {
  /* Mismo tratamiento que los números de "Cómo reservar" (01/02/03):
     sans, peso 700, tracking cerrado. Antes era serif cursiva y
     desentonaba con el resto de cifras de la web. */
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 3.8rem);
  letter-spacing: -0.02em;
  color: var(--mute-2);
  line-height: 1;
  transition: color 400ms var(--ease);
}
.method-hero__step-badge {
  font-family: var(--sans); font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.18em;
  color: var(--mute);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  text-transform: uppercase;
}
.method-hero__step-title {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  color: var(--ink); letter-spacing: -0.02em; line-height: 1.1;
}
.method-hero__step-title em { font-family: var(--serif); font-style: italic; font-size: var(--serif-cuerpo, 1.04em); color: var(--ink); }

.method-hero__stage {
  flex: 1;
  display: grid;
  place-items: center;
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(3rem, 8vw, 4.5rem);
  border-radius: 22px;
  background: var(--paper);
  /* Se ajusta al texto en vez de reservar 300 px pase lo que pase:
     con relatos cortos quedaba medio rectángulo vacío. */
  min-height: 0;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
.method-hero__slide {
  grid-area: 1 / 1;            /* las seis en la misma celda */
  max-width: 42ch;             /* línea corta: se lee de un vistazo */
  text-align: center;
  opacity: 0;
  transition: opacity 450ms var(--ease-out);
  pointer-events: none;
  padding: 0 1rem;
}
.method-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.method-hero__slide p {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.55;
}
.method-hero__slide em { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: var(--serif-cuerpo, 1.04em); }

.method-hero__nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--white);
  transition: background 200ms var(--ease), transform 200ms var(--ease);
  z-index: 3;
}
@media (hover:hover){.method-hero__nav-arrow:hover{ background: var(--ink); color: var(--white); transform: translateY(-50%) scale(1.08); }}
.method-hero__nav-arrow:disabled { opacity: 0.25; cursor: not-allowed; }
.method-hero__nav-arrow--prev { left: clamp(0.6rem, 2vw, 1.6rem); }
.method-hero__nav-arrow--next { right: clamp(0.6rem, 2vw, 1.6rem); }

.method-hero__footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 1.4rem;
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
.method-hero__counter {
  font-family: var(--sans); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.06em;
  color: var(--mute);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.method-hero__progress {
  height: 2px;
  background: var(--line);
  border-radius: 2px; overflow: hidden;
}
.method-hero__progress-bar {
  height: 100%;
  background: var(--ink);
  width: 16.66%;
  transition: width 500ms var(--ease-out);
}
.method-hero__follow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--mute);
  font-family: var(--sans); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  transition: color 200ms;
}
@media (hover:hover){.method-hero__follow:hover{ color: var(--ink); }}

.method-hero__cta-row {
  margin-top: clamp(0.6rem, 1.5vw, 1rem);
  display: flex; justify-content: center;
}
.method-hero__cta-row .cta {
  background: var(--ink); color: var(--white);
}
@media (hover:hover){.method-hero__cta-row .cta:hover{ background: var(--ink-soft); color: var(--white); }}

/* ============ FAM (Somos EM + transformaciones) ============ */
.fam { padding: clamp(2rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2.5rem); background: var(--white); }

/* Panel gris envolvente: las cuatro transformaciones viven dentro de
   un mismo rectángulo, no sueltas sobre el blanco. Agrupa la sección
   y le da peso frente al resto de la página. */
.fam__panel {
  max-width: 1400px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: var(--r-rect);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.fam__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  flex-wrap: wrap;
}
.fam__title {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: var(--mute-2);
  letter-spacing: -0.02em; line-height: 1;
}
.fam__title em { font-family: var(--serif); font-style: italic; font-size: var(--serif-cuerpo, 1.04em); color: var(--ink); }
.fam__cta:focus-visible{
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}
@media (hover:hover){.fam__cta:hover{
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}}
.fam__cta {
  display: inline-flex; align-items: center;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--mute);
  font-family: var(--sans); font-weight: 500;
  font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease);
}
@media (hover:hover){.fam__cta:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }}

.fam__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
}
/* La reseña va DENTRO de la foto, así que la tarjeta no necesita
   apilar nada: es sólo el contenedor del <figure>. */
.fam__card { margin: 0; }
.fam__foto {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper-2);
  cursor: pointer;
}
.fam__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: opacity 500ms var(--ease-out), filter 500ms var(--ease-out), transform 800ms var(--ease-out);
}
.fam__img--before {
  opacity: 0.85;
  filter: blur(2.5px) saturate(0.86);
  transform: scale(1.05);
}
.fam__img--after {
  opacity: 0;
  transform: scale(1.02);
}
/* Sólo en modo FOTO se descubre el después. En modo reseña la
   imagen se queda como está y lo que aparece es el texto: si
   cambiaran las dos cosas a la vez, ninguna se leería. */
[data-modo="foto"] .fam__foto:focus-visible .fam__img--before, [data-modo="foto"] .fam__foto.is-visible .fam__img--before{
  opacity: 0;
  filter: blur(0) saturate(1);
}
@media (hover:hover){[data-modo="foto"] .fam__foto:hover .fam__img--before{
  opacity: 0;
  filter: blur(0) saturate(1);
}}
[data-modo="foto"] .fam__foto:focus-visible .fam__img--after, [data-modo="foto"] .fam__foto.is-visible .fam__img--after{
  opacity: 1;
  transform: scale(1);
}
@media (hover:hover){[data-modo="foto"] .fam__foto:hover .fam__img--after{
  opacity: 1;
  transform: scale(1);
}}

/* Icono central: oruga por defecto → mariposa al hover.
   Se centra con grid (no con translate) para que quede exacto
   en ambos ejes independientemente del ratio del PNG. */
.fam__icon {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: auto;                    /* centrado perfecto vertical + horizontal */
  /* Antes ocupaban el 24% del ancho. Con la reseña dentro de la foto
     eran demasiado: dos cosas grandes peleando por la misma caja.
     Al 15% siguen leyéndose y dejan respirar a la imagen. */
  width: clamp(38px, 15%, 74px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,0.5));
  transition:
    opacity 420ms var(--ease-out),
    transform 620ms var(--ease-out);
  transform-origin: center center;
}
.fam__icon--worm {
  opacity: 0.95;
  transform: scale(1);
}
.fam__icon--butterfly {
  opacity: 0;
  transform: scale(0.7) rotate(-8deg);
}
[data-modo="foto"] .fam__foto:focus-visible .fam__icon--worm, [data-modo="foto"] .fam__foto.is-visible .fam__icon--worm{
  opacity: 0;
  transform: scale(0.72);
}
@media (hover:hover){/* El gusano se ve siempre en reposo; sólo se convierte en mariposa
   cuando se descubre la foto de después. */
[data-modo="foto"] .fam__foto:hover .fam__icon--worm{
  opacity: 0;
  transform: scale(0.72);
}}
[data-modo="foto"] .fam__foto:focus-visible .fam__icon--butterfly, [data-modo="foto"] .fam__foto.is-visible .fam__icon--butterfly{
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
@media (hover:hover){[data-modo="foto"] .fam__foto:hover .fam__icon--butterfly{
  opacity: 1;
  transform: scale(1) rotate(0deg);
}}
[data-modo="resena"] .fam__foto:focus-visible .fam__icon, [data-modo="resena"] .fam__foto.is-visible .fam__icon{
  opacity: 0;
  transform: scale(0.8);
}
@media (hover:hover){/* En modo reseña el icono se aparta para no pelearse con el texto. */
@media (hover:hover){[data-modo="resena"] .fam__foto:hover .fam__icon{
  opacity: 0;
  transform: scale(0.8);
}}}

/* ============ CATEGORÍAS (3 rectángulos altos) ============ */
.cats {
  padding: clamp(0.8rem, 2vw, 1.5rem) clamp(1.2rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--white);
}
.cats__inner { max-width: 1400px; margin: 0 auto; }
.cats__grid {
  display: grid;
  /* auto-fit + minmax: las columnas se reparten solas y bajan a 2 o 1
     cuando dejan de caber, sin depender de puntos de ruptura fijos. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
}
.cat {
  container-type: inline-size;
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

/* --- Capa 1: fondo (ya viene desenfocado del fichero) --- */
.cat__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  opacity: 0.92;
  transition: transform 900ms var(--ease-out), opacity 600ms var(--ease);
}
.cat:focus-visible .cat__bg{ transform: scale(1.13); opacity: 1; }
@media (hover:hover){.cat:hover .cat__bg{ transform: scale(1.13); opacity: 1; }}

.cat::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.36) 40%, rgba(0,0,0,0.06) 66%),
    radial-gradient(120% 80% at 50% 32%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 100%);
  pointer-events: none;
}

/* --- Capa 2: el objeto ---
   Limitado por ANCHO y por ALTO a la vez: el pasaporte es muy vertical
   y el ticket muy apaisado; con solo un ancho fijo el pasaporte se comía
   la tarjeta entera. Así los tres ocupan un peso visual parecido. */
.cat__obj {
  position: absolute;
  left: 50%;
  /* 41%: centrado en la mitad superior, que es el espacio libre real
     una vez que el texto ocupa la parte de abajo. */
  top: 41%;
  width: auto;
  height: auto;
  /* Límite por ancho Y por alto: el pasaporte es muy vertical y el
     ticket muy apaisado; así los tres pesan visualmente parecido. */
  max-width: 84%;
  max-height: 48%;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(-2deg);
  filter: drop-shadow(0 20px 34px rgba(0,0,0,0.5));
  transition:
    transform 700ms var(--ease-out),
    top 700ms var(--ease-out),
    filter 700ms var(--ease-out);
  z-index: 1;
  pointer-events: none;
}
.cat:focus-visible .cat__obj{
  top: 37%;
  transform: translate(-50%, -50%) rotate(0deg) scale(1.04);
  filter: drop-shadow(0 26px 44px rgba(0,0,0,0.58));
}
@media (hover:hover){/* Subida corta (4 puntos) y crecimiento leve: lo justo para que se
   note que reacciona sin descolocar la composición. */
.cat:hover .cat__obj{
  top: 37%;
  transform: translate(-50%, -50%) rotate(0deg) scale(1.04);
  filter: drop-shadow(0 26px 44px rgba(0,0,0,0.58));
}}

/* --- Capa 3: texto, centrado --- */
.cat__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  /* Más aire abajo que a los lados: al desplegarse el texto, el
     bloque crecía hacia abajo y quedaba pegado al borde de la
     tarjeta. Con este respiro los tres quedan a la misma altura. */
  padding: clamp(1.1rem, 2.2vw, 1.9rem);
  padding-bottom: clamp(1.9rem, 3.4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  gap: 0.55rem;
}
.cat__label {
  font-family: var(--sans);
  font-weight: 700;
  /* cqi = ancho de la propia tarjeta: escala con la caja, no con
     la ventana, así se ve igual de proporcionado en 1, 2 o 3 columnas */
  font-size: clamp(2rem, 13cqi, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
  text-transform: lowercase;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  transition: transform 520ms var(--ease-out);
}
.cat:focus-visible .cat__label{ transform: translateY(-4px); }
@media (hover:hover){/* El título sube al desplegarse el texto: refuerza la sensación
   de que se aparta para dejar sitio. */
.cat:hover .cat__label{ transform: translateY(-4px); }}

.cat__text {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 540ms var(--ease-out),
    opacity 400ms var(--ease);
}
/* Un único hijo: si el <em> fuera hijo directo del grid se convertiría
   en celda y rompería la línea. Por eso va dentro de un <p>. */
.cat__text > p {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  color: rgba(255,255,255,0.92);
  font-size: clamp(0.85rem, 4.2cqi, 1rem);
  line-height: 1.5;
  max-width: 36ch;
  text-wrap: pretty;
}
.cat__text em {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--serif-cuerpo, 1.04em);
  color: var(--white);
}
.cat:focus-visible .cat__text{
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 70ms;
}
@media (hover:hover){.cat:hover .cat__text{
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 70ms;
}}

/* ---- Dispositivos sin cursor (móvil, tablet) ----
   Sin hover el texto no aparecería nunca. Aquí se muestra siempre
   y el objeto ya viene colocado arriba para dejarle sitio. */
@media (hover: none) {
  /* Sin cursor no hay hover. El equivalente táctil de "pasar por
     encima" es que la tarjeta pase por el centro de la pantalla:
     el IntersectionObserver de script.js pone .is-visible mientras
     la tarjeta cruza la franja central y la QUITA al salir.
     Así el texto no se ve nunca antes de tiempo, igual que en
     escritorio no se ve hasta que el ratón entra.

     OJO: el estado de reposo tiene que ser EXACTAMENTE el de
     escritorio (texto plegado, objeto centrado, fondo sin escalar).
     Antes aquí se adelantaban .cat__obj y .cat__bg, y por eso la
     tarjeta ya venía "medio abierta" desde el principio. */
  .cat.is-visible .cat__text {
    grid-template-rows: 1fr;
    opacity: 1;
    transition-delay: 70ms;
  }
  .cat.is-visible .cat__obj {
    top: 37%;
    transform: translate(-50%, -50%) rotate(0deg) scale(1.04);
  }
  .cat.is-visible .cat__label { transform: translateY(-4px); }
  .cat.is-visible .cat__bg { transform: scale(1.13); opacity: 1; }

  /* "¿Por qué EM?" no se despliega de entrada: sin cursor, el
     disparador es el scroll. Se abre cuando el bloque cruza el
     centro de la pantalla, igual que las tarjetas. Antes salía
     abierto desde el principio y perdía todo el efecto. */
  .why-em__left.is-visible .why-em__reveal { grid-template-rows: 1fr; opacity: 1; }
  .why-em__left.is-visible .why-em__title::after { transform: scaleX(1); }
  .why-em__left.is-visible .why-em__title { color: var(--ink); }
  .why-em__title { cursor: default; }
}

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .why-em__card { grid-template-columns: 1fr; }
  .why-em__center { display: none; }
  .mega-foot__card { grid-template-columns: 1fr; }
  .mega-foot__brand { justify-content: center; }
  .mega-foot__giant { transform: none; }
  .booking__steps { grid-template-columns: 1fr; }
  .fam__grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer: la ilustración deja de mandar; contenido en flujo normal */
  .mega-foot__stack { display: block; }
  .mega-foot__art img {
    width: 100%;
    height: auto;
    max-height: 46vw;
    object-fit: cover;
    object-position: center 38%;
  }
  .mega-foot__body {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
  }
  .mega-foot__right {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: left;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.14);
  }
  .mega-foot__wordmark span { font-size: 12.8vw; line-height: 1; }

  /* Strip tablet */
  :root { --strip-h: clamp(50px, 6.2vw, 68px); --strip-gap: clamp(1.6rem, 4vw, 2.6rem); }
}
@media (max-width: 640px) {
  :root { --scroll-room: 140vh; }
  /* svh en vez de dvh: en iOS la barra del navegador se pliega al
     scrollear y dvh cambia a mitad de gesto. Eso alteraba la altura del
     hero mientras se calculaba el avance del vídeo y daba saltos.
     svh es la altura con la barra desplegada: constante. */
  .page-home .hero { height: calc(100svh + var(--scroll-room)); }
  .hero__rect {
    height: calc(100svh - (var(--frame) * 2));
    min-height: 0;
  }

  /* ---- Cabecera móvil ----
     En pantallas estrechas no caben logo + CTA + menú en una fila:
     el CTA aplastaba al logo hasta hacerlo desaparecer y su texto se
     cortaba. Arriba dejamos solo logo y menú; el CTA baja al pie del
     rectángulo, que además queda al alcance del pulgar. */
  .ui--top {
    grid-template-columns: auto minmax(0, auto) auto;
    justify-content: space-between;
    padding: 0.9rem 0.9rem;
    gap: 0.5rem;
  }
  .ui__logo img { height: 36px; }

  /* El CTA vuelve a la fila de arriba: con el texto corto ya cabe
     de sobra junto al logo y al menú, sin recortes ni desbordes. */
  .ui--top .cta--hero {
    padding: 0.7rem 1.3rem;
    font-size: 0.84rem;
    gap: 0.45rem;
    white-space: nowrap;
  }

  .hero__phrase {
    bottom: 1.15rem;
    font-size: 0.86rem;
    padding: 0 1.2rem;
  }
  /* Footer móvil: todo apilado, wordmark en 2 líneas */
  .mega-foot__body {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .mega-foot__nav { gap: 1.8rem; }
  .mega-foot__col { align-items: center; }
  .mega-foot__list a { justify-content: center; }
  .mega-foot__right {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 0.9rem;
  }
  .mega-foot__wordmark { padding: 0 0.4rem; }
  .mega-foot__wordmark span {
    font-size: 20vw;
    line-height: 1.02;
    white-space: normal;
    letter-spacing: -0.04em;
  }
  .mega-foot__art img { max-height: 62vw; object-position: center 40%; }

  /* Strip móvil */
  .strip { padding: 0.9rem 0; }
  :root { --strip-h: clamp(40px, 9vw, 56px); --strip-gap: clamp(1.2rem, 5vw, 2rem); }
  .cats { padding-top: 0.6rem; }
  .cats__grid { gap: 0.9rem; }
  .cat { aspect-ratio: 4 / 5; }
  .cat__obj { max-width: 76%; max-height: 44%; }
  .lang-toggle button { padding: 4px 8px; font-size: 0.68rem; }
  .method-hero__nav-arrow { width: 36px; height: 36px; }
  /* En vertical el número ocupaba media pantalla y la pastilla se
     iba a su propia línea, descolgada. Más pequeño, todo en fila. */
  .method-hero__title-row { gap: 0.7rem; flex-wrap: nowrap; align-items: center; }
  .method-hero__step-num  { font-size: 2rem; }
  .method-hero__step-badge { font-size: 0.6rem; letter-spacing: 0.12em; padding: 0.3rem 0.6rem; }
  .method-hero__stage { padding: 1.2rem 2.6rem; }
  .method-hero__slide { max-width: 32ch; padding: 0; }
  .method-hero__follow { font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .cta__glow, .cta::before { animation: none; }
  .strip__track { animation: strip-scroll 19s linear infinite !important; }
  body.is-prereveal .prereveal { opacity: 1; }
}

/* ============================================================
   RAÍL DE CAZA — integrado en la barra de scroll de verdad
   ------------------------------------------------------------
   La mariposa NO es un adorno flotante: es el TIRADOR de la
   barra de scroll del navegador. Se pinta con ::-webkit-scrollbar
   (Chrome, Edge, Safari), así que se mueve sola, va perfectamente
   sincronizada, y se puede arrastrar como cualquier barra.

   El cazamariposas sí es un adorno: va superpuesto encima del
   carril, con pointer-events:none para no estorbar al arrastre.

   Firefox no permite pintar el tirador con una imagen: allí sale
   una barra fina normal y el cazador se oculta (ver script.js).
   No es un fallo, es el suelo del que no se puede bajar.

   OJO: al dar ancho a ::-webkit-scrollbar, macOS deja de usar la
   barra flotante que aparece y desaparece y muestra una fija.
   Es el precio de tener la mariposa ahí: sin barra visible
   permanente, no hay mariposa que ver.
   ============================================================ */
html::-webkit-scrollbar {
  width: 14px;
}
html::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
html::-webkit-scrollbar-thumb {
  /* El tirador es transparente y sólo enseña la mariposa. La zona
     de arrastre sigue siendo todo el alto del tirador, así que no
     se pierde nada de usabilidad. */
  background-color: transparent;
  background-image: url("img/marca/sticker-logo.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px auto;
  border-radius: 7px;
  /* Sin altura mínima el tirador se queda en 20 px en páginas muy
     largas y la mariposa no cabe. */
  min-height: 44px;
}
@media (hover:hover){html::-webkit-scrollbar-thumb:hover{
  background-color: color-mix(in srgb, var(--ink) 8%, transparent);
}}

/* Firefox: no admite imagen en el tirador. Al menos que sea fino
   y del color de la marca en vez del gris del sistema. */
@supports (scrollbar-color: black white) {
  html { scrollbar-width: thin; }
}

/* ---- El cazador ---- */
.caza {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 14px;                 /* exactamente el ancho de la barra */
  z-index: 40;
  pointer-events: none;        /* nunca intercepta el arrastre */
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
/* Aparece al salir del hero: el vídeo de portada necesita su
   momento limpio. La clase la pone script.js. */
.caza.is-on { opacity: 1; }

@keyframes caza-vaiven {
  0%, 100% { rotate: -7deg;  }
  50%      { rotate:  7deg;  }
}
/* Quien haya pedido menos movimiento no ve el balanceo. */
@media (prefers-reduced-motion: reduce) {
  .caza__red { animation: none; }
}

.caza__red {
  position: absolute;
  left: 50%;
  top: 0;
  width: 13px;
  height: auto;
  opacity: 0.9;
  /* script.js sólo escribe --y (píxeles desde arriba de la ventana).
     El centrado vive aquí para que la animación sea una sola
     propiedad y el navegador la componga en GPU. */
  transform: translate(-50%, var(--y, 0px));
  will-change: transform;
  /* Un balanceo mínimo y lento para que se haga ver. Va en rotate,
     que es una propiedad aparte de transform: así no pisa el
     translate que escribe el JS con la posición. */
  animation: caza-vaiven 2.6s ease-in-out infinite;
}

@media (max-width: 900px), (hover: none) {
  .caza { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .caza { display: none; }
}

/* ============================================================
   CALENDARIO DE RESERVAS (propio)
   ------------------------------------------------------------
   Sustituye a Calendly. Dos pasos: elegir hueco y dejar los datos.
   No es un carrusel ni un calendario de mes: es una lista de días
   con sus horas. Con dos o tres sesiones a la semana, una rejilla
   de mes estaría vacía en su mayor parte y obligaría a buscar.
   ============================================================ */
.rsv {
  position: fixed; inset: 0; z-index: 320;
  display: grid; place-items: center;
  padding: clamp(0.8rem, 3vw, 2rem);
  opacity: 0; visibility: hidden;
  transition: opacity 260ms var(--ease), visibility 0s linear 260ms;
}
.rsv.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.rsv__scrim { position: absolute; inset: 0; background: rgba(10,10,10,0.55); }

.rsv__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border-radius: 24px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  transform: translateY(14px) scale(0.985);
  transition: transform 320ms var(--ease-out);
}
.rsv.is-open .rsv__panel { transform: none; }

.rsv__cerrar {
  position: absolute; top: 1rem; right: 1rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 999px; color: var(--mute);
  transition: background 200ms, color 200ms;
}
@media (hover:hover){.rsv__cerrar:hover{ background: var(--paper); color: var(--ink); }}

.rsv__titulo {
  margin: 0 0 0.3rem;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  letter-spacing: -0.02em; line-height: 1.1;
  padding-right: 2.5rem;   /* deja sitio a la aspa */
}
.rsv__titulo em { font-family: var(--serif); font-style: italic; font-size: var(--serif-cuerpo, 1.04em); }
.rsv__sub { margin: 0 0 1.4rem; color: var(--mute); font-size: 0.92rem; }

/* ---- Pasos ---- */
.rsv__paso { display: none; }
.rsv__paso.is-activo { display: block; }

.rsv__cargando { color: var(--mute); font-size: 0.9rem; padding: 1.5rem 0; text-align: center; }

.rsv__dia { border-top: 1px solid var(--line); padding: 0.9rem 0; }
.rsv__dia:first-child { border-top: 0; }
.rsv__dia-nombre {
  font-family: var(--sans); font-weight: 700;
  font-size: 0.95rem; margin: 0 0 0.55rem;
}
.rsv__horas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rsv__hora {
  font-family: var(--sans); font-weight: 600;
  font-size: 0.92rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white); color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
@media (hover:hover){.rsv__hora:hover:not(:disabled){ background: var(--ink); color: var(--white); border-color: var(--ink); }}
.rsv__hora small { font-size: 0.72rem; font-weight: 500; opacity: 0.65; }
.rsv__hora:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }

.rsv__vacio { color: var(--mute); font-size: 0.9rem; padding: 1.2rem 0; }

/* ---- Formulario ---- */
.rsv__atras {
  font-family: var(--sans); font-size: 0.85rem; color: var(--mute);
  padding: 0; margin-bottom: 0.8rem;
  transition: color 180ms;
}
@media (hover:hover){.rsv__atras:hover{ color: var(--ink); }}
.rsv__elegido {
  margin: 0 0 1.2rem; padding: 0.8rem 1rem;
  background: var(--paper); border-radius: 14px;
  font-family: var(--sans); font-weight: 700; font-size: 0.97rem;
}
.rsv__form { display: flex; flex-direction: column; gap: 0.85rem; }
.rsv__campo { display: flex; flex-direction: column; gap: 0.3rem; }
.rsv__campo > span { font-size: 0.82rem; color: var(--mute); font-weight: 600; }
.rsv__campo > span i { font-style: normal; font-weight: 400; opacity: 0.75; }
.rsv__campo input,
.rsv__campo textarea {
  font: inherit; font-size: 0.97rem; color: var(--ink);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px; background: var(--white);
  width: 100%; resize: vertical;
  transition: border-color 180ms var(--ease);
}
.rsv__campo input:focus,
.rsv__campo textarea:focus { outline: none; border-color: var(--ink); }
.rsv__campo input[aria-invalid="true"] { border-color: #b3261e; }

/* La trampa antirrobots tiene que ser invisible para las personas pero
   existir para el navegador: con display:none muchos robots la saltan. */
.rsv__trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.rsv__acepta {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.85rem; color: var(--mute); line-height: 1.45;
  margin-top: 0.2rem;
}
.rsv__acepta input { margin-top: 0.18rem; flex: 0 0 auto; }
.rsv__acepta a { text-decoration: underline; color: var(--ink); }

.rsv__error {
  margin: 0; padding: 0.7rem 0.9rem;
  background: #fdecea; color: #8c1d18;
  border-radius: 12px; font-size: 0.88rem;
}
.rsv__enviar { justify-content: center; width: 100%; margin-top: 0.3rem; }
.rsv__enviar[disabled] { opacity: 0.55; pointer-events: none; }

.rsv__pie {
  margin: 1.4rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--mute); font-size: 0.82rem; line-height: 1.5;
}

@media (max-width: 480px) {
  .rsv { padding: 0; }
  .rsv__panel { max-height: 100dvh; height: 100dvh; border-radius: 0; width: 100%; }
}

/* Aviso de vista previa local dentro del calendario. */
.rsv__previa {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border-radius: 12px;
  color: var(--mute);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* ============================================================
   CONFIRMAR SESIÓN POR WHATSAPP
   ------------------------------------------------------------
   Va en la pantalla de gracias, ENCIMA de los detalles de la
   sesión, con fondo oscuro. Es lo primero que se ve al llegar:
   si quedara mezclado con el resto del texto, la mitad de la
   gente no lo pulsaría.

   La plaza ya está guardada en el servidor cuando esto aparece
   —el aforo es honesto—, pero el mensaje se redacta como un
   paso pendiente porque es lo que hace que se pulse.
   ============================================================ */
.confirmar {
  background: var(--ink);
  color: var(--white);
  border-radius: 18px;
  padding: clamp(1.3rem, 3vw, 1.8rem);
  margin: 0 auto clamp(1.5rem, 3vw, 2rem);
  max-width: 34rem;
  text-align: center;
}
.confirmar__titulo {
  margin: 0 0 0.4rem;
  font-family: var(--sans); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.65;
}
.confirmar__texto {
  margin: 0 0 1.1rem;
  font-size: 1rem; line-height: 1.5;
  color: var(--white);
}
/* Sobre fondo oscuro el botón se invierte: blanco con letra oscura. */
.confirmar__boton.cta--dark {
  background: var(--white);
  color: var(--ink);
  justify-content: center;
}
@media (hover:hover){.confirmar__boton.cta--dark:hover{
  background: var(--paper);
  color: var(--ink);
}}
.confirmar__nota {
  margin: 0.9rem 0 0;
  font-size: 0.8rem; line-height: 1.45;
  color: var(--white);
  opacity: 0.6;
}
/* Ya ha pulsado: baja el tono, deja de gritar. */
.confirmar.is-enviado {
  background: var(--paper);
  color: var(--ink);
}
.confirmar.is-enviado .confirmar__titulo,
.confirmar.is-enviado .confirmar__texto,
.confirmar.is-enviado .confirmar__nota { color: var(--ink); }
.confirmar.is-enviado .confirmar__boton.cta--dark {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

/* Cuenta atrás de la retención de plaza. */
.confirmar__reloj {
  margin: 0 0 1rem;
  font-family: var(--sans); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;   /* el número no baila al bajar */
}
.confirmar.is-enviado .confirmar__reloj { color: var(--ink); }

/* ============================================================
   LISTAS DE LECTURA RÁPIDA
   ------------------------------------------------------------
   Los textos explicativos largos se han pasado a puntos. Estas
   listas son las que salen dentro de las FAQs y del bloque
   "¿Por qué EM?".

   El punto va con ::before y no con list-style para poder
   controlarlo: los marcadores del navegador no se pueden alinear
   bien cuando una línea ocupa dos renglones, que en móvil pasa
   constantemente.
   ============================================================ */
.faq__lista,
.why-em__lista {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.faq__lista li,
.why-em__lista li {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.5;
}
.faq__lista li::before,
.why-em__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  /* 0.62em baja el punto hasta el centro óptico de la primera
     línea; con top:50% se iría al medio del bloque entero y
     quedaría descolgado en las líneas que envuelven. */
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.55;
}
.faq__lista + a,
.faq__answer > a {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: border-color 200ms var(--ease);
}
@media (hover:hover){.faq__lista + a:hover, .faq__answer > a:hover{ border-color: var(--ink); }}

.why-em__lista { margin-top: 0.9rem; }
.why-em__lista li { font-size: 0.97em; }

/* En pantallas pequeñas los puntos se juntan y el bloque se lee
   como un párrafo otra vez. Un poco más de aire lo evita. */
@media (max-width: 640px) {
  .faq__lista,
  .why-em__lista { gap: 0.55rem; }
  .faq__lista li,
  .why-em__lista li { padding-left: 1rem; }
}



/* ============================================================
   PIE DE LA FOTO — nombre y reseña
   ------------------------------------------------------------
   Van DENTRO de la imagen, sobre un degradado que sólo oscurece
   la parte de abajo. Nada de velo sobre la foto entera: taparía
   justo lo que hay que enseñar.

   El nombre se ve siempre. La reseña aparece al pasar por encima,
   igual que el después. Las dos cosas se revelan a la vez: es un
   único gesto, "acércate y te cuento".
   ============================================================ */
.fam__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 3.2rem 1rem 1rem;
  color: var(--white);
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(10,10,10,0.88) 0%,
              rgba(10,10,10,0.62) 38%,
              rgba(10,10,10,0.18) 70%,
              rgba(10,10,10,0) 100%);
}
.fam__nombre {
  display: block;
  font-family: var(--sans); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.01em;
  color: var(--white);
}

/* Mismo truco que en las tarjetas de sesiones: la fila del grid
   pasa de 0fr a 1fr. Permite animar la altura sin saber cuánto
   ocupa el texto, que cambia en cada tarjeta. */
.fam__cita {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin: 0;
  transition:
    grid-template-rows 520ms var(--ease-out),
    opacity 380ms var(--ease);
}
.fam__cita > * { min-height: 0; }
.fam__cita-txt {
  overflow: hidden;
  margin: 0.4rem 0 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.93);
  text-wrap: pretty;
}
.fam__cita em {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--serif-cuerpo, 1.04em);
  color: var(--white);
}
[data-modo="resena"] .fam__foto:focus-visible .fam__cita, [data-modo="resena"] .fam__foto.is-visible .fam__cita{
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 60ms;
}
@media (hover:hover){[data-modo="resena"] .fam__foto:hover .fam__cita{
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 60ms;
}}
/* En modo reseña el degradado se refuerza al pasar por encima: sin
   eso, el texto blanco sobre una zona clara de la foto no se lee. */
[data-modo="resena"] .fam__foto.is-visible .fam__pie{
  background: linear-gradient(to top,
              rgba(10,10,10,0.94) 0%,
              rgba(10,10,10,0.86) 45%,
              rgba(10,10,10,0.55) 78%,
              rgba(10,10,10,0.1) 100%);
}
@media (hover:hover){[data-modo="resena"] .fam__foto:hover .fam__pie{
  background: linear-gradient(to top,
              rgba(10,10,10,0.94) 0%,
              rgba(10,10,10,0.86) 45%,
              rgba(10,10,10,0.55) 78%,
              rgba(10,10,10,0.1) 100%);
}}

@media (max-width: 640px) {
  .fam__grid { grid-template-columns: repeat(2, 1fr); }
  .fam__panel { padding: 1.1rem 0.9rem 1.2rem; border-radius: 20px; }
  .fam__nombre { font-size: 0.82rem; }
  .fam__cita-txt { font-size: 0.76rem; }
  .fam__pie { padding: 2.6rem 0.75rem 0.8rem; }
}

/* ==========================================================
   HALO DE LOS BOTONES
   ----------------------------------------------------------
   Un aro suave alrededor de cada botón, siempre visible. No es
   decoración: es lo que dice "esto se pulsa" antes de que nadie
   pase el ratón por encima, que era el problema real — la gente
   no los pulsaba porque no parecían botones.

   Al pasar por encima el aro crece. Sobre fondo oscuro el aro
   negro no se vería, así que allí es blanco.
   ========================================================== */
.cta, .mega-foot__cta, .fam__cta, .fam__pag, .rsv__enviar {
  box-shadow: 0 0 0 5px rgba(17,17,17,0.055), 0 4px 14px rgba(0,0,0,0.10);
}
.cta:focus-visible{
  box-shadow: 0 0 0 9px rgba(17,17,17,0.085), 0 14px 30px rgba(0,0,0,0.20);
}
@media (hover:hover){.cta:hover{
  box-shadow: 0 0 0 9px rgba(17,17,17,0.085), 0 14px 30px rgba(0,0,0,0.20);
}}
.fam__cta:focus-visible, .fam__pag:focus-visible{
  box-shadow: 0 0 0 9px rgba(17,17,17,0.085), 0 10px 22px rgba(0,0,0,0.16);
}
@media (hover:hover){.fam__cta:hover, .fam__pag:hover{
  box-shadow: 0 0 0 9px rgba(17,17,17,0.085), 0 10px 22px rgba(0,0,0,0.16);
}}
/* Fondo oscuro: aro blanco o no se ve nada. */
.mega-foot__cta, .cta--popup, .cta--hero {
  box-shadow: 0 0 0 5px rgba(255,255,255,0.14), 0 4px 16px rgba(0,0,0,0.30);
}
.mega-foot__cta:focus-visible{
  box-shadow: inset 0 0 0 1.5px var(--white),
              0 0 0 9px rgba(255,255,255,0.20), 0 12px 26px rgba(0,0,0,0.5);
}
@media (hover:hover){.mega-foot__cta:hover{
  box-shadow: inset 0 0 0 1.5px var(--white),
              0 0 0 9px rgba(255,255,255,0.20), 0 12px 26px rgba(0,0,0,0.5);
}}
.cta--popup:focus-visible, .cta--hero:focus-visible{
  box-shadow: 0 0 0 9px rgba(255,255,255,0.22), 0 14px 30px rgba(0,0,0,0.35);
}
@media (hover:hover){.cta--popup:hover, .cta--hero:hover{
  box-shadow: 0 0 0 9px rgba(255,255,255,0.22), 0 14px 30px rgba(0,0,0,0.35);
}}
/* El apagado no invita a nada: sin halo. */
.fam__pag[disabled]{ box-shadow: none; }
@media (hover:hover){.fam__pag[disabled]:hover{ box-shadow: none; }}

/* ==========================================================
   TEXTOS ALINEADOS
   ----------------------------------------------------------
   Cada bloque centrado lo está de verdad: el texto, el botón y
   el título comparten el mismo eje, y los anchos máximos van en
   auto para que no se descuelguen hacia un lado.
   ========================================================== */
.booking__inner, .sec__head, .pronto, .booking__lead, .booking__note {
  text-align: center;
}
.booking__lead, .booking__note { margin-left: auto; margin-right: auto; }
.booking__lead { max-width: 46ch; }
.booking__note { max-width: 62ch; }
.booking__step { text-align: center; }
.booking__steps { align-items: start; }

/* ==========================================================
   ESPACIO DE LAS CINEMÁTICAS
   ----------------------------------------------------------
   Cuando un bloque se despliega, lo de abajo no debe moverse.
   El sitio se reserva desde el principio: --alto-abierto lo
   mide el JS con el bloque abierto, antes de cerrarlo.

   Sin esto, al pasar el ratón por "¿Por qué EM?" toda la página
   de debajo daba un salto, y al salir otro. Con el hueco ya
   reservado, sólo se mueve el texto que aparece.
   ========================================================== */
.why-em__left {
  min-height: var(--alto-abierto, auto);
  display: flex;
  flex-direction: column;
  justify-content: center;      /* centrado tanto abierto como cerrado */
}

/* ==========================================================
   BOTONES EN MÓVIL: se encienden al pasar cerca
   ----------------------------------------------------------
   Sin ratón no hay hover, así que un botón se queda igual de
   apagado tenga el dedo encima o esté a tres pantallas. Aquí lo
   que hace de hover es el propio scroll: cuando el botón cruza
   la franja central de la pantalla se enciende, y al salir se
   apaga. El JS pone .es-cerca; el aspecto es el mismo que el
   del hover, para que sea el mismo lenguaje en los dos sitios.
   ========================================================== */
@media (hover: none) {
  .cta.es-cerca {
    padding-left: 2rem;
    padding-right: 2rem;
    background: var(--ink);
    color: var(--white);
    transform: translateY(-3px) scale(1.035);
    letter-spacing: 0.11em;
    box-shadow: 0 0 0 9px rgba(17,17,17,0.085), 0 14px 30px rgba(0,0,0,0.20);
  }
  .cta--dark.es-cerca { background: var(--white); color: var(--ink); }
  .cta--popup.es-cerca, .cta--hero.es-cerca {
    background: var(--white); color: var(--ink);
    box-shadow: 0 0 0 9px rgba(255,255,255,0.22), 0 14px 30px rgba(0,0,0,0.35);
  }
  .mega-foot__cta.es-cerca {
    background: transparent;
    color: var(--white);
    transform: translateY(-3px) scale(1.035);
    letter-spacing: 0.11em;
    box-shadow: inset 0 0 0 1.5px var(--white),
                0 0 0 9px rgba(255,255,255,0.20), 0 12px 26px rgba(0,0,0,0.5);
  }
  .fam__cta.es-cerca {
    background: var(--ink); color: var(--white); border-color: var(--ink);
    transform: translateY(-2px);
  }
}

/* ==========================================================
   LOS TRES BOTONES DE LA PANTALLA DE GRACIAS
   ----------------------------------------------------------
   Otra reserva · Volver al inicio · Juega. Al ser tres, a tamaño
   normal ocupaban toda la pantalla y competían entre ellos.
   Aquí van más pequeños y a la misma altura exacta.

   Y sin la cinemática de acercarse: tres botones seguidos
   encendiéndose y apagándose al desplazar es un parpadeo, no un
   efecto. Reaccionan al ratón y al toque, que es cuando importa.
   ========================================================== */
.gracias__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.6rem;
}
.gracias__acciones .cta {
  min-height: 2.6rem;
  padding: 0.7rem 1.25rem;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  flex: 0 1 auto;
}
/* Al pasar por encima sólo invierte el color: nada de crecer ni
   levantarse, que con tres juntos se movería todo el bloque. */
.gracias__acciones .cta:focus-visible{
  padding: 0.7rem 1.25rem;
  transform: none;
  letter-spacing: 0.09em;
  box-shadow: 0 0 0 6px rgba(17,17,17,0.07), 0 6px 16px rgba(0,0,0,0.14);
}
@media (hover:hover){.gracias__acciones .cta:hover{
  padding: 0.7rem 1.25rem;
  transform: none;
  letter-spacing: 0.09em;
  box-shadow: 0 0 0 6px rgba(17,17,17,0.07), 0 6px 16px rgba(0,0,0,0.14);
}}
.gracias__acciones .cta:active { transform: translateY(1px); }

@media (max-width: 520px) {
  /* En pantalla estrecha, uno debajo de otro y todos del mismo
     ancho: en fila quedaban dos arriba y uno solo abajo. */
  .gracias__acciones { flex-direction: column; }
  .gracias__acciones .cta { width: 100%; }
}

/* En móvil el mapa va casi cuadrado. A 16:9 sobre una pantalla
   estrecha queda una tira en la que no se distingue ni la calle:
   un mapa que no se lee no es un mapa, es un adorno. */
@media (max-width: 720px) {
  .map-wrap {
    aspect-ratio: 4 / 5;
    min-height: 340px;
    max-height: 68vh;
  }
  .tienda-info { gap: 1.1rem; }
}

/* ==========================================================
   PERFIL DEL CLIENTE
   ========================================================== */
.perfil__paso { display: none; }
.perfil__paso.is-activo { display: block; animation: reg-entra 320ms var(--ease-out); }
.perfil__entrar { max-width: 420px; display: grid; gap: 1rem; }
.perfil__ok {
  margin: 0; padding: 0.8rem 1rem; border-radius: 12px;
  background: var(--paper-2, #f4f2ee); border-left: 3px solid var(--ink);
  font-size: 0.86rem; line-height: 1.5; color: var(--ink);
}
.perfil__nuevo { margin-top: 1.6rem; font-size: 0.88rem; color: var(--mute); }
.perfil__nuevo a { color: var(--ink); text-decoration: underline; font-weight: 600; }

.perfil__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.perfil__quien { display: flex; align-items: center; gap: 1rem; }
.perfil__foto {
  position: relative; flex: 0 0 auto;
  width: clamp(58px, 9vw, 76px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  background: var(--paper-2, #f4f2ee);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  cursor: pointer;
}
.perfil__foto img { width: 100%; height: 100%; object-fit: cover; }
.perfil__foto span {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--mute);
}
.perfil__foto::after {
  content: "Cambiar"; position: absolute; inset: auto 0 0 0;
  padding: 3px 0; background: rgba(17,17,17,0.78); color: #fff;
  font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
  opacity: 0; transition: opacity 220ms var(--ease);
}
@media (hover:hover){.perfil__foto:hover::after{ opacity: 1; }}

/* Las caras del podio. Pequeñas y redondas: identifican sin robarle
   el sitio a la marca, que es lo que de verdad importa en la tabla. */
.reto__cara {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  background: var(--line); flex: 0 0 auto;
}
.reto__podio div { align-items: center; gap: 0.5rem; }
.reto__podio div > span { display: flex; align-items: center; gap: 0.5rem; }
.reto__variante {
  display: inline-block; margin-bottom: 0.6rem;
  padding: 0.25rem 0.6rem; border-radius: 999px;
  background: var(--paper-2, #f4f2ee); border: 1px solid var(--line-strong);
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute);
}
.perfil__sello {
  flex: 0 0 auto; padding: 0.45rem 0.9rem; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
}

.perfil__reservar { margin: 1.4rem 0 0.4rem; }
.perfil__reservar .cta { width: 100%; max-width: 340px; }

.perfil__cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem; margin: 0.6rem 0 2.2rem;
}
.perfil__cifra {
  padding: 1.1rem 1.2rem; border: 1px solid var(--line-strong); border-radius: 16px;
  background: var(--white);
}
.perfil__cifra b {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.perfil__cifra span { display: block; margin-top: 0.3rem; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }

.perfil__bloque { margin-bottom: 2.4rem; }
.perfil__tit {
  margin: 0 0 0.3rem; font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem); letter-spacing: -0.02em; color: var(--ink);
}
.perfil__nota { margin: 0 0 1rem; font-size: 0.84rem; color: var(--mute); }

.perfil__lista { display: grid; gap: 0.6rem; }
.perfil__fila {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 14px;
  font-size: 0.92rem; color: var(--ink);
}
.perfil__lista--suave .perfil__fila { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0.75rem 0; }
.perfil__fila a { font-size: 0.8rem; color: var(--mute); text-decoration: underline; }
@media (hover:hover){.perfil__fila a:hover{ color: var(--ink); }}
.perfil__vacio { padding: 1rem 0; font-size: 0.9rem; color: var(--mute); }

/* ---- Retos ---- */
.perfil__retos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.reto {
  padding: 1.2rem; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--white);
}
.reto.es-logrado { border-color: var(--ink); background: var(--paper-2, #f4f2ee); }
.reto__nombre { margin: 0 0 0.2rem; font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--ink); }
.reto__desc { margin: 0 0 0.9rem; font-size: 0.8rem; line-height: 1.45; color: var(--mute); }
.reto__marca {
  display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.6rem;
}
.reto__valor {
  font-family: var(--sans); font-weight: 700; font-size: 1.8rem; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.reto__de { font-size: 0.84rem; color: var(--mute); }
/* La barra dice cuánto falta de un vistazo. Sin número no se entiende;
   sin barra, el número no se compara con nada. Van juntos. */
.reto__barra { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.reto__barra span { display: block; height: 100%; background: var(--ink); transition: width 600ms var(--ease-out); }
.reto__pie { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--mute); }
.reto__podio { margin: 0.8rem 0 0; padding: 0.7rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.3rem; }
.reto__podio div { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--ink-soft); }
.reto__podio b { font-variant-numeric: tabular-nums; }
.reto__yo { font-weight: 700; color: var(--ink); }

.perfil__oferta { padding: 1.4rem; border: 1px dashed var(--line-strong); border-radius: 18px; }
.perfil__oferta p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }
.perfil__acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; }

@media (max-width: 640px) {
  .perfil__acciones .cta,
  .perfil__reservar .cta { width: 100%; max-width: none; }
  .perfil__fila { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  /* Dos columnas de cifras en vez de una: tres tarjetas apiladas
     ocupan media pantalla para decir tres números. */
  .perfil__cifras { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .perfil__cifra { padding: 0.9rem; }
  .perfil__cifra span { font-size: 0.68rem; letter-spacing: 0.06em; }
  .perfil__quien { gap: 0.8rem; }
  .perfil__bloque { margin-bottom: 1.8rem; }
  .perfil__retos { grid-template-columns: 1fr; }
}

/* ==========================================================
   REGISTRO Y FIRMA
   ----------------------------------------------------------
   Tres pasos: quién eres, lee y acepta, firma. Se hace una vez
   en la vida; después basta el correo para reservar.
   ========================================================== */
.reg__paso { display: none; }
.reg__paso.is-activo { display: block; animation: reg-entra 320ms var(--ease-out); }
@keyframes reg-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.reg__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem 1.4rem;
  margin-bottom: 1.6rem;
}
.reg__form { max-width: 760px; }

/* Los datos del tutor, cuando la fecha de nacimiento dice que es menor */
.reg__tutor {
  margin: 0 0 1.6rem;
  padding: 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--paper-2, #f4f2ee);
  animation: reg-entra 320ms var(--ease-out);
}
.reg__tutor-aviso { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.5; color: var(--ink); }

/* ---------- Los documentos ---------- */
.reg__docs { display: grid; gap: 1.2rem; max-width: 860px; margin-bottom: 1.6rem; }

.reg__doc {
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
  background: var(--white);
  transition: border-color 300ms var(--ease);
}
.reg__doc.es-aceptado { border-color: var(--ink); }

.reg__doc-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem 0.8rem;
}
.reg__doc-tit { margin: 0; font-family: var(--sans); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.reg__doc-pie { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--mute); }
.reg__doc-num {
  flex: 0 0 auto;
  font-size: 0.72rem; letter-spacing: 0.16em; color: var(--mute);
  font-variant-numeric: tabular-nums;
}

/* La caja del texto. Alto fijo y con desplazamiento propio: es lo que
   permite saber si de verdad ha llegado al final. Si el documento se
   pintara entero en la página, no habría forma de distinguir entre
   "lo ha leído" y "ha bajado a por el botón". */
.reg__doc-texto {
  height: clamp(240px, 38vh, 380px);
  overflow-y: auto;
  padding: 0.4rem 1.3rem 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  line-height: 1.62;
  color: var(--ink-soft);
  overscroll-behavior: contain;
}
.reg__doc-texto h3 {
  margin: 1.4rem 0 0.5rem; font-family: var(--sans); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.04em; color: var(--ink);
}
.reg__doc-texto h4 {
  margin: 1.1rem 0 0.3rem; font-family: var(--sans); font-weight: 600;
  font-size: 0.9rem; color: var(--ink);
}
.reg__doc-texto p  { margin: 0 0 0.6rem; }
.reg__doc-texto ul { margin: 0 0 0.8rem; padding-left: 1.1rem; }
.reg__doc-texto li { margin: 0 0 0.35rem; }

/* Barra de avance de lectura: dice cuánto falta sin tener que
   adivinarlo por la posición de la barra del navegador. */
.reg__doc-barra { height: 3px; background: var(--line); }
.reg__doc-barra span {
  display: block; height: 100%; width: 0;
  background: var(--ink);
  transition: width 120ms linear;
}

.reg__doc-fin {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.3rem;
  border-top: 1px solid var(--line);
  background: var(--paper-2, #f4f2ee);
}
.reg__doc-aviso { margin: 0; font-size: 0.78rem; color: var(--mute); }
.reg__doc-check { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.reg__doc-check input { width: 18px; height: 18px; accent-color: var(--ink); }
.reg__doc-check span { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.reg__doc-check.es-bloqueado { opacity: 0.45; cursor: not-allowed; }
.reg__doc-check.es-bloqueado input { pointer-events: none; }

/* ---------- La firma ---------- */
.reg__firma { max-width: 700px; margin-bottom: 1.4rem; }
#regLienzo {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 3 / 1;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: var(--white);
  touch-action: none;          /* el dedo firma, no desplaza la página */
  cursor: crosshair;
}
.reg__borrar {
  margin-top: 0.6rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  color: var(--mute);
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
}
@media (hover:hover){.reg__borrar:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }}

.reg__casillas { display: grid; gap: 0.9rem; max-width: 760px; margin-bottom: 1.4rem; }
.reg__desist {
  max-width: 760px; margin: 0 0 1.6rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--line-strong);
  font-size: 0.84rem; line-height: 1.5; color: var(--mute);
}
.reg__acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

@media (max-width: 640px) {
  .reg__campos { grid-template-columns: 1fr; }
  .reg__doc-cab { flex-direction: column; gap: 0.2rem; }
  .reg__doc-fin { flex-direction: column; align-items: flex-start; }
  .reg__acciones .cta { width: 100%; }
}

/* Aviso de si la persona ya está registrada, dentro del calendario. */
.rsv__registro {
  margin: -0.2rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  animation: reg-entra 260ms var(--ease-out);
}
.rsv__registro.es-si { background: rgba(17,17,17,0.05); color: var(--ink); }
.rsv__registro.es-no { background: rgba(17,17,17,0.06); color: var(--ink); border-left: 3px solid var(--ink); }
.rsv__registro a { color: var(--ink); text-decoration: underline; font-weight: 600; }

/* ==========================================================
   SISTEMA DE ESTILO
   ----------------------------------------------------------
   Un solo sitio donde viven los redondeos, las sombras y los
   ritmos. Antes cada sección tenía los suyos —22px aquí, 18
   allá, 16 más abajo— y esa inconsistencia es lo que hace que
   una web parezca hecha a trozos aunque cada trozo esté bien.
   ========================================================== */
:root {
  /* Redondeos: tres, no doce */
  --r-chico:  14px;
  --r-medio:  20px;
  --r-grande: 26px;

  /* Sombras: siempre la misma familia, sólo cambia la altura */
  --sombra-1: 0 2px 8px rgba(0,0,0,0.05);
  --sombra-2: 0 10px 30px rgba(0,0,0,0.10);
  --sombra-3: 0 24px 60px rgba(0,0,0,0.16);

  /* El aire entre secciones */
  --aire-seccion: clamp(3rem, 8vw, 7rem);
}

/* Todo lo que sea una caja comparte redondeo y borde. */
.cat, .fam__foto, .pronto__marco, .method-hero__stage,
.reg__doc, .reto, .perfil__cifra, .juego__panel,
.map-wrap, .rsv__panel, .perfil__oferta {
  border-radius: var(--r-medio);
}
.page__wrap, .rueda { border-radius: var(--r-grande); }
.rsv__campo input, .rsv__campo textarea,
.reg__doc-texto, .parq__extra textarea { border-radius: var(--r-chico); }

/* ==========================================================
   CINEMÁTICA DE ENTRADA
   ----------------------------------------------------------
   Cada bloque entra al aparecer: sube un poco y se revela.
   Una sola regla para toda la web, en lugar de animaciones
   sueltas por sección — así el ritmo es el mismo en todas
   partes, que es de donde viene la sensación de acabado.

   Sólo la primera vez. Que un bloque desaparezca al subir
   marea y hace que la web parezca inestable.
   ========================================================== */
.entra {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.entra.es-visible { opacity: 1; transform: none; }

/* En cadena: los hijos entran uno detrás de otro, no todos de
   golpe. El escalonado es lo que se lee como intención. */
.entra--cadena > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.entra--cadena.es-visible > *        { opacity: 1; transform: none; }
.entra--cadena.es-visible > *:nth-child(2) { transition-delay: 90ms; }
.entra--cadena.es-visible > *:nth-child(3) { transition-delay: 180ms; }
.entra--cadena.es-visible > *:nth-child(4) { transition-delay: 270ms; }
.entra--cadena.es-visible > *:nth-child(5) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .entra, .entra--cadena > * { opacity: 1; transform: none; transition: none; }
}


/* ---- El PAR-Q, dentro del documento ---- */
.parq { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 2px solid var(--ink); }
.parq__tit {
  margin: 0 0 1rem; font-family: var(--sans); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.02em; color: var(--ink);
}
.parq__p { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.parq__txt { margin: 0 0 0.6rem; font-size: 0.88rem; line-height: 1.5; color: var(--ink); }
.parq__txt b { color: var(--mute); margin-right: 0.3rem; }
.parq__ops { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.parq__op {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--mute);
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
/* El radio se esconde pero SIGUE siendo pulsable. Con
   pointer-events:none, en iOS la etiqueta deja de activarlo y el botón
   se queda muerto: se ve, se pulsa y no pasa nada. */
.parq__op { position: relative; min-height: 44px; }
.parq__op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* Marcada = fondo negro. Un radio del sistema a este tamaño se ve
   diminuto en el móvil y la gente no sabe si ha respondido. */
.parq__op:has(input:checked),
.parq__op.es-marcada { background: var(--ink); color: var(--white); border-color: var(--ink); }
.parq__extra { padding-top: 1rem; }
.parq__extra span { display: block; margin-bottom: 0.4rem; font-size: 0.82rem; color: var(--mute); line-height: 1.45; }
.parq__extra textarea {
  width: 100%; padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: 12px;
  font: inherit; font-size: 0.88rem; color: var(--ink); resize: vertical;
}

/* ---- Acompañantes dentro del formulario ---- */
.rsv__gente {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem 0 0.2rem;
  border-top: 1px solid var(--line);
}
.rsv__gente-lista { display: grid; gap: 0.55rem; }
.rsv__persona {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
  animation: gente-entra 260ms var(--ease-out);
}
@keyframes gente-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.rsv__persona input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--white);
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
}
.rsv__persona input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.rsv__quitar {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--mute);
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
@media (hover:hover){.rsv__quitar:hover{ background: var(--ink); color: var(--white); }}

.rsv__mas {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: none;
  color: var(--mute);
  font-family: var(--sans); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color 200ms var(--ease), color 200ms var(--ease), background-color 200ms var(--ease);
}
.rsv__mas:focus-visible{
  border-style: solid; border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-2, #f4f2ee);
}
@media (hover:hover){.rsv__mas:hover{
  border-style: solid; border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-2, #f4f2ee);
}}
.rsv__mas[disabled] { opacity: 0.4; cursor: default; }
.rsv__mas span { font-size: 1.05rem; line-height: 1; }

.rsv__gente-nota {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--mute);
  text-wrap: pretty;
}

@media (max-width: 520px) {
  /* En vertical, nombre y correo uno debajo de otro: en dos columnas
     no cabe ni un nombre completo. */
  .rsv__persona { grid-template-columns: 1fr auto; }
  .rsv__persona input:nth-child(2) { grid-column: 1 / -1; }
}

/* ==========================================================
   EL JUEGO — La metamorfosis
   ----------------------------------------------------------
   Ventana sobre la página de gracias. Se abre encima, no navega
   a otro sitio: quien acaba de reservar no debe perder de vista
   los datos de su reserva por ponerse a jugar.
   ========================================================== */
.juego {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: clamp(0.8rem, 3vw, 2rem);
}
.juego.is-abierto { display: grid; }
.juego__scrim {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.62);
  backdrop-filter: blur(3px);
}
.juego__panel {
  position: relative;
  width: min(100%, 1320px);
  padding: clamp(1.2rem, 3vw, 2rem);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  text-align: center;
}
.juego__cerrar {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--mute);
  cursor: pointer;
  transition: background-color 220ms var(--ease), color 220ms var(--ease);
}
@media (hover:hover){.juego__cerrar:hover{ background: var(--ink); color: var(--white); }}

.juego__titulo {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.juego__titulo em { font-family: var(--serif); font-style: italic; font-size: var(--serif-cuerpo, 1.04em); }
.juego__sub {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
  color: var(--mute);
}

.juego__marcador {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
  margin: 0.9rem 0 0.5rem;
  font-variant-numeric: tabular-nums;   /* que no baile al subir */
}
.juego__marcador > span:first-child {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.juego__record {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.juego__lienzo {
  display: block;
  width: 100%;
  height: auto;
  /* Sin aspect-ratio: la proporción la fija el propio lienzo, que en
     móvil se dibuja más alto y más estrecho. */
  max-height: min(72vh, 580px);
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  /* none, no manipulation: el dedo dentro del lienzo es el mando del
     juego, nunca un gesto de desplazar la página. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.juego__ayuda {
  margin: 0.8rem 0 0;
  font-size: 0.78rem;
  color: var(--mute);
  min-height: 1.2em;              /* el texto cambia; que no salte el panel */
}
.juego__ayuda b { color: var(--ink); font-weight: 600; }

/* El premio: aparece sólo al cruzar la meta. */
.juego__premio {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: var(--ink);
  color: var(--white);
  animation: premio-entra 520ms var(--ease-out);
}
.juego__premio-tit {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  letter-spacing: -0.01em;
}
.juego__premio-tit em { font-family: var(--serif); font-style: italic; font-size: var(--serif-cuerpo, 1.04em); }
.juego__premio-txt {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.78);
}
@keyframes premio-entra {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

body.is-jugando { overflow: hidden; }

@media (max-width: 640px) {
  /* En el móvil el juego ocupa la pantalla entera: en un panel con
     márgenes se quedaba en una tira estrecha, y en un corredor lo
     que importa es ver venir las cosas con tiempo. */
  .juego { padding: 0; }
  .juego__panel {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    padding: 0.9rem 0.6rem;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
  }
  .juego__titulo { font-size: 1.2rem; }
  .juego__sub { display: none; }          /* en vertical, sobra */
  .juego__marcador { margin: 0.5rem 0 0.4rem; }
  .juego__lienzo { max-height: 64vh; }
  .juego__ayuda { font-size: 0.72rem; }
}

/* Apaisado en móvil: casi todo para el lienzo. */
@media (max-width: 900px) and (orientation: landscape) {
  .juego__titulo, .juego__sub { display: none; }
  .juego__lienzo { max-height: 72vh; }
}

/* ---- Paginación de "Somos EM": cuatro a la vez ---- */
.fam__grid .fam__card[hidden] { display: none; }

.fam__paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(1.1rem, 2.6vw, 1.8rem);
}
.fam__pag {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--mute);
  cursor: pointer;
  transition: background-color 240ms var(--ease), color 240ms var(--ease),
              border-color 240ms var(--ease), transform 240ms var(--ease-out);
}
.fam__pag:focus-visible{
  background: var(--ink); color: var(--white); border-color: var(--ink);
  transform: translateY(-2px);
}
@media (hover:hover){.fam__pag:hover{
  background: var(--ink); color: var(--white); border-color: var(--ink);
  transform: translateY(-2px);
}}
/* En el extremo no desaparece, se apaga: si el botón se quitara,
   el de al lado se movería de sitio a mitad de recorrido. */
.fam__pag[disabled] { opacity: 0.3; cursor: default; transform: none; }
@media (hover:hover){.fam__pag[disabled]:hover{ background: var(--white); color: var(--mute); border-color: var(--line-strong); }}

.fam__puntos { display: inline-flex; gap: 0.4rem; }
.fam__punto-pag {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color 260ms var(--ease), transform 260ms var(--ease-out);
}
.fam__punto-pag.es-activa { background: var(--ink); transform: scale(1.35); }

/* Ningún botón desalineado: todos centran su contenido y
   comparten alto mínimo, así dos botones seguidos nunca quedan
   uno más alto que el otro por tener el texto más largo. */
.cta {
  justify-content: center;
  text-align: center;
  min-height: 3.1rem;
}
.gracias__acciones, .fam__acciones, .side__foot { align-items: center; }

/* El botón que cierra "Cómo reservar". Centrado y separado de
   la letra pequeña, para que no parezca parte de ella. */
.booking__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

/* ==========================================================
   PRÓXIMAMENTE
   ----------------------------------------------------------
   Una sola banda con esquinas redondeadas, del mismo ancho que
   el resto de la web. Dentro, las dos imágenes al 50% exacto.

   El desenfoque es moderado a propósito: lo justo para que no
   se distinga el producto, no tanto como para que parezca un
   error de carga. Si no se intuye nada, no hay intriga.
   ========================================================== */
.pronto {
  background: var(--white);
  padding: clamp(1.6rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2.5rem);
}
.pronto__marco {
  position: relative;
  /* Más estrecho que el resto de secciones a propósito: es un
     adelanto, no un capítulo. Si ocupara lo mismo que "Somos EM"
     pesaría igual que ella, y todavía no hay nada detrás. */
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 50 / 50 exacto */
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  /* SIN overflow hidden: recortaba el globo por arriba y se perdía
     la primera línea. Las esquinas redondeadas las ponen ahora
     las mitades, cada una con las suyas. */
  background: #1a1a1a;
  isolation: isolate;
}
.pronto__mitad { position: relative; overflow: hidden; }
.pronto__mitad:first-child  { border-radius: 22px 0 0 22px; }
.pronto__mitad + .pronto__mitad { border-radius: 0 22px 22px 0; }
.pronto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* scale tapa el borde transparente que deja el desenfoque:
     sin esto se ve un halo claro pegado a los cuatro lados. */
  transform: scale(1.06);
  filter: blur(9px) saturate(0.86) brightness(0.72);
}
/* Velo oscuro. Además de apagar el detalle, garantiza que el
   texto blanco se lea pase lo que pase con la foto de debajo. */
.pronto__mitad::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.30);
}

/* El título va encima de la costura, atravesando las dos
   mitades: es lo que hace que se lean como una sola imagen. */
.pronto__titulo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  color: var(--white);
  /* Misma receta que el resto de títulos de la web: Space Grotesk
     en negrita y con el interletrado cerrado. Antes iba en
     mayúsculas y desentonaba: aquí no hay ni un titular así. */
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.7rem, 5.2vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  pointer-events: none;             /* no debe robarle el clic a los puntos */
}

/* ---------- Los dos puntos ---------- */
.pronto__punto {
  position: absolute;
  z-index: 3;
  /* En el tercio de arriba, no en el centro: ahí chocaban con el
     título y no se distinguían del texto. */
  top: 22%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;        /* zona de toque cómoda; el punto se pinta dentro */
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.pronto__punto--a { left: 25%; }
.pronto__punto--b { left: 75%; }

.pronto__pip {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.28), 0 2px 10px rgba(0,0,0,0.35);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.pronto__punto:focus-visible .pronto__pip, .pronto__punto.is-abierto .pronto__pip{
  transform: scale(1.25);
  box-shadow: 0 0 0 7px rgba(255,255,255,0.34), 0 2px 14px rgba(0,0,0,0.4);
}
@media (hover:hover){.pronto__punto:hover .pronto__pip{
  transform: scale(1.25);
  box-shadow: 0 0 0 7px rgba(255,255,255,0.34), 0 2px 14px rgba(0,0,0,0.4);
}}

/* ---------- El globo que sale al pasar por encima ---------- */
.pronto__globo {
  position: absolute;
  /* Hacia arriba, no hacia abajo: saliendo por debajo caía justo
     encima del "Próximamente" y lo tapaba. Arriba no hay nada. */
  bottom: calc(50% + 26px);
  left: 50%;
  z-index: 4;
  display: grid;
  gap: 0.15rem;
  width: max-content;
  max-width: min(64vw, 260px);
  padding: 0.62rem 0.9rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 8px 30px rgba(0,0,0,0.22);
  text-align: left;
  /* Arranca invisible y un pelo más abajo, para que al aparecer
     parezca que sale del punto y no que se enciende una capa. */
  opacity: 0;
  transform: translate(-50%, -6px);
  pointer-events: none;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.pronto__punto:focus-visible .pronto__globo, .pronto__punto.is-abierto .pronto__globo{
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (hover:hover){.pronto__punto:hover .pronto__globo{
  opacity: 1;
  transform: translate(-50%, 0);
}}
.pronto__globo-tit {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.pronto__globo-txt {
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: pretty;
}

@media (max-width: 720px) {
  /* En vertical, 21/9 dejaría una rendija. Se hace más alta y
     las dos mitades siguen partiendo la banda por el medio. */
  .pronto__marco { aspect-ratio: 3 / 2; }
  .pronto__mitad:first-child { border-radius: 18px 0 0 18px; }
  .pronto__mitad + .pronto__mitad { border-radius: 0 18px 18px 0; }
  /* Bien arriba, lejos del título, que va centrado. Antes estaban
     a media altura y se pegaban a la palabra "Próximamente".
     El globo puede asomar por encima de la banda sin problema:
     el marco ya no recorta. */
  .pronto__punto { top: 19%; }
  .pronto__globo { max-width: 46vw; }
  .pronto__globo { max-width: 42vw; padding: 0.5rem 0.7rem; }
  .pronto__globo-txt { font-size: 0.82rem; }
  /* Los globos de los extremos se salían por el borde: se anclan
     al lado de dentro en vez de centrarse en el punto. */
  .pronto__punto--a .pronto__globo { left: 0; transform: translate(0, -6px); }
  .pronto__punto--a.is-abierto .pronto__globo{ transform: translate(0, 0); }
@media (hover:hover){.pronto__punto--a:hover .pronto__globo{ transform: translate(0, 0); }}
  .pronto__punto--b .pronto__globo { left: auto; right: 0; transform: translate(0, -6px); }
  .pronto__punto--b.is-abierto .pronto__globo{ transform: translate(0, 0); }
@media (hover:hover){.pronto__punto--b:hover .pronto__globo{ transform: translate(0, 0); }}
}

/* ==========================================================
   PALABRAS DESCOLGADAS
   ----------------------------------------------------------
   El problema: un título parte en dos y la última palabra se
   queda sola en su renglón ("Gracias, Julio. Nos / vemos").
   Hace ruido y se ve descuidado, sobre todo en móvil.

   balance  reparte las palabras entre los renglones para que
            queden parecidos: es para titulares (pocas líneas).
   pretty   solo evita que sobre una palabra suelta al final:
            es para párrafos largos, donde balance es caro.

   Donde el navegador no lo soporte no pasa nada: se queda
   como estaba. Y donde el corte no debe moverse (una dirección,
   un precio) usamos &nbsp; en el HTML, que manda siempre.
   ========================================================== */
h1, h2, h3, h4,
.page__title, .sec__title, .cat__title, .why-em__title,
.fam__title, .rsv__titulo, .confirmar__titulo,
.mega-foot__signup-title, .mega-foot__title,
.hero__small, .step__title, .faq__q {
  text-wrap: balance;
}

p, li, figcaption, blockquote,
.page__lead, .sec__lead, .cat__body, .why-em__text,
.fam__cita-txt, .rsv__sub, .rsv__pie, .confirmar__texto,
.confirmar__nota, .step__body, .faq__a {
  text-wrap: pretty;
}

/* ============================================================
   CABECERA DE "SOMOS EM" — conmutador foto / reseña
   ------------------------------------------------------------
   Dos cosas quieren el mismo sitio al pasar por encima de una
   foto: el después y lo que cuenta esa persona. En vez de
   apilarlas, se elige cuál. En reposo siempre se ve el antes.
   ============================================================ */
.fam__acciones {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.fam__modo {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white);
}
.fam__modo-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 999px;
  color: var(--mute);
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
@media (hover:hover){.fam__modo-btn:hover{ color: var(--ink); }}
.fam__modo-btn.is-activo {
  background: var(--ink);
  color: var(--white);
}
.fam__modo-btn svg { display: block; }

@media (max-width: 640px) {
  /* En móvil la cabecera se apila: el título arriba y los controles
     debajo, en su propia fila. En línea no caben. */
  .fam__head { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .fam__acciones { width: 100%; justify-content: space-between; }
}


/* ==========================================================
   LAS PÁGINAS INTERIORES — FONDO Y VIDRIO
   ----------------------------------------------------------
   FAQs, método, contacto, aviso legal, política de privacidad,
   ubicación y mi perfil. Las siete comparten "body.page-inner" y
   esta hoja, así que van todas desde aquí: un bloque, siete
   páginas, y ninguna posibilidad de que una se quede distinta.

   No se toca NADA de lo que había: ni el contenido, ni la
   tipografía, ni la retícula, ni el pie. Solo lo que hay DEBAJO
   —el fondo— y el material de la caja que lo lleva.

   Va al final de la hoja a propósito. Todo lo de arriba sigue
   escrito igual y se lee sin sorpresas; lo que cambia está junto,
   en un sitio, y se quita borrando este bloque.

   Los nombres de aquí abajo están sacados de las páginas, no
   supuestos: "método" no usa .page ni .page__wrap como las otras
   seis —tiene su propio .method-hero— y escribiendo de memoria se
   habría quedado fuera sin que se notara hasta abrirla.
   ========================================================== */

/* ---------- El fondo ----------
   Antes era un color plano —el hueso #f6f4ef— de arriba abajo, y
   justo debajo empezaba el cielo blanco de la ilustración del pie.
   Dos planos casi iguales que se tocan dibujan una línea
   horizontal a lo ancho de la pantalla, y el ojo la lee como un
   corte entre la página y el pie. Es el mismo problema que tenía
   la portada, y se arregla igual.

   Ahora baja de hueso a blanco y termina en #fdfdfd, que es el
   tono EXACTO con el que arranca esa ilustración —medido en el
   propio JPG: 253,253,253 en toda su primera fila—. Donde se
   tocan son el mismo color: no hay borde que ver.

   Y lleva las mismas tres manchas que la portada, muy bajas, para
   que no sea un cartón plano. En negro y al 3 %: lo justo para que
   la luz no sea uniforme. */
/* Esta regla es para las páginas que TODAVÍA no han pasado al
   lenguaje nuevo. Las que ya lo llevan tienen la capa .fondo, que
   hace esto mismo y además sabe apagarse antes del pie; el
   ":not(.es-interior)" evita que las dos se pinten una encima de
   otra, que es de donde salía la costura de método. */
body.page-inner:not(.es-interior) .page,
body.page-inner:not(.es-interior) .method-hero{
  background-color:#fdfdfd;
  background-image:
    radial-gradient(58% 52% at 22% 18%, rgba(14,13,11,.030) 0%, transparent 62%),
    radial-gradient(52% 58% at 78% 46%, rgba(14,13,11,.022) 0%, transparent 60%),
    radial-gradient(72% 40% at 48% 82%, rgba(14,13,11,.026) 0%, transparent 66%),
    linear-gradient(to bottom, #f4f2ed 0%, #f9f8f5 46%, #fdfdfd 88%, #fdfdfd 100%);
}
body.page-inner .method-hero__stage{ background:transparent }

/* ---------- La caja, de vidrio ----------
   Era blanco macizo sobre hueso. Sobre un fondo que ahora ACABA en
   blanco, un blanco macizo desaparecería por abajo y se vería por
   arriba: la caja pasaría de existir a no existir según por dónde
   vayas.

   El vidrio lo resuelve porque no tiene color propio: coge el del
   fondo, lo aclara un poco y lo desenfoca. Así se lee igual arriba
   que abajo —siempre un punto más clara que lo que tiene detrás— y
   además deja ver las manchas por debajo, que es lo que la hace
   parecer material y no un rectángulo.

   El desenfoque es de 14 px y no de los 30 que se estilan: por
   encima de veintitantos el fondo se convierte en una papilla y da
   igual lo que hubiera detrás, con lo cual deja de ser vidrio y
   pasa a ser una capa blanca cara de pintar.

   Un aviso para el futuro: "backdrop-filter" crea bloque
   contenedor, así que cualquier cosa con position:fixed que se
   meta DENTRO de esta caja dejará de estar fija respecto a la
   ventana. Hoy no hay ninguna en las siete páginas —está
   comprobado—; el menú, los modales y el calendario cuelgan del
   body, fuera. */
body.page-inner .page__wrap,
body.page-inner .method-hero__wrap{
  /* De partida, OPACA. Este es el estado que ve un navegador que
     no sepa hacer vidrio, y es un estado bueno: la caja de siempre.
     El vidrio se añade justo debajo, solo si se puede.

     Escrito al revés —vidrio por defecto y "si no se puede,
     opaca"— el fallo se paga con texto ilegible sobre el fondo, y
     además obliga a un "@supports not (A or B)" que ni siquiera
     todos los analizadores entienden. Así el peor caso es el
     bueno. */
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),      /* el canto de arriba, que recoge luz */
    0 1px 2px rgba(14,13,11,.04),
    0 24px 60px rgba(14,13,11,.07);          /* la sombra que la despega del fondo */
}
@supports (backdrop-filter: blur(1px)){
  body.page-inner .page__wrap,
  body.page-inner .method-hero__wrap{
    background:rgba(255,255,255,.58);
    backdrop-filter:blur(14px) saturate(1.35);
  }
}
@supports (-webkit-backdrop-filter: blur(1px)){
  body.page-inner .page__wrap,
  body.page-inner .method-hero__wrap{
    background:rgba(255,255,255,.58);
    -webkit-backdrop-filter:blur(14px) saturate(1.35);
  }
}

/* Las piezas de dentro que también eran macizas: mismo motivo y
   mismo remedio, con menos desenfoque porque son pequeñas y ya
   están sobre la caja grande — apilar dos desenfoques cuesta el
   doble y no se nota.

   Los campos del formulario y los botones se quedan como estaban:
   un campo de texto tiene que decir "aquí se escribe", y para eso
   necesita un fondo firme que lo separe de lo que hay detrás. */
body.page-inner .perfil__cifra,
body.page-inner .perfil__ok,
body.page-inner .perfil__foto,
body.page-inner .tienda-nota,
body.page-inner .method-hero__nav-arrow{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 2px rgba(14,13,11,.04), 0 10px 26px rgba(14,13,11,.05);
}
@supports (backdrop-filter: blur(1px)){
  body.page-inner .perfil__cifra,
  body.page-inner .perfil__ok,
  body.page-inner .perfil__foto,
  body.page-inner .tienda-nota,
  body.page-inner .method-hero__nav-arrow{
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(8px);
  }
}

/* En pantallas pequeñas, sin desenfoques.
   No es por gusto: un backdrop-filter obliga al navegador a
   recomponer todo lo que hay detrás en cada fotograma, y en un
   móvil eso se paga en el scroll, que es lo que se está haciendo
   el cien por cien del tiempo en estas páginas. Un fondo casi
   opaco se ve prácticamente igual y no cuesta nada. */
@media (max-width:700px){
  body.page-inner .page__wrap,
  body.page-inner .method-hero__wrap,
  body.page-inner .perfil__cifra,
  body.page-inner .perfil__ok,
  body.page-inner .perfil__foto,
  body.page-inner .tienda-nota,
  body.page-inner .method-hero__nav-arrow{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(255,255,255,.92);
  }
}