/* =====================================================================
   TIPOGRAFÍAS · servidas desde el propio dominio
   Cormorant Garamond y Montserrat (SIL Open Font License 1.1), los mismos
   pesos y subconjuntos que servía Google Fonts: nada cambia a la vista,
   pero ya no se pide nada a Google (ni una petición, ni una IP).
   Ficheros con la versión en el nombre: si se actualizan, cambia la URL.
   ===================================================================== */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/montserrat-5.3.0-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/montserrat-5.3.0-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/montserrat-5.3.0-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/montserrat-5.3.0-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-5.3.0-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-5.3.0-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-5.3.0-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-5.3.0-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-5.3.0-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-5.3.0-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-5.3.0-latin-500-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-5.3.0-latin-ext-500-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* =====================================================================
   ALKIMIA FAMILIA · Sistema de diseño
   Paleta, tipografía, ritmo y micro-interacciones
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Paleta */
  --blanco-roto:   #F7F3EF;
  --beige-calido:  #E8DCCF;
  --oliva-suave:   #A3B18A;
  --bosque-apagado:#5F6F52;
  --terracota:     #C97B63;
  --marron-calido: #82543F;   /* antes #8A5A44: 4,3:1 sobre beige; ahora 4,7 (AA) */
  --dorado-suave:  #D6C3A3;
  --tinta:         #3A3330;

  /* Derivados / superficies */
  --tinta-70: rgba(58, 51, 48, .76);   /* .70 daba 4,2:1 sobre beige; .76 da 4,85 (AA) */
  --tinta-55: rgba(58, 51, 48, .55);
  --linea:    rgba(138, 90, 68, .18);
  --sombra-suave: 0 18px 50px -28px rgba(58, 51, 48, .35);
  --sombra-card:  0 30px 60px -40px rgba(58, 51, 48, .55);

  /* Tipografía */
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.14rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-4:  clamp(2.7rem, 1.9rem + 4vw, 5.6rem);
  --step-5:  clamp(3.2rem, 2rem + 6vw, 7.5rem);

  /* Ritmo */
  --pad-seccion: clamp(3.6rem, 7vw, 7rem);
  --ancho-lectura: 68ch;
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --radio: 2px;
  --radio-img: 4px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.9s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* El recorte horizontal va en la RAÍZ, nunca en el body.
   Con `body { overflow-x: hidden }` el body se convierte en el contenedor que
   hace scroll: window.scrollY se queda en 0, el parallax deja de moverse y el
   navegador no dispara la carga diferida de las imágenes (se quedan en el
   marcador borroso). `clip` recorta sin crear contenedor de scroll. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;          /* respaldo para Safari 15 y anteriores */
}
@supports (overflow: clip) {
  html { overflow-x: clip; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--tinta);
  background: var(--blanco-roto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--marron-calido); outline-offset: 3px; border-radius: 2px; }

/* ---------- Tipografía base ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: var(--tinta);
  font-variant-ligatures: common-ligatures;
}
h1, .h1 { font-size: var(--step-4); font-weight: 400; letter-spacing: 0.01em; }
h2, .h2 { font-size: var(--step-3); }
h3, .h3 { font-size: var(--step-2); }
p { max-width: var(--ancho-lectura); }
strong { font-weight: 600; }
em { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--marron-calido);
  display: inline-block;
}
.text-serif { font-family: var(--serif); }
.muted { color: var(--tinta-70); }

/* ---------- Layout ---------- */
.wrap { width: min(1280px, 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--pad-seccion); position: relative; }
.section--beige { background: var(--beige-calido); }
.section--bosque { background: var(--bosque-apagado); color: var(--blanco-roto); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.section--bosque h1, .section--bosque h2, .section--bosque h3 { color: var(--blanco-roto); }
.section--bosque .eyebrow { color: var(--dorado-suave); }

/* ---------- Botones / CTA ---------- */
.btn {
  --bg: var(--terracota);
  --fg: var(--blanco-roto);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95em 1.9em;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  transition: background .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
.btn .arrow { transition: transform .45s var(--ease); }
.btn:hover { background: var(--marron-calido); transform: translateY(-2px); box-shadow: var(--sombra-suave); }
.btn:hover .arrow { transform: translateX(5px); }
.btn--ghost {
  --bg: transparent; --fg: var(--tinta);
  border: 1px solid var(--linea);
  padding: 0.9em 1.8em;
}
.btn--ghost:hover { --bg: var(--tinta); --fg: var(--blanco-roto); border-color: var(--tinta); }
.btn--light { --bg: var(--blanco-roto); --fg: var(--tinta); }
.btn--light:hover { --bg: var(--dorado-suave); }

/* Enlace de texto con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--marron-calido);
  padding-bottom: 3px;
  position: relative;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow .arrow { transition: transform .45s var(--ease); }
.link-arrow:hover .arrow { transform: translateX(5px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: clamp(1rem, 2vw, 1.5rem);
  transition: background .55s var(--ease), box-shadow .55s var(--ease), padding .55s var(--ease);
}
.site-header.is-scrolled {
  background: var(--blanco-roto);
  box-shadow: 0 1px 0 var(--linea), 0 12px 30px -24px rgba(58,51,48,.4);
  padding-block: 0.7rem;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
  line-height: 1;
}
.brand__mark { width: 34px; height: 34px; flex: none; display: block; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nav__links {
  display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.6rem);
}
.nav__link {
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--tinta);
  position: relative;
  padding: 0.4em 0;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--marron-calido); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--marron-calido); }
.nav__actions { display: flex; align-items: center; gap: 1rem; }

/* Header transparente sobre hero */
.site-header:not(.is-scrolled).over-hero .nav__link,
.site-header:not(.is-scrolled).over-hero .brand { color: var(--blanco-roto); }
.site-header:not(.is-scrolled).over-hero .nav__link::after { background: var(--blanco-roto); }
/* El símbolo es artwork a color: sobre foto sólo necesita una sombra suave
   para despegarse del fondo, no un recoloreado. */
.site-header:not(.is-scrolled).over-hero .brand__mark img { filter: drop-shadow(0 1px 6px rgba(40,30,24,.45)); }
.site-header:not(.is-scrolled).over-hero .burger span { background: var(--blanco-roto); }

/* Burger */
.burger { display: none; width: 30px; height: 20px; position: relative; }
.burger span {
  position: absolute; left: 0; height: 1.5px; width: 100%; background: var(--tinta);
  transition: transform .4s var(--ease), opacity .3s var(--ease), background .4s var(--ease);
}
.burger span:nth-child(1) { top: 2px; }
.burger span:nth-child(2) { top: 9px; }
.burger span:nth-child(3) { top: 16px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil full-screen */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--blanco-roto);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 0.2em; }
.mobile-menu__link {
  font-family: var(--serif);
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 400;
  color: var(--tinta);
  padding: 0.15em 0;
  opacity: 0; transform: translateY(18px);
}
body.menu-open .mobile-menu__link { animation: menuIn .6s var(--ease) forwards; }
.mobile-menu__link:hover { color: var(--marron-calido); }
.mobile-menu__cta { align-self: flex-start; margin-top: 2rem; }
.mobile-menu__foot { margin-top: 2.5rem; display: flex; gap: 1.5rem; flex-wrap: wrap; color: var(--tinta-70); font-size: var(--step--1); letter-spacing: .1em; }
@keyframes menuIn { to { opacity: 1; transform: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--blanco-roto);
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media img {
  width: 100%; height: 120%; object-fit: cover;
  transform: scale(1.05);
}
.hero.is-ready .hero__media img { animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.16) translateY(-1.5%); } }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(58,51,48,.30) 0%, rgba(58,51,48,0) 30%),
    linear-gradient(0deg, rgba(58,51,48,.62) 0%, rgba(58,51,48,.08) 45%, rgba(58,51,48,0) 70%);
}
.hero__inner { position: relative; padding-bottom: clamp(5rem, 12vh, 9rem); padding-top: 8rem; width: 100%; }
.hero__title {
  font-size: var(--step-5);
  font-weight: 400;
  line-height: 1.02;
  max-width: 15ch;
  color: var(--blanco-roto);
}
.hero__title .line { display: block; }
.hero__title .line > span { display: block; }
.hero__sub {
  margin-top: 1.4rem;
  font-size: var(--step-1);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  max-width: 40ch;
  color: rgba(247, 243, 239, .92);
}
.hero__claim { margin-bottom: 1.4rem; color: var(--dorado-suave); }

/* Scroll hint */
.scroll-hint {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: rgba(247,243,239,.8); font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase;
}
.scroll-hint .line-v { width: 1px; height: 46px; background: rgba(247,243,239,.6); transform-origin: top; }
.scroll-hint .line-v { animation: breathe 2.6s var(--ease) infinite; }
@keyframes breathe { 0%,100% { transform: scaleY(.4); opacity:.5 } 50% { transform: scaleY(1); opacity:1 } }

/* Hero interno (páginas) */
.page-hero {
  position: relative; min-height: clamp(60svh, 70vh, 80svh);
  display: flex; align-items: flex-end; overflow: hidden; color: var(--blanco-roto);
}
.page-hero .hero__media img { height: 118%; }
.page-hero .hero__inner { padding-block: clamp(4rem, 9vh, 7rem) clamp(3.5rem, 8vh, 6rem); }
.page-hero .hero__title { font-size: var(--step-4); max-width: 20ch; }

/* ---------- Media / imágenes ---------- */
.media {
  position: relative; overflow: hidden; border-radius: var(--radio-img);
  background: var(--beige-calido) center/cover no-repeat;
}
.media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s var(--ease), transform .9s var(--ease);
  transform: scale(1.04);
}
.media.is-loaded img { opacity: 1; transform: scale(1); }
/* El JS escribe `transform` en línea a cada scroll sobre las imágenes con
   parallax: si además hubiera una transición CSS de transform, el navegador
   interpolaría sin parar y la foto quedaría arrastrándose por detrás. */
[data-parallax] img { transition: opacity .45s var(--ease); }
/* El blur-up ya lo hace el LQIP de fondo. Un backdrop-filter a pantalla
   completa sobre cada bloque de imagen obliga al compositor a reprocesar el
   fondo en cada frame: era uno de los grandes costes de la página. */
