@import url('/assets/fonts/inter.css');

/* ============================================================
   MA VIE SANTÉ — Éditorial Noir et Blanc
   Rewrite completo 2026-04-21. Reemplaza 3472 líneas acumuladas
   por un CSS coherente escrito desde cero.

   Dirección: tipografía protagonista (Fraunces italic + Inter),
   paper warm dominante, navy brand quirúrgico, hairlines en vez
   de cards con shadow+radius. Zero "olor a plantilla WP".
   ============================================================ */

/* ============ 01 · TOKENS ============ */

:root {
  /* Color — paleta real cliente */
  --c-ink:         #141617;
  --c-ink-2:       #212326;
  --c-ink-3:       #32373C;
  --c-ink-muted:   #5A5D63;
  --c-line:        #E8E6E1;
  --c-line-soft:   #F3F1EC;
  --c-paper:       #FAFAF8;
  --c-white:       #FFFFFF;
  --c-brand:       #004AAD;
  --c-brand-dark:  #003787;
  --c-brand-deep:  #001A3D;
  --c-brand-ink:   #000914;
  --c-success:     #2F9E6A;
  --c-error:       #B91C1C;

  /* Accent metálico — champagne/bronze cálido. Uso: iconos premium,
     acentos editoriales, badges de calidad. Contraste con ink profundo. */
  --c-accent-light: #FBF3E5;   /* cream highlight */
  --c-accent:       #D9B775;   /* warm champagne (base) */
  --c-accent-deep:  #A17D4C;   /* bronze shadow */
  --c-accent-ink:   #5E4527;   /* deep bronze (text if necesario) */

  /* Compat legacy — algunos templates usan estos tokens */
  --c-bg:          var(--c-paper);
  --c-bg-soft:     var(--c-line-soft);
  --c-fg:          var(--c-ink);
  --c-fg-muted:    var(--c-ink-muted);

  /* Tipografía */
  --ff-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ff-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala tipográfica */
  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs:      1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-hero: clamp(2.5rem, 6.5vw, 5.5rem);

  /* Spacing scale */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --section-gap: clamp(4rem, 9vw, 7rem);
  --pad:  clamp(1.25rem, 4vw, 2rem);
  --max-w: 1240px;

  /* Radii — minimalistas, edge-sharp */
  --r-sm: 2px;
  --r:    4px;
  --r-lg: 6px;
  --r-xl: 8px;
  --r-pill: 9999px;

  /* Sombras — usadas con moderación */
  --sh-sm: 0 1px 2px rgba(0,26,61,.05);
  --sh:    0 2px 4px rgba(0,26,61,.04), 0 8px 24px rgba(0,26,61,.06);
  --sh-md: 0 2px 4px rgba(0,26,61,.04), 0 12px 24px rgba(0,26,61,.08);
  --sh-lg: 0 2px 4px rgba(0,26,61,.04), 0 24px 48px rgba(0,26,61,.12);
  --sh-nav: 0 1px 0 rgba(0,26,61,.06);

  /* Motion */
  --t-fast:  160ms;
  --t:       320ms;
  --t-slow:  640ms;
  --ease:    cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,.8,.3,1);

  /* Gradients / overlays */
  --overlay-hero: linear-gradient(115deg,
    rgba(0,10,30,.62) 0%,
    rgba(0,26,61,.25) 50%,
    rgba(0,10,30,.55) 100%);
  --overlay-soft: linear-gradient(180deg,
    transparent 60%,
    rgba(0,10,30,.35) 100%);
  --overlay-parallax-left: linear-gradient(to right,
    rgba(0,10,30,.78) 0%,
    rgba(0,26,61,.28) 70%,
    rgba(0,26,61,.15) 100%);
  --overlay-parallax-right: linear-gradient(to left,
    rgba(0,10,30,.78) 0%,
    rgba(0,26,61,.28) 70%,
    rgba(0,26,61,.15) 100%);
  --hero-vignette: radial-gradient(ellipse at center,
    transparent 50%, rgba(0,10,30,.35) 100%);
  --divider-brand: linear-gradient(to right,
    transparent, var(--c-brand), transparent);
}

/* ============ 01.5 · VIEW TRANSITIONS (progressive enhancement)
   Activa transiciones suaves entre paginas en navegadores que soportan
   la View Transitions API (Chrome 111+, Edge 111+, Safari 18.2+, ~2026
   estable en mayoritarios). Otros navegadores ignoran la regla. Cero riesgo.
   ============================================================ */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms;
  }
}

/* ============ 02 · RESET ============ */

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
html { scrollbar-gutter: stable; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
body { line-height: 1.6; min-height: 100vh; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

/* ============ 03 · BASE TYPOGRAPHY ============ */

body {
  background: var(--c-paper);
  color: var(--c-ink-2);
  font-family: var(--ff-body);
  font-size: var(--fs);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "clig", "calt";
}

html {
  scroll-padding-top: 88px;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  color: var(--c-ink-2);
  line-height: 1.15;
  letter-spacing: -.018em;
  font-optical-sizing: auto;
  font-feature-settings: "ss01", "kern", "liga", "onum";
}
h1 {
  font-weight: 400;
  font-size: var(--fs-hero);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: -.025em;
}
h2 { font-weight: 500; font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-weight: 500; font-size: var(--fs-lg); }
h4 { font-weight: 600; font-size: var(--fs); font-family: var(--ff-body); letter-spacing: 0; }

p { margin: 0 0 1em; }
strong { font-weight: 600; color: var(--c-ink-2); }
small { font-size: var(--fs-sm); }

a {
  color: var(--c-brand);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--c-brand-dark); }

::selection { background: var(--c-brand); color: var(--c-white); }

/* ============ 04 · ACCESSIBILITY ============ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-brand);
  color: white;
  font-weight: 500;
  z-index: 9999;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus {
  top: 0;
  color: white;
}

:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* ============ 05 · LAYOUT ============ */

/* REGLAS DE SEGURIDAD — nunca permitir wrapper que limite width.
   main debe ser full-width, sin padding lateral, sin max-width. */
html, body { margin: 0; padding: 0; }
main {
  display: block;
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}
/* Las secciones "de contenido" (no full-bleed) aplican su propio max-width
   interno. Las secciones full-bleed (hero, cta-strip, parallax, feature-grid,
   method-section, locations-bento) ya usan width: 100vw + margin-inline
   negativo. Esta regla NO impone width a las sections — deja que cada una
   controle su ancho, solo garantiza que no hereden constraints. */
main > section { margin-block: 0; }

.page-wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ============ 06 · HEADER ============ */

.topbar {
  background: var(--c-brand-deep);
  color: rgba(255,255,255,.78);
  font-size: .8125rem;
  transition: transform var(--t) var(--ease), max-height var(--t) var(--ease);
}
.topbar-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 9px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
}
.topbar__tagline {
  font-family: var(--ff-body);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .6875rem;
  color: rgba(255,255,255,.55);
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.topbar__right > * {
  padding: 0 var(--sp-4);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.topbar__right > * + *::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,.15);
}
.topbar__item:hover,
.topbar__social:hover { color: var(--c-white); }
.topbar__item--static { cursor: default; }
.topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px !important;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  color: white;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar__badge::before { display: none !important; }
.topbar__badge svg { color: #6DD28A; }

.site-header {
  background: rgba(250,250,248,.94);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid var(--c-line);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--t) var(--ease), padding var(--t) var(--ease);
}
.site-header-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--sp-4) var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
  min-height: 104px; /* aumentado para acomodar el logo grande */
  transition: min-height var(--t) var(--ease), padding var(--t) var(--ease);
}
.site-header--compact .site-header-inner { min-height: 80px; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.site-header--compact { box-shadow: var(--sh-sm); border-bottom-color: transparent; }

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none;
}
.site-logo img {
  height: 96px;  /* aumentado: header logo mas presente */
  width: auto;
  transition: height var(--t-fast) var(--ease);
}
/* El logo del cliente (logo2.png) viene en blanco. En el header sobre paper
   warm, lo invertimos a oscuro con filter; el navegador preserva transparencias.
   En footer queda blanco natural sobre navy sin filtros. */
.site-header .site-logo img { filter: brightness(0); }
.site-header--compact .site-logo img { height: 72px; }
/* Footer: logo blanco aun mas grande sobre navy — firma visual fuerte */
.site-logo--inverted { filter: none; height: 180px !important; }

@media (max-width: 767px) {
  .site-logo img { height: 64px; }
  .site-header--compact .site-logo img { height: 52px; }
  .site-logo--inverted { height: 120px !important; }
}
.site-logo__tagline {
  display: inline-block;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--c-line);
  font-family: var(--ff-body);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--c-ink-muted);
  line-height: 1.3;
}
@media (max-width: 1199px) { .site-logo__tagline { display: none; } }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.site-nav__item { position: relative; }
.site-nav__link,
.site-nav a {
  position: relative;
  color: var(--c-ink-2);
  text-decoration: none;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .02em;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--t-fast) var(--ease);
}
.site-nav__link::after,
.site-nav a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--c-brand);
  transition: width var(--t) var(--ease), left var(--t) var(--ease);
}
.site-nav__link:hover::after,
.site-nav a:hover::after,
.site-nav__item--has-dropdown:hover .site-nav__link::after {
  width: 100%;
  left: 0;
}
.site-nav__link:hover,
.site-nav a:hover { color: var(--c-brand); }

/* Bridge invisible cubre el gap 12px entre trigger y dropdown */
.site-nav__item--has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 24px;
}

.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: min(560px, calc(100vw - 48px));
  max-width: min(640px, calc(100vw - 48px));
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-lg);
  padding: var(--sp-6);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.site-nav__item--has-dropdown:hover .site-nav__dropdown,
.site-nav__item--has-dropdown:focus-within .site-nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.site-nav__dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.site-nav__dropdown-item {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  color: var(--c-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-soft);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.site-nav__dropdown-item:hover {
  background: var(--c-line-soft);
  color: var(--c-brand);
  padding-left: calc(var(--sp-4) + 4px);
}
.site-nav__dropdown-title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs);
  letter-spacing: -.01em;
}
.site-nav__dropdown-footer {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  text-align: right;
  font-size: .85rem;
  font-weight: 500;
}
.site-nav__dropdown-footer a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-brand);
}
.site-nav__dropdown-footer a span { transition: transform var(--t-fast) var(--ease); }
.site-nav__dropdown-footer a:hover span { transform: translateX(4px); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.site-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-brand);
  color: white;
  padding: 11px 22px;
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 0;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.site-cta:hover,
.site-cta:focus-visible {
  background: var(--c-brand-dark);
  color: white;
  transform: translateY(-1px);
}
.site-cta__icon { opacity: .9; flex-shrink: 0; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--c-line);
  color: var(--c-ink-muted);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-switch:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
}
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--c-ink-2);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav drawer móvil */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.nav-drawer[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}
.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,10,30,.6);
  backdrop-filter: blur(4px);
}
.nav-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 86%;
  max-width: 420px;
  height: 100%;
  background: var(--c-paper);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t) var(--ease);
}
.nav-drawer[aria-hidden="false"] .nav-drawer__panel { transform: translateX(0); }
.nav-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-6);
  background: var(--c-brand-deep);
  color: white;
}
.nav-drawer__brand {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: -.01em;
}
.nav-drawer__close {
  color: white;
  padding: var(--sp-2);
}
.nav-drawer__list {
  list-style: none;
  padding: var(--sp-4) 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}
.nav-drawer__list li { border-bottom: 1px solid var(--c-line); }
.nav-drawer__list li:last-child { border-bottom: 0; }
.nav-drawer__link {
  display: block;
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--c-ink-2);
  text-decoration: none;
}
.nav-drawer__link:hover,
.nav-drawer__link:focus-visible { color: var(--c-brand); }
.nav-drawer__link--lang { font-family: var(--ff-body); font-size: .95rem; color: var(--c-ink-muted); text-transform: uppercase; letter-spacing: .1em; }
.nav-drawer__footer {
  padding: var(--sp-6);
  border-top: 1px solid var(--c-line);
  background: var(--c-line-soft);
  font-size: .875rem;
  line-height: 1.55;
}
.nav-drawer__footer p { margin: 0 0 var(--sp-3); }
.nav-drawer__footer strong { color: var(--c-ink-2); }
.nav-drawer__footer a { color: var(--c-brand); text-decoration: none; }
.nav-drawer__cta {
  display: block;
  margin-top: var(--sp-5);
  background: var(--c-brand);
  color: white;
  text-align: center;
  padding: 14px 20px;
  font-weight: 500;
  text-decoration: none;
}
.nav-drawer__cta:hover { background: var(--c-brand-dark); color: white; }

/* ============ 07 · HERO ============ */
/* Reglas del hero en sección 29b (nuevo componente `.hero`). */

/* ============ 08 · SECTIONS ============ */

.home-section {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--section-gap) var(--pad);
}

.section-title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--c-ink-2);
  letter-spacing: -.02em;
  text-align: center;
  margin: 0 0 var(--sp-10);
  text-wrap: balance;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
}

/* Pull quote editorial */
.pull-quote {
  max-width: 800px;
  margin: var(--section-gap) auto;
  padding: 0 var(--pad);
  text-align: center;
}
.pull-quote__text {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  line-height: 1.35;
  color: var(--c-ink-2);
  letter-spacing: -.015em;
  text-wrap: balance;
  font-variation-settings: "opsz" 96;
  margin: 0 0 var(--sp-4);
  position: relative;
}
.pull-quote__text::before {
  content: "\201C";
  font-size: 6rem;
  line-height: 0.2;
  color: var(--c-brand);
  opacity: .18;
  display: block;
  margin-bottom: 0.2em;
}
.pull-quote__attribution {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

/* ============ 09 · FEATURE GRID ============ */

.feature-grid {
  background: var(--c-line-soft);
  padding: var(--section-gap) var(--pad);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  position: relative;
}
.feature-grid::before,
.feature-grid::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--divider-brand);
  opacity: .35;
}
.feature-grid::before { top: 0; }
.feature-grid::after { bottom: 0; }
.feature-grid .section-title {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--sp-12);
}
.feature-grid__items {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  counter-reset: feature-counter;
}
.feature-card {
  padding: var(--sp-10) var(--sp-8);
  text-align: left;
  position: relative;
  transition: background var(--t) var(--ease);
  counter-increment: feature-counter;
}
.feature-card + .feature-card {
  border-left: 1px solid var(--c-line);
}
.feature-card:hover {
  background: rgba(255,255,255,.5);
}
/* Identidad ahora es ICONOGRAFICA (no romanos I/II/III).
   El icono SVG pasado en $features['icon'] se renderiza grande,
   con stroke fino editorial en color accent-deep. Hover sutil. */
