/* =========================================================================
   PROYECTO SOCIAL MONARCAS — Hoja de estilos principal
   Estilo: editorial cálido + accesible (WCAG AA/AAA)
   Paleta derivada del logotipo (mariposa monarca fucsia · ciruela · negro)
   Tipografía: Playfair Display (títulos) + Inter (texto/UI)
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Marca */
  --magenta-900: #5B0B3D;
  --magenta-800: #7A0F55;
  --magenta-700: #8E1361;   /* magenta seguro para texto (7.8:1 sobre crema) */
  --magenta-600: #B01A7B;   /* primario */
  --magenta-500: #C4288E;
  --magenta-300: #E9A3CF;
  --magenta-200: #F4CFE5;
  --magenta-100: #FBE8F3;

  --plum-950: #1C0E17;
  --plum-900: #2B1122;
  --plum-800: #3D1630;

  --amber-500: #E08A2E;     /* guiño a la monarca real — solo decorativo */

  /* Neutros cálidos */
  --paper:      #FFFFFF;
  --cream:      #FDF8FA;
  --cream-deep: #F7EDF3;
  --ink:        #2A1B24;
  --ink-soft:   #5E4A56;
  --border:     #EBDCE5;
  --border-strong: #DCC4D3;

  /* Semánticos */
  --color-background: var(--cream);
  --color-surface:    var(--paper);
  --color-foreground: var(--ink);
  --color-muted-fg:   var(--ink-soft);
  --color-primary:    var(--magenta-600);
  --color-on-primary: #FFFFFF;
  --color-link:       var(--magenta-700);
  --color-ring:       var(--magenta-600);

  /* Espaciado (escala 4/8) */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;

  /* Radios y sombras */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(43, 17, 34, .06), 0 2px 8px rgba(43, 17, 34, .04);
  --shadow-md: 0 4px 12px rgba(43, 17, 34, .07), 0 12px 32px rgba(43, 17, 34, .07);
  --shadow-lg: 0 8px 24px rgba(43, 17, 34, .10), 0 24px 56px rgba(43, 17, 34, .10);

  /* Tipografía */
  --font-display: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 68px;

  /* Movimiento */
  --ease-out: cubic-bezier(.16, .84, .44, 1);
  --t-fast: 150ms;
  --t-base: 220ms;

  /* Capas */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-nav: 100;

  color-scheme: light;
}

/* ---------- 1a. TIPOGRAFÍAS PROPIAS ----------
   Servidas desde este mismo dominio, no desde fonts.gstatic.com: una conexión
   menos, sin DNS ni TLS de terceros, y el sitio no depende de que Google Fonts
   sea alcanzable (nada evidente en Cuba). Son las versiones variables, así que
   un solo archivo cubre todos los grosores de cada familia.
   El subconjunto es «latin» (U+0000-00FF cubre á é í ó ú ñ ü « » y el guion largo). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/inter-variable.woff2") format("woff2-variations");
  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: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/playfair-variable.woff2") format("woff2-variations");
  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: "Playfair Display";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/playfair-italic-variable.woff2") format("woff2-variations");
  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;
}

/* ---------- 1b. FUENTES DE RESERVA CON MÉTRICAS AJUSTADAS ----------
   Con `font-display: swap`, al llegar Playfair e Inter el texto se recomponía
   y empujaba todo hacia abajo (CLS de 0,215 en tableta). Estas familias de
   reserva reescalan Georgia y Arial para que ocupen casi el mismo espacio que
   las definitivas, de modo que el intercambio no mueve nada.
   Los valores están medidos sobre las fuentes reales, no estimados. */
@font-face {
  font-family: "Playfair Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif"), local("DejaVu Serif");
  size-adjust: 98.91%;
  ascent-override: 109.19%;
  descent-override: 25.28%;
  line-gap-override: 0%;
}
/* La cursiva de Playfair viaja en otro archivo y llega más tarde que la
   redonda; además es bastante más estrecha que la cursiva de Georgia
   (93 % frente al 99 % de la redonda), así que necesita sus propios valores. */