.media::after {
  content: ""; position: absolute; inset: 0;
  transition: opacity 1s var(--ease); background: transparent; pointer-events: none;
}
.media.is-loaded::after { opacity: 0; }
.media--tall { aspect-ratio: 4 / 5; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--square { aspect-ratio: 1 / 1; }
.media--wide { aspect-ratio: 3 / 2; }
.media--cuadro { aspect-ratio: 1 / 1; }
.media--full { aspect-ratio: 16 / 10; }

/* Parallax wrapper */
.parallax { overflow: hidden; }
.parallax img { will-change: transform; }

/* ---------- Bloque editorial alterno ---------- */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.editorial--reverse .editorial__media { order: 2; }
.editorial__body { max-width: 52ch; }
.editorial__body h2 { margin-bottom: 1.2rem; }
.editorial__title { margin-bottom: 1.4rem; }
.prose p + p { margin-top: 1.15em; }
.prose p { color: var(--tinta-70); }
.prose .lead { font-family: var(--serif); font-size: var(--step-1); font-style: italic; color: var(--tinta); max-width: 30ch; }
.verse p { color: var(--tinta-70); }
.verse p + p { margin-top: 0.9em; }

@media (max-width: 800px) {
  .editorial { grid-template-columns: 1fr; gap: 2.2rem; }
  .editorial--reverse .editorial__media { order: 0; }
  .editorial__media { max-width: 560px; }
}

/* ---------- Tarjetas de acompañamiento (3 vías) ---------- */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); }
.path-card {
  background: var(--blanco-roto);
  border: 1px solid var(--linea);
  border-radius: var(--radio-img);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease);
  min-height: 100%;
}
.path-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-card); }
.path-card__num { font-family: var(--serif); font-size: var(--step-1); color: var(--dorado-suave); }
.path-card h3 { font-size: var(--step-1); }
.path-card p { color: var(--tinta-70); font-size: var(--step--1); flex-grow: 1; }
.path-card .link-arrow { margin-top: 0.4rem; }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ---------- Tarjetas de programa ---------- */
.programs { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.program-card {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
}
.program-card--reverse .program-card__media { order: 2; }
.program-card--feature { padding: clamp(1.5rem,4vw,3rem); background: var(--beige-calido); border-radius: 6px; }
.program-card__media { position: relative; }
.program-card__figure { position: relative; overflow: hidden; border-radius: var(--radio-img); }
.program-card__figure img { transition: transform 1.2s var(--ease); }
.program-card:hover .program-card__figure img { transform: scale(1.04); }
.program-card__overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1.3rem;
  background: linear-gradient(0deg, rgba(58,51,48,.5), rgba(58,51,48,0) 55%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.program-card:hover .program-card__overlay { opacity: 1; }
.program-card__overlay .link-arrow { color: var(--blanco-roto); }
.program-card__tag { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--marron-calido); }
.program-card__title { font-size: var(--step-2); margin: 0.5rem 0 0.4rem; }
.program-card__sub { font-family: var(--serif); font-style: italic; font-size: var(--step-1); color: var(--bosque-apagado); margin-bottom: 1.1rem; }
.program-card__body p { color: var(--tinta-70); font-size: var(--step--1); }
.program-card__body p + p { margin-top: 0.9em; }
.program-card__cta { margin-top: 1.4rem; }
.program-card__figures { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 820px) {
  .program-card { grid-template-columns: 1fr; gap: 1.6rem; }
  .program-card--reverse .program-card__media { order: 0; }
}

/* ---------- Acompañamiento (servicios) ---------- */
.service { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.service--reverse .service__media { order: 2; }
.service__list { margin-top: 1.3rem; display: grid; gap: 0.55rem; }
.service__list li { position: relative; padding-left: 1.6rem; color: var(--tinta-70); font-size: var(--step--1); }
.service__list li::before {
  content: ""; position: absolute; left: 0; top: 0.65em; width: 10px; height: 1px; background: var(--terracota);
}
.service__cta { margin-top: 1.6rem; }
@media (max-width: 820px) {
  .service { grid-template-columns: 1fr; gap: 1.6rem; }
  .service--reverse .service__media { order: 0; }
}

/* ---------- Sello alquímico / separador ---------- */
.alkimia-rule { display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding-block: clamp(1.2rem, 2.6vw, 2.2rem); }
.alkimia-rule .seg { height: 1px; width: min(120px, 22vw); background: linear-gradient(90deg, transparent, var(--dorado-suave)); }
.alkimia-rule .seg:last-child { background: linear-gradient(90deg, var(--dorado-suave), transparent); }
.alkimia-rule svg { width: 26px; height: 26px; color: var(--dorado-suave); }

/* ---------- Marquesina de palabras ---------- */
.marquee { overflow: hidden; padding-block: clamp(2rem, 5vw, 3.5rem); border-block: 1px solid var(--linea); }
.marquee__track { display: flex; gap: 3rem; width: max-content; will-change: transform; }
.marquee__track span {
  font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 3.4rem); font-style: italic;
  color: var(--marron-calido); opacity: 0.32; white-space: nowrap; letter-spacing: 0.02em;
}
.marquee__track .dot { opacity: 0.32; color: var(--dorado-suave); }

/* ---------- Testimonios ---------- */
.testis { text-align: center; }
.testi-track { position: relative; min-height: 220px; }
.testi {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem; opacity: 0; transition: opacity 1s var(--ease); pointer-events: none;
}
.testi.is-active { opacity: 1; pointer-events: auto; }
.testi blockquote {
  font-family: var(--serif); font-size: var(--step-2); font-weight: 400; line-height: 1.3;
  max-width: 24ch; color: var(--tinta);
}
.testi cite { font-style: normal; font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--marron-calido); }
.testi-dots { display: flex; gap: 0.6rem; justify-content: center; margin-top: 2rem; }
.testi-dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); transition: background .4s, transform .4s; }
.testi-dots button.is-active { background: var(--terracota); transform: scale(1.3); }

/* ---------- Acordeón FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; text-align: left; font-family: var(--serif); font-size: var(--step-1); color: var(--tinta);
}
.faq__icon { position: relative; width: 18px; height: 18px; flex: none; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--marron-calido); transition: transform .4s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0); }
.faq__a { overflow: hidden; height: 0; }
.faq__a-inner { padding-bottom: 1.6rem; color: var(--tinta-70); max-width: 62ch; }

/* ---------- Recursos ---------- */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2rem); }
.res-card {
  background: var(--beige-calido); border-radius: var(--radio-img); padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; gap: 0.9rem; min-height: 220px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.res-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-card); }
.res-card__icon { font-size: 1.6rem; }
.res-card__type { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--marron-calido); }
.res-card h3 { font-size: var(--step-1); }
.res-card .link-arrow { margin-top: auto; }
@media (max-width: 820px) { .res-grid { grid-template-columns: 1fr; } }

/* Artículos */
.article-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.article-card { display: flex; flex-direction: column; gap: 1rem; }
.article-card__media { aspect-ratio: 3/2; border-radius: var(--radio-img); overflow: hidden; }
.article-card__media img { transition: transform 1.1s var(--ease); }
.article-card:hover .article-card__media img { transform: scale(1.05); }
.article-card__meta { font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--marron-calido); }
.article-card h3 { font-size: var(--step-1); }
@media (max-width: 720px) { .article-list { grid-template-columns: 1fr; } }

/* ---------- Newsletter ---------- */
.newsletter { text-align: center; }
.newsletter__form { display: flex; gap: 0.8rem; max-width: 520px; margin: 2rem auto 0; flex-wrap: wrap; justify-content: center; }
.newsletter__form input { flex: 1 1 260px; }

/* ---------- Formularios ---------- */
.field { position: relative; margin-bottom: 1.8rem; }
.field input, .field textarea, .newsletter input, input.inp, textarea.inp {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--linea);
  padding: 0.9rem 0 0.6rem; font-family: var(--sans); font-size: var(--step-0); color: var(--tinta);
  transition: border-color .4s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field label {
  position: absolute; left: 0; top: 0.9rem; color: var(--tinta-55); pointer-events: none;
  transition: transform .35s var(--ease), font-size .35s var(--ease), color .35s var(--ease);
  transform-origin: left;
}
.field input:focus ~ label, .field textarea:focus ~ label,
.field input:not(:placeholder-shown) ~ label, .field textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-1.5rem) scale(0.82); color: var(--marron-calido);
}
.field input:focus, .field textarea:focus { border-color: var(--terracota); outline: none; }
.field.is-valid input, .field.is-valid textarea { border-color: var(--oliva-suave); }
.field.is-error input, .field.is-error textarea { border-color: var(--terracota); }
.field__msg { font-size: 0.78rem; color: var(--marron-calido); margin-top: 0.4rem; min-height: 1em; }
.form-status { margin-top: 1.5rem; font-family: var(--serif); font-style: italic; font-size: var(--step-1); color: var(--bosque-apagado); }

.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-info { display: grid; gap: 1.4rem; }
.contact-info a { display: inline-flex; gap: 0.7rem; align-items: center; color: var(--tinta); }
.contact-info a:hover { color: var(--marron-calido); }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Galería ---------- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.6rem, 1.5vw, 1rem); }
.gallery .g { border-radius: var(--radio-img); overflow: hidden; }
.gallery .g img { width: 100%; height: 100%; object-fit: cover; }
.g1 { grid-column: span 5; aspect-ratio: 4/5; }
.g2 { grid-column: span 7; aspect-ratio: 3/2; }
.g3 { grid-column: span 4; aspect-ratio: 1/1; }
.g4 { grid-column: span 4; aspect-ratio: 1/1; }
.g5 { grid-column: span 4; aspect-ratio: 1/1; }
@media (max-width: 720px) { .gallery { grid-template-columns: 1fr 1fr; } .g1,.g2,.g3,.g4,.g5 { grid-column: span 1; aspect-ratio: 1/1; } }

/* ---------- CTA final ---------- */
.cta-final { text-align: center; }
.cta-final h2 { font-size: var(--step-3); max-width: 18ch; margin: 0 auto 1.6rem; }
.cta-final p { margin: 0 auto 2rem; color: var(--tinta-70); }
.section--bosque .cta-final p { color: rgba(247,243,239,.95); }

/* ---------- Footer ---------- */
.site-footer { background: var(--tinta); color: var(--blanco-roto); padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
.site-footer .brand { color: var(--blanco-roto); }
.site-footer .brand__mark { width: 38px; height: 38px; }
.footer-tag { margin-top: 1.2rem; color: rgba(247,243,239,.6); font-family: var(--serif); font-style: italic; font-size: var(--step-1); max-width: 24ch; }
.footer-col h2 { font-family: var(--sans); font-size: var(--step--1); line-height: 1.08; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dorado-suave); margin-bottom: 1.2rem; font-weight: 500; }   /* era h4: el nivel saltaba de h2 a h4 */
.footer-col a, .footer-col li { color: rgba(247,243,239,.75); font-size: var(--step--1); padding: 0.35em 0; display: block; transition: color .3s; }
.footer-col a:hover { color: var(--blanco-roto); }
.footer-bottom { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid rgba(247,243,239,.14); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: rgba(247,243,239,.6); letter-spacing: 0.04em; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Formación (2 columnas) ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); }
.two-col .col h3 { font-size: var(--step-1); margin-bottom: 1rem; }
.two-col .col ul li { padding: 0.5em 0; border-bottom: 1px solid var(--linea); color: var(--tinta-70); font-size: var(--step--1); }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Utilidades de contenido ---------- */
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack > * + * { margin-top: 1.1rem; }
.lead-intro { font-family: var(--serif); font-size: var(--step-2); font-weight: 400; line-height: 1.35; max-width: 24ch; }
.section-intro { max-width: 60ch; margin-inline: auto; text-align: center; }
.section-intro p { margin-inline: auto; color: var(--tinta-70); }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }

/* ---------- Cursor personalizado ---------- */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; }
.cursor-dot { width: 6px; height: 6px; background: var(--blanco-roto); transform: translate(-50%,-50%); }
.cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(247,243,239,.7); transform: translate(-50%,-50%); transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease); }
.cursor-ring.is-hover { width: 54px; height: 54px; background: rgba(214,195,163,.12); }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 1000; background: var(--blanco-roto);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.4rem;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
  opacity: 0; visibility: hidden;              /* oculto por defecto → sin JS nunca tapa el contenido */
}
.preloader.is-active { opacity: 1; visibility: visible; }
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__logo { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.preloader__logo picture { display: flex; }   /* el <picture> no debe añadir hueco de línea bajo la marca */
.preloader__mark { width: 74px; height: 74px; object-fit: contain; opacity: 0; }
.preloader.is-anim .preloader__mark { animation: fadeUp .45s var(--ease) forwards; }
.preloader__word { font-family: var(--serif); font-size: clamp(1.6rem, 5vw, 2.6rem); letter-spacing: 0.34em; text-transform: uppercase; color: var(--tinta); opacity: 0; }
.preloader.is-anim .preloader__word { animation: fadeUp .5s var(--ease) .18s forwards; }
.preloader__line { width: 0; height: 1px; background: var(--dorado-suave); }
.preloader.is-anim .preloader__line { animation: drawLine .55s var(--ease) .05s forwards; }
@keyframes drawLine { to { width: min(240px, 60vw); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Reveal (progressive enhancement) ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .reveal-stagger > * { opacity: 0; transform: translateY(18px); }
.js .reveal-stagger.is-in > * { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .08s; }
.js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .24s; }
.js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: .32s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero.is-ready .hero__media img { animation: none; transform: scale(1.05); }
  .js .reveal, .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .media img { opacity: 1; transform: none; }
  .cursor-dot, .cursor-ring { display: none; }
  .scroll-hint .line-v { animation: none; }
}

/* ---------- Responsive nav ----------
   (el punto de corte real está más abajo, en el bloque de navegación:
    1150 px, que es donde el menú completo deja de caber) */

/* ---------- Skip link ---------- */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--tinta); color: var(--blanco-roto); padding: 0.8rem 1.2rem; z-index: 1001; border-radius: 0 0 4px 0; }
.skip-link:focus { left: 0; }

/* =====================================================================
   ============  CAPA DE MEJORA · v2 (efectos + legibilidad)  ==========
   ===================================================================== */