.feature-card::before { display: none; }
.feature-card::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--c-accent);
  margin: var(--sp-5) 0;
  opacity: .7;
}
.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 var(--sp-5);
  color: var(--c-accent-deep);
  transition: color var(--t-fast) var(--ease), transform var(--t) var(--ease);
}
.feature-card:hover .feature-card__icon {
  color: var(--c-accent);
  transform: translateY(-2px);
}
.feature-card__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  letter-spacing: -.01em;
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.feature-card__text {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-ink-muted);
  margin: 0;
  max-width: 38ch;
}

/* ============ 10 · METHOD SECTION ============ */

.method-section {
  background: var(--c-paper);
  padding: var(--section-gap) var(--pad);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  position: relative;
}
.method-section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-12);
}
.method-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-3);
}
.method-section__eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--c-accent-deep);
  opacity: .5;
  display: inline-block;
}
.method-section__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  letter-spacing: -.025em;
  color: var(--c-ink-2);
  margin: 0;
}
.method-section__sub {
  margin: var(--sp-5) auto 0;
  color: var(--c-ink-muted);
  font-size: var(--fs);
  line-height: 1.65;
  max-width: 620px;
  text-wrap: balance;
}

.method-steps {
  list-style: none;
  padding: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
/* Hairline timeline conector — único trazo horizontal atravesando los
   3 numerales, anclado a su línea base. Genera cohesión editorial. */
.method-steps::before {
  content: "";
  position: absolute;
  left: var(--sp-8);
  right: var(--sp-8);
  top: calc(var(--sp-8) + 1.6em); /* a la altura media del numeral */
  height: 1px;
  background: var(--c-accent);
  opacity: .35;
  z-index: 0;
}
.method-step {
  padding: var(--sp-8);
  text-align: left;
  position: relative;
  background: var(--c-paper);
  z-index: 1;
}
.method-step:not(:last-child)::after {
  /* Tick vertical sutil tras cada numeral, refuerza timeline */
  content: "";
  position: absolute;
  right: 0; top: var(--sp-6); bottom: var(--sp-6);
  width: 1px;
  background: var(--c-line);
}
.method-step__number {
  display: inline-block;
  position: relative;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.5rem, 6vw, 5rem);
  color: var(--c-accent-deep);
  line-height: 1;
  letter-spacing: -.04em;
  margin: 0 0 var(--sp-6);
  padding-right: var(--sp-4);
  background: var(--c-paper); /* corta el timeline horizontal para que el numeral respire */
}
/* Icon se oculta — el numeral es el protagonista */
.method-step__icon { display: none; }
.method-step__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  letter-spacing: -.01em;
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.method-step__text {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-ink-muted);
  margin: 0;
  max-width: 38ch;
}

@media (max-width: 1023px) {
  .method-steps { grid-template-columns: 1fr; }
  .method-steps::before { display: none; }
  .method-step { border-bottom: 1px solid var(--c-line); }
  .method-step:not(:last-child)::after { display: none; }
  .method-step:last-child { border-bottom: 0; }
}

/* ============ 11 · TRUST SECTION ============ */

/* Trust section — full-bleed paper-soft para romper monotonía blanca */
.trust-section {
  padding: var(--section-gap) var(--pad);
  background: var(--c-line-soft);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  position: relative;
}
.trust-section > .trust-section__header,
.trust-section > .trust-grid-list {
  max-width: var(--max-w);
  margin-inline: auto;
}
.trust-section .trust-item { background: var(--c-white); }
.trust-section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-10);
}
.trust-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-3);
}
.trust-section__eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--c-accent-deep);
  opacity: .5;
  display: inline-block;
}
.trust-section__sub {
  margin: var(--sp-5) auto 0;
  color: var(--c-ink-muted);
  font-size: var(--fs);
  line-height: 1.65;
  max-width: 620px;
}
.trust-grid-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
.trust-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-6);
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
  transition: background var(--t-fast) var(--ease);
  position: relative;
}
.trust-item::before {
  /* Marcador editorial: barra italic bronze en Fraunces — sustituye al
     icon-tile genérico por una firma tipográfica propia. */
  content: "/";
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-accent-deep);
  flex-shrink: 0;
  opacity: .75;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  transform: translateY(1px);
}
.trust-item:hover::before {
  color: var(--c-accent);
  opacity: 1;
  transform: translateY(1px) translateX(2px);
}
.trust-item:hover { background: var(--c-line-soft); }
/* Icon tile eliminado — la identidad del trust-item es la barra bronze + texto */
.trust-item__icon { display: none; }
.trust-item__label {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: .95rem;
  color: var(--c-ink-2);
  letter-spacing: -.005em;
}
@media (max-width: 1023px) { .trust-grid-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .trust-grid-list { grid-template-columns: 1fr; } }

/* ============ 12 · CARDS (service, post, product) ============ */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: var(--sp-8);
  max-width: var(--max-w);
  margin-inline: auto;
}
@media (max-width: 1023px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cards-grid { grid-template-columns: 1fr; } }

.service-card,
.post-card {
  display: block;
  background: var(--c-white);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--c-line);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.service-card:hover,
.post-card:hover {
  border-color: var(--c-brand);
  transform: translateY(-4px);
  box-shadow: var(--sh);
  text-decoration: none;
  color: inherit;
}
.service-card__media,
.post-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-line-soft);
}
.service-card__img,
.post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.service-card:hover .service-card__img,
.post-card:hover .post-card__img { transform: scale(1.04); }
.service-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,10,30,.4), transparent 50%);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.service-card:hover .service-card__media-overlay { opacity: 1; }

.service-card__body,
.post-card__body { padding: var(--sp-6); }
.service-card__category,
.post-card__meta {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: var(--sp-3);
}
.post-card__meta { display: flex; gap: var(--sp-2); align-items: center; color: var(--c-ink-muted); }
.post-card__meta span:not(:last-child) { color: var(--c-ink-muted); }

.service-card__title,
.post-card__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: 1.2;
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-3);
  letter-spacing: -.01em;
}
.service-card__excerpt,
.post-card__excerpt {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.service-card__cta,
.post-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--c-brand);
  font-size: .875rem;
}
.service-card__cta-arrow,
.post-card__cta-arrow { transition: transform var(--t-fast) var(--ease); }
.service-card:hover .service-card__cta-arrow,
.post-card:hover .post-card__cta-arrow { transform: translateX(4px); }

.product-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  transition: border-color var(--t) var(--ease);
  display: flex;
  flex-direction: column;
}
.product-card:hover { border-color: var(--c-brand); }
.product-card__link { text-decoration: none; color: inherit; }
.product-card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-line-soft);
}
.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.product-card:hover .product-card__img { transform: scale(1.04); }
.product-card__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
}
.product-card__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs);
  color: var(--c-ink-2);
  flex: 1;
  line-height: 1.2;
  margin: 0;
}
.product-card__price {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--c-ink-2);
  white-space: nowrap;
}
.product-card__form { padding: 0 var(--sp-5) var(--sp-5); }
.product-card__cta { width: 100%; }

/* ============ 13 · BENTO sedes ============ */

.locations-bento {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(4rem, 7vw, 6rem) var(--pad);
}
.locations-bento__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-8);
}
.locations-bento__eyebrow {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-3);
}
.locations-bento__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
  grid-auto-rows: minmax(420px, auto);
}

/* Tile base */
.bento-tile {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

/* Tile de sede */
.bento-tile--sede { padding: 0; }
.bento-tile--sede:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
}
.sede-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-line-soft);
}
.sede-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.bento-tile--sede:hover .sede-card__media img { transform: scale(1.04); }

.bento-tile__pin {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  background: var(--c-white);
  color: var(--c-brand);
  border-radius: 50%;
  padding: 6px;
  width: 40px;
  height: 40px;
  box-shadow: var(--sh-md);
  z-index: 2;
}

.bento-tile__title {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--c-ink-2);
  margin: var(--sp-5) var(--sp-6) var(--sp-2);
  letter-spacing: -.015em;
  line-height: 1.2;
}
.bento-tile__address {
  font-style: normal;
  color: var(--c-ink-3);
  line-height: 1.6;
  margin: 0 var(--sp-6) var(--sp-3);
}
.bento-tile__phone {
  display: inline-block;
  margin: 0 var(--sp-6) var(--sp-3);
  color: var(--c-brand);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
.bento-tile__phone:hover { border-bottom-color: var(--c-brand); }

.bento-tile__hours {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 var(--sp-6) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}
.bento-tile__hours-label {
  font-weight: 600;
  color: var(--c-ink-2);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .7rem;
  margin-bottom: 4px;
}

.bento-tile__link {
  margin-top: auto;
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--c-line);
  color: var(--c-brand);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.bento-tile__link:hover { background: var(--c-paper); }

/* Tile decorativa SVG (solo atmósfera) */
.bento-tile--decorative {
  padding: 0;
  border: 0;
  background: linear-gradient(135deg, var(--c-brand-deep), var(--c-brand-ink));
  min-height: 380px;
}
.bento-tile--decorative svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tile CTA brand */
.bento-tile--brand {
  background: var(--c-brand-deep);
  color: white;
  padding: var(--sp-7);
  justify-content: center;
  text-align: left;
  border: 0;
}
.bento-tile--brand h2,
.bento-tile--brand h3,
.bento-tile--brand .bento-tile__title,
.bento-tile--brand .bento-tile__cta-title {
  color: white;
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  margin: 0 0 var(--sp-3);
  line-height: 1.2;
  letter-spacing: -.015em;
}
.bento-tile--brand .bento-tile__cta-sub,
.bento-tile--brand p {
  color: rgba(255,255,255,.82);
  margin: 0 0 var(--sp-5);
  line-height: 1.5;
}

@media (max-width: 767px) {
  .locations-bento__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .bento-tile--decorative { display: none; }
  .bento-tile__title { font-size: var(--fs-lg); }
}

/* ============ 13b · TESTIMONIALS ============ */

.testimonials {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(4rem, 7vw, 6rem) var(--pad);
}
.testimonials .section-title {
  text-align: center;
  margin: 0 auto var(--sp-8);
  max-width: 720px;
}
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.testimonial-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: var(--sp-6);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.testimonial-card__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--c-brand);
}
.testimonial-card__text {
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--c-ink-2);
  margin: 0;
  font-style: italic;
  font-weight: 400;
}
.testimonial-card__author {
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}
.testimonial-card__author strong {
  display: block;
  color: var(--c-ink-2);
  font-weight: 600;
}

/* ============ 14 · CTA STRIP ============ */

.cta-strip {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: clamp(4rem, 8vw, 6.5rem) var(--pad);
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0,74,173,.6) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 70%, rgba(0,55,135,.7) 0%, transparent 55%),
    linear-gradient(135deg, var(--c-brand-deep), var(--c-brand-ink));
  color: white;
  text-align: center;
}
.cta-strip__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .4;
  pointer-events: none;
}
.cta-strip__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
.cta-strip__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  margin: 0 0 var(--sp-4);
}
.cta-strip__eyebrow-line {
  display: inline-block;
  width: 32px; height: 1px;
  background: rgba(255,255,255,.5);
}
.cta-strip__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-variation-settings: "opsz" 96;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: white;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
.cta-strip__sub {
  font-weight: 300;
  font-size: var(--fs);
  color: rgba(255,255,255,.8);
  max-width: 520px;
  margin: 0 auto var(--sp-8);
  line-height: 1.55;
}
.cta-strip__actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ 15 · PARALLAX BANDS ============ */

/* Parallax "clásico": la imagen se fija respecto al viewport y el contenido
   se desplaza por encima. Desktop usa background-attachment: fixed.
   En mobile/iOS se cae a scroll normal (fixed da jitter en WebKit mobile). */
.parallax-band {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: clamp(480px, 62vh, 620px);
  display: grid;
  align-items: center;
  color: white;
  isolation: isolate;
  margin-top: 0;
  margin-bottom: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;  /* desktop parallax */
  background-repeat: no-repeat;
  filter: saturate(.95) contrast(1.06);
}
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  /* Mobile/tablet táctil: fixed causa jitter → scroll normal */
  .parallax-band { background-attachment: scroll; }
}
.parallax-band__overlay { position: absolute; inset: 0; z-index: 1; }
.parallax-band--overlay-left  .parallax-band__overlay { background: var(--overlay-parallax-left); }
.parallax-band--overlay-right .parallax-band__overlay { background: var(--overlay-parallax-right); }
.parallax-band__content {
  position: relative; z-index: 2;
  padding: var(--sp-10) var(--pad);
  max-width: 640px;
}
.parallax-band--align-left   .parallax-band__content { margin-left: max(var(--pad), 5vw); }
.parallax-band--align-center .parallax-band__content { margin-inline: auto; text-align: center; }
.parallax-band--align-right  .parallax-band__content { margin-left: auto; margin-right: max(var(--pad), 5vw); text-align: right; }

.parallax-band__quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: white;
  margin: 0 0 var(--sp-6);
  text-shadow: 0 1px 20px rgba(0,0,0,.3);
  text-wrap: balance;
}
.parallax-band__quote::before { content: "\201C"; margin-right: .12em; opacity: .5; }
.parallax-band__quote::after  { content: "\201D"; margin-left: .06em; opacity: .5; }
.parallax-band__sub {
  font-size: var(--fs);
  color: rgba(255,255,255,.82);
  margin: 0 0 var(--sp-8);
  line-height: 1.55;
  max-width: 480px;
}
.parallax-band--align-center .parallax-band__sub { margin-inline: auto; }
.parallax-band--align-right  .parallax-band__sub { margin-left: auto; }

.parallax-band__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.parallax-band__cta span { transition: transform var(--t-fast) var(--ease); }
.parallax-band__cta:hover span { transform: translateX(4px); }