@font-face {
  font-family: "Playfair Fallback";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia"), local("Times New Roman Italic"), local("Liberation Serif Italic");
  size-adjust: 93.05%;
  ascent-override: 116.06%;
  descent-override: 26.87%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("DejaVu Sans");
  size-adjust: 106.05%;
  ascent-override: 91.47%;
  descent-override: 22.63%;
  line-gap-override: 0%;
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-4); max-width: 42.90em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

ul { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--magenta-600); }

button { font: inherit; cursor: pointer; }

.sprite { position: absolute; width: 0; height: 0; }

.icon {
  width: 1.25em; height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 1.75rem; height: 1.75rem; stroke-width: 1.5; }

/* ---------- 3. ACCESIBILIDAD ---------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: var(--magenta-700);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--dark :focus-visible,
.cta-final :focus-visible,
.footer :focus-visible { outline-color: var(--magenta-300); }

/* ---------- 4. LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 7vw, 6rem); }

.section__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 39.12em; }
.section__title { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
.section__lead { margin-top: var(--space-4); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 var(--space-4);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--magenta-700);
}
.eyebrow__rule {
  width: 32px; height: 2px;
  background: linear-gradient(90deg, var(--magenta-600), var(--magenta-300));
  border-radius: 2px;
}
.eyebrow--light { color: var(--magenta-100); }
.eyebrow--light .eyebrow__rule { background: linear-gradient(90deg, var(--magenta-100), transparent); }

.lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.65;
  color: var(--color-muted-fg);
  max-width: 36.59em;
}

/* ---------- 5. BOTONES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn .icon { width: 1.125rem; height: 1.125rem; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--magenta-600);
  color: var(--color-on-primary);
  box-shadow: 0 4px 14px rgba(176, 26, 123, .28);
}
.btn--primary:hover { background: var(--magenta-700); color: #fff; box-shadow: 0 6px 20px rgba(176, 26, 123, .34); }

.btn--ghost {
  background: transparent;
  color: var(--magenta-700);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--magenta-100); border-color: var(--magenta-300); color: var(--magenta-800); }

.btn--ghost-light {
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.btn--light { background: #fff; color: var(--magenta-800); }
.btn--light:hover { background: var(--magenta-100); color: var(--magenta-900); }

.btn--sm { min-height: 44px; padding: .5rem 1.1rem; font-size: .875rem; }

/* ---------- 6. HEADER + NAVEGACIÓN ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(253, 248, 250, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 14px rgba(43, 17, 34, .05);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding-block: .5rem;
}

/* Lockup de marca: la mariposa del logotipo + el nombre compuesto,
   porque el logotipo completo resulta ilegible a tamaño de cabecera. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  text-decoration: none;
}
.brand__mark {
  width: auto;
  height: 38px;
  transition: transform var(--t-base) var(--ease-out);
}
.brand:hover .brand__mark { transform: translateY(-2px) rotate(-3deg); }

.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__kicker {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.brand__name {
  margin-top: .22rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -.01em;
  color: var(--magenta-700);
}

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: .25rem; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .85rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.nav__link:hover { color: var(--magenta-700); background: var(--magenta-100); }
.nav__link.is-active { color: var(--magenta-700); font-weight: 600; }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: .85rem; right: .85rem; bottom: .35rem;
  height: 2px;
  background: var(--magenta-600);
  border-radius: 2px;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem .9rem;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  touch-action: manipulation;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.nav-toggle:hover { background: var(--magenta-100); border-color: var(--magenta-300); }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Panel móvil */
.nav.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: var(--space-4) var(--gutter) var(--space-5);
  background: var(--paper);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  animation: nav-in var(--t-base) var(--ease-out);
}
.nav.is-open .nav__list { flex-direction: column; align-items: stretch; gap: .125rem; }
.nav.is-open .nav__link { padding: .85rem 1rem; font-size: 1rem; }
.nav.is-open .nav__link.is-active::after { display: none; }
.nav.is-open .nav__cta { display: flex; margin-top: var(--space-4); width: 100%; }

@keyframes nav-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.nav__cta { display: none; }