/* ---------- Grano cinematográfico ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 400; pointer-events: none;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045; mix-blend-mode: multiply;
}
.grain.is-anim { animation: grainShift 0.7s steps(4) infinite; }
@keyframes grainShift {
  0% { transform: translate(0,0); } 25% { transform: translate(-4%,3%); }
  50% { transform: translate(3%,-2%); } 75% { transform: translate(-2%,-3%); } 100% { transform: translate(2%,2%); }
}

/* ---------- Barra de progreso de scroll ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 130;
  transform: scaleX(0); transform-origin: left; transition: none;
  background: linear-gradient(90deg, var(--dorado-suave), var(--terracota), var(--marron-calido));
  pointer-events: none;
}

/* ---------- Curtain de transición entre páginas ---------- */
.page-transition {
  position: fixed; inset: 0; z-index: 800; pointer-events: none;
  background: linear-gradient(120deg, var(--blanco-roto), var(--beige-calido) 60%, var(--dorado-suave) 100%);
  transform: translateY(100%);
  display: flex; align-items: center; justify-content: center;
}
.page-transition__mark {
  font-family: var(--serif); font-size: clamp(1.4rem, 4vw, 2.4rem); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--marron-calido); opacity: 0; transition: opacity .18s var(--ease);
}
.page-transition.cover { transform: translateY(0); transition: transform .24s var(--ease); }
.page-transition.cover .page-transition__mark { opacity: .75; }
.page-transition.cover-instant { transform: translateY(0); transition: none; }
.page-transition.uncover { transform: translateY(-100%); transition: transform .42s var(--ease); }
/* Tras la primera visita, el curtain sustituye al preloader (sin doble flash) */
.seen .preloader { display: none !important; }

/* ---------- Legibilidad · heros reforzados ---------- */
.hero__scrim {
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(58,51,48,0) 40%, rgba(58,51,48,.28) 100%),
    linear-gradient(180deg, rgba(58,51,48,.34) 0%, rgba(58,51,48,0) 26%),
    linear-gradient(0deg, rgba(58,51,48,.72) 0%, rgba(58,51,48,.18) 42%, rgba(58,51,48,0) 68%);
}
.hero__title, .hero__sub { text-shadow: 0 2px 30px rgba(40,30,24,.35); }
.hero__claim { text-shadow: 0 1px 16px rgba(40,30,24,.5); }
.scroll-hint { text-shadow: 0 1px 12px rgba(40,30,24,.5); }
/* Nav sobre hero: leve sombra para legibilidad en zonas claras de la foto */
.site-header:not(.is-scrolled).over-hero .nav__link,
.site-header:not(.is-scrolled).over-hero .brand { text-shadow: 0 1px 14px rgba(40,30,24,.45); }

/* ---------- Reveals más ricos (blur + escala sutil) ---------- */
/* Sin `filter: blur()`: animarlo obliga al navegador a re-rasterizar el bloque
   en cada frame durante ~1 s, justo mientras el usuario está haciendo scroll.
   Opacidad y desplazamiento se componen en la GPU y salen gratis. */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal-stagger > * { opacity: 0; transform: translateY(20px); }
.js .reveal-stagger.is-in > * { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .1s; }
.js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .2s; }
.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .3s; }
.js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: .4s; }

/* ---------- Imágenes: visibles por defecto (revelado sutil aditivo) ---------- */
/* (Se eliminó el clip-path que ocultaba imágenes hasta que actuara el JS) */

/* ---------- Split-text (palabras) ---------- */
.split-word { display: inline-block; }
.split-word > span { display: inline-block; opacity: 0; transform: translateY(0.5em); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.split.is-in .split-word > span { opacity: 1; transform: none; }
.split .split-word:nth-child(1) > span { transition-delay: .02s; }
.split .split-word:nth-child(2) > span { transition-delay: .06s; }
.split .split-word:nth-child(3) > span { transition-delay: .10s; }
.split .split-word:nth-child(4) > span { transition-delay: .14s; }
.split .split-word:nth-child(5) > span { transition-delay: .18s; }
.split .split-word:nth-child(6) > span { transition-delay: .22s; }
.split .split-word:nth-child(7) > span { transition-delay: .26s; }
.split .split-word:nth-child(n+8) > span { transition-delay: .30s; }

/* ---------- Cursor contextual (etiqueta) ---------- */
.cursor-ring { display: flex; align-items: center; justify-content: center; }
.cursor-ring .clabel {
  font-family: var(--sans); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blanco-roto); opacity: 0; transition: opacity .3s var(--ease); white-space: nowrap;
}
.cursor-ring.is-media { width: 78px; height: 78px; background: rgba(58,51,48,.32); mix-blend-mode: normal; border-color: rgba(247,243,239,.55); }
.cursor-ring.is-media .clabel { opacity: 1; }

/* ---------- Botones · brillo + magnético ---------- */
.btn { will-change: transform; }
/* Reflejo sutil que cruza el botón al pasar el cursor (no cubre el texto) */
.btn::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(247,243,239,.28), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease); pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn > * { position: relative; z-index: 1; }

/* ---------- Índice de sección (número editorial) ---------- */
.section-index {
  font-family: var(--serif); font-size: clamp(3rem, 8vw, 6rem); line-height: 1;
  color: var(--dorado-suave); opacity: .5; display: block; margin-bottom: 1rem;
}

/* ---------- Pilares ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.pillar { padding-top: 1.4rem; position: relative; }
.pillar::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--dorado-suave), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease);
}
.pillar.is-in::before, .reveal-stagger.is-in .pillar::before { transform: scaleX(1); }
.pillar__k { font-family: var(--serif); font-size: var(--step-1); color: var(--marron-calido); display: block; margin-bottom: .6rem; }
.pillar h3 { font-size: var(--step-1); margin-bottom: .6rem; }
.pillar p { color: var(--tinta-70); font-size: var(--step--1); }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Tarjetas de vía FULL-BLEED con foto (Home) ---------- */
.paths-visual { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.5vw, 1.4rem); }
.pv-card {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: clamp(440px, 62vh, 660px); border-radius: 6px; color: var(--blanco-roto);
  isolation: isolate;
}
.pv-card__media { position: absolute; inset: 0; z-index: -1; }
.pv-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease); }
.pv-card:hover .pv-card__media img { transform: scale(1.07); }
.pv-card__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(48,38,32,.9) 0%, rgba(48,38,32,.45) 45%, rgba(48,38,32,.12) 100%);
  transition: background .6s var(--ease);
}
.pv-card:hover .pv-card__scrim { background: linear-gradient(0deg, rgba(48,38,32,.92) 0%, rgba(48,38,32,.5) 55%, rgba(138,90,68,.25) 100%); }
.pv-card__body { position: relative; padding: clamp(1.6rem, 2.6vw, 2.6rem); width: 100%; }
.pv-card__num { font-family: var(--serif); font-size: var(--step-1); color: var(--dorado-suave); display: block; margin-bottom: .5rem; }
.pv-card h2 { color: var(--blanco-roto); font-size: var(--step-2); line-height: 1.18; margin-bottom: .7rem; text-shadow: 0 2px 24px rgba(30,22,18,.5); }   /* era h3 sin h2 delante */
.pv-card p { color: rgba(247,243,239,.9); font-size: var(--step--1); max-width: 34ch; text-shadow: 0 1px 16px rgba(30,22,18,.4); }
.pv-card .link-arrow { color: var(--blanco-roto); margin-top: 1.2rem; }
.pv-card .link-arrow::after { background: var(--dorado-suave); }
@media (max-width: 860px) { .paths-visual { grid-template-columns: 1fr; } .pv-card { min-height: 66vh; } }

/* ---------- Manifiesto scroll-driven (sticky) ---------- */
.manifesto { position: relative; height: 240vh; background: var(--tinta); color: var(--blanco-roto); }
.manifesto__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.manifesto__bg { position: absolute; inset: 0; opacity: .16; }
.manifesto__bg img { width: 100%; height: 100%; object-fit: cover; }
.manifesto__scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(58,51,48,.2), rgba(58,51,48,.85)); }
.manifesto__stage { position: relative; z-index: 2; width: min(1000px, 90%); }
.manifesto__eyebrow { color: var(--dorado-suave); margin-bottom: 2rem; opacity: 0; transition: opacity .6s var(--ease); }
.manifesto.is-active .manifesto__eyebrow { opacity: 1; }
.manifesto__words { position: relative; min-height: clamp(4rem, 16vw, 11rem); }
.manifesto__word {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 10vw, 8rem); line-height: 1;
  letter-spacing: 0.01em; opacity: 0; transform: translateY(30px) scale(.96); filter: blur(8px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
}
.manifesto__word.is-active { opacity: 1; transform: none; filter: blur(0); }
.manifesto__word em { font-style: italic; color: var(--dorado-suave); }
.manifesto__foot { margin-top: 2.4rem; color: rgba(247,243,239,.7); font-family: var(--serif); font-style: italic; font-size: var(--step-1); opacity: 0; transition: opacity .6s var(--ease) .2s; }
.manifesto.is-active .manifesto__foot { opacity: 1; }

/* ---------- Banda de cita full-bleed ---------- */
.quote-band { position: relative; min-height: 82vh; display: flex; align-items: center; overflow: hidden; color: var(--blanco-roto); }
.quote-band__media { position: absolute; inset: 0; z-index: -1; }
.quote-band__media img { width: 100%; height: 116%; object-fit: cover; }
.quote-band__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(58,51,48,.75) 0%, rgba(58,51,48,.45) 45%, rgba(58,51,48,.2) 100%); }
.quote-band__inner { position: relative; padding-block: clamp(4rem,10vw,8rem); }
.quote-band blockquote {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 4.5vw, 3.6rem); line-height: 1.22;
  max-width: 20ch; text-shadow: 0 2px 30px rgba(40,30,24,.4);
}
.quote-band blockquote em { font-style: italic; color: var(--dorado-suave); }
.quote-band cite { display: block; margin-top: 1.6rem; font-style: normal; font-family: var(--sans); font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--dorado-suave); }

/* ---------- Hero · kicker con línea que se dibuja ---------- */
.hero__kicker { display: inline-flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.hero__kicker .kline { height: 1px; width: 0; background: var(--dorado-suave); transition: width 1s var(--ease) .6s; }
.hero.is-ready .hero__kicker .kline, .page-hero.is-ready .hero__kicker .kline { width: clamp(38px, 6vw, 72px); }
.hero__title .word-accent { font-style: italic; color: var(--dorado-suave); }

/* ---------- Tarjetas · realce ---------- */
.path-card { position: relative; overflow: hidden; }
.path-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--terracota), var(--dorado-suave));
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.path-card:hover::after { transform: scaleX(1); }
.program-card__figure::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58,51,48,0) 55%, rgba(58,51,48,.35));
  opacity: 0; transition: opacity .6s var(--ease); pointer-events: none;
}
.program-card:hover .program-card__figure::after { opacity: 1; }