@media (max-width: 767px) {
  .parallax-band--align-left  .parallax-band__content,
  .parallax-band--align-right .parallax-band__content {
    margin-inline: auto;
    padding: var(--sp-8) var(--pad);
    text-align: center;
  }
}

/* ============ 16 · FOOTER ============ */

.footer-divider {
  width: 100%;
  height: 1px;
  background: var(--divider-brand);
}
.site-footer {
  background: var(--c-brand-ink);
  color: rgba(255,255,255,.75);
  font-family: var(--ff-body);
  font-size: .925rem;
  line-height: 1.65;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0,74,173,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(0,74,173,.08) 0%, transparent 50%);
  pointer-events: none;
}
.site-footer-inner {
  position: relative;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(3.5rem, 6vw, 5.5rem) var(--pad);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr 1fr;
  gap: var(--sp-12);
}
.footer-col__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1rem;
  color: white;
  margin: 0 0 var(--sp-5);
  letter-spacing: -.01em;
}
.footer-col--brand img {
  width: auto;
  margin-bottom: var(--sp-5);
  filter: brightness(0) invert(1);
  /* height controlado por .site-logo--inverted (180px desktop / 120px mobile) */
}
.footer-brand-tagline {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs);
  color: white;
  margin: 0 0 var(--sp-3);
}
.footer-brand-desc {
  font-size: .875rem;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  margin: 0;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer-links a,
.footer-sede a,
.footer-col--contact a {
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
  display: inline-block;
}
.footer-links a:hover,
.footer-sede a:hover,
.footer-col--contact a:hover {
  color: white;
}
.footer-sede strong {
  color: white;
  font-weight: 500;
  font-family: var(--ff-display);
  font-size: .95rem;
  display: block;
  margin-bottom: var(--sp-1);
}
.footer-sede address {
  font-style: normal;
  font-size: .85rem;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
}
.footer-sede--spaced { margin-top: var(--sp-5); }
.footer-social { display: flex; gap: var(--sp-3); margin: var(--sp-5) 0; }
.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.78);
  transition: all var(--t-fast) var(--ease);
}
.footer-social__link:hover {
  background: white;
  color: var(--c-brand);
  border-color: white;
  transform: translateY(-2px);
}
.footer-cta {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: 12px 24px;
  border: 1px solid rgba(255,255,255,.4);
  color: white;
  font-weight: 500;
  font-size: .9rem;
  text-decoration: none;
  transition: all var(--t) var(--ease);
}
.footer-cta:hover {
  background: white;
  color: var(--c-brand);
  border-color: white;
}
.footer-legal {
  position: relative;
  background: var(--c-brand-ink);
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-legal-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--sp-5) var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: .75rem;
  color: rgba(255,255,255,.45);
}
.footer-copyright { margin: 0; }
.footer-legal-links { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer-legal-links a { color: rgba(255,255,255,.45); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.footer-legal-links a:hover { color: white; }
.footer-legal-links__btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: rgba(255,255,255,.45);
  transition: color var(--t-fast) var(--ease);
}
.footer-legal-links__btn:hover { color: white; }

@media (max-width: 1023px) { .site-footer-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } }
@media (max-width: 640px) {
  .site-footer-inner { grid-template-columns: 1fr; }
  .footer-legal-inner { flex-direction: column; align-items: flex-start; }
}

/* ============ 17 · BUTTONS ============ */

.btn, .btn-primary, .btn-light, .btn-outline, .btn-ghost-white, .btn-white-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: .925rem;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid transparent;
  transition: all var(--t-fast) var(--ease);
}
.btn, .btn-primary {
  background: var(--c-brand);
  color: white;
}
.btn:hover, .btn-primary:hover,
.btn:focus-visible, .btn-primary:focus-visible {
  background: var(--c-brand-dark);
  color: white;
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--c-brand);
  border-color: var(--c-brand);
}
.btn-outline:hover {
  background: var(--c-brand);
  color: white;
}
.btn-sm {
  padding: 8px 14px;
  font-size: .82rem;
  letter-spacing: .04em;
}
.btn-light {
  background: white;
  color: var(--c-brand);
}
.btn-light:hover {
  background: var(--c-brand);
  color: white;
}
.btn-ghost, .btn-ghost-white, .btn-white-outline {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,.5);
}
.btn-ghost:hover, .btn-ghost-white:hover, .btn-white-outline:hover,
.btn-ghost:focus-visible, .btn-ghost-white:focus-visible {
  background: rgba(255,255,255,.12);
  border-color: white;
  color: white;
}
/* Hotfix: evitar combinaciones blanco-sobre-blanco cuando un btn-light o
   btn-ghost se hover. Forzar color oscuro si el bg acaba siendo white puro. */
.btn-light:hover {
  background: var(--c-brand-dark);
  color: white;
  border-color: var(--c-brand-dark);
}
/* Si un btn acaba con bg claro por error, al menos garantiza texto legible */
.btn[style*="background: white"],
.btn[style*="background: rgb(255"] { color: var(--c-ink-2); }
.btn-accent {
  background: var(--c-brand);
  color: white;
}

/* ============ 18 · FORMS ============ */

.form {
  display: grid;
  gap: var(--sp-5);
}
.form label {
  display: grid;
  gap: var(--sp-2);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.form input,
.form select,
.form textarea {
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--c-line);
  color: var(--c-ink-2);
  font-size: var(--fs);
  font-family: var(--ff-body);
  border-radius: 0;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(0,74,173,.1);
}
.form .honeypot { position: absolute; left: -9999px; opacity: 0; }
.form button[type="submit"] {
  justify-self: start;
  padding: 14px 32px;
  background: var(--c-brand);
  color: white;
  font-weight: 500;
  font-size: var(--fs);
  border: 0;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.form button[type="submit"]:hover {
  background: var(--c-brand-dark);
  transform: translateY(-1px);
}

.alert {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid transparent;
  margin-bottom: var(--sp-4);
}
.alert-success { background: rgba(47,158,106,.08); border-color: var(--c-success); color: var(--c-success); }
.alert-error { background: rgba(185,28,28,.08); border-color: var(--c-error); color: var(--c-error); }

/* ============ 19 · PRODUCT SHOW ============ */

.product-show {
  max-width: var(--max-w);
  margin: var(--sp-10) auto var(--section-gap);
  padding-inline: var(--pad);
}
.product-show__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: var(--section-gap);
}
.product-show__media { position: sticky; top: 100px; }
.product-show__image-wrap {
  background: var(--c-line-soft);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-show__image {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--t-fast) var(--ease);
}

/* Galería: fila de thumbnails debajo de la imagen principal */
.product-show__thumbs {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.product-show__thumb {
  appearance: none;
  background: var(--c-line-soft);
  border: 1px solid var(--c-line);
  padding: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.product-show__thumb:hover { border-color: var(--c-accent-deep); }
.product-show__thumb.is-active {
  border-color: var(--c-accent-deep);
  box-shadow: inset 0 0 0 1px var(--c-accent-deep);
}
.product-show__thumb.is-active::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 6px;
  height: 2px;
  background: var(--c-accent-deep);
}
.product-show__thumb:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.product-show__thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.product-show__info { padding-top: var(--sp-2); }
.product-show__eyebrow {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-3);
}
.product-show__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--c-ink-2);
  letter-spacing: -.025em;
  margin: 0 0 var(--sp-4);
}
.product-show__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
}
.product-show__price {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 2rem;
  color: var(--c-brand);
}
.product-show__tax {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

/* Ship badge — micro-urgencia bajo el precio */
.product-show__ship-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-5);
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--c-accent-ink);
  background: linear-gradient(90deg, rgba(217, 183, 117, .18), rgba(217, 183, 117, .05));
  border-left: 2px solid var(--c-accent-deep);
  border-radius: 0 2px 2px 0;
}
.product-show__ship-badge svg { flex-shrink: 0; color: var(--c-accent-deep); }

.product-show__tagline {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--c-ink-3);
  margin: 0 0 var(--sp-5);
  line-height: 1.5;
}

/* Benefits quick-hits — 4 bullets con check bronze, reducen fricción pre-CTA */
.product-show__benefits {
  list-style: none;
  padding: var(--sp-4) 0;
  margin: 0 0 var(--sp-4);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}
.product-show__benefits li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .925rem;
  color: var(--c-ink-2);
  line-height: 1.35;
}
.product-show__benefits-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--c-accent-deep);
  color: white;
  border-radius: 50%;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
}
.product-show__form { margin: var(--sp-4) 0 var(--sp-8); }
.product-show__form-row {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  flex-wrap: wrap;
}
.product-show__qty-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.product-show__qty-input {
  width: 80px;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  font-size: var(--fs);
  background: white;
}
.product-show__qty-input:focus {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-color: var(--c-brand);
}
.product-show__cta {
  flex: 1;
  min-width: 200px;
}
.product-show__min {
  font-size: .75rem;
  color: var(--c-ink-muted);
  margin: var(--sp-3) 0 0;
}
.product-show__cta-micro {
  font-size: .78rem;
  color: var(--c-ink-muted);
  margin: var(--sp-3) 0 0;
  letter-spacing: .01em;
  line-height: 1.5;
}
.product-show__unavailable {
  font-size: .85rem;
  color: var(--c-ink-muted);
  margin: var(--sp-3) 0 0;
  font-style: italic;
}
.product-show__trust {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
.product-show__trust-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  color: var(--c-ink-3);
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.product-show__trust-item > svg {
  flex-shrink: 0;
  color: var(--c-brand);
  margin-top: 2px;
}
.product-show__trust-item > div { display: flex; flex-direction: column; gap: 2px; }
.product-show__trust-item strong {
  font-weight: 600;
  font-size: .85rem;
  color: var(--c-ink-2);
}
.product-show__trust-item span {
  font-size: .75rem;
  color: var(--c-ink-muted);
  line-height: 1.5;
}
.product-show__description {
  padding-top: var(--section-gap);
  border-top: 1px solid var(--c-line);
  max-width: 800px;
  margin: 0 auto;
}
.product-show__description .section-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: var(--sp-6);
  text-align: left;
}
@media (max-width: 1023px) {
  .product-show__grid { grid-template-columns: 1fr; }
  .product-show__media { position: static; }
  .product-show__image-wrap { aspect-ratio: 4 / 3; max-width: 640px; margin-inline: auto; }
  .product-show__trust { grid-template-columns: 1fr; }
}

/* ============ 20 · CONTACT ============ */

.contact-page {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(4rem, 8vw, 7rem);
}
.contact-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-top: var(--sp-10);
  margin-bottom: var(--section-gap);
}
.contact-form-card {
  background: white;
  border: 1px solid var(--c-line);
  border-top: 2px solid var(--c-brand);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.contact-form-card__header { margin-bottom: var(--sp-6); }
.contact-form-card__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-2);
  letter-spacing: -.015em;
}
.contact-form-card__intro {
  font-size: .925rem;
  color: var(--c-ink-muted);
  line-height: 1.6;
  margin: 0;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.contact-info__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  color: var(--c-ink-2);
  margin: 0;
  letter-spacing: -.015em;
}
.contact-info__card {
  background: var(--c-line-soft);
  border-left: 2px solid var(--c-brand);
  padding: var(--sp-6);
}
.contact-info__name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-2);
  letter-spacing: -.01em;
}
.contact-info__address {
  font-style: normal;
  color: var(--c-ink-3);
  line-height: 1.6;
  margin: 0 0 var(--sp-3);
  font-size: .925rem;
}
.contact-info__item {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  color: var(--c-ink-3);
  margin: 0 0 var(--sp-3);
  font-size: .925rem;
}
.contact-info__item svg { color: var(--c-brand); flex-shrink: 0; }
.contact-info__item a { color: var(--c-brand); text-decoration: none; font-weight: 500; }
.contact-info__item a:hover { text-decoration: underline; }
.contact-info__hours {
  margin-bottom: var(--sp-3);
  font-size: .85rem;
  color: var(--c-ink-3);
  line-height: 1.6;
}
.contact-info__hours strong {
  display: block;
  color: var(--c-ink-2);
  font-weight: 500;
  margin-bottom: 2px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contact-info__hours ul { list-style: none; margin: 0; padding: 0; }
.contact-info__map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-2);
  color: var(--c-brand);
  text-decoration: none;
  font-weight: 500;
  font-size: .875rem;
}
.contact-info__map-link:hover { text-decoration: underline; }
.contact-map-section,
.locations-map-section {
  margin-top: var(--section-gap);
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--pad);
}
.contact-map-section .section-title,
.locations-map-section .section-title { margin-bottom: var(--sp-4); }
.locations-map-section__sub {
  text-align: center;
  color: var(--c-ink-muted);
  max-width: 560px;
  margin: 0 auto var(--sp-8);
  line-height: 1.6;
}
.contact-map-section #map,
.locations-map-section #map {
  width: 100%;
  height: 440px;
  background: var(--c-line-soft);
}
@media (max-width: 1023px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .contact-map-section #map,
  .locations-map-section #map { height: 300px; }
}

/* ============ 21 · LOCATIONS PAGE ============ */