@media (min-width: 1000px) {
  :root { --header-h: 78px; }
  .nav { display: flex; align-items: center; gap: var(--space-5); }
  .nav-toggle { display: none; }
  .nav__cta { display: inline-flex; }
  .brand__mark { height: 44px; }
  .brand__kicker { font-size: .6875rem; }
  .brand__name { font-size: 1.5rem; }
  /* El panel móvil no debe sobrevivir al cambio de tamaño */
  .nav.is-open {
    position: static;
    display: flex;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
  }
  .nav.is-open .nav__list { flex-direction: row; align-items: center; gap: .25rem; }
  .nav.is-open .nav__link { padding: .5rem .85rem; font-size: .9375rem; }
  .nav.is-open .nav__cta { margin-top: 0; width: auto; }
}

/* ---------- 7. HERO ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(120% 80% at 85% 0%, var(--magenta-100) 0%, transparent 58%),
    radial-gradient(90% 70% at 0% 100%, #FFF6FB 0%, transparent 60%),
    var(--cream);
}
.hero__aura {
  position: absolute;
  z-index: -1;
  top: -14%; right: -12%;
  width: min(70vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(196, 40, 142, .20) 0%, rgba(196, 40, 142, 0) 68%);
  filter: blur(8px);
  pointer-events: none;
}

.hero__inner { position: relative; }

.hero__title {
  font-size: clamp(2.125rem, 1.5rem + 3.4vw, 4rem);
  margin-bottom: var(--space-5);
}
.hero__title em {
  font-style: italic;
  color: var(--magenta-700);
}

.hero__promise {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.hero__quote {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-4);
  border-left: 3px solid var(--magenta-300);
}
.hero__quote p {
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  color: var(--color-muted-fg);
  margin: 0;
}
.hero__quote strong { color: var(--magenta-800); font-weight: 600; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__art {
  position: absolute;
  z-index: -1;
  top: -2rem; right: -18%;
  width: min(60vw, 340px);
  opacity: .12;
  pointer-events: none;
}

.hero__butterfly { width: 100%; height: auto; }

@media (min-width: 960px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: var(--space-8);
  }
  .hero__art {
    position: static;
    width: auto;
    opacity: 1;
    display: flex;
    justify-content: center;
  }
  .hero__butterfly {
    width: min(100%, 330px);
    filter: drop-shadow(0 22px 34px rgba(91, 11, 61, .22));
    animation: float 9s ease-in-out infinite;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1.5deg); }
}

/* Barra de datos */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stats__item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: var(--space-5) var(--space-4);
  background: var(--paper);
  text-align: center;
}
.stats__num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--magenta-700);
}
.stats__label {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--color-muted-fg);
  text-transform: uppercase;
}

@media (min-width: 760px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 8. MANIFIESTO ---------- */
.manifiesto {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: var(--paper);
  border-block: 1px solid var(--border);
}
.manifiesto__inner { max-width: 42.90em; margin-inline: auto; text-align: center; }
.manifiesto__inner p { max-width: none; }

.manifiesto__negations {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 1vw, 1.875rem);
  font-style: italic;
  color: var(--magenta-800);
  margin-bottom: var(--space-4);
}
.manifiesto__text {
  font-size: clamp(1rem, .97rem + .25vw, 1.125rem);
  color: var(--color-muted-fg);
  margin-bottom: var(--space-4);
}
.manifiesto__claim {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* ---------- 9. MISIÓN ---------- */
.section--mision { background: var(--cream); }

.mision__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

.faces {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.faces li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1rem;
  color: var(--ink);
}
.faces li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 10px; height: 10px;
  border-radius: 999px 2px 999px 2px;
  background: linear-gradient(135deg, var(--magenta-500), var(--plum-800));
}

.mision__body p { color: var(--color-muted-fg); }