/* ---------- Marquee: degradado en bordes ---------- */
.marquee { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* ---------- Refuerzo legibilidad en secciones beige ---------- */
.section--beige .prose p { color: #5a4b40; }
.muted { color: #6a5a4e; }

/* ---------- Reduced motion · v2 ---------- */
@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .js .reveal, .js .reveal-stagger > * { filter: none !important; }
  .js .media { clip-path: none !important; }
  .split-word > span { transform: none !important; }
  .manifesto { height: auto; }
  .manifesto__sticky { height: auto; position: static; padding-block: 4rem; }
  .manifesto__word { position: static; opacity: 1; transform: none; filter: none; min-height: 0; margin-block: .3rem; }
  .manifesto__words { min-height: 0; }
  .page-transition { display: none; }
  .hero__kicker .kline { width: clamp(38px,6vw,72px); }
}

/* =====================================================================
   REVISIÓN CLIENTE · agosto 2026
   Ajustes solicitados en "CAMBIOS A REALIZAR"
   ===================================================================== */

/* ---------- 1 · Texto justificado (cuerpo de página) ---------- */
/* Justificado con partición de palabras para evitar "ríos" y huecos feos.
   Se excluye todo lo centrado, los heros, citas y microcopy. */
.prose p,
.verse p,
.program-card__body p,
.service__body > p,
.faq__a-inner,
.editorial__body > p:not(.eyebrow):not(.lead-intro),
.wrap-narrow .prose p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Nunca justificar dentro de un contexto centrado: el centrado manda */
.center p, .center .prose p, .center .verse p,
.section-intro p, .cta-final p, .testis p, .newsletter p {
  text-align: center;
  hyphens: manual;
}
/* Microcopy y elementos con alineación propia: sólo desactivamos la partición */
.hero__sub, .lead-intro, .eyebrow, .claim-marca, .footer-tag,
.field__msg, .form-status, .article-card p, .res-card p,
.pv-card p, .quote-band p {
  hyphens: manual;
}
/* En columnas estrechas (móvil) el justificado se vuelve incómodo */
@media (max-width: 620px) {
  .prose p, .verse p, .program-card__body p, .service__body > p,
  .faq__a-inner, .editorial__body > p, .wrap-narrow .prose p { text-align: left; }
}

/* ---------- 2 · HERO · contenido a la derecha ---------- */
/* El titular y el subtítulo se desplazan a la derecha para dejar
   respirar la fotografía (y que se vea la familia al completo). */
.hero--right .hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.hero--right .hero__title { max-width: min(18ch, 100%); }
.hero--right .hero__sub { max-width: min(34ch, 100%); margin-top: .6rem; } /* "seguido" */
.hero--right .hero__kicker { justify-content: flex-end; max-width: 100%; flex-wrap: wrap; }
.hero--right .hero__kicker .kline { order: -1; }
/* Ningún hijo del hero puede desbordar el contenedor, caiga la fuente que caiga */
.hero__inner > *, .hero__inner > * > * { max-width: 100%; min-width: 0; }
.hero__title, .page-hero .hero__title { overflow-wrap: break-word; }
@media (max-width: 760px) {
  .hero--right .hero__inner { align-items: flex-start; text-align: left; }
  .hero--right .hero__kicker { justify-content: flex-start; }
}
/* Encuadre de la foto del hero: el punto de interés está en la parte baja */
.hero--focus-bottom .hero__media img { object-position: 50% 72%; }

/* ---------- 3 · Kicker de marca · MATERNIDAD · PAREJA · TRANSFORMACIÓN ---------- */
.claim-marca {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracota);
  font-size: var(--step--1);
}
/* El claim de marca en terracota es el de la HOME (lo pidió así el cliente) y
   ahí cae sobre la zona baja del hero, donde el degradado ya es fuerte. */
.hero .claim-marca { color: #DB8E76; font-weight: 500; }
/* En los heros de página el kicker es sólo la etiqueta de sección: sobre
   fotos claras el terracota no se lee, así que mantiene el dorado original. */
.page-hero .claim-marca { color: var(--dorado-suave); font-weight: 500; }
/* Los heros de página tenían el degradado muy suave en la banda donde cae el
   texto: se reforzaba poco y el kicker terracota quedaba ilegible sobre cielo. */
.page-hero .hero__scrim {
  background:
    linear-gradient(180deg, rgba(58,51,48,.34) 0%, rgba(58,51,48,0) 26%),
    linear-gradient(0deg, rgba(58,51,48,.80) 0%, rgba(58,51,48,.46) 34%, rgba(58,51,48,.12) 58%, rgba(58,51,48,0) 76%);
}

/* ---------- 4 · Testimonios · flechas de navegación ---------- */
.testi-nav { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 2rem; }
.testi-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--linea);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--marron-calido); background: transparent;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
  cursor: pointer;
}
.testi-arrow:hover { background: var(--terracota); color: var(--blanco-roto); border-color: var(--terracota); transform: translateY(-2px); }
.testi-arrow:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }
.testi-arrow svg { width: 17px; height: 17px; }
.testi-nav .testi-dots { margin-top: 0; }
.section--bosque .testi-arrow { border-color: rgba(247,243,239,.3); color: var(--dorado-suave); }
/* Las diapositivas se apilan en la misma celda de rejilla: así la pista crece
   hasta la altura del testimonio más largo y la cita nunca pisa las flechas. */
.testi-track { display: grid; min-height: 0; }
.testi { position: static; grid-area: 1 / 1; }
.testi cite { margin-top: .2rem; }

/* ---------- 5 · Newsletter compacta en el footer ---------- */
.footer-tag.claim-marca { max-width: 32ch; letter-spacing: .16em; line-height: 1.9; }
.footer-news p { color: rgba(247,243,239,.6); font-size: var(--step--1); margin-bottom: 1rem; max-width: 30ch; }
.footer-news__form { display: flex; gap: .5rem; flex-wrap: wrap; }
.footer-news__form input {
  flex: 1 1 190px; min-width: 0;
  background: transparent; border: 1px solid rgba(247,243,239,.25);
  border-radius: var(--radio); padding: .75em .9em;
  color: var(--blanco-roto); font-family: var(--sans); font-size: var(--step--1);
}
.footer-news__form input::placeholder { color: rgba(247,243,239,.45); }
.footer-news__form input:focus { outline: none; border-color: var(--dorado-suave); }
.footer-news__form button {
  flex: none; padding: .75em 1.1em; border-radius: var(--radio);
  background: var(--dorado-suave); color: var(--tinta);
  font-family: var(--sans); font-size: var(--step--1); letter-spacing: .06em; cursor: pointer;
  transition: background .35s var(--ease);
}
.footer-news__form button:hover { background: var(--blanco-roto); }
.footer-news__msg { margin-top: .7rem; font-size: .78rem; color: var(--dorado-suave); min-height: 1em; }
.footer-grid { grid-template-columns: 1.25fr .8fr .9fr 1.05fr; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- 6 · Iconos lineales de contacto ---------- */
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.contact-info a { align-items: center; }
.footer-col a { display: flex; align-items: center; gap: .6rem; }
.footer-col a .ico { width: 15px; height: 15px; opacity: .8; }

/* ---------- 7 · Programas · subtítulos algo mayores ---------- */
.program-card__sub { font-size: var(--step-2); line-height: 1.25; }
.program-card__title { font-size: var(--step-2); }

/* ---------- 8 · Encuadres de fotografía ---------- */
/* Roser en "Sobre nosotros": recorte vertical centrado en ella */
.media--focus-right img { object-position: 72% 40%; }
.media--focus-left  img { object-position: 30% 45%; }
.media--focus-top   img { object-position: 50% 22%; }
/* Tarjeta "Recursos" de la Home: la foto es apaisada, la encuadramos vertical */
.pv-card--focus img { object-position: 32% 38%; }
/* Recursos: la foto del hero debe verse (casi) completa, no recortada.
   Damos al hero la misma proporción que la foto (3:2), así `cover` apenas
   recorta. En móvil recuperamos altura para que quepa el titular. */
/* `height` con un único valor definido (no aspect-ratio + max-height, que
   sobre-restringe la caja y le encoge el ancho). 66.67vw = proporción 3:2. */
.page-hero--contain { min-height: 0; height: min(66.67vw, 900px); }
.page-hero--contain .hero__media img { object-fit: cover; object-position: 30% 45%; height: 100%; }
@media (max-width: 900px) { .page-hero--contain { height: auto; min-height: 64svh; } }

/* Kicker sobre fotografías claras: halo oscuro para que el terracota se lea */
.hero .claim-marca, .page-hero .claim-marca {
  text-shadow: 0 1px 2px rgba(40,30,24,.9), 0 0 10px rgba(40,30,24,.8), 0 0 28px rgba(40,30,24,.6);
}

/* ---------- 9 · Cita full-bleed centrada (se ven mejor las fotos) ---------- */
.quote-band--center .quote-band__inner { text-align: center; }
.quote-band--center blockquote { max-width: 26ch; margin-inline: auto; }
.quote-band--center .quote-band__scrim {
  background: linear-gradient(0deg, rgba(58,51,48,.62) 0%, rgba(58,51,48,.42) 50%, rgba(58,51,48,.55) 100%);
}

/* ---------- 10 · Acordeón para "Nuestra formación" ---------- */
.faq--plain .faq__q { font-size: var(--step-1); }
.faq--plain .faq__a-inner ul { display: grid; gap: .45rem; }
.faq--plain .faq__a-inner li { color: var(--tinta-70); font-size: var(--step--1); list-style: none; position: relative; padding-left: 1.4rem; }
.faq--plain .faq__a-inner li::before { content: ""; position: absolute; left: 0; top: .75em; width: 8px; height: 1px; background: var(--dorado-suave); }

/* ---------- 11 · Precio / duración junto al CTA ---------- */
.service__meta {
  margin-top: 1.4rem; font-family: var(--serif); font-style: italic;
  font-size: var(--step-1); color: var(--marron-calido);
}
.service__cta { margin-top: .9rem; }

/* ---------- 12 · Marquesina · bucle sin costura ----------
   Cada pista lleva su propia separación final (padding-right) en lugar de un
   gap en el contenedor: así translateX(-100%) equivale exactamente a un ciclo
   completo y las palabras no saltan ni se solapan al reiniciar. */
.marquee__track { padding-right: 3rem; }

/* ---------- 12b · El hero debe respetar el margen lateral ----------
   `.hero__inner` traía width:100%, que anulaba el ancho de `.wrap` y hacía que
   el titular llegase pegado al borde de la pantalla. */
.hero__inner { width: min(1280px, 100% - var(--gutter) * 2); }

/* ---------- 13 · Móvil · correcciones de visualización ---------- */
@media (max-width: 620px) {
  /* El hero ocupaba toda la pantalla y el titular se comía la foto */
  .hero { min-height: 88svh; }
  .hero__inner { padding-top: 6.5rem; padding-bottom: 5.5rem; }
  /* En móvil se sirve un recorte vertical propio (ver el <picture> de la Home). */
  .hero--focus-bottom .hero__media img { object-position: 50% 50%; }
  /* En esta fotografía la familia está en la parte baja del encuadre, y en
     vertical no hay manera de subirla. Así que en móvil movemos el TEXTO
     arriba: el titular respira contra el cielo y la familia se ve entera. */
  .hero { align-items: flex-start; }
  .hero.hero--right .hero__inner { padding-top: 5.5rem; padding-bottom: 2rem; align-items: flex-start; text-align: left; }
  .hero.hero--right .hero__title { margin-top: .2rem; }
  .hero.hero--right .hero__sub { margin-top: 1rem; }
  /* Con el texto arriba, el degradado tiene que pesar arriba (antes cargaba
     abajo, porque el texto iba abajo). */
  .hero.hero--right .hero__scrim {
    background:
      linear-gradient(180deg, rgba(58,51,48,.66) 0%, rgba(58,51,48,.40) 34%, rgba(58,51,48,.06) 58%, rgba(58,51,48,0) 74%),
      linear-gradient(0deg, rgba(58,51,48,.42) 0%, rgba(58,51,48,0) 28%);
  }
  /* El "Descubre" chocaba con el subtítulo: lo bajamos y lo hacemos discreto */
  .scroll-hint { bottom: 1.1rem; font-size: .6rem; gap: .35rem; }
  .scroll-hint .line-v { height: 26px; }
  .hero__title { font-size: clamp(2.6rem, 12.5vw, 3.6rem); max-width: 14ch; line-height: 1.06; }
  .hero__sub { font-size: var(--step-0); max-width: 30ch; }
  .page-hero { min-height: 74svh; }
  .page-hero .hero__title { font-size: clamp(2rem, 9.5vw, 2.8rem); max-width: 16ch; }
  /* Cabecera: la marca no debe partirse ni chocar con el botón */
  .brand span { font-size: .92rem; letter-spacing: .06em; }
  .brand__mark { width: 30px; height: 30px; }
  .site-header { padding-block: .5rem; }
  /* Tarjetas de vía: no necesitan 66vh en móvil */
  .pv-card { min-height: 62vh; }
  /* Rejillas y formularios */
  .newsletter__form { flex-direction: column; }
  .newsletter__form button { width: 100%; }
  .footer-bottom { flex-direction: column; gap: .4rem; }
  .quote-band { min-height: 64vh; }
  .quote-band blockquote { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
  /* El recorte horizontal ya está en la raíz; aquí no se toca el body. */
  .marquee__track span { font-size: 1.5rem; }
}
@media (max-width: 1200px) {
  /* El menú móvil debe cubrir sin dejar la web asomando por debajo */
  .mobile-menu { padding: 6rem var(--gutter) 3rem; overflow-y: auto; }
}

/* ---------- 14 · Detalle de foco accesible ---------- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }

/* ---------- 15 · Hero de página centrado (Sobre nosotros) ---------- */
.page-hero--center .hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.page-hero--center .hero__title { max-width: 22ch; margin-inline: auto; }
.page-hero--center .hero__sub { margin-inline: auto; }

/* ---------- 16 · Eyebrow en terracota (bloques destacados) ---------- */
.eyebrow--terracota { color: var(--terracota); }

/* ---------- 17 · CTAs apilados ---------- */
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2.2rem; }
@media (max-width: 520px) { .cta-row { flex-direction: column; align-items: stretch; } .cta-row .btn { justify-content: center; } }

/* =====================================================================
   LANDING DE PROGRAMA · La transformación invisible de la maternidad
   ===================================================================== */

/* ---------- Hero de landing: lleva mucho contenido y necesita aire arriba ---------- */
.page-hero--tall { min-height: min(98svh, 940px); }
.page-hero--tall .hero__inner { padding-block: 10rem clamp(3rem, 6vh, 5rem); }
@media (max-width: 620px) {
  .page-hero--tall { min-height: auto; }
  .page-hero--tall .hero__inner { padding-block: 7.5rem 3rem; }
  .hero-stats { gap: .4rem .9rem; font-size: .68rem; }
}

/* ---------- Barra de datos bajo el hero ---------- */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center;
  margin-top: 2rem; font-size: var(--step--1); letter-spacing: .1em;
  text-transform: uppercase; color: rgba(247,243,239,.9);
  text-shadow: 0 1px 14px rgba(40,30,24,.6);
}
.hero-stats .sep { color: var(--dorado-suave); }
.hero .btn, .page-hero .btn { margin-top: 2rem; }