.locations-intro {
  max-width: 720px;
  margin: var(--section-gap) auto var(--sp-12);
  padding: 0 var(--pad);
  text-align: center;
}
.locations-intro .section-title { margin-bottom: var(--sp-4); }
.locations-intro__text {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--c-ink-3);
  text-wrap: balance;
}
.locations-list {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--pad);
  display: grid;
  gap: var(--sp-16);
  margin-bottom: var(--section-gap);
}
.location-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: white;
  border: 1px solid var(--c-line);
}
.location-detail:nth-child(even) .location-detail__media { order: 2; }
.location-detail__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-line-soft);
}
.location-detail__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.location-detail:hover .location-detail__media img { transform: scale(1.03); }
.location-detail__body {
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
}
.location-detail__eyebrow {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin: 0;
}
.location-detail__name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  color: var(--c-ink-2);
  margin: 0;
  letter-spacing: -.02em;
}
.location-detail__address {
  font-style: normal;
  color: var(--c-ink-3);
  line-height: 1.6;
  margin: 0;
}
.location-detail__item {
  margin: 0;
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  color: var(--c-ink-3);
}
.location-detail__item strong {
  color: var(--c-ink-2);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  min-width: 90px;
}
.location-detail__item a { color: var(--c-brand); }
.location-detail__item a:hover { text-decoration: underline; }
.location-detail__hours {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.location-detail__hours strong {
  color: var(--c-ink-2);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  min-width: 90px;
  padding-top: 4px;
}
.location-detail__hours ul {
  margin: 0; padding: 0;
  list-style: none;
  color: var(--c-ink-3);
  line-height: 1.75;
}
.location-detail__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
@media (max-width: 767px) {
  .location-detail { grid-template-columns: 1fr; }
  .location-detail:nth-child(even) .location-detail__media { order: 0; }
  .location-detail__media { aspect-ratio: 16 / 10; }
}

/* ============ 22 · ARTICLE / PROSE ============ */

.article-wrap {
  max-width: 760px;
  margin: var(--sp-10) auto var(--section-gap);
  padding: 0 var(--pad);
}
.article-body {
  font-family: var(--ff-body);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--c-ink-3);
}
.article-body h2, .article-body h3 {
  font-family: var(--ff-display);
  color: var(--c-ink-2);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-4);
  letter-spacing: -.015em;
}
.article-body h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.article-body h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.article-body p { margin: 0 0 var(--sp-5); }
.article-body a {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover { text-decoration-thickness: 2px; }

/* Article-body enrichment — listas, blockquote editorial, tablas */
.article-body ul,
.article-body ol {
  margin: 0 0 var(--sp-6);
  padding-left: var(--sp-6);
}
.article-body ul li,
.article-body ol li { margin-bottom: var(--sp-3); }
.article-body ul li::marker { color: var(--c-accent-deep); }
.article-body blockquote {
  margin: var(--sp-8) 0;
  padding: var(--sp-6) var(--sp-7);
  border-left: 3px solid var(--c-accent-deep);
  background: var(--c-line-soft);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  color: var(--c-ink-2);
  text-wrap: balance;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-7) 0;
  font-size: .95rem;
}
.article-body table th,
.article-body table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.article-body table thead th {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  background: var(--c-line-soft);
  border-bottom: 2px solid var(--c-accent-deep);
}
.article-body table tbody tr:hover { background: rgba(217, 183, 117, .06); }
.article-body em {
  font-style: italic;
  color: var(--c-ink-muted);
}
.article-body strong { color: var(--c-ink-2); }
@media (max-width: 767px) {
  .article-body table { font-size: .85rem; }
  .article-body table th, .article-body table td { padding: var(--sp-2) var(--sp-3); }
  .article-body blockquote { padding: var(--sp-5); margin: var(--sp-6) 0; }
}
.service-price {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-lg);
  color: var(--c-ink-2);
}

/* Service quick facts — barra bajo breadcrumbs (categoría · centros · precio) */
.service-facts {
  padding-top: var(--sp-6);
  padding-bottom: 0;
}
.service-facts__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-8);
  justify-content: flex-start;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg, 8px);
  background: var(--c-paper, #fff);
}
.service-facts__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}
.service-facts__item--price {
  margin-left: auto;
  text-align: right;
}
.service-facts__key {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-ink-4, #8a8a8a);
  font-weight: 500;
}
.service-facts__val {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  color: var(--c-ink-2);
  font-weight: 500;
}
.service-facts__val--price { font-size: 1.35rem; color: var(--c-brand); }
.service-facts__val--link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  color: var(--c-brand);
}
.service-facts__val--link:hover { text-decoration-thickness: 2px; }
@media (max-width: 767px) {
  .service-facts__list { padding: var(--sp-4); gap: var(--sp-4); }
  .service-facts__item--price { margin-left: 0; text-align: left; }
}
.article-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: var(--sp-6) 0;
}

.page-prose {
  max-width: 800px;
  margin: var(--section-gap) auto;
  padding: 0 var(--pad);
  text-align: center;
}
.page-prose__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-3);
}
.page-prose__eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--c-accent-deep);
  opacity: .5;
}
.page-prose__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-5);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.page-prose__text {
  font-size: var(--fs-md);
  line-height: 1.8;
  color: var(--c-ink-3);
  margin: 0;
  text-wrap: balance;
}

.sedes-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
.sedes-grid .sede-card {
  background: white;
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-brand);
  padding: var(--sp-6);
  transition: border-color var(--t) var(--ease);
}
.sedes-grid .sede-card:hover { border-color: var(--c-brand); }
.sedes-grid .sede-card h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-3);
  letter-spacing: -.01em;
}
.sedes-grid .sede-card address {
  font-style: normal;
  color: var(--c-ink-3);
  line-height: 1.6;
  font-size: .925rem;
}
.sedes-grid .sede-card a { color: var(--c-brand); text-decoration: none; }
.sedes-grid .sede-card a:hover { text-decoration: underline; }
@media (max-width: 767px) { .sedes-grid { grid-template-columns: 1fr; } }

/* ============ 23 · FAQS ============ */

.faqs {
  max-width: var(--max-w);
  margin: 0 auto;
}
.faqs__list {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-line);
}
.faq-item {
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-4) 0;
}
.faq-item summary {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--c-ink-2);
  cursor: pointer;
  padding: var(--sp-3) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: -.01em;
}
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--c-brand);
  transition: transform var(--t) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body {
  padding: var(--sp-3) 0 var(--sp-5);
  color: var(--c-ink-3);
  line-height: 1.7;
}

/* ============ 24 · BREADCRUMBS ============ */

.breadcrumbs {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--sp-6) var(--pad) 0;
  font-size: .8rem;
  color: var(--c-ink-muted);
  letter-spacing: .02em;
}
.breadcrumbs a { color: var(--c-brand); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ============ 25 · RELATED ITEMS ============ */

.related-items {
  max-width: var(--max-w);
  margin: var(--section-gap) auto;
  padding: 0 var(--pad);
}
.related-items .section-title {
  margin: 0 0 var(--sp-6);
}
.related-items__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--c-line);
  background: white;
  overflow: hidden;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-brand);
  box-shadow: var(--sh-md);
}
.related-card picture,
.related-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-line-soft);
}
.related-card picture img,
.related-card__media img,
.related-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.related-card:hover picture img,
.related-card:hover .related-card__media img,
.related-card:hover > img { transform: scale(1.03); }
.related-card__body { padding: var(--sp-5); }
.related-card__body h3,
.related-card__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-2);
  letter-spacing: -.01em;
  line-height: 1.3;
}
.related-card__body p,
.related-card__meta {
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
  margin: 0;
}

/* ============ 26 · FLOATING ELEMENTS ============ */

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(37,211,102,.3);
  text-decoration: none;
  transition: transform var(--t) var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); color: white; }

/* Back-to-top — selector por id (coincide con el HTML) + estilo editorial
   hairline sobre paper warm, con icono bronze. Sin ruido visual, cohesivo
   con la paleta champagne/ink. */
#back-to-top {
  position: fixed;
  bottom: 24px;
  right: 96px;
  z-index: 89;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c-paper);
  color: var(--c-accent-deep);
  border: 1px solid var(--c-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.92);
  transition: opacity var(--t) var(--ease),
              transform var(--t) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  box-shadow: 0 4px 14px -6px rgba(94, 69, 39, .18);
}
#back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
#back-to-top:hover {
  color: var(--c-ink);
  border-color: var(--c-accent);
  box-shadow: 0 8px 20px -6px rgba(161, 125, 76, .32);
}
#back-to-top svg { width: 18px; height: 18px; stroke-width: 1.6; }
@media (max-width: 767px) {
  #back-to-top { right: 80px; bottom: 20px; width: 42px; height: 42px; }
}

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background: var(--c-brand);
  color: white;
  padding: var(--sp-4);
  text-align: center;
  transform: translateY(100%);
  transition: transform var(--t) var(--ease);
  display: none;
}
@media (max-width: 767px) {
  .sticky-cta { display: block; }
  .sticky-cta.is-visible { transform: none; }
}
.sticky-cta a { color: white; font-weight: 500; text-decoration: none; }

/* Cookie banner — consentimiento granular RGPD (CNIL) */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
  padding: var(--sp-4) var(--pad);
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.cookie-banner.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__panel {
  background: var(--c-white);
  color: var(--c-ink-2);
  max-width: 720px;
  width: 100%;
  padding: var(--sp-6) var(--sp-7);
  border: 1px solid var(--c-line);
  box-shadow: 0 18px 48px -16px rgba(0, 26, 61, .22);
  font-family: var(--ff-body);
  font-size: .9rem;
  line-height: 1.55;
  position: relative;
}
.cookie-banner__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-3);
  letter-spacing: -.015em;
}
.cookie-banner__text { margin: 0 0 var(--sp-5); color: var(--c-ink-3); }
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.cookie-banner__actions .btn { padding: 10px 20px; font-size: .85rem; }
.cookie-banner__link {
  background: none;
  border: 0;
  padding: 10px 4px;
  color: var(--c-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
}
.cookie-banner__link:hover { text-decoration-thickness: 2px; }
.cookie-banner__more {
  display: inline-block;
  margin-top: var(--sp-4);
  color: var(--c-ink-muted);
  font-size: .8rem;
  text-decoration: none;
}
.cookie-banner__more:hover { color: var(--c-accent-deep); }

/* Detalle por categorías */
.cookie-banner__cat {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--c-line);
}
.cookie-banner__cat:last-of-type { border-bottom: 1px solid var(--c-line); }
.cookie-banner__cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.cookie-banner__cat-name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--c-ink-2);
}
.cookie-banner__cat-state {
  font-family: var(--ff-body);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  font-weight: 500;
}
.cookie-banner__cat-desc {
  margin: 0;
  font-size: .82rem;
  color: var(--c-ink-muted);
  line-height: 1.5;
}

/* Toggle switch */
.cookie-banner__toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.cookie-banner__toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cookie-banner__toggle-track {
  position: absolute;
  inset: 0;
  background: var(--c-line);
  border-radius: 999px;
  transition: background var(--t-fast) var(--ease);
}
.cookie-banner__toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--c-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform var(--t-fast) var(--ease);
}
.cookie-banner__toggle input:checked + .cookie-banner__toggle-track {
  background: var(--c-accent-deep);
}
.cookie-banner__toggle input:checked + .cookie-banner__toggle-track::after {
  transform: translateX(18px);
}
.cookie-banner__toggle input:focus-visible + .cookie-banner__toggle-track {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .cookie-banner { padding: var(--sp-3); }
  .cookie-banner__panel { padding: var(--sp-5); max-height: 80vh; overflow-y: auto; }
  .cookie-banner__actions { flex-direction: column; align-items: stretch; }
  .cookie-banner__actions .btn { width: 100%; justify-content: center; }
  .cookie-banner__link { text-align: center; }
}

/* ============ 27 · SLIDE-IN EDITORIAL GRAIN (atmospheric) ============ */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .022;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
header, main, footer { position: relative; z-index: 2; }

/* ============ 28 · RESPONSIVE OVERRIDES ============ */

@media (max-width: 1023px) {
  .site-nav,
  .site-header__actions .site-cta,
  .site-header__actions .lang-switch { display: none; }
  .nav-toggle { display: flex; }
  .feature-grid__items { grid-template-columns: repeat(2, 1fr); }
  .feature-card:nth-child(3) { border-left: 0; border-top: 1px solid var(--c-line); }
}
@media (max-width: 767px) {
  .topbar { display: none; }
  .site-header__actions { display: none; }
  .feature-grid__items { grid-template-columns: 1fr; }
  .feature-card + .feature-card { border-left: 0; border-top: 1px solid var(--c-line); }

  /* Mobile — ajustes específicos de los módulos editoriales nuevos */

  /* Feature-card: romanos gigantes no caben bien en 375px, reducir */
  .feature-card {
    padding: var(--sp-8) var(--sp-6);
    text-align: center;
  }
  .feature-card::before {
    font-size: clamp(2.5rem, 12vw, 3.5rem);
    margin-bottom: var(--sp-4);
  }
  .feature-card::after { margin-inline: auto; } /* centrar la hairline cuando centramos */
  .feature-card__text { margin-inline: auto; }

  /* Method-steps: los numerales arabic-leading-zero también centrados */
  .method-step { padding: var(--sp-7) var(--sp-6); text-align: center; }
  .method-step__number {
    font-size: clamp(2.75rem, 13vw, 4rem);
    padding-right: 0;
  }
  .method-step__text { margin-inline: auto; }

  /* Trust-grid: 1 columna, el marcador "/" queda a la izquierda del label */
  .trust-item { padding: var(--sp-5); }

  /* Service-facts: price deja de alinearse a la derecha cuando rompe en columna */
  .service-facts__list { padding: var(--sp-4) var(--sp-5); gap: var(--sp-3); }

  /* Product gallery thumbs: 3 thumbs → 3-col, el ancho se acomoda solo */
  .product-show__thumbs { gap: var(--sp-2); margin-top: var(--sp-3); }

  /* Parallax band: quote más respirada, sub más compacto */
  .parallax-band { min-height: clamp(380px, 65vh, 520px); }
  .parallax-band__content { padding: var(--sp-7) var(--pad); }
  .parallax-band__quote { font-size: clamp(1.45rem, 5.5vw, 1.85rem); }
  .parallax-band__sub { font-size: .95rem; }

  /* Hero CTAs: wrap y full-width en móvil para que no se encoja texto */
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { justify-content: center; }
}

@media (max-width: 420px) {
  /* Ultra compact — iPhone SE / Android básico */
  .hero--home-cinematic { min-height: 72vh; }
  .service-facts__list { flex-direction: column; align-items: flex-start; }
  .service-facts__item--price { margin-left: 0; text-align: left; }
}

/* ============ 29 · HERO MARGIN-TOP RESET ============ */

main > :first-child.hero { margin-top: 0; }

/* ============ 29b · HERO SIMPLE (nuevo componente) ============ */