@media (min-width: 900px) {
  .mision__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .mision__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ---------- 10. DOS CAMINOS ---------- */
.section--rutas {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
}

.rutas { display: grid; gap: var(--space-5); }

.ruta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.ruta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--plum-900), var(--magenta-600) 60%, var(--magenta-300));
}
.ruta--alt::before {
  background: linear-gradient(90deg, var(--magenta-600), var(--amber-500));
}
.ruta:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.ruta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: var(--space-4);
  border-radius: 18px;
  background: var(--magenta-100);
  color: var(--magenta-700);
}
.ruta--alt .ruta__icon { background: #FDF0E2; color: #8A4A0C; }

.ruta__title { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); }
.ruta p { color: var(--color-muted-fg); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: var(--space-5) 0 var(--space-4);
}
.chip {
  padding: .35rem .75rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink);
}

.ruta__note {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--magenta-800);
  margin-bottom: var(--space-5);
}

.ruta__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-top: auto;
  font-weight: 600;
  color: var(--magenta-700);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  align-self: flex-start;
  transition: border-color var(--t-fast) var(--ease-out), gap var(--t-fast) var(--ease-out);
}
.ruta__link .icon { transition: transform var(--t-base) var(--ease-out); }
.ruta__link:hover { border-bottom-color: var(--magenta-600); }
.ruta__link:hover .icon { transform: translateX(4px); }

@media (min-width: 880px) {
  .rutas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

/* ---------- 11. TESTIMONIOS (sección oscura) ---------- */
.section--dark {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(176, 26, 123, .30) 0%, transparent 60%),
    var(--plum-950);
  color: #F6EDF2;
}
.section--dark .section__title { color: #FFFFFF; }
.section--dark .eyebrow { color: var(--magenta-300); }
.section--dark .eyebrow__rule { background: linear-gradient(90deg, var(--magenta-300), transparent); }
.section--dark p { color: #E3D3DD; }

.testimonios { display: grid; gap: var(--space-5); }

.testimonio {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.75rem, 4vw, 2.25rem);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(233, 163, 207, .22);
  border-radius: var(--radius-lg);
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.testimonio:hover { background: rgba(255, 255, 255, .08); border-color: rgba(233, 163, 207, .4); }

.testimonio::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: .7;
  color: var(--magenta-500);
  margin-bottom: var(--space-3);
}
.testimonio blockquote { margin: 0; }
.testimonio blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  font-style: italic;
  line-height: 1.6;
  color: #FBF4F8;
}
.testimonio figcaption {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(233, 163, 207, .22);
}
.testimonio__name {
  display: block;
  font-weight: 600;
  color: #FFFFFF;
}
.testimonio__role {
  display: block;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--magenta-300);
}

.testimonios__foot {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid rgba(233, 163, 207, .2);
}
.testimonios__foot .btn { justify-self: start; }

@media (min-width: 820px) {
  .testimonios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .testimonios__foot { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); }
  .testimonios__foot .btn { justify-self: end; }
}

/* ---------- 12. ALIADOS ---------- */
.section--aliados { background: var(--paper); }

.aliados {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
.aliado {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: var(--space-4) var(--space-5);
  background: var(--cream);
  border: 1px solid var(--border);
  border-left: 3px solid var(--magenta-300);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  line-height: 1.5;
  transition: border-left-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}
.aliado:hover { border-left-color: var(--magenta-600); background: var(--magenta-100); }
.aliado__icon { margin-top: .15rem; color: var(--magenta-700); }

.aliados__foot {
  display: grid;
  gap: var(--space-4);
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--border);
}
.aliados__claim {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem);
  font-style: italic;
  color: var(--ink);
  margin: 0;
}

@media (min-width: 640px) { .aliados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) {
  .aliados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .aliados__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); }
}

/* ---------- 13. CTA FINAL ---------- */
.cta-final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  /* Gradiente profundo: garantiza 4.5:1 para el texto claro de las tarjetas */
  background: linear-gradient(135deg, var(--plum-950) 0%, var(--magenta-900) 52%, var(--magenta-700) 100%);
  color: #fff;
}
.cta-final::after {
  content: "";
  position: absolute;
  right: -6%; bottom: -30%;
  width: min(60vw, 420px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, transparent 65%);
  pointer-events: none;
}

.cta-final__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
.cta-final__title {
  font-size: clamp(1.625rem, 1.3rem + 1.8vw, 2.5rem);
  color: #fff;
  max-width: 12.00em;
}
.cta-final p { color: rgba(255, 255, 255, .88); }