/* ---------- Lista "Este programa es para ti si…" ---------- */
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2.5rem; margin-top: 2.5rem; }
.checklist li { list-style: none; position: relative; padding-left: 2rem; color: var(--tinta-70); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 11px; height: 11px;
  border: 1px solid var(--terracota); border-radius: 50%;
}
.checklist li::after {
  content: ""; position: absolute; left: 3.5px; top: calc(.62em + 3.5px);
  width: 4px; height: 4px; border-radius: 50%; background: var(--terracota);
}
@media (max-width: 820px) { .checklist { grid-template-columns: 1fr; gap: .9rem; } }

/* ---------- El recorrido · 8 módulos con etapas ---------- */
.journey { position: relative; margin-top: 2.5rem; }
.journey__stage {
  display: flex; align-items: center; gap: 1rem; margin: 2.6rem 0 1.3rem;
  font-family: var(--sans); font-size: var(--step--1); letter-spacing: .24em;
  text-transform: uppercase; color: var(--terracota);
}
.journey__stage::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--dorado-suave), transparent); }
.journey__stage:first-child { margin-top: 0; }
.journey__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.mod {
  position: relative; padding: 1.4rem 1.5rem 1.5rem; background: var(--blanco-roto);
  border: 1px solid var(--linea); border-radius: 4px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.section--beige .mod { background: rgba(247,243,239,.55); }
.mod:hover { transform: translateY(-3px); box-shadow: var(--sombra-suave); }
.mod__n { font-family: var(--serif); font-size: var(--step-1); color: var(--dorado-suave); display: block; margin-bottom: .3rem; }
.mod h3 { font-size: var(--step-1); line-height: 1.25; margin-bottom: .45rem; }
.mod__claim { font-family: var(--serif); font-style: italic; color: var(--marron-calido); margin-bottom: .6rem; }
.mod p { color: var(--tinta-70); font-size: var(--step--1); }
@media (max-width: 760px) { .journey__grid { grid-template-columns: 1fr; } }

/* ---------- Hueco reservado para el vídeo ---------- */
.video-slot {
  position: relative; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden;
  background: linear-gradient(140deg, var(--beige-calido), var(--dorado-suave));
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--linea);
}
.video-slot__inner { color: var(--marron-calido); display: grid; gap: .8rem; justify-items: center; padding: 1.5rem; }
.video-slot__play {
  width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--marron-calido);
  display: grid; place-items: center;
}
.video-slot__play svg { width: 20px; height: 20px; margin-left: 3px; }
.video-slot__label { font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; }

/* ---------- Cómo vas a vivir el programa ---------- */
.formato { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: 2.6rem; }
.formato__item { padding-top: 1.2rem; border-top: 1px solid var(--linea); }
.formato__item h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.formato__item p { color: var(--tinta-70); font-size: var(--step--1); }
.formato__item p + p { margin-top: .6rem; }
@media (max-width: 820px) { .formato { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- Información práctica + precio ---------- */
.practical { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.facts { display: grid; gap: .1rem; margin-top: 1.6rem; }
.facts li { list-style: none; padding: .75em 0; border-bottom: 1px solid var(--linea); color: var(--tinta-70); font-size: var(--step--1); }
.price-card {
  background: var(--blanco-roto); border: 1px solid var(--linea); border-radius: 6px;
  padding: clamp(1.6rem, 3.5vw, 2.6rem); text-align: center;
}
.price-card__k { font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--terracota); }
.price-card__n { font-family: var(--serif); font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1; color: var(--tinta); margin: .5rem 0 .2rem; }
.price-card__alt { color: var(--tinta-70); font-size: var(--step--1); }
.price-card .btn { margin-top: 1.6rem; width: 100%; justify-content: center; }
.price-card__foot { margin-top: 1.2rem; font-size: .8rem; color: var(--tinta-70); }   /* edición, plazas y fecha: a 12,8 px el 55 % daba 3,4:1 */
@media (max-width: 860px) { .practical { grid-template-columns: 1fr; } }

/* ---------- Cierre ---------- */
.closing .verse p { text-align: center; }
.closing .verse p:last-child { color: var(--marron-calido); }

/* =====================================================================
   CORRECCIÓN · las fotos no llenaban su contenedor
   Las imágenes van envueltas en <picture> (para servir WebP). `picture` no
   heredaba el tamaño de la caja, así que el `height: 100%` de la imagen se
   resolvía contra una altura automática y quedaba en `auto`: `object-fit:
   cover` nunca llegaba a aplicarse. Resultado: las fotos apaisadas dejaban
   una franja borrosa (el placeholder de fondo) y las verticales se salían por
   abajo recortadas de cualquier manera, en vez de encuadrarse.
   ===================================================================== */
.media > picture,
.pv-card__media > picture,
.hero__media > picture,
.quote-band__media > picture,
.program-card__figure > picture,
.article-card__media > picture,
.service__media > picture,
.editorial__media > picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* Con el contenedor ya dimensionado, `cover` recorta de verdad y
   `object-position` sirve para elegir el encuadre. */
.media > picture > img,
.pv-card__media > picture > img,
.quote-band__media > picture > img,
.program-card__figure > picture > img,
.article-card__media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Encuadre por defecto en recortes verticales ----------
   Toda la fotografía del proyecto tiene a las personas en la mitad superior
   del encuadre. Con `object-position` centrado, un recorte vertical les corta
   la cabeza. Subimos el punto de interés como norma general. */
.media > picture > img,
.pv-card__media > picture > img,
.program-card__figure > picture > img { object-position: 50% 30%; }
/* Excepciones donde el motivo no está arriba */
.media--focus-right > picture > img { object-position: 72% 40%; }
.media--focus-left  > picture > img { object-position: 30% 45%; }
.media--focus-top   > picture > img { object-position: 50% 0%; }
.media--focus-center > picture > img { object-position: 50% 50%; }
.pv-card--focus > .pv-card__media > picture > img { object-position: 40% 26%; }

/* Honeypot antispam: invisible para personas, visible para bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Reserva de primera sesión ---------- */
.reserva-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2rem); }
.reserva-card {
  background: var(--blanco-roto); border: 1px solid var(--linea); border-radius: 6px;
  padding: clamp(1.6rem, 3.5vw, 2.4rem); display: flex; flex-direction: column; text-align: center;
}
.reserva-card__k { font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--terracota); }
.reserva-card h2 { font-family: var(--serif); font-weight: 400; font-size: var(--step-2); line-height: 1.18; margin: .55rem 0 .35rem; }   /* era h3 sin h2 delante */
.reserva-card__meta { color: var(--tinta-70); font-size: var(--step--1); }
.reserva-card p { color: var(--tinta-70); margin-top: .9rem; }
.reserva-card .btn { margin-top: auto; padding-top: 0; }
.reserva-card .btn { margin-top: 1.7rem; width: 100%; justify-content: center; }
@media (max-width: 760px) { .reserva-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   PULIDO · septiembre 2026
   Un solo sistema para heroes, ritmo, jerarquía y movimiento.
   Este bloque va al final a propósito: manda sobre lo anterior y se lee
   como la hoja de decisiones del pulido.
   ===================================================================== */

/* ---------- 1 · Heroes: una sola caja para todas las interiores ---------- */

/* La portada ocupa pantalla completa porque es la entrada al sitio.
   Las seis páginas interiores comparten exactamente la misma altura:
   mínimo 30rem, 68% de la altura de pantalla, y tope de 44rem para que
   en monitores altos el hero no se coma la página. */
.page-hero,
.page-hero--tall,
.page-hero--contain {
  min-height: clamp(30rem, 68svh, 44rem);
  height: auto;                 /* nunca una altura fija: el texto no se recorta */
  align-items: flex-end;        /* el texto siempre abajo, en las seis */
}

/* El header es fijo y se superpone al hero: reservamos su alto para que
   ningún texto quede por debajo del menú. */
.page-hero .hero__inner,
.page-hero--tall .hero__inner {
  padding-block: clamp(7.5rem, 13vh, 9.5rem) clamp(3.5rem, 7vh, 5.5rem);
}

/* Titular: un único tamaño en las seis. Lo que cambia de página a página
   es la medida, no el cuerpo de la letra. */
.page-hero .hero__title {
  font-size: clamp(2.4rem, 1.55rem + 3.3vw, 4.6rem);
  line-height: 1.06;            /* 1.02 se apelmazaba en titulares de 3-4 líneas */
  max-width: 20ch;
}
.page-hero--center .hero__title { max-width: 26ch; }

/* Recursos: la foto vuelve a la caja común. En vez de deformar el hero
   para que quepa la foto entera, movemos el encuadre. */
.page-hero--contain .hero__media img {
  object-fit: cover;
  object-position: 32% 38%;
  height: 118%;
}

/* ---------- 2 · Ritmo ---------- */

/* Primera sección de una página sin hero (Contacto, 404): tiene que
   despejar el header fijo. Antes iba en un style= suelto. */
.section--primera { padding-top: calc(var(--pad-seccion) + 4.5rem); }

/* Escala de separación: tres valores, no quince sueltos. */
:root { --esp-1: 1.1rem; --esp-2: 1.8rem; --esp-3: clamp(2.4rem, 4vw, 3.4rem); }

/* Cabecera de sección: siempre el mismo aire entre antetítulo, titular y texto. */
.section > .wrap > .center,
.section-intro { margin-bottom: var(--esp-3); }
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: var(--esp-1); }
.section-intro { max-width: 62ch; }

/* ---------- 3 · Jerarquía tipográfica ---------- */

/* Titulares largos de sección: un punto más de interlínea para que
   respiren sin perder la compacidad de la Cormorant. */
h2, .h2 { line-height: 1.12; }
h3, .h3 { line-height: 1.18; }

/* Más distancia entre el titular y el cuerpo, que iban muy pegados. */
.prose > p:first-child, .section-intro > p { margin-top: var(--esp-1); }

/* La entradilla tiene que leerse como entradilla, no como otro párrafo. */
.lead-intro { max-width: 26ch; color: var(--tinta); }
.prose .lead { max-width: 34ch; }

/* Antetítulos: mismo tratamiento en todo el sitio. */
.eyebrow { letter-spacing: 0.22em; }

/* ---------- 4 · Movimiento y microdetalle ---------- */

/* Entradas más contenidas: menos recorrido y algo más rápidas.
   Antes subían 22px en 1s, que en pantallas largas se notaba pesado. */