/* .hero es un <section> block normal. Si main es full-width (ya lo es),
   .hero ocupará automáticamente 100% del viewport sin trucos de margin. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: white;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.hero--home-cinematic { min-height: 90vh; }
.hero--page-large     { min-height: 58vh; }
.hero--page-compact   { min-height: 38vh; }

@media (max-width: 767px) {
  .hero--home-cinematic { min-height: 78vh; }
  .hero--page-large     { min-height: 48vh; }
  .hero--page-compact   { min-height: 32vh; }
}

.hero--align-left { text-align: left; }

/* Overlay oscuro para contraste WCAG AA del texto blanco */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg,
    rgba(0,10,30,.62) 0%,
    rgba(0,26,61,.30) 50%,
    rgba(0,10,30,.58) 100%);
  pointer-events: none;
}
/* Variante sin imagen: mesh de color */
.hero--gradient { background: linear-gradient(135deg, var(--c-brand-deep), var(--c-brand-ink)); }
.hero--gradient .hero__overlay { background: transparent; }
.hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 25% 30%, var(--c-brand) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, var(--c-brand-dark) 0%, transparent 55%);
  pointer-events: none;
}

/* Vídeo de fondo full-bleed. Debajo del overlay (z-index:1), por encima
   del fondo del section. Object-fit cover para cubrir como background-size:cover.
   El poster del <video> (atributo poster=) se ve hasta que arranca el play. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  /* Evita que el navegador muestre controles accidentales */
  background: #000;
}
/* Reduced-motion: ocultar vídeo, mostrar solo el poster (fallback background-image
   equivalente a hero sin vídeo). No paramos el <video> directamente porque algunos
   navegadores lo reproducen igual aunque esté display:none; mejor visibility:hidden
   y que el poster encima del fondo quede visible. Usamos el poster como background
   de la section para este caso. */
@media (prefers-reduced-motion: reduce) {
  .hero--video .hero__video { display: none; }
  /* El fallback de imagen lo aplica el style inline del section cuando no hay vídeo;
     cuando SÍ hay vídeo pero preferimos reduced-motion, cargamos el poster como
     background-image JS-less no es posible — en la práctica el poster HTML5 no se
     muestra si el <video> está oculto. Para reduced-motion, recomendamos pasar
     también `image` al componente (ya se hace): se rendea el poster atributo, pero
     también se setea como background-image vía CSS abajo si se añade clase helper. */
}

/* Content centrado con max-width interno (el section es full-bleed,
   el contenedor interior limita el ancho del texto/CTAs) */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  padding: var(--sp-8) clamp(16px, 7vw, 48px);
  margin-inline: auto;
}
.hero--align-left .hero__content { text-align: left; margin-inline: 0 auto; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  margin: 0 0 var(--sp-5);
}
.hero__eyebrow-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,.5);
}
.hero__title {
  color: white;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
  text-shadow: 0 2px 32px rgba(0,0,0,.25);
}
.hero--home-cinematic .hero__title {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: -.032em;
  line-height: 1.02;
}
.hero__sub {
  color: rgba(255,255,255,.9);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto var(--sp-6);
}
.hero--align-left .hero__sub { margin-left: 0; margin-right: 0; }
.hero__ctas {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
}
.hero--align-left .hero__ctas { justify-content: flex-start; }

/* Microcopy bajo los CTAs del hero — reduce fricción ("Sin compromiso · 48h") */
.hero__cta-micro {
  margin: var(--sp-5) 0 0;
  font-family: var(--ff-body);
  font-size: .8rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}
.hero--align-left .hero__cta-micro { text-align: left; }
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 2;
  color: rgba(255,255,255,.7);
  transform: translateX(-50%);
  animation: heroScrollBob 2s ease-in-out infinite;
}
@keyframes heroScrollBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
.hero__scroll:hover { color: white; }

/* ============ 30 · CART ICON (header) ============ */

.cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--c-ink-2);
  border: 1px solid transparent;
  border-radius: 50%;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cart-icon:hover,
.cart-icon:focus-visible {
  background: var(--c-paper);
  border-color: var(--c-line);
  color: var(--c-brand);
}
.cart-icon--has-items { color: var(--c-brand); }
.cart-icon__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--c-brand);
  color: white;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--c-paper);
  pointer-events: none;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============ 31 · SHOP page ============ */

.shop-trust {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--pad);
}
.shop-trust__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-8);
}
.shop-trust__eyebrow {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-3);
}
.shop-trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.shop-trust__item {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: var(--sp-7) var(--sp-6);
  text-align: left;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.shop-trust__item:hover {
  border-color: var(--c-brand);
  transform: translateY(-2px);
}
.shop-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: var(--c-paper);
  color: var(--c-brand);
  border-radius: 50%;
  margin-bottom: var(--sp-4);
}
.shop-trust__title {
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-2);
  letter-spacing: -.01em;
}
.shop-trust__text {
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 767px) {
  .shop-trust__grid { grid-template-columns: 1fr; }
}

.shop-grid-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(3rem, 6vw, 5rem);
}
.shop-grid-section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-8);
}
.shop-grid-section__eyebrow {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-3);
}
.shop-grid-section__sub {
  color: var(--c-ink-3);
  margin: var(--sp-3) 0 0;
  line-height: 1.6;
}

.cards-grid--products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  justify-content: center;
}
@media (min-width: 1024px) {
  /* Si hay pocos productos, centrar y limitar ancho para que no queden 2 tarjetas
     ocupando toda la pantalla con demasiado espacio. */
  .cards-grid--products:has(> :nth-child(1):last-child),
  .cards-grid--products:has(> :nth-child(2):last-child) {
    max-width: 760px;
    margin-inline: auto;
  }
}

.shop-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-8);
  text-align: center;
  background: var(--c-paper);
  border: 1px dashed var(--c-line);
}
.shop-empty__title {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-3);
}
.shop-empty__text {
  color: var(--c-ink-3);
  margin: 0;
}

/* ============ 32 · CART page ============ */

.cart-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(3rem, 6vw, 5rem);
}

.cart-alert {
  padding: var(--sp-4) var(--sp-5);
  border-radius: 4px;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
}
.cart-alert--warn  { background: #FFF8E6; border-left: 3px solid #E6A817; color: #6B4B00; }
.cart-alert--error { background: #FDECEC; border-left: 3px solid #D14343; color: #6B1919; }

.cart-empty {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) var(--sp-6);
  max-width: 560px;
  margin: 0 auto;
}
.cart-empty__icon {
  display: inline-flex;
  color: var(--c-line);
  margin-bottom: var(--sp-5);
}
.cart-empty__title {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-3);
  letter-spacing: -.01em;
}
.cart-empty__text {
  color: var(--c-ink-3);
  line-height: 1.6;
  margin: 0 0 var(--sp-6);
}

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
@media (max-width: 1023px) {
  .cart-layout { grid-template-columns: 1fr; }
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cart-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.cart-item__media {
  width: 120px; height: 120px;
  overflow: hidden;
  background: var(--c-line-soft);
}
.cart-item__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cart-item__body { min-width: 0; }
.cart-item__name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-2);
  letter-spacing: -.01em;
}
.cart-item__unit {
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  margin: 0 0 var(--sp-3);
}
.cart-item__unit-label {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .68rem;
  color: var(--c-ink-muted);
  margin-left: var(--sp-2);
}
.cart-item__qty-form {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.cart-item__qty-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}
.cart-item__qty-input {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--c-line);
  border-radius: 3px;
  font-family: inherit;
  font-size: var(--fs-sm);
}
.cart-item__min {
  font-size: .72rem;
  color: var(--c-ink-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.cart-item__subtotal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}
.cart-item__subtotal-label {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  color: var(--c-ink-muted);
}
.cart-item__subtotal-value {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  color: var(--c-ink-2);
  font-weight: 500;
}
.cart-item__remove-form { margin: 0; }
.cart-item__remove {
  background: transparent;
  border: 1px solid transparent;
  color: var(--c-ink-muted);
  padding: 6px;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cart-item__remove:hover {
  color: #D14343;
  border-color: #F4CACA;
  background: #FDECEC;
}

@media (max-width: 640px) {
  .cart-item {
    grid-template-columns: 80px 1fr;
    grid-template-areas:
      "media body"
      "subtotal subtotal";
    gap: var(--sp-4);
  }
  .cart-item__media { width: 80px; height: 80px; grid-area: media; }
  .cart-item__body { grid-area: body; }
  .cart-item__subtotal {
    grid-area: subtotal;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-line);
  }
}

.cart-summary {
  position: sticky;
  top: calc(88px + var(--sp-4));
  background: var(--c-line-soft);
  padding: var(--sp-6);
}
.cart-summary__title {
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-2);
}
.cart-summary__amount {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400;
  color: var(--c-ink-2);
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-5);
}
.cart-summary__checkout {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.cart-summary__continue {
  display: block;
  text-align: center;
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  text-decoration: none;
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-line);
  transition: color var(--t-fast) var(--ease);
}
.cart-summary__continue:hover { color: var(--c-brand); }

.cart-summary__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.cart-summary__trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .82rem;
  color: var(--c-ink-3);
  line-height: 1.4;
}
.cart-summary__trust li svg { flex-shrink: 0; color: var(--c-brand); }
.cart-summary__trust li a {
  color: var(--c-brand);
  text-decoration: underline;
  margin-left: auto;
  font-weight: 500;
}

/* ============ CHECKOUT PAGE ============ */
.checkout-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(3rem, 6vw, 5rem);
}
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}
@media (max-width: 1023px) {
  .checkout-layout { grid-template-columns: 1fr; }
}
.checkout-section-title {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  font-weight: 400;
  color: var(--c-ink-2);
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-5);
}
.checkout-form {
  max-width: none;
}
.checkout-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.checkout-form__row--zip {
  grid-template-columns: minmax(120px, 1fr) 2fr;
}
@media (max-width: 540px) {
  .checkout-form__row,
  .checkout-form__row--zip { grid-template-columns: 1fr; }
}
.checkout-form__submit {
  justify-self: start;
  margin-top: var(--sp-3);
}
.checkout-shipping-note {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-line-soft, #f2efe8);
  border-left: 3px solid var(--c-brand);
  font-size: .82rem;
  color: var(--c-ink-muted);
  line-height: 1.5;
}

.checkout-summary {
  position: sticky;
  top: calc(88px + var(--sp-4));
  background: var(--c-line-soft);
  padding: var(--sp-6);
}
.checkout-summary__title {
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-4);
}
.checkout-summary__items {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.checkout-summary__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.checkout-summary__item:last-child { border-bottom: 0; padding-bottom: 0; }
.checkout-summary__thumb {
  width: 56px; height: 56px;
  object-fit: cover;
  display: block;
}
.checkout-summary__item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.checkout-summary__item-name {
  color: var(--c-ink-2);
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
}
.checkout-summary__item-qty {
  color: var(--c-ink-muted);
  font-size: .78rem;
}
.checkout-summary__item-price {
  color: var(--c-ink-2);
  font-weight: 500;
  white-space: nowrap;
}
.checkout-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-4) 0 var(--sp-3);
  border-top: 2px solid var(--c-ink-2);
  margin-bottom: var(--sp-4);
}
.checkout-summary__total-label {
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.checkout-summary__total-value {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--c-brand);
  letter-spacing: -.02em;
}
.checkout-summary__back {
  display: block;
  text-align: center;
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
  text-decoration: none;
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  transition: color var(--t-fast) var(--ease);
}
.checkout-summary__back:hover { color: var(--c-brand); }
.checkout-summary__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.checkout-summary__trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .82rem;
  color: var(--c-ink-3);
  line-height: 1.4;
}
.checkout-summary__trust li svg { flex-shrink: 0; color: var(--c-brand); }
.checkout-summary__trust li a {
  color: var(--c-brand);
  text-decoration: underline;
  margin-left: auto;
  font-weight: 500;
}

/* Nota "pre-pedido" cuando Stripe aún no está activo */
.product-show__pre-order-note {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: .8rem;
  font-family: var(--ff-body);
  line-height: 1.5;
  color: var(--c-ink-muted);
  background: var(--c-line-soft);
  border-left: 2px solid var(--c-accent-deep);
}

/* Section full-bleed paper soft — utility para alternar bg entre secciones */
.section-paper-soft {
  background: var(--c-line-soft);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: var(--section-gap) 0;
}
.section-paper-soft > * { max-width: var(--max-w); margin-inline: auto; }

/* ============ SERVICE "CE QUI EST INCLUS" (conversion booster) ============ */

.service-included {
  padding: var(--sp-10) var(--pad);
}
.service-included__inner {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--sp-10) var(--sp-10);
  background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-white) 100%);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent-deep);
  position: relative;
}
.service-included__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-3);
}
.service-included__eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--c-accent-deep);
  opacity: .55;
}
.service-included__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -.02em;
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-6);
  text-wrap: balance;
}
.service-included__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-6);
}
.service-included__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-family: var(--ff-body);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--c-ink-2);
}
.service-included__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--c-accent-deep);
  color: white;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
}
.service-included__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.service-included__micro {
  font-size: .82rem;
  color: var(--c-ink-muted);
  margin: 0;
  letter-spacing: .01em;
}
@media (max-width: 767px) {
  .service-included__inner { padding: var(--sp-7) var(--sp-6); }
  .service-included__list { grid-template-columns: 1fr; }
  .service-included__actions { flex-direction: column; align-items: stretch; }
  .service-included__actions .btn { width: 100%; justify-content: center; }
  .service-included__micro { text-align: center; }
}

/* ============ STATS STRIP (prueba social home) ============ */

.stats-strip {
  background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-white) 100%);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-10) var(--pad);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.stats-strip__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  text-align: center;
}
.stats-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  position: relative;
}
.stats-strip__item::after {
  content: "";
  position: absolute;
  right: calc(var(--sp-8) * -.5);
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--c-line);
}
.stats-strip__item:last-child::after { display: none; }
.stats-strip__num {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-accent-deep);
}
.stats-strip__lbl {
  font-family: var(--ff-body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  max-width: 180px;
  line-height: 1.35;
}
@media (max-width: 1023px) {
  .stats-strip__inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-6); }
  .stats-strip__item:nth-child(2)::after { display: none; }
}
@media (max-width: 640px) {
  .stats-strip__inner { grid-template-columns: 1fr; }
  .stats-strip__item::after { display: none; }
  .stats-strip { padding: var(--sp-8) var(--pad); }
}

/* ============ TRAINING PAGE ============ */