.contacto {
  display: grid;
  gap: var(--space-4);
  align-content: center;
}
.contacto__item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: var(--space-4);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: var(--radius-md);
}
.contacto__item .icon { margin-top: .2rem; color: var(--magenta-100); }
.contacto__label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--magenta-100);
}
.contacto__value {
  display: block;
  font-size: .9375rem;
  line-height: 1.5;
  color: #fff;
}
.contacto__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  text-decoration: underline;
}
.contacto__link:hover { color: var(--magenta-200); }

@media (min-width: 900px) {
  .cta-final__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
}

/* ---------- 14. FOOTER ---------- */
.footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) var(--space-6);
  background: var(--plum-950);
  color: #D9C8D3;
  font-size: .9375rem;
}
.footer__inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

.footer__logo-plate {
  display: inline-block;
  padding: 1.1rem 1.5rem;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
.footer__logo-plate img { width: auto; height: 84px; }

.footer__tagline {
  margin-top: var(--space-4);
  max-width: 21.45em;
  color: #BFA9B8;
  line-height: 1.6;
}

.footer__nav { display: grid; gap: var(--space-6); }
.footer__col ul { display: grid; gap: .125rem; }

.footer__title {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--magenta-300);
  margin: 0 0 var(--space-4);
}
.footer__col a,
.footer__col span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: .35rem;
  color: #D9C8D3;
  text-decoration: none;
  line-height: 1.5;
}
.footer__col a:hover { color: #fff; text-decoration: underline; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(233, 163, 207, .16);
  font-size: .8125rem;
  color: #A78D9E;
  max-width: none;
}

@media (min-width: 640px) { .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .footer__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr); }
  .footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
  .footer__legal { grid-column: 1 / -1; justify-content: space-between; }
}

/* ---------- 15. PÁGINAS INTERIORES: MIGA Y CABECERA ---------- */
.breadcrumb {
  padding-top: var(--space-5);
  font-size: .8125rem;
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .4rem;
}
.breadcrumb__list li { display: inline-flex; align-items: center; gap: .4rem; }
.breadcrumb__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: .35rem;
  color: var(--color-muted-fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.breadcrumb__list a:hover { color: var(--magenta-700); border-bottom-color: var(--magenta-300); }
.breadcrumb__sep { color: var(--border-strong); width: 1rem; height: 1rem; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  background:
    radial-gradient(110% 70% at 88% -10%, var(--magenta-100) 0%, transparent 62%),
    var(--cream);
  border-bottom: 1px solid var(--border);
}
.page-hero__inner { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.page-hero__title {
  font-size: clamp(1.875rem, 1.35rem + 2.6vw, 3.25rem);
  max-width: 12.00em;
  margin-bottom: var(--space-5);
}
.page-hero__title em { font-style: italic; color: var(--magenta-700); }
.page-hero__lead { max-width: 37.85em; }
.page-hero__lead + .page-hero__lead { margin-top: var(--space-4); }
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Cifra o dato de apoyo junto al título en pantallas anchas */
.page-hero__aside {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--magenta-600);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.page-hero__aside p { font-size: .9375rem; color: var(--color-muted-fg); }
.page-hero__aside .page-hero__aside-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

@media (min-width: 1000px) {
  .page-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: end;
    gap: var(--space-8);
  }
  .page-hero__aside { margin-top: 0; }
}

/* ---------- 16. CUERPO DE PÁGINA + ÍNDICE LATERAL ---------- */
.page-body { padding-block: clamp(3rem, 6vw, 5rem); }

.page-grid { display: grid; gap: clamp(2rem, 5vw, 3rem); }

@media (min-width: 1040px) {
  .page-grid { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .page-grid--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }
}

/* Índice de contenidos: <details> plegable en móvil, columna fija en escritorio */
.toc {
  padding: var(--space-4) var(--space-5);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--magenta-700);
  cursor: pointer;
  list-style: none;
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary .icon { transition: transform var(--t-base) var(--ease-out); }
.toc[open] > summary .icon { transform: rotate(180deg); }

.toc__list {
  display: grid;
  gap: .1rem;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  counter-reset: toc;
}
.toc__list a {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .5rem 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
}
.toc__list a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--magenta-500);
}
.toc__list a:hover { color: var(--magenta-700); }
.toc__list a:hover::before { color: var(--magenta-700); }