.js .reveal { transform: translateY(14px); }
.js .reveal.is-in { transition: opacity .72s var(--ease), transform .72s var(--ease); }
.js .reveal-stagger > * { transform: translateY(12px); }
.js .reveal-stagger.is-in > * { transition: opacity .66s var(--ease), transform .66s var(--ease); }
.js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .06s; }
.js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .12s; }
.js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .18s; }
.js .reveal-stagger.is-in > *:nth-child(5) { transition-delay: .24s; }

/* Tarjetas: un gesto mínimo al pasar por encima. */
.pv-card, .program-card, .article-card, .reserva-card {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
@media (hover: hover) {
  .pv-card:hover, .program-card:hover, .article-card:hover, .reserva-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-suave);
  }
}

/* Enlaces con flecha: la flecha acompaña al cursor. */
.link-arrow .arrow, .btn .arrow { transition: transform .4s var(--ease); }
@media (hover: hover) {
  .link-arrow:hover .arrow, .btn:hover .arrow { transform: translateX(4px); }
}

/* Foco visible coherente en todo el sitio, también sobre foto. */
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }
.hero :focus-visible, .page-hero :focus-visible { outline-color: var(--dorado-suave); }

/* Quien haya pedido menos movimiento, que no tenga ninguno. */
@media (prefers-reduced-motion: reduce) {
  .pv-card, .program-card, .article-card, .reserva-card,
  .link-arrow .arrow, .btn .arrow { transition: none; }
  .pv-card:hover, .program-card:hover, .article-card:hover, .reserva-card:hover { transform: none; }
}

/* Página 404: bloque centrado en pantalla, despejando el header. */
.pagina-404 {
  min-height: 70svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--pad-seccion) + 4.5rem);
}

/* Landing del programa: su hero lleva además un botón y la barra de datos,
   así que crece con su contenido. Apretamos la separación interna para que
   la diferencia con las demás páginas sea pequeña y se lea como intención,
   no como descuido. */
.page-hero--tall .hero__sub { margin-top: 1.1rem; }
.page-hero--tall .hero__sub + .hero__sub { margin-top: .75rem; }
.page-hero--tall .btn { margin-top: 1.7rem; }
.page-hero--tall .hero-stats { margin-top: 1.5rem; }
@media (max-width: 620px) {
  .page-hero--tall .hero__sub + .hero__sub { display: none; }  /* en móvil sobra: el mismo texto abre la sección siguiente */
}

/* ---------- 5 · Legibilidad del menú sobre foto ---------- */

/* En Recursos el cielo es casi blanco y el menú se perdía. En vez de
   oscurecer toda la foto, el propio header lleva su velo, que desaparece
   en cuanto la cabecera se vuelve sólida al hacer scroll. */
.site-header.over-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(58,51,48,.46) 0%, rgba(58,51,48,.18) 55%, rgba(58,51,48,0) 100%);
  transition: opacity .55s var(--ease);
}
.site-header.over-hero.is-scrolled::before { opacity: 0; }

/* Heroes con el texto centrado: un velo suave detrás del titular para que
   se lea sobre cualquier foto, sin apagar la imagen entera. */
.page-hero--center .hero__scrim {
  background:
    linear-gradient(180deg, rgba(58,51,48,.30) 0%, rgba(58,51,48,.04) 30%),
    radial-gradient(125% 78% at 50% 82%, rgba(58,51,48,.60) 0%, rgba(58,51,48,.24) 52%, rgba(58,51,48,0) 100%),
    linear-gradient(0deg, rgba(58,51,48,.52) 0%, rgba(58,51,48,0) 62%);
}

/* =====================================================================
   PULIDO · 2ª pasada · heroes contenidos y minimalismo
   Los banners ya no ocupan la pantalla entera en ninguna página.
   ===================================================================== */

/* Portada: sigue siendo el banner más grande porque es la entrada, pero
   deja ver que hay web por debajo. Antes era 100svh. */
.hero { min-height: clamp(30rem, 74svh, 44rem); }

/* Páginas interiores: una franja, no una pantalla. */
.page-hero,
.page-hero--tall,
.page-hero--contain { min-height: clamp(23rem, 56svh, 34rem); }

/* Con menos alto, el texto necesita menos aire arriba y abajo. */
.page-hero .hero__inner,
.page-hero--tall .hero__inner {
  padding-block: clamp(7rem, 11vh, 8.5rem) clamp(2.6rem, 5vh, 4rem);
}
.hero__inner { padding-bottom: clamp(3.5rem, 8vh, 6rem); }

/* Titulares un punto más contenidos: el hero es más bajo. */
.hero__title { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 6rem); }
.page-hero .hero__title { font-size: clamp(2.2rem, 1.45rem + 2.9vw, 4rem); }

/* La pista de scroll sobraba en un hero que ya no llena la pantalla. */
.hero .scroll-hint { display: none; }

/* Móvil: la franja se ajusta al contenido, sin huecos muertos. */
@media (max-width: 620px) {
  .hero { min-height: clamp(26rem, 66svh, 34rem); }
  .page-hero, .page-hero--tall, .page-hero--contain { min-height: clamp(20rem, 46svh, 26rem); }
  .page-hero .hero__inner, .page-hero--tall .hero__inner {
    padding-block: 6.5rem 2.2rem;
  }
}

/* Landing: el párrafo largo del hero pesaba demasiado en una franja baja.
   Se queda (es la descripción del programa) pero en un tono secundario. */
.page-hero--tall .hero__sub + .hero__sub {
  font-size: var(--step--1);
  line-height: 1.6;
  max-width: 46ch;
  margin-top: .7rem;
  color: rgba(247,243,239,.78);
}
.page-hero--tall .btn { margin-top: 1.4rem; }
.page-hero--tall .hero-stats { margin-top: 1.2rem; }

/* =====================================================================
   PULIDO · objetivos táctiles (móvil)
   El botón del menú medía 20px de alto y los enlaces del pie 23px.
   En un móvil eso se falla al pulsar. Mínimo 44px, que es lo que
   recomiendan Apple y las pautas de accesibilidad WCAG.
   ===================================================================== */

/* El botón hamburguesa: la zona pulsable crece, las tres rayas no. */
.burger {
  width: 44px; height: 44px;
  margin-right: -10px;              /* la caja crece hacia dentro, no descoloca la barra */
  display: none;                     /* el media query de navegación lo enciende */
  position: relative;
  background: none; border: 0; padding: 0;
}

.burger span { left: 7px; width: 30px; }
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 28px; }

/* Enlaces del pie y de contacto: más zona pulsable sin abrir el diseño.
   Sólo en dispositivos táctiles; en escritorio con ratón se queda compacto. */
@media (pointer: coarse) {
  .footer-col a,
  .contact-info a,
  .mobile-menu__foot a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .footer-col a { padding-block: 0; }
  .mobile-menu__foot { gap: .4rem 1.5rem; }
  .testi-arrow { width: 46px; height: 46px; }
}

/* Pantallas estrechas de verdad (320-360 px): que nada se apriete. */
@media (max-width: 360px) {
  :root { --gutter: 1.15rem; }
  .hero__title { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .page-hero .hero__title { font-size: clamp(1.9rem, 8.4vw, 2.3rem); }
  .btn { padding: .85rem 1.3rem; font-size: .82rem; }
  .footer-grid { gap: 1.6rem; }
  .reserva-grid { gap: 1rem; }
}

/* Puntos del carrusel de testimonios: el punto se ve de 8px, pero la zona
   pulsable es de 28px. Antes había que acertar en 8 píxeles. */
.testi-dots { gap: 0; }
.testi-dots button {
  width: 32px; height: 32px;
  background: none;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  transform: none;
}
.testi-dots button::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--linea);
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.testi-dots button.is-active { transform: none; background: none; }
.testi-dots button.is-active::before { background: var(--terracota); transform: scale(1.3); }

/* Enlaces con flecha: en pantalla táctil, algo más de zona pulsable. */
@media (pointer: coarse) {
  .link-arrow { padding-block: .5rem; }
}

/* Separador entre los dos idiomas, sin sacar nada de la línea base. */
.lang-switch > * + * { border-left: 1px solid var(--linea); margin-left: .1rem; }

/* Sobre foto, en las páginas con hero a sangre */
.site-header:not(.is-scrolled).over-hero .lang-switch__on  { color: var(--blanco-roto); }
.site-header:not(.is-scrolled).over-hero .lang-switch__off { color: rgba(247,243,239,.7); }
.site-header:not(.is-scrolled).over-hero .lang-switch__off:hover { color: var(--blanco-roto); }
.site-header:not(.is-scrolled).over-hero .lang-switch > * + * { border-left-color: rgba(247,243,239,.35); }

/* En el menú móvil va suelto, encima del botón de reserva */
.mobile-menu .lang-switch { margin-top: 2rem; align-self: flex-start; }
.mobile-menu .lang-switch + .mobile-menu__cta { margin-top: 1rem; }

/* En pantallas estrechas se queda en la barra: es el único control
   además del menú, y ocupa poco. */
@media (max-width: 900px) {
  .nav__actions .lang-switch { margin-right: .4rem; }
}

/* =====================================================================
   Selector de idioma
   Icono de idioma (globo) + las dos opciones. No usamos banderas: una
   lengua no es un país, y en este caso además sería una elección
   innecesariamente política para una marca de acompañamiento familiar.
   ===================================================================== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .5rem .28rem .42rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .1em;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.lang-switch__globo {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  color: var(--tinta-55);
}
.lang-switch__on,
.lang-switch__off {
  display: grid; place-items: center;
  min-width: 24px; min-height: 24px;
  border-radius: 999px;
  transition: color .3s var(--ease), background .3s var(--ease);
}
/* El idioma activo va en negativo: se ve de un vistazo cuál está puesto. */
.lang-switch__on {
  background: var(--marron-calido);
  color: var(--blanco-roto);
  padding: 0 .42rem;
}
.lang-switch__off {
  color: var(--tinta-70);
  padding: 0 .3rem;
}
.lang-switch__off:hover,
.lang-switch__off:focus-visible { color: var(--marron-calido); }