.training-modules__header { text-align: center; max-width: 640px; margin: 0 auto var(--sp-10); }
.training-modules__sub {
  color: var(--c-ink-muted);
  font-size: var(--fs);
  line-height: 1.65;
  margin: var(--sp-4) auto 0;
  max-width: 580px;
  text-wrap: balance;
}
.training-modules__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
.training-module {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-7);
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
  transition: background var(--t-fast) var(--ease);
}
.training-module:hover { background: rgba(217, 183, 117, .05); }
.training-module__number {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--c-accent-deep);
  letter-spacing: -.02em;
}
.training-module__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--c-ink-2);
  margin: 0;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.training-module__text {
  font-family: var(--ff-body);
  font-size: .9rem;
  line-height: 1.65;
  color: var(--c-ink-muted);
  margin: 0;
}
@media (max-width: 1023px) { .training-modules__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .training-modules__list { grid-template-columns: 1fr; } }

/* Quien se beneficia — lista minimalista con marker */
.training-who {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-8);
}
.training-who li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-ink-2);
}
.training-who li::before {
  content: "/";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--c-accent-deep);
  opacity: .75;
}
@media (max-width: 640px) { .training-who { grid-template-columns: 1fr; } }

/* ============ LEGAL PAGES (mentions / CGV / privacy / cookies) ============ */

.legal-page {
  max-width: 760px;
  margin: var(--sp-10) auto var(--section-gap);
  padding: 0 var(--pad);
}
.legal-page__header {
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-line);
}
.legal-page__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-4);
}
.legal-page__eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--c-accent-deep);
  opacity: .55;
}
.legal-page__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -.02em;
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.legal-page__updated {
  font-family: var(--ff-body);
  font-size: .82rem;
  color: var(--c-ink-muted);
  margin: 0;
}
.legal-page__body {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-ink-3);
}
.legal-page__lede {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-10);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--c-accent-deep);
}
.legal-page__body h2 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  letter-spacing: -.01em;
  color: var(--c-ink-2);
  margin: var(--sp-10) 0 var(--sp-4);
  scroll-margin-top: 100px;
}
.legal-page__body h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--c-ink-2);
  margin: var(--sp-8) 0 var(--sp-3);
}
.legal-page__body p { margin: 0 0 var(--sp-5); }
.legal-page__body ul {
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-6);
}
.legal-page__body ul li { margin-bottom: var(--sp-2); }
.legal-page__body a {
  color: var(--c-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-page__body a:hover { text-decoration-thickness: 2px; color: var(--c-ink-2); }
.legal-page__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: .88em;
  background: var(--c-line-soft);
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--c-ink-2);
}
.legal-page__body em {
  background: rgba(217, 183, 117, .15);
  font-style: normal;
  padding: 0 4px;
  border-radius: 2px;
  color: var(--c-accent-ink);
}
.legal-page__table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-5) 0 var(--sp-8);
  font-size: .9rem;
}
.legal-page__table th,
.legal-page__table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.legal-page__table thead th {
  font-family: var(--ff-body);
  font-weight: 600;
  color: var(--c-ink-2);
  background: var(--c-line-soft);
  border-bottom: 2px solid var(--c-accent-deep);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.legal-page__table tbody tr:hover { background: rgba(217, 183, 117, .06); }
@media (max-width: 767px) {
  .legal-page { margin-top: var(--sp-6); }
  .legal-page__header { margin-bottom: var(--sp-8); }
  .legal-page__table { font-size: .82rem; }
  .legal-page__table th, .legal-page__table td { padding: var(--sp-2) var(--sp-3); }
}

/* ============ 33 · ERROR PAGES (404 / 500) ============ */

.error-page {
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16) var(--pad);
  background: var(--c-paper);
  position: relative;
  overflow: hidden;
}
.error-page::before {
  /* Halo bronze muy sutil detrás del numeral — rompe el vacío */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(217, 183, 117, .10) 0%, transparent 55%);
  pointer-events: none;
}
.error-page__inner {
  position: relative;
  max-width: 640px;
  text-align: center;
}
.error-page__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-6);
}
.error-page__eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--c-accent-deep);
  opacity: .55;
}
.error-page__numeral {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(6rem, 18vw, 11rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-6);
  background: linear-gradient(135deg, var(--c-accent-deep) 0%, var(--c-accent) 55%, var(--c-accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.error-page__heading {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  letter-spacing: -.02em;
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}
.error-page__sub {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-10);
  max-width: 520px;
  margin-inline: auto;
}
.error-page__actions {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.error-page__link {
  color: var(--c-ink-2);
  text-decoration: none;
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .01em;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.error-page__link:hover {
  color: var(--c-accent-deep);
  border-bottom-color: var(--c-accent-deep);
}
@media (max-width: 767px) {
  .error-page { min-height: calc(100vh - 72px); padding: var(--sp-10) var(--pad); }
  .error-page__actions { flex-direction: column; width: 100%; max-width: 340px; margin-inline: auto; }
  .error-page__actions .btn { width: 100%; justify-content: center; }
}

/* ============ 34 · SCROLL PROGRESS BAR ============ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 100;
  pointer-events: none;
  background: transparent;
}
.scroll-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--c-accent-deep) 0%, var(--c-accent) 100%);
  transition: width 80ms linear;
  transform-origin: left;
  box-shadow: 0 0 8px rgba(161, 125, 76, .35);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress__fill { transition: none; }
}

/* ============ 35 · STICKY SERVICE CTA (mobile) ============ */

.service-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: var(--c-white);
  border-top: 1px solid var(--c-line);
  padding: var(--sp-3) var(--sp-4);
  display: none; /* visibilidad controlada por @media + .is-visible */
  align-items: center;
  gap: var(--sp-3);
  box-shadow: 0 -8px 24px -10px rgba(0, 26, 61, .18);
  transform: translateY(100%);
  transition: transform var(--t) var(--ease);
}
.service-sticky-cta.is-visible { transform: translateY(0); }
.service-sticky-cta__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.service-sticky-cta__name {
  font-family: var(--ff-body);
  font-size: .78rem;
  color: var(--c-ink-muted);
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.service-sticky-cta__price {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--c-ink-2);
}
.service-sticky-cta .btn {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-5);
  font-size: .875rem;
}
@media (max-width: 767px) {
  .service-sticky-cta { display: flex; }
  /* compensa la barra sticky con padding-bottom en la última sección para que
     no tape contenido */
  body.has-service-sticky-cta main { padding-bottom: 80px; }
}

/* ============================================================
   31 · CONVERSION-POLISH (Sesión XXL · 2026-04-22)
   Microinteracciones, variantes de scroll-reveal, divider firma,
   refuerzo overlay hero, count-up preparation, cards hover refine.
   Todas las reglas son aditivas — no tocan estilos previos.
   ============================================================ */

/* — 31.1 · CTA flecha animada — opt-in con .btn--arrow.
   Usa pseudo-elemento ::after con chevron unicode "→" que se desliza
   en hover. Mantiene compat con .btn existentes (no afecta sin la clase). */
.btn--arrow::after {
  content: "→";
  display: inline-block;
  margin-left: 2px;
  font-weight: 400;
  transform: translateX(0);
  transition: transform var(--t-fast) var(--ease-out);
  will-change: transform;
}
.btn--arrow:hover::after,
.btn--arrow:focus-visible::after {
  transform: translateX(5px);
}
@media (prefers-reduced-motion: reduce) {
  .btn--arrow::after { transition: none; }
  .btn--arrow:hover::after { transform: none; }
}

/* — 31.2 · Hover sutil en CTAs primarios: glow inset al pulsar foco.
   No reemplaza el translateY existente; solo añade outline visual. */
.btn-primary:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* — 31.3 · Underline animado para enlaces inline de prosa
   Uso: <a class="link-underline" href="...">texto</a>
   Subrayado que crece desde la izquierda en hover. */
.link-underline {
  position: relative;
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t) var(--ease-out);
  padding-bottom: 2px;
}
.link-underline:hover,
.link-underline:focus-visible {
  background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
  .link-underline { transition: none; }
}

/* — 31.4 · Variantes de scroll-reveal
   .reveal--fade  → solo opacidad (sin desplazamiento), para imágenes hero
   .reveal--scale → escala desde 0.96 hasta 1, para tarjetas hero
   .reveal--right → entra desde la derecha (band derecho)
   .reveal--left  → entra desde la izquierda
   data-reveal-delay="N" → stagger por delay incremental (ms vía custom prop) */
.reveal--fade {
  transform: none;
}
.reveal--scale {
  transform: scale(.96);
}
.reveal--scale.is-visible {
  transform: scale(1);
}
.reveal--right {
  transform: translateX(40px);
}
.reveal--left {
  transform: translateX(-40px);
}
.reveal--right.is-visible,
.reveal--left.is-visible {
  transform: none;
}
.reveal[style*="--reveal-delay"] {
  transition-delay: var(--reveal-delay);
}
@media (prefers-reduced-motion: reduce) {
  .reveal--scale,
  .reveal--right,
  .reveal--left { transform: none; }
}

/* — 31.5 · Divider firma editorial (motivo serif sutil entre secciones)
   Uso: <div class="divider-serif" aria-hidden="true"></div>
   Línea fina + glifo Fraunces italic centrado. Identidad de marca. */
.divider-serif {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  max-width: 360px;
  /* margin 0 — el divider se inserta en el gap natural entre secciones
     sin añadir espacio extra. Si necesita aire, se hace con --sp-* pequeño. */
  margin: 0 auto;
  padding: 0 var(--pad);
  color: var(--c-line);
}
.divider-serif::before,
.divider-serif::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-line) 50%, transparent);
}
.divider-serif__glyph {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--c-accent-deep);
  line-height: 1;
  letter-spacing: -.02em;
  font-feature-settings: "ss01", "kern";
}

/* — 31.6 · Refuerzo overlay hero (vignette adicional)
   Capa extra ::after en .hero__overlay que añade un halo radial
   alrededor del contenido. Garantiza contraste de texto en
   cualquier frame del vídeo (frames claros/saturados). */
.hero__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,10,30,.28) 100%);
  pointer-events: none;
}

/* — 31.7 · Stats-strip refinement
   Número con tabular-nums (alineación) + transición sutil al revelar
   + acento champagne en el dígito al hover de cada item. */
.stats-strip__num {
  font-variant-numeric: tabular-nums lining-nums;
  transition: color var(--t) var(--ease-out);
}
.stats-strip__item:hover .stats-strip__num {
  color: var(--c-accent-deep);
}
.stats-strip__item {
  transition: transform var(--t) var(--ease-out);
}
.stats-strip__item:hover {
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .stats-strip__item,
  .stats-strip__num { transition: none; }
  .stats-strip__item:hover { transform: none; }
}

/* — 31.8 · Cards hover refine — eleva cards de servicios/posts/products
   con sombra editorial sutil + leve scale. Solo si la card existe
   sin estilos hover previos (no rompe los que ya los tienen). */
.cards-grid > .service-card,
.cards-grid > .post-card,
.cards-grid > .product-card {
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.cards-grid > .service-card:hover,
.cards-grid > .post-card:hover,
.cards-grid > .product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
@media (prefers-reduced-motion: reduce) {
  .cards-grid > .service-card,
  .cards-grid > .post-card,
  .cards-grid > .product-card { transition: none; }
  .cards-grid > .service-card:hover,
  .cards-grid > .post-card:hover,
  .cards-grid > .product-card:hover { transform: none; }
}

/* — 31.9 · Eyebrow Fraunces italic (utility)
   Pequeño rótulo serif italic para introducir secciones — refuerza
   la identidad editorial. Uso: <p class="eyebrow-serif">…</p> */
.eyebrow-serif {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--c-accent-deep);
  letter-spacing: -.005em;
  margin: 0 0 var(--sp-3);
  font-variation-settings: "opsz" 36, "SOFT" 100;
}

/* ============================================================
   32 · EDITORIAL SCROLLYTELLING (Sesion XXL · 2026-04-23)
   Variante cinematica del show de servicio: hero full-screen
   con video, intro editorial magazine, split sticky "como
   funciona", cita doctora pantalla completa, timeline visita.
   Activado por slug piloto desde ServiceController.
   ============================================================ */

/* — 32.1 · Hero cinematico full-screen (override del hero estandar) */
.editorial-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: white;
  isolation: isolate;
}
.editorial-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  background: #000;
}
@media (prefers-reduced-motion: reduce) {
  .editorial-hero--video .editorial-hero__video { display: none; }
}
.editorial-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(115deg, rgba(0,10,30,.72) 0%, rgba(0,26,61,.32) 50%, rgba(0,10,30,.62) 100%),
    radial-gradient(ellipse at center, transparent 35%, rgba(0,10,30,.3) 100%);
  pointer-events: none;
}
.editorial-hero__content {
  position: relative;
  z-index: 2;
  max-width: 980px;
  width: 100%;
  padding: var(--sp-12) clamp(20px, 7vw, 80px);
  margin: 0 auto;
}
.editorial-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .75rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  margin: 0 0 var(--sp-6);
}
.editorial-hero__eyebrow-line {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: rgba(255,255,255,.6);
}
.editorial-hero__title {
  color: white;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 7.5rem);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: -.04em;
  line-height: .98;
  margin: 0 0 var(--sp-8);
  text-shadow: 0 4px 48px rgba(0,0,0,.32);
  text-wrap: balance;
}
.editorial-hero__sub {
  color: rgba(255,255,255,.92);
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
  max-width: 640px;
  margin: 0;
  text-shadow: 0 1px 16px rgba(0,0,0,.25);
}
.editorial-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 32px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transform: translateX(-50%);
  animation: editorialBob 2.4s ease-in-out infinite;
}
.editorial-hero__scroll-label {
  font-family: var(--ff-body);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .68rem;
  font-weight: 500;
}
.editorial-hero__scroll-arrow {
  font-size: 1.2rem;
  line-height: 1;
}
.editorial-hero__scroll:hover { color: white; }
@keyframes editorialBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-hero__scroll { animation: none; }
}