@media (min-width: 1040px) {
  .toc {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    background: transparent;
    border: 0;
    border-left: 2px solid var(--border);
    border-radius: 0;
    padding: 0 0 0 var(--space-5);
  }
  .toc__list { border-top: 0; padding-top: 0; }
}

/* ---------- 17. PROSA DE ARTÍCULO ---------- */
/* El texto se limita a ~70 caracteres; tarjetas, figuras y pasos usan toda la columna.
   La medida va en em y no en ch: ch depende del ancho del glifo «0» de la fuente,
   y al intercambiar la de reserva por Inter los bloques se ensanchaban de golpe. */
.prose > * + * { margin-top: var(--space-4); }
.prose > h2, .prose > h3,
.prose > p, .prose > .lista,
.prose > .cita, .prose > .nota, .prose > .faq { max-width: 44.16em; }

.prose h2 {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 var(--space-4);
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.prose h2::before {
  content: "";
  display: block;
  width: 40px; height: 3px;
  margin-bottom: var(--space-4);
  background: linear-gradient(90deg, var(--magenta-600), var(--magenta-300));
  border-radius: 3px;
}
.prose > h2:first-child { margin-top: 0; }

.prose h3 {
  margin: clamp(2rem, 4vw, 2.75rem) 0 var(--space-3);
  font-size: clamp(1.125rem, 1.05rem + .6vw, 1.375rem);
  color: var(--magenta-800);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.prose p { color: var(--color-muted-fg); }
.prose p.destacado {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--magenta-800);
}
.prose a { font-weight: 500; }

/* Listas con marca de mariposa (el mismo rombo del bloque «rostros») */
.lista {
  display: grid;
  gap: var(--space-3);
  max-width: 42.90em;
}
.lista li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--color-muted-fg);
}
.lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 10px; height: 10px;
  border-radius: 999px 2px 999px 2px;
  background: linear-gradient(135deg, var(--magenta-500), var(--plum-800));
}
.lista strong { color: var(--ink); }

/* Cita en el cuerpo del texto */
.cita {
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 4px solid var(--magenta-600);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.cita p {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
}
.cita figcaption {
  margin-top: var(--space-3);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--magenta-700);
}

/* Aviso o nota destacada */
.nota {
  display: flex;
  gap: var(--space-4);
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  padding: var(--space-5);
  background: var(--magenta-100);
  border: 1px solid var(--magenta-200);
  border-radius: var(--radius-md);
}
.nota .icon { flex: none; margin-top: .2rem; color: var(--magenta-700); }
.nota p { color: var(--magenta-900); max-width: none; }
.nota strong { color: var(--magenta-900); }

/* Figura de imagen. Si el archivo aún no existe, main.js oculta la figura
   entera para que no aparezca el icono de imagen rota. */
.figura {
  margin: clamp(2rem, 4vw, 3rem) 0;
  max-width: 100%;
}
.figura__marco {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--magenta-100), var(--cream-deep));
  box-shadow: var(--shadow-md);
}
.figura img { width: 100%; height: auto; }
.figura figcaption {
  margin-top: var(--space-3);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--color-muted-fg);
}

/* ---------- 18. TARJETAS ---------- */
.cards {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (min-width: 720px) { .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--space-4);
  border-radius: 15px;
  background: var(--magenta-100);
  color: var(--magenta-700);
}
.card__title {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  margin-bottom: var(--space-3);
}
.card p { font-size: .9375rem; color: var(--color-muted-fg); }
.card .ruta__link { margin-top: auto; padding-top: var(--space-5); font-size: .9375rem; }

/* ---------- 19. PASOS NUMERADOS (guías) ---------- */
.pasos {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: 0;
  counter-reset: paso;
  list-style: none;
  max-width: 42.90em;
}
.pasos > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.pasos > li::before {
  counter-increment: paso;
  content: counter(paso);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--magenta-700);
  background: var(--magenta-100);
  border-radius: var(--radius-pill);
}
.paso__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.pasos p { font-size: .9375rem; color: var(--color-muted-fg); margin: 0; }