/* Sobre foto, en las páginas con hero a sangre */
.site-header:not(.is-scrolled).over-hero .lang-switch {
  border-color: rgba(247,243,239,.45);
  background: rgba(58,51,48,.22);
}
.site-header:not(.is-scrolled).over-hero .lang-switch__globo { color: rgba(247,243,239,.8); }
.site-header:not(.is-scrolled).over-hero .lang-switch__on {
  background: var(--blanco-roto); color: var(--tinta);
}
.site-header:not(.is-scrolled).over-hero .lang-switch__off { color: rgba(247,243,239,.92); }
.site-header:not(.is-scrolled).over-hero .lang-switch__off:hover { color: #fff; }

/* En móvil el selector vive en la barra superior, siempre a la vista.
   El que había dentro del menú sobraba: se veían los dos a la vez. */
.mobile-menu .lang-switch { display: none; }

/* =====================================================================
   Barra de navegación · que quepa siempre
   El menú completo ocupa unos 1.200 px con la marca, los seis enlaces,
   el selector y el botón. Por debajo de eso pasamos al menú de
   hamburguesa: antes se mostraba desde 900 px y los enlaces se partían
   en dos líneas ("Sobre nosotros" caía partido).
   ===================================================================== */
.nav { gap: 1.4rem; }
.nav__links { gap: clamp(1.1rem, 1.9vw, 2.1rem); flex-wrap: nowrap; }
.nav__link { white-space: nowrap; }
.nav__actions { gap: .7rem; flex: none; }

@media (max-width: 1200px) {
  .nav__links, .nav__actions .btn { display: none; }
  .burger { display: block; }
  .nav__actions { gap: .35rem; }
}
@media (min-width: 1201px) {
  .burger { display: none; }
}

/* La caja del menú nunca pasa de 1280 px (es el ancho de .wrap), así que el
   menú completo tiene que caber en 1280 px en CUALQUIER pantalla. Estos
   valores son los del menú de escritorio; no dependen del ancho de ventana. */
.brand span { font-size: .96rem; letter-spacing: .15em; }
.brand__mark { width: 30px; height: 30px; }
.nav { gap: 1.1rem; }
.nav__links { gap: 1.5rem; }
.nav__link { font-size: .85rem; }
.nav__actions .btn { padding: .72rem 1.2rem; font-size: .79rem; }
.lang-switch { font-size: .68rem; padding: .26rem .46rem .26rem .38rem; gap: .26rem; }
.lang-switch__globo { width: 14px; height: 14px; }
.lang-switch__on, .lang-switch__off { min-width: 22px; min-height: 22px; }

/* En la barra, sobre pantalla táctil, el selector se agranda un punto
   para que se pueda pulsar con comodidad. */
@media (max-width: 1200px) {
  .nav__actions .lang-switch { font-size: .74rem; padding: .32rem .55rem .32rem .45rem; gap: .32rem; }
  .nav__actions .lang-switch__globo { width: 15px; height: 15px; }
  .nav__actions .lang-switch__on,
  .nav__actions .lang-switch__off { min-width: 28px; min-height: 28px; }
}
@media (max-width: 360px) {
  .nav__actions .lang-switch__globo { display: none; }
  .brand span { font-size: .82rem; letter-spacing: .1em; }
}

/* Fundidos cortos: la foto se descarga con antelación y aparece enseguida.
   Con 1,1s de fundido daba la sensación de que no llegaba a cargar. */
.js .reveal.is-in { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .reveal-stagger.is-in > * { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.media img, .media > picture > img { transition: opacity .4s var(--ease), transform .9s var(--ease); }
.media::after { transition: opacity .4s var(--ease); }

/* =====================================================================
   REVISIÓN CLIENTE · septiembre 2026 (notas de voz)
   ===================================================================== */

/* ---------- A · El claim sobre fotografía no se leía ----------
   "Las otras sí que las puedo leer, pero esas que están en naranja me
   cuestan muchísimo... sobre todo PAREJA, se me esconde mucho."
   El terracota se mantiene donde va sobre fondo liso (pie, secciones),
   que es como lo pidió el cliente en su día; encima de una foto pasa a un
   crema cálido con sombra corta: sigue siendo de la familia de la marca,
   pero se lee de lejos. */
.hero .claim-marca,
.page-hero .claim-marca,
.hero__kicker .claim-marca {
  color: #F7E9DE;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(35,25,20,.65), 0 2px 10px rgba(35,25,20,.6), 0 2px 28px rgba(35,25,20,.5);
}
/* La línea del kicker acompañaba en dorado apagado y se perdía igual. */
.hero__kicker .kline { background: rgba(247,233,222,.75); }

/* Un velo corto justo detrás del kicker y el titular: la foto de la home
   tiene zonas claras (el cielo) donde cualquier texto se diluye. */
.hero .hero__scrim::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(0deg, rgba(58,51,48,.42) 0%, rgba(58,51,48,.16) 55%, rgba(58,51,48,0) 100%);
  pointer-events: none;
}

@media (max-width: 700px) {
  .hero .hero__scrim::after,
  .page-hero .hero__scrim::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 70%;
    background: linear-gradient(0deg, rgba(58,51,48,.55) 0%, rgba(58,51,48,.24) 60%, rgba(58,51,48,0) 100%);
  }
}

/* ---------- B · Tarjetas de programa: mismo margen que la foto ----------
   "En la de Parejas... las letras van pegadas al margen, pero mucho.
   Tendría que haber ese mismo margen que queda con la foto en la de arriba."
   La primera tarjeta es la destacada y lleva relleno; las otras dos no lo
   llevaban, así que su texto quedaba 48 px más cerca del borde que la foto
   de la tarjeta de encima. Ahora las tres comparten margen interior. */
@media (min-width: 821px) {
  .program-card { padding-inline: clamp(1.5rem, 4vw, 3rem); }
}

/* ---------- C · Cartas de Alkimia: nombre, apellido y correo ----------
   El formulario pasa de un campo a tres. En el pie van el nombre y el
   apellido en la misma línea y el correo debajo; en la sección ancha, los
   tres caben arriba y el botón debajo. */
.footer-news__form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.footer-news__form input { flex: none; width: 100%; }
.footer-news__form input[type="email"],
.footer-news__form button { grid-column: 1 / -1; }

.newsletter__form { max-width: 620px; }
.newsletter__form .field { flex: 1 1 190px; }
.newsletter__form > button { flex: 1 1 100%; justify-content: center; }
@media (max-width: 520px) {
  .newsletter__form .field { flex: 1 1 100%; }
}

/* ---------- D · Logo en la cabecera ----------
   Reunión 3/9: "colocar el logo con el mismo tamaño que el botón de reserva".
   Xavi, después: "si haces grande el logo deberías hacer grande ALKIMIA
   FAMILIA y sin la barra en medio, pero mismo tamaño más o menos".

   Por eso NO se usa el lockup de imagen: trae la barra y las letras pequeñas
   respecto a la marca, y eso no se toca sin retocar el arte. Marca oficial
   (la del SVG, sin el halo blanco del PNG viejo) + texto HTML, que sí se
   puede dimensionar. */
.brand {
  display: inline-flex; align-items: center; gap: .72rem;
  font-family: var(--serif); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta); line-height: 1;
}
.brand span { display: inline; font-size: 1.24rem; white-space: nowrap; }
/* La marca es apaisada (1,61:1): se fija el alto y el ancho lo sigue. */
.brand__mark { height: 40px; width: auto; flex: none; display: block; }
.brand__mark img { height: 100%; width: auto; object-fit: contain; display: block; }

/* Sobre la foto del hero el texto pasa a crema, con sombra corta para que no
   se diluya en las zonas claras. El símbolo es acuarela a color y se sostiene
   solo; sólo necesita despegarse un poco del fondo. */
.site-header:not(.is-scrolled).over-hero .brand { color: var(--blanco-roto); }
.site-header:not(.is-scrolled).over-hero .brand span {
  text-shadow: 0 1px 2px rgba(35,25,20,.6), 0 2px 12px rgba(35,25,20,.5);
}
.site-header:not(.is-scrolled).over-hero .brand__mark img {
  filter: drop-shadow(0 1px 5px rgba(35,25,20,.45));
}

/* Pie: mismo criterio, proporcional (Xavi 23:18). */
.site-footer .brand { color: var(--blanco-roto); }
.site-footer .brand__mark { height: 46px; }
.site-footer .brand span { font-size: 1.4rem; }

/* Menú móvil: fondo claro, texto en tinta. */
.mobile-menu .brand__mark { height: 34px; }
.mobile-menu .brand span { font-size: 1.05rem; }

/* El menú completo necesita ~1.050 px. Entre 1200 y 1366 px, con la marca
   grande, la marca y los enlaces se pisaban: aquí baja por escalones. Por
   debajo de 1200 entra el botón de menú y vuelve a haber sitio. */
@media (max-width: 1366px) { .brand__mark { height: 36px; } .brand span { font-size: 1.06rem; letter-spacing: .09em; } }
@media (max-width: 1300px) { .brand__mark { height: 32px; } .brand span { font-size: .95rem; letter-spacing: .07em; } .brand { gap: .55rem; } }
@media (max-width: 1200px) { .brand__mark { height: 36px; } .brand span { font-size: 1.1rem; letter-spacing: .1em; } .brand { gap: .7rem; } }
@media (max-width: 700px)  { .brand__mark { height: 32px; } .brand span { font-size: 1rem; letter-spacing: .1em; } }
@media (max-width: 380px)  { .brand__mark { height: 28px; } .brand span { font-size: .86rem; letter-spacing: .07em; } }
/* La franja superior del hero era muy suave y la cabecera (logo incluido) se
   diluía en el cielo. Se refuerza un poco: sigue viéndose la foto, pero el
   logo y el menú se leen. */
.hero .hero__scrim::before,
.page-hero .hero__scrim::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 34%;
  background: linear-gradient(180deg, rgba(45,38,34,.46) 0%, rgba(45,38,34,.20) 55%, rgba(45,38,34,0) 100%);
  pointer-events: none;
}

/* ---------- E · Títulos de programa en mayúsculas ----------
   Decisión de la reunión del 3/9: "los títulos de los programas se mostrarán
   en mayúsculas para mantener la consistencia visual". Se hace por estilo, no
   tocando el texto: el marcado y los buscadores siguen viendo la frase con su
   ortografía normal. En serif y en caja alta hace falta algo de espaciado
   para que respire. */
.program-card__title {
  text-transform: uppercase;
  letter-spacing: .045em;
  line-height: 1.18;
}

/* ---------- F · Subtítulo de la home en una sola línea ----------
   Reunión del 3/9: "el subtítulo 'porque sabemos que criar también implica
   mirarnos' debería estar todo en una línea". Se partía por el max-width de
   40ch heredado del estilo general. En pantallas donde una sola línea sería
   ilegible (móvil estrecho) se deja que vuelva a partir: mejor dos líneas
   legibles que una diminuta. */
.hero:not(.page-hero) .hero__sub {
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .hero:not(.page-hero) .hero__sub {
    white-space: normal;
    max-width: 26ch;
  }
}

/* ---------- G · Preferencia de profesional ----------
   Reunión del 3/9: el formulario de contacto pregunta con quién se prefiere
   la primera sesión, con «Indiferente» marcado de salida para no obligar a
   elegir. Botones tipo píldora en vez de un desplegable: se ve de un vistazo
   que hay tres opciones y son objetivos táctiles cómodos. */
.eleccion { border: 0; padding: 0; margin: 0 0 1.8rem; }
.eleccion legend {
  padding: 0; margin-bottom: .8rem;
  font-family: var(--sans); font-size: var(--step--1); color: var(--tinta-70);
}
.eleccion__ops { display: flex; flex-wrap: wrap; gap: .5rem; }
.eleccion__op { position: relative; }
.eleccion__op input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.eleccion__op span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5rem 1.1rem;
  border: 1px solid var(--linea); border-radius: 999px;
  font-family: var(--sans); font-size: var(--step--1); color: var(--tinta-70);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.eleccion__op input:checked + span {
  background: var(--marron-calido); border-color: var(--marron-calido); color: var(--blanco-roto);
}
.eleccion__op input:focus-visible + span { outline: 2px solid var(--marron-calido); outline-offset: 3px; }
.eleccion__op:hover span { border-color: var(--marron-calido); }
.eleccion__nota { margin-top: .6rem; font-size: .78rem; color: var(--tinta-55, rgba(58,51,48,.55)); }

/* ---------- H · Segmento (mujer / hombre / pareja) ----------
   Xavi, 00:17:25: "dentro del formulario una opción de si es hombre o mujer,
   para poder filtrar: una lista de parejas, una de hombres, una de mujeres,
   y una maestra que es la general". Sin este dato la segmentación de Brevo
   no tiene de dónde salir. Va sin marcar de salida: quien no conteste entra
   sólo en la lista general, que es justo el modelo que describió. */
.eleccion--claro legend { color: rgba(247,243,239,.7); }
.eleccion--claro .eleccion__op span {
  border-color: rgba(247,243,239,.45); color: var(--blanco-roto);   /* .85 daba 4,0:1 sobre el verde */
}
.eleccion--claro .eleccion__op input:checked + span {
  background: var(--dorado-suave); border-color: var(--dorado-suave); color: var(--tinta);
}
.eleccion--claro .eleccion__op:hover span { border-color: var(--dorado-suave); }

/* En el pie la columna es estrecha: píldoras más compactas y que puedan
   pasar a dos líneas sin romper nada. */
.eleccion--pie { grid-column: 1 / -1; margin-bottom: .2rem; }
.eleccion--pie legend { font-size: .78rem; color: rgba(247,243,239,.55); margin-bottom: .5rem; }
.eleccion--pie .eleccion__ops { gap: .4rem; }
.eleccion--pie .eleccion__op span {
  min-height: 38px; padding: .35rem .8rem; font-size: .78rem;
  border-color: rgba(247,243,239,.25); color: rgba(247,243,239,.8);
}
.eleccion--pie .eleccion__op input:checked + span {
  background: var(--dorado-suave); border-color: var(--dorado-suave); color: var(--tinta);
}
@media (pointer: coarse) { .eleccion--pie .eleccion__op span { min-height: 44px; } }