/* — 32.2 · Como funciona (split sticky) — paddings apretados */
.editorial-how {
  background: var(--c-line-soft);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.editorial-how__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.editorial-how__sticky {
  position: sticky;
  top: 120px;
  align-self: start;
}
.editorial-how__media {
  width: 100%;
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  border-radius: var(--r);
  box-shadow: var(--sh-md);
}
.editorial-how__steps {
  display: grid;
  gap: var(--sp-12);
}
.editorial-how__eyebrow {
  font-family: var(--ff-body);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .75rem;
  font-weight: 500;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-3);
}
.editorial-how__step {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
}
.editorial-how__step-num {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--c-accent-deep);
  letter-spacing: 0;
}
.editorial-how__step-title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.2;
  color: var(--c-ink-2);
  margin: 0;
}
.editorial-how__step-text {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--c-ink-3);
  margin: 0;
  max-width: 480px;
}
@media (max-width: 880px) {
  .editorial-how__inner {
    grid-template-columns: 1fr;
  }
  .editorial-how__sticky {
    position: static;
  }
  .editorial-how__media {
    aspect-ratio: 16/10;
  }
}

/* — 32.3 · Marquee palabras clave (rompe patron cromatico)
   Banner dark con palabras en Fraunces italic XL desplazandose horizontal sin parar.
   Triplicamos las palabras en HTML para que el loop no tenga "huecos" al saltar. */
.editorial-marquee {
  background: var(--c-brand-ink);
  color: var(--c-accent-light);
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid rgba(217, 183, 117, .18);
  border-bottom: 1px solid rgba(217, 183, 117, .18);
}
.editorial-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  white-space: nowrap;
  animation: editorialMarquee 38s linear infinite;
  width: max-content;
}
.editorial-marquee__word {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -.025em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--c-accent-light);
}
.editorial-marquee__sep {
  color: var(--c-accent);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  opacity: .55;
  font-style: normal;
}
@keyframes editorialMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-marquee__track { animation: none; }
}

/* — 32.35 · Nuestro compromiso (sandwich claro entre marquee y cita)
   Tres principios en grid horizontal. Fondo paper claro (rompe sucesion oscuros).
   Tipografia editorial pero sin huecos exagerados. */
.editorial-engagement {
  background: var(--c-paper);
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--pad);
}
.editorial-engagement__inner {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
.editorial-engagement__eyebrow {
  font-family: var(--ff-body);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .72rem;
  font-weight: 500;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-3);
}
.editorial-engagement__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  color: var(--c-ink-2);
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 96, "SOFT" 80;
  text-wrap: balance;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.editorial-engagement__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  text-align: left;
}
.editorial-engagement__item {
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--c-line);
}
.editorial-engagement__t {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-2);
}
.editorial-engagement__x {
  font-family: var(--ff-body);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--c-ink-muted);
  margin: 0;
}
@media (max-width: 720px) {
  .editorial-engagement__list {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* — 32.4 · Cita de la doctora (pull quote XXL pantalla completa) — paddings apretados */
.editorial-quote {
  background: var(--c-brand-deep);
  color: white;
  padding: clamp(4rem, 9vw, 7rem) var(--pad);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.editorial-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(217, 183, 117, .14) 0%, transparent 55%);
  pointer-events: none;
}
.editorial-quote__inner {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}
.editorial-quote__text {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 3.6rem);
  line-height: 1.2;
  color: white;
  letter-spacing: -.025em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  text-wrap: balance;
  margin: 0 0 var(--sp-8);
  position: relative;
}
.editorial-quote__text::before {
  content: "“";
  position: absolute;
  top: -.4em;
  left: -.15em;
  font-size: 1.4em;
  color: var(--c-accent);
  opacity: .5;
  line-height: 1;
  font-style: normal;
}
.editorial-quote__sig {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--c-accent);
  margin: 0;
}

/* ============================================================
   33 · BLOG-EDITORIAL & FOOTER POLISH (Sesion XXL · 2026-04-23)
   - Post TOC flotante + tiempo de lectura
   - Grid 2-col del article-wrap con TOC sticky
   - Footer brand mark (mini-divider editorial)
   - eyebrow-serif compatible con page-prose__eyebrow del about
   ============================================================ */

/* — 33.1 · Post meta (tiempo de lectura + fecha bajo breadcrumbs) */
.post-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-4) var(--pad) 0;
  font-family: var(--ff-body);
  font-size: .82rem;
  color: var(--c-ink-muted);
  letter-spacing: .04em;
}
.post-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.post-meta__sep { color: var(--c-line); }

/* — 33.2 · Article wrap con TOC sticky (grid 2-col en desktop)
   Override: solo cuando lleva la clase modifier --with-toc.
   El article-wrap base no se toca para no romper otros usos. */
.article-wrap--with-toc {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-gap) var(--pad);
}
.article-wrap--with-toc .article-body {
  max-width: 720px;
}
.post-toc {
  position: sticky;
  top: 120px;
  align-self: start;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--c-line);
}
.post-toc__title {
  font-family: var(--ff-body);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--c-accent-deep);
  font-weight: 500;
  margin: 0 0 var(--sp-4);
}
.post-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}
.post-toc__item--lvl3 {
  padding-left: var(--sp-4);
}
.post-toc__link {
  display: block;
  font-family: var(--ff-body);
  font-size: .9rem;
  line-height: 1.4;
  color: var(--c-ink-muted);
  text-decoration: none;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-left: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.post-toc__link:hover { color: var(--c-ink-2); }
.post-toc__link.is-active {
  color: var(--c-ink-2);
  border-left-color: var(--c-accent-deep);
  font-weight: 500;
}
@media (max-width: 880px) {
  .article-wrap--with-toc {
    grid-template-columns: 1fr;
  }
  .post-toc {
    position: static;
    border-top: 0;
    border-bottom: 1px solid var(--c-line);
    padding: 0 0 var(--sp-5);
    margin-bottom: var(--sp-6);
  }
  .post-toc__list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-1) var(--sp-4);
  }
  .post-toc__item--lvl3 { padding-left: var(--sp-3); }
}

/* — 33.3 · Footer brand mark (mini-divider editorial bajo descripcion) */
.footer-brand-mark {
  display: block;
  margin: var(--sp-5) 0 0;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--c-accent);
  opacity: .7;
  line-height: 1;
  letter-spacing: -.02em;
}

/* — 33.4 · eyebrow-serif puede coexistir con page-prose__eyebrow
   (about usa ambas clases en un mismo elemento). Override controlado. */
.page-prose__eyebrow.eyebrow-serif {
  text-transform: none;
  letter-spacing: -.005em;
  font-size: 1.05rem;
  color: var(--c-accent-deep);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 100;
}

/* — 33.5 · Services index agrupado por categoria
   El listing de servicios se renderiza ahora en grupos (visage / corps / otros).
   Cada grupo lleva su propio header editorial. Mismo estilo que el resto del sitio. */
.services-group {
  padding-top: var(--sp-10);
}
.services-group + .services-group {
  padding-top: var(--sp-12);
}
.services-group__head {
  text-align: left;
  margin: 0 0 var(--sp-8);
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--pad);
}
.services-group__eyebrow {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--c-accent-deep);
  letter-spacing: -.005em;
  margin: 0 0 var(--sp-2);
  font-variation-settings: "opsz" 36, "SOFT" 100;
}
.services-group__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  color: var(--c-ink-2);
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

/* — 33.55 · Article figure (imagen intercalada en posts del blog)
   Markdown ![alt](url) en linea propia -> <figure class="article-figure"> con <figcaption>.
   Imagen inline dentro de parrafo -> <img class="article-figure--inline"> sin caption. */
.article-figure {
  margin: var(--sp-10) 0;
  padding: 0;
}
.article-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.article-figure figcaption {
  margin-top: var(--sp-3);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: .9rem;
  color: var(--c-ink-muted);
  text-align: center;
  letter-spacing: .005em;
}
.article-figure--inline {
  display: inline-block;
  max-width: 240px;
  height: auto;
  margin: 0 var(--sp-3);
  vertical-align: middle;
  border-radius: var(--r);
}

/* — 33.6 · Form checkbox (privacy consent en contact-form) */
.form-checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: var(--sp-3);
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-size: .9rem !important;
  color: var(--c-ink-3) !important;
  line-height: 1.5;
}
.form-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--c-brand);
  cursor: pointer;
}
.form-checkbox span { flex: 1; }
.form-checkbox a {
  color: var(--c-brand);
  font-weight: 500;
}

/* ============================================================
   34 · BLOG ENGAGEMENT (sesion XXL · 2026-04-23)
   - post-related-service: bloque inline arriba del articulo con
     el tratamiento principal asociado al post (cuando aplica)
   - share-buttons: barra de compartir tras el cuerpo del articulo
   - post-floating-cta: barra sticky inferior tras 35% scroll
   - whatsapp-float: pulso sutil para llamar atencion sin marear
   ============================================================ */

/* — 34.1 · Tratamiento relacionado inline (arriba del article) */
.post-related-service {
  max-width: var(--max-w);
  margin: var(--sp-8) auto;
  padding: 0 var(--pad);
}
.post-related-service__inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-6);
  align-items: stretch;
  text-decoration: none;
  background: var(--c-line-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.post-related-service__inner:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.post-related-service__media {
  background-size: cover;
  background-position: center;
  min-height: 140px;
}
.post-related-service__body {
  padding: var(--sp-5) var(--sp-6) var(--sp-5) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.post-related-service__eyebrow {
  font-family: var(--ff-body);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .68rem;
  font-weight: 500;
  color: var(--c-accent-deep);
  margin: 0 0 var(--sp-2);
}
.post-related-service__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-3);
  letter-spacing: -.015em;
}
.post-related-service__cta {
  font-family: var(--ff-body);
  font-size: .9rem;
  font-weight: 500;
  color: var(--c-brand);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: gap var(--t-fast) var(--ease);
}
.post-related-service__inner:hover .post-related-service__cta { gap: var(--sp-3); }
@media (max-width: 600px) {
  .post-related-service__inner {
    grid-template-columns: 1fr;
  }
  .post-related-service__media { min-height: 160px; }
  .post-related-service__body { padding: var(--sp-5) var(--sp-5); }
}

/* — 34.2 · Share buttons (al final del articulo) */
.post-share {
  max-width: 720px;
  margin: var(--section-gap) auto var(--sp-12);
  padding: var(--sp-6) var(--pad);
  border-top: 1px solid var(--c-line);
  text-align: center;
}
.post-share__header {
  font-family: var(--ff-body);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .7rem;
  font-weight: 500;
  color: var(--c-ink-muted);
  margin: var(--sp-4) 0 var(--sp-5);
}
.post-share__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}
.post-share__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: white;
  border: 1px solid var(--c-line);
  color: var(--c-ink-3);
  font-family: var(--ff-body);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.post-share__btn:hover,
.post-share__btn:focus-visible {
  background: var(--c-ink-2);
  color: white;
  border-color: var(--c-ink-2);
  transform: translateY(-1px);
}
.post-share__btn.is-copied {
  background: var(--c-success);
  color: white;
  border-color: var(--c-success);
}

/* — 34.3 · Post floating CTA (sticky tras 35% scroll del articulo) */
.post-floating-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -8px 24px rgba(0,26,61,.06);
  transform: translateY(100%);
  opacity: 0;
  transition: transform var(--t) var(--ease-out), opacity var(--t) var(--ease-out);
  pointer-events: none;
}
.post-floating-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.post-floating-cta__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-3) var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.post-floating-cta__tagline {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-ink-2);
  margin: 0;
  font-variation-settings: "opsz" 36, "SOFT" 80;
}
.post-floating-cta__btn { flex-shrink: 0; }
@media (max-width: 600px) {
  .post-floating-cta__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--pad);
  }
  .post-floating-cta__tagline { text-align: center; font-size: .95rem; }
  .post-floating-cta__btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .post-floating-cta { transition: opacity var(--t-fast) linear; transform: none; }
}

/* — 34.4 · WhatsApp float pulso sutil (llama atencion sin agresividad) */
@keyframes whatsappPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(37,211,102,.3), 0 0 0 0 rgba(37,211,102,.5); }
  70%      { box-shadow: 0 8px 24px rgba(37,211,102,.3), 0 0 0 14px rgba(37,211,102,0); }
}
.whatsapp-float {
  animation: whatsappPulse 3.2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { animation: none; }
}

/* ============================================================
   35 · SERVICES TABS + FOOTER MANIFESTO (sesion XXL · 2026-04-23)
   ============================================================ */