/* ---------- 20. PREGUNTAS FRECUENTES ---------- */
.faq { display: grid; gap: var(--space-3); margin-top: var(--space-5); max-width: 44.16em; }

.faq__item {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--t-base) var(--ease-out);
}
.faq__item[open] { border-color: var(--magenta-300); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--magenta-700); }
.faq__q .icon { flex: none; color: var(--magenta-600); transition: transform var(--t-base) var(--ease-out); }
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }

.faq__a {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
  margin-top: 0;
}
.faq__a p { font-size: .9375rem; color: var(--color-muted-fg); }

/* ---------- 21. ENLACES DEL SILO (siguiente paso) ---------- */
.siguiente {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  border-top: 1px solid var(--border);
}
.siguiente__head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); max-width: 35.33em; }
.siguiente__title { font-size: clamp(1.375rem, 1.2rem + 1vw, 1.875rem); margin-bottom: var(--space-3); }

.enlaces { display: grid; gap: var(--space-3); }
@media (min-width: 720px) { .enlaces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .enlaces--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.enlace {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-4) var(--space-5);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.enlace:hover {
  border-color: var(--magenta-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.enlace__kicker {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--magenta-700);
}
.enlace__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.enlace__title .icon { flex: none; color: var(--magenta-600); transition: transform var(--t-base) var(--ease-out); }
.enlace:hover .enlace__title .icon { transform: translateX(3px); }
.enlace__desc { font-size: .875rem; line-height: 1.5; color: var(--color-muted-fg); margin: 0; }

/* ---------- 22. BLOG ---------- */
.posts { display: grid; gap: var(--space-5); }
@media (min-width: 880px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--magenta-100), var(--cream-deep));
}
.post__media img { width: 100%; height: 100%; object-fit: cover; }
.post__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 3vw, 1.75rem); }
.post__cat {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--magenta-700);
  margin-bottom: var(--space-3);
}
.post__title { font-size: 1.1875rem; margin-bottom: var(--space-3); }
.post__title a { color: var(--ink); text-decoration: none; }
.post__title a:hover { color: var(--magenta-700); }
.post p { font-size: .9375rem; color: var(--color-muted-fg); }
.post .ruta__link { margin-top: auto; padding-top: var(--space-5); font-size: .9375rem; }

.categorias { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 760px) { .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.categoria {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--magenta-300);
  border-radius: var(--radius-md);
  transition: border-left-color var(--t-base) var(--ease-out);
}
.categoria:hover { border-left-color: var(--magenta-600); }
.categoria h3 { font-size: 1.125rem; margin-bottom: var(--space-3); color: var(--magenta-800); }
.categoria p { font-size: .9375rem; color: var(--color-muted-fg); }
.categoria .ruta__link { margin-top: auto; padding-top: var(--space-4); font-size: .875rem; }

/* ---------- 23. MEMORIAL (sección oscura de homenaje) ---------- */
.memorial { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 760px) { .memorial { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.memorial__item {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(233, 163, 207, .22);
  border-radius: var(--radius-lg);
}
.memorial__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--space-3);
}
.cita--dark {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(233, 163, 207, .22);
  border-left-color: var(--magenta-500);
}
.cita--dark p { color: #FBF4F8; }
.cita--dark figcaption { color: var(--magenta-300); }

.section--dark .lista li { color: #E3D3DD; }
.section--dark .lista strong { color: #fff; }
.section--dark .prose p { color: #E3D3DD; }
.section--dark .prose h3 { color: var(--magenta-300); }
.section--dark .prose h2 { color: #fff; }

/* ---------- 24. REVELADO AL SCROLL ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 25. MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero__butterfly { animation: none; }
}

/* ---------- 26. IMPRESIÓN ---------- */
@media print {
  .header, .nav-toggle, .skip-link, .hero__art, .hero__aura { display: none !important; }
  body { background: #fff; color: #000; }
  .js .reveal { opacity: 1; transform: none; }
}