/* ---------- I · Párrafos dentro de bloques centrados ----------
   Xavi 23:40: «lo de Gratuitos... tiene que estar centrado».
   El texto sí estaba centrado, pero la CAJA no: todo <p> lleva un ancho
   máximo de lectura y, sin márgenes automáticos, esa caja se pegaba a la
   izquierda. El resultado era una línea centrada respecto a un bloque
   descentrado. */
.center p { margin-inline: auto; }
/* Pantallas muy estrechas (iPhone SE): la marca grande deja el listón muy
   justo con el selector de idioma y el botón de menú. */
@media (max-width: 345px) {
  .brand { gap: .5rem; }
  .brand__mark { height: 26px; }
  .brand span { font-size: .76rem; letter-spacing: .04em; }
}
/* En el móvil compiten en la misma barra: marca, selector de idioma y botón
   de menú. Para que ALKIMIA FAMILIA siga leyéndose grande, el selector se
   compacta (el globo sobra cuando ya se ven ES y CA) y la marca baja por
   escalones hasta que deja de pisar. */
@media (max-width: 520px) {
  .nav__actions .lang-switch__globo { display: none; }
  .lang-switch { padding: .22rem .34rem .22rem .3rem; gap: .2rem; }
  .nav { gap: .7rem; }
  .nav__actions { gap: .5rem; }
}
@media (max-width: 460px) { .brand__mark { height: 30px; } .brand span { font-size: .9rem; letter-spacing: .07em; } .brand { gap: .5rem; } }
@media (max-width: 400px) { .brand__mark { height: 28px; } .brand span { font-size: .82rem; letter-spacing: .05em; } }
@media (max-width: 380px) { .brand__mark { height: 26px; } .brand span { font-size: .74rem; letter-spacing: .03em; } .brand { gap: .44rem; } }
@media (max-width: 345px) { .brand__mark { height: 24px; } .brand span { font-size: .6rem; letter-spacing: .01em; } .brand { gap: .32rem; } }

/* ---------- J · Subtítulo de las tarjetas de programa ----------
   Roser, 4/9: «la frase del subtítulo de los 3 programas la letra es muy
   pequeña y no se ve».
   Tenía razón y era un fallo real: `.program-card__body p` (dos clases)
   ganaba por especificidad a `.program-card__sub` (una), así que el
   subtítulo salía a 14,7 px -el mismo tamaño que el cuerpo- y en el gris del
   texto normal, en vez de a var(--step-2) y en verde apagado como estaba
   escrito. Se sube la especificidad y se le da presencia de subtítulo. */
.program-card__body .program-card__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.35;
  color: #56654a;   /* el verde de marca, un punto más profundo: 4,6:1 sobre beige (antes 4,0) */
  margin-bottom: 1.2rem;
  max-width: 34ch;
}

/* Tamaño de la letra pequeña de consentimiento */
:root { --legal-mini: clamp(0.74rem, 0.72rem + 0.12vw, 0.82rem); }

/* =====================================================================
   PÁGINAS LEGALES · privacidad y aviso legal
   Texto largo, jerarquía tranquila y listas legibles. Se limita a .legal
   para no tocar el resto del sitio (ul lleva list-style:none global).
   ===================================================================== */
.legal { max-width: none; }
.legal h2 {
  font-size: var(--step-2);
  margin: clamp(2.6rem, 5vw, 3.4rem) 0 1rem;
  padding-top: clamp(2.6rem, 5vw, 3.4rem);
  border-top: 1px solid var(--linea);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
  font-size: var(--step-0);
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .02em;
  margin: 1.8rem 0 .6rem;
}
.legal p, .legal li { color: var(--tinta-70); font-size: var(--step--1); line-height: 1.75; }
.legal p { max-width: var(--ancho-lectura); }
.legal p + p { margin-top: 1em; }
.legal ul, .legal ol { margin: 1em 0 0; padding-left: 1.4rem; max-width: var(--ancho-lectura); }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: .5em; padding-left: .2rem; }
.legal li::marker { color: var(--dorado-suave); }
.legal a { color: var(--marron-calido); text-decoration: underline; text-underline-offset: .18em; }
.legal a:hover { color: var(--terracota); }
.legal strong { color: var(--tinta); font-weight: 500; }
.legal dl { margin: 1em 0 0; max-width: var(--ancho-lectura); }
.legal dt { color: var(--tinta); font-weight: 500; font-size: var(--step--1); margin-top: 1em; }
.legal dd { margin: .2em 0 0; color: var(--tinta-70); font-size: var(--step--1); line-height: 1.7; }

/* Tabla de cesiones: en móvil cada fila se lee como una ficha */
.legal-tabla { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: var(--step--1); }
.legal-tabla th, .legal-tabla td {
  text-align: left; padding: .8em .9em; border-bottom: 1px solid var(--linea);
  color: var(--tinta-70); vertical-align: top; line-height: 1.6;
}
.legal-tabla th { color: var(--tinta); font-weight: 500; font-family: var(--sans); }
.legal-tabla thead th { border-bottom: 1px solid var(--linea); }
@media (max-width: 680px) {
  .legal-tabla, .legal-tabla tbody, .legal-tabla tr, .legal-tabla td { display: block; width: 100%; }
  .legal-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-tabla tr { border-bottom: 1px solid var(--linea); padding: .9em 0; }
  .legal-tabla td { border: 0; padding: .18em 0; }
  .legal-tabla td::before { content: attr(data-th) " · "; color: var(--tinta); font-weight: 500; }
}

/* Índice de la página · los títulos ya llevan su número, así que la lista
   no debe numerar otra vez (salía "1. 1 · Quién trata tus datos"). */
.legal-indice { margin: 0 0 1rem; padding-left: 0; list-style: none; }
.legal-indice li { margin-bottom: .35em; padding-left: 0; }
.legal-indice li::marker { content: none; }
.legal-indice-caja {
  border-left: 2px solid var(--linea);
  padding: .2rem 0 .2rem 1.2rem;
  margin-bottom: clamp(2.4rem, 5vw, 3.4rem);
}

/* El párrafo que sigue a una lista de datos necesita aire */
.legal dl + p, .legal ul + p, .legal ol + p, .legal table + p { margin-top: 1.4em; }
.legal dl + h3, .legal ul + h3 { margin-top: 2.2rem; }

/* Dato que aún debe rellenar el cliente. Se ve a propósito: no debe
   publicarse una página legal con un hueco sin que salte a la vista. */
.pendiente {
  display: inline;
  background: rgba(193, 122, 90, .12);
  border-bottom: 1px dashed var(--terracota);
  color: var(--marron-calido);
  padding: .05em .35em;
  border-radius: 3px;
  font-size: .95em;
}
.aviso-borrador {
  border: 1px solid var(--terracota);
  border-left-width: 3px;
  border-radius: 4px;
  background: rgba(193, 122, 90, .07);
  padding: clamp(1rem, 3vw, 1.4rem) clamp(1.1rem, 3vw, 1.6rem);
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}
.aviso-borrador p { margin: 0; color: #7d4a33; font-size: var(--step--1); max-width: none; }
.aviso-borrador p + p { margin-top: .6em; }

/* Casilla de consentimiento en los formularios */
.consent { display: flex; align-items: flex-start; gap: .65rem; margin: 1.4rem 0 .2rem; text-align: left; }
.consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 1.05rem; height: 1.05rem; min-width: 0; padding: 0; margin-top: .18rem;
  border: 1px solid rgba(58,51,48,.58); border-radius: 3px;
  background: transparent; cursor: pointer; position: relative;
  transition: border-color .18s ease, background-color .18s ease;
}
.consent input[type="checkbox"]:checked { background: var(--bosque-apagado); border-color: var(--bosque-apagado); }
.consent input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: .3rem; top: .1rem;
  width: .3rem; height: .58rem; border: solid var(--blanco-roto);
  border-width: 0 1.5px 1.5px 0; transform: rotate(42deg);
}
.consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--dorado-suave); outline-offset: 2px; }
.consent label, .consent span { font-size: var(--legal-mini); line-height: 1.55; color: var(--tinta-70); cursor: pointer; max-width: none; }
/* El enlace va DENTRO de la frase. En el pie, .footer-col a lo pone en
   bloque (display:flex) y con su propio tamaño: aquí se devuelve a la línea. */
.consent a {
  display: inline; color: inherit; font-size: inherit; line-height: inherit;
  padding: 0; margin: 0; text-decoration: underline; text-underline-offset: .16em;
}
.consent a:hover { color: var(--terracota); }
/* El borde en terracota, como el de los campos; el texto en marrón cálido,
   como .field__msg: la terracota sobre el crema se queda en 2,9:1. */
.consent.is-error input[type="checkbox"] { border-color: var(--marron-calido); border-width: 2px; background: rgba(201,123,99,.14); }
.consent.is-error label { color: var(--marron-calido); }

/* Sobre fondo bosque (sección Cartas de Alkimia) */
/* Al 72 % el contraste sobre el verde se quedaba en 3,4:1 y para letra
   pequeña hacen falta 4,5:1. A plena opacidad da 4,9:1. */
.consent--claro label, .consent--claro span { color: var(--blanco-roto); }
.consent--claro input[type="checkbox"] { border-color: rgba(247,243,239,.68); }
.consent--claro input[type="checkbox"]:checked { background: var(--dorado-suave); border-color: var(--dorado-suave); }
.consent--claro input[type="checkbox"]:checked::after { border-color: var(--bosque-apagado); }
/* En error el aviso no se fía sólo del color: se engorda el borde y el
   mensaje sale bajo el formulario. El texto sigue blanco por contraste. */
.consent--claro.is-error input[type="checkbox"] { border-color: var(--dorado-suave); border-width: 2px; background: rgba(214,195,163,.2); }
.consent--claro.is-error label { color: var(--blanco-roto); }

/* En el pie, más compacta y sobre fondo oscuro: el color por defecto
   (tinta al 70 %) quedaba invisible sobre el marrón del pie. */
.consent--pie { margin: .5rem 0 .2rem; grid-column: 1 / -1; }
.consent--pie label, .consent--pie span { font-size: .72rem; line-height: 1.5; color: rgba(247,243,239,.6); }
.consent--pie input[type="checkbox"] { border-color: rgba(247,243,239,.45); }
.consent--pie input[type="checkbox"]:checked { background: var(--dorado-suave); border-color: var(--dorado-suave); }
.consent--pie input[type="checkbox"]:checked::after { border-color: var(--tinta); }
.consent--pie.is-error input[type="checkbox"] { border-color: var(--dorado-suave); border-width: 2px; background: rgba(214,195,163,.2); }
.consent--pie.is-error label { color: rgba(247,243,239,.85); }
.consent--pie a { color: rgba(247,243,239,.85); }
.consent--pie a:hover { color: var(--blanco-roto); }

/* Enlaces legales del pie */
.footer-legal { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
/* Heredar el color del pie (blanco al 50 %) dejaba los enlaces en 4,07:1;
   a .72 suben a 6,65:1, que es lo que pide AA para letra pequeña. */
.footer-legal a { color: rgba(247,243,239,.72); text-decoration: none; transition: color .3s; }
.footer-legal a:hover { color: var(--blanco-roto); text-decoration: underline; text-underline-offset: .18em; }
.footer-legal > span[aria-hidden] { opacity: .5; }
@media (max-width: 720px) { .footer-legal { justify-content: flex-start; } }

/* =====================================================================
   IMPRESIÓN · sobre todo para las páginas legales
   Se quita lo que no tiene sentido en papel; el contenido no cambia.
   ===================================================================== */
@media print {
  .preloader, .site-header, .mobile-menu, .cursor-dot, .cursor-ring, .grain,
  .page-transition, .scroll-hint, .marquee, .cta-final, .footer-news,
  .newsletter, .testi-nav, .burger, .lang-switch, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding-top: 0; }
  .reveal, .reveal-stagger > *, .media img { opacity: 1 !important; transform: none !important; }
  a { color: inherit; text-decoration: underline; }
  .legal a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .aviso-borrador { border: 1px solid #000; }
  .site-footer { background: none; color: #000; border-top: 1px solid #000; padding-top: 1rem; }
  .site-footer .brand, .footer-col h2, .footer-col a, .footer-bottom, .footer-legal a { color: #000; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .legal-tabla th, .legal-tabla td { border-bottom: 1px solid #999; }
}