/* — 35.1 · Services tabs (filtro categoria en services/index) */
.services-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  max-width: var(--max-w);
  margin: var(--sp-8) auto 0;
  padding: 0 var(--pad);
}
.services-tabs__btn {
  font-family: var(--ff-body);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: var(--sp-3) var(--sp-5);
  background: transparent;
  color: var(--c-ink-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.services-tabs__btn:hover {
  background: var(--c-line-soft);
  color: var(--c-ink-2);
}
.services-tabs__btn.is-active {
  background: var(--c-ink-2);
  color: white;
  border-color: var(--c-ink-2);
}
.services-tabs__btn.is-active:hover {
  background: var(--c-ink);
}

/* — 35.2 · Footer manifesto (pull quote editorial sobre paper-soft)
   Antes usaba brand-deep, pero chocaba visualmente con el cta-strip
   (tambien marino) cuando una pagina lo renderizaba al final: se
   veian como "dos banners casi iguales". Pasar a paper-soft crea
   ritmo marino -> calido -> marino (footer) y diferencia claramente
   los dos elementos. */
.footer-manifesto {
  background: var(--c-line-soft);
  color: var(--c-ink-2);
  padding: clamp(3rem, 6vw, 4.5rem) var(--pad);
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.footer-manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(0, 74, 173, .04) 0%, transparent 60%);
  pointer-events: none;
}
.footer-manifesto__quote {
  position: relative;
  z-index: 1;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 96, "SOFT" 100;
  color: var(--c-ink-2);
  max-width: 720px;
  margin: 0 auto;
  text-wrap: balance;
}
.footer-manifesto__quote::before {
  content: "“";
  display: block;
  font-style: normal;
  color: var(--c-brand);
  font-size: 1.6em;
  line-height: .3;
  margin-bottom: var(--sp-4);
  opacity: .35;
}

/* ============================================================
   36 · OFFERS / SALE PRICING (sesion XXL admin · 2026-04-23)
   - Badge "OFERTA -XX%" sobre la imagen del producto
   - Precio antes tachado + nuevo precio en color brand/error
   - Aplicado tanto en product-card del listado como en shop/show
   ============================================================ */

/* — 36.1 · Card listado: badge esquina superior izquierda */
.product-card { position: relative; }
.product-card__sale-badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-error);
  color: white;
  font-family: var(--ff-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  pointer-events: none;
}
.product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0;
  flex-wrap: wrap;
}
.product-card__price--sale {
  color: var(--c-error);
  font-weight: 700;
}
.product-card__price-old {
  font-family: var(--ff-body);
  font-size: .9rem;
  color: var(--c-ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* — 36.2 · Detalle producto: badge prominente + tachado + descuento */
.product-show__sale-badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-error);
  color: white;
  font-family: var(--ff-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  border-radius: var(--r-pill);
  margin-right: var(--sp-3);
  vertical-align: middle;
}
.product-show__price--sale {
  color: var(--c-error);
}
.product-show__price-old {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  color: var(--c-ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  margin-left: var(--sp-3);
}

/* — 37 · Promo banner editable desde /admin/settings */
.promo-banner {
  background: var(--c-brand-deep);
  color: white;
  text-align: center;
  padding: var(--sp-2) var(--pad);
  font-family: var(--ff-body);
  font-size: .85rem;
  letter-spacing: .04em;
}
.promo-banner__link {
  color: var(--c-accent-light);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: gap var(--t-fast) var(--ease);
}
.promo-banner__link:hover { gap: var(--sp-3); color: var(--c-accent); }
.promo-banner__text { color: var(--c-accent-light); }

/* ============================================================
   37 · EDITORIAL NUMBERS en service-card (01, 02, 03...)
   Numero grande en Fraunces italic detras del body, al estilo
   revista editorial. Cuenta automaticamente dentro de .cards-grid.
   ============================================================ */
.cards-grid { counter-reset: svc-num; }
.cards-grid > .service-card { counter-increment: svc-num; }
.service-card__body { position: relative; overflow: hidden; }
.service-card__body::after {
  content: counter(svc-num, decimal-leading-zero);
  position: absolute;
  top: -0.08em;
  right: -0.05em;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 96;
  font-size: clamp(5rem, 11vw, 8.5rem);
  color: var(--c-line);
  line-height: .9;
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: .85;
  transition: color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.service-card:hover .service-card__body::after {
  color: var(--c-brand);
  opacity: .18;
}
.service-card__category,
.service-card__title,
.service-card__excerpt,
.service-card__cta { position: relative; z-index: 1; }

/* ============================================================
   38 · HOVER REVEAL en service-card / post-card
   Etiqueta "Decouvrir -> / Descubrir ->" que aparece sobre la
   imagen en hover. Usa el overlay ya existente; solo anade el
   label superpuesto.
   ============================================================ */
.service-card__hover-label,
.post-card__hover-label {
  position: absolute;
  bottom: var(--sp-5);
  left: var(--sp-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,.95);
  color: var(--c-ink-2);
  font-family: var(--ff-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.service-card:hover .service-card__hover-label,
.post-card:hover .post-card__hover-label {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .service-card__hover-label,
  .post-card__hover-label { transition: none; }
}
@media (hover: none) {
  /* En touch nunca aparece -> no ocultar contenido util */
  .service-card__hover-label,
  .post-card__hover-label { display: none; }
}

/* ============================================================
   39 · SCROLL-WORD — pausa tipografica editorial
   Palabra gigante italic que se "queda" en pantalla durante un
   tramo del scroll. Decorativa, aria-hidden. Opacidad muy baja
   para no interferir con lectura.
   ============================================================ */
.scroll-word {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: 80vh;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.scroll-word__sticky {
  position: sticky;
  top: 20vh;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-word__text {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 96;
  font-size: clamp(5rem, 22vw, 18rem);
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--c-ink-2);
  opacity: .08;
  white-space: nowrap;
  text-wrap: balance;
}
@media (max-width: 640px) {
  .scroll-word { height: 50vh; }
  .scroll-word__sticky { top: 15vh; height: 35vh; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-word { height: 24vh; }
  .scroll-word__sticky { position: static; height: auto; }
}

/* ============================================================
   40 · HOVER-CURSOR — cursor circulo "Voir ->" sobre cards
   Aparece solo en desktop (hover:hover + pointer:fine). Se oculta
   en touch y con prefers-reduced-motion.
   ============================================================ */
.hover-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--c-brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-100px, -100px) scale(.4);
  transition: opacity .2s var(--ease), scale .25s var(--ease);
}
.hover-cursor.is-active {
  opacity: 1;
  /* el translate lo controla el JS; aqui solo scale */
  scale: 1;
}
.hover-cursor__arrow { font-size: .9rem; line-height: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .hover-cursor { display: none; }
}

/* ============================================================
   41 · SHOP CLOSED NOTICE
   Bloque informativo que sustituye al boton "Anadir al carrito"
   mientras la pasarela Stripe NO esta operativa. Usado en:
   - shop/show.php (grande, en lugar del form)
   - cart.php (compact, en el aside)
   - checkout.php (como banner arriba)
   ============================================================ */
.shop-closed-notice {
  background: var(--c-line-soft);
  border-left: 3px solid var(--c-brand);
  padding: var(--sp-6) var(--sp-6);
  margin-top: var(--sp-4);
}
.shop-closed-notice__eyebrow {
  font-family: var(--ff-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 var(--sp-3);
}
.shop-closed-notice__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.25;
  color: var(--c-ink-2);
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-3);
}
.shop-closed-notice__text {
  color: var(--c-ink-muted);
  line-height: 1.6;
  margin: 0 0 var(--sp-5);
  font-size: .92rem;
}
.shop-closed-notice--compact {
  padding: var(--sp-5);
  margin-top: 0;
  margin-bottom: var(--sp-4);
}
.shop-closed-notice--compact .shop-closed-notice__eyebrow {
  margin-bottom: var(--sp-2);
}
.shop-closed-notice--compact .shop-closed-notice__text {
  font-size: .85rem;
  margin-bottom: var(--sp-4);
}

/* Banner arriba del listado de boutique */
.shop-top-banner {
  max-width: var(--max-w);
  margin: var(--sp-8) auto 0;
  padding: var(--sp-5) var(--pad);
  background: var(--c-line-soft);
  border-left: 3px solid var(--c-brand);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.shop-top-banner__text {
  margin: 0;
  color: var(--c-ink-2);
  font-size: .92rem;
  line-height: 1.5;
  max-width: 860px;
}
.shop-top-banner__text strong { color: var(--c-brand); font-weight: 600; }
.shop-top-banner__cta {
  color: var(--c-brand);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
}
.shop-top-banner__cta:hover { text-decoration: underline; }

/* ============================================================
   42 · POST FEATURED — primer articulo del blog a doble ancho
   Layout 2 columnas en desktop (imagen + contenido), 1 columna en
   mobile. Imagen con hover scale y label "A la une" sobre ella.
   ============================================================ */
.post-featured {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0;
  background: var(--c-line-soft);
  text-decoration: none;
  color: inherit;
  margin: 0 0 var(--section-gap);
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.post-featured:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh);
  color: inherit;
  text-decoration: none;
}
.post-featured__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--c-line);
}
.post-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.post-featured:hover .post-featured__img { transform: scale(1.04); }
.post-featured__label {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  background: var(--c-brand);
  color: white;
  padding: 6px 14px;
  font-family: var(--ff-body);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 2;
}
.post-featured__body {
  padding: clamp(var(--sp-6), 3vw, var(--sp-10));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
}
.post-featured__meta {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--c-ink-muted);
}
.post-featured__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  color: var(--c-ink-2);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.post-featured__excerpt {
  color: var(--c-ink-3);
  line-height: 1.6;
  margin: 0;
  font-size: .95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-featured__cta {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--c-brand);
  font-weight: 500;
  font-size: .92rem;
  margin-top: var(--sp-2);
}
.post-featured__cta-arrow { transition: transform var(--t-fast) var(--ease); }
.post-featured:hover .post-featured__cta-arrow { transform: translateX(4px); }
@media (max-width: 900px) {
  .post-featured { grid-template-columns: 1fr; }
}

/* ============================================================
   43 · BLOG EMPTY STATE — cuando aun no hay articulos
   ============================================================ */
.blog-empty {
  text-align: center;
  max-width: 560px;
  margin: clamp(3rem, 8vw, 5rem) auto;
  padding: clamp(2rem, 4vw, 3rem) var(--sp-6);
}
.blog-empty__eyebrow {
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 var(--sp-4);
}
.blog-empty__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-4);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.blog-empty__text {
  color: var(--c-ink-muted);
  line-height: 1.65;
  margin: 0 0 var(--sp-6);
}

/* ============================================================
   44 · CONTACT TRUST CARDS — 3 garantias arriba del formulario
   ============================================================ */
.contact-trust {
  max-width: var(--max-w);
  margin: var(--sp-10) auto var(--sp-6);
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.contact-trust__item {
  background: var(--c-line-soft);
  padding: var(--sp-6);
  text-align: left;
  border-left: 3px solid var(--c-brand);
  transition: transform var(--t) var(--ease);
}
.contact-trust__item:hover { transform: translateY(-2px); }
.contact-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: white;
  color: var(--c-brand);
  margin-bottom: var(--sp-4);
}
.contact-trust__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-2);
  letter-spacing: -.005em;
}
.contact-trust__text {
  color: var(--c-ink-muted);
  font-size: .88rem;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) {
  .contact-trust { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ============================================================
   45 · LEGAL TOC — indice lateral autonomo en /legal /privacy etc.
   Se inyecta desde legal-toc.js. En desktop se muestra en columna
   izquierda sticky; en mobile aparece inline arriba del cuerpo.
   ============================================================ */
.legal-page--with-toc .legal-page__body {
  position: relative;
}
@media (min-width: 900px) {
  .legal-page--with-toc {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: clamp(var(--sp-6), 3vw, var(--sp-10));
    align-items: start;
  }
  .legal-page--with-toc > .legal-page__header { grid-column: 1 / -1; }
  .legal-page--with-toc > .legal-toc {
    position: sticky;
    top: 104px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
}
.legal-toc {
  background: var(--c-line-soft);
  padding: var(--sp-5);
  font-size: .88rem;
}
.legal-toc__title {
  font-family: var(--ff-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0 0 var(--sp-4);
}
.legal-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.legal-toc__link {
  display: block;
  color: var(--c-ink-3);
  text-decoration: none;
  padding: 6px 0 6px var(--sp-3);
  border-left: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  line-height: 1.35;
}
.legal-toc__link:hover { color: var(--c-brand); }
.legal-toc__link.is-active {
  color: var(--c-brand);
  border-left-color: var(--c-brand);
  font-weight: 500;
}
@media (max-width: 899px) {
  .legal-toc { margin-bottom: var(--sp-6); }
}

/* ============================================================
   46 · SERVICE SHOW VARIANTS — personalidad distinta por ficha
   Para que tratamientos contiguos no parezcan clones. La lógica
   de orden/contenido vive en show.php (match variant). Aqui solo
   retoques visuales sutiles.
   - v0 classic    : sin cambios
   - v1 method-first: facts-strip destacada (paper-soft)
   - v2 value-focus: "qué incluye" arranca sin padding superior
   - v3 concise    : article-wrap centrado mas estrecho
   ============================================================ */
.service-show--v1 .service-facts {
  background: var(--c-line-soft);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: var(--sp-8) var(--pad);
  max-width: none;
}
.service-show--v1 .service-facts__list {
  max-width: var(--max-w);
  margin: 0 auto;
}

.service-show--v2 .service-included {
  padding-top: var(--sp-10);
}
.service-show--v2 .service-included__inner {
  background: linear-gradient(180deg, var(--c-line-soft) 0%, var(--c-paper) 100%);
  border-left-color: var(--c-brand);
}

.service-show--v3 .article-wrap {
  max-width: 720px;
  margin-inline: auto;
}
.service-show--v3 .article-body p {
  font-size: 1.08rem;
  line-height: 1.75;
}

/* ============================================================
   47 · VIEW TRANSITIONS — fade cruzado entre paginas
   Usa la Navigation View Transitions API (Chrome 126+, Safari 18+).
   Los navegadores que no la soportan ignoran las reglas y muestran
   el cambio de pagina normal. Cero JS, cero polyfill.
   ============================================================ */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0ms; }
}

/* ============================================================
   48 · PROSE LINKS — underline animado desde izquierda
   Aplicado a links dentro del cuerpo de articulos del blog,
   servicios y legales. El subrayado crece en 260ms al hover
   en lugar de aparecer plano de golpe.
   ============================================================ */
.article-body a,
.legal-page__body a {
  color: var(--c-brand);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size .26s var(--ease-out), color var(--t-fast) var(--ease);
}
.article-body a:hover,
.article-body a:focus-visible,
.legal-page__body a:hover,
.legal-page__body a:focus-visible {
  background-size: 100% 1px;
  color: var(--c-brand-dark);
}
@media (prefers-reduced-motion: reduce) {
  .article-body a,
  .legal-page__body a {
    background-size: 100% 1px;
    transition: none;
  }
}

/* ============================================================
   49 · LANG-SUGGEST BANNER — barra arriba con el otro idioma
   Tira fina sobre brand-deep, con CTA a la version del sitio en
   el idioma detectado del navegador. JS decide si mostrarla.
   ============================================================ */
.lang-suggest {
  background: var(--c-brand-deep);
  color: rgba(255,255,255,.9);
  font-family: var(--ff-body);
  font-size: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .26s var(--ease), max-height .26s var(--ease);
}
.lang-suggest.is-visible {
  opacity: 1;
  max-height: 80px;
}
.lang-suggest__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--sp-3) var(--pad);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.lang-suggest__text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
}
.lang-suggest__cta {
  color: white;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 2px;
  transition: border-color var(--t-fast) var(--ease);
}
.lang-suggest__cta:hover { border-bottom-color: white; }
.lang-suggest__close {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  transition: color var(--t-fast) var(--ease);
}
.lang-suggest__close:hover { color: white; }
@media (prefers-reduced-motion: reduce) {
  .lang-suggest { transition: none; }
}

/* ============ FIN ============ */