/* =========================================================================
   ANDARA ESPACIO — Sistema de diseño
   -------------------------------------------------------------------------
   Fondo blanco. Terracota como único acento de marca: botones, palabras
   destacadas en titulares, bordes de tarjetas y fondos suaves alternos
   entre secciones. Titulares en Lora, cuerpo en Inter, y la palabra
   "Andara" del logo en la cursiva Alex Brush.
   ========================================================================= */

/* --------------------------- Tokens --------------------------- */
:root {
  /* Color — marfil (fondo base y alterno de toda la web) */
  --beige: #F1EBE1;         /* marfil profundo — fondo alterno de sección */
  --marfil: #F8F5F0;        /* marfil principal — fondo base */
  --marfil-profundo: #F1EBE1;

  /* Color — sage/salvia (acento principal general; protagonista en RenaSer) */
  --sage-light: #A0AE96;    /* verde salvia claro */
  --sage-grad-mid: #7E8C7A;
  --sage-dark: #5C6B5E;     /* verde salvia */
  --sage-darker: #4E5B50;

  /* Color — arena (acento cálido secundario: Talleres, Regala Andara) */
  --arena: #B88A58;
  --arena-light: #E7BE87;

  /* Color — lavanda (acento emocional muy puntual) */
  --lavanda: #D9CFDF;

  /* Color — gris (tarjetas "tres formas de acompañarte"), combina con el verde sage */
  --gray-light: #D9D9D1;
  --gray-light-mid: #EAEAE3;
  --gray-mid: #86867C;
  --gray-dark: #6E6E66;
  --gray-darker: #55554E;

  /* Color — terracota (acento con carácter: líneas, iconos, botones secundarios — nunca fondo dominante) */
  --terracotta: #A85438;         /* terracota — botones, acentos, texto de marca */
  --terracotta-dark: #8E4730;    /* terracota oscurecido — hover */
  --terracotta-mid: #B97660;     /* terracota más claro — palabras destacadas en titulares */
  --terracotta-soft: #CC9C8B;    /* terracota apagado — trazo de iconos finos */
  --terracotta-tint: var(--beige);      /* fondo alterno de sección */
  --terracotta-tint-mid: var(--beige);  /* fondo alterno de sección (bloques destacados) */
  --terracotta-line: rgba(168, 84, 56, 0.22); /* hairline sobre blanco */
  --terracotta-line-soft: rgba(168, 84, 56, 0.12);

  /* Color — base */
  --ivory: var(--marfil);   /* fondo de la web */
  --ivory-deep: var(--beige);      /* fondo alterno de sección */
  --ivory-soft: #FFFFFF;    /* tarjetas sobre secciones con tinte */
  --paper: #FFFFFF;         /* tarjetas: sesiones, RenaSer, talleres, etc. */

  /* Color — verde Andara: acento principal general = salvia; logo y palabras destacadas = terracota */
  --sage-deep: var(--terracotta);       /* logo "Andara" y palabras destacadas en titulares */
  --sage-deep-dark: var(--terracotta-dark);
  --sage-mid: var(--terracotta-mid);    /* palabras destacadas dentro de titulares */
  --sage-icon: var(--sage-dark);        /* trazo de iconos finos */

  /* Color — acentos (heredados) */
  --sage: var(--sage-light);
  --sage-tint: var(--terracotta-tint);
  --sage-line: var(--terracotta-line);
  --sand: var(--arena);
  --sand-tint: var(--terracotta-tint-mid);
  --lavender: var(--lavanda);
  --lavender-tint: var(--terracotta-tint);
  --brown: var(--terracotta-dark);      /* texto de cita */
  --tan: var(--terracotta);             /* contraste con --tan-tint */
  --tan-dark: var(--terracotta-dark);
  --tan-tint: var(--terracotta-tint-mid);

  /* Color — texto */
  --ink: #2A241E;           /* titulares */
  --ink-soft: #4C4C4C;      /* gris texto — texto secundario y de cuerpo */
  --ink-faint: #8A7A66;     /* texto terciario / metadatos */
  --line: var(--terracotta-line);      /* hairline — también sirve de contraste en tarjetas */
  --line-soft: var(--terracotta-line-soft);

  /* Tipografía */
  --font-display: "Lora", "Iowan Old Style", "Palatino Linotype", serif;
  --font-script: "Alex Brush", "Segoe Script", cursive;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(1.85rem, 1.3rem + 2.5vw, 3.25rem);
  --fs-h2: clamp(1.4rem, 1.15rem + 1.3vw, 2.1rem);
  --fs-h3: clamp(1.08rem, 0.98rem + 0.5vw, 1.28rem);
  --fs-h4: clamp(0.95rem, 0.9rem + 0.25vw, 1.04rem);
  --fs-lead: clamp(0.95rem, 0.9rem + 0.25vw, 1.04rem);
  --fs-body: 0.94rem;
  --fs-small: 0.83rem;
  --fs-eyebrow: 0.73rem;

  /* Espaciado */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: clamp(2.5rem, 2rem + 2vw, 4rem);
  --space-6: clamp(3.5rem, 2.6rem + 3.6vw, 6rem);
  --space-7: clamp(5rem, 3.6rem + 6vw, 8.5rem);

  /* Forma */
  --radius-pill: 999px;
  --radius-lg: 30px;
  --radius-md: 18px;
  --radius-organic: 62% 38% 55% 45% / 45% 55% 45% 55%;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-s: 220ms;
  --dur-m: 420ms;
  --dur-l: 700ms;

  /* Layout */
  --container: 1180px;
  --container-narrow: 760px;
  --edge: clamp(1.25rem, 4vw, 3rem);

  --header-h: 84px;
}

/* --------------------------- Reset --------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
}
html.smooth-scroll {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html.smooth-scroll { scroll-behavior: auto; }
}
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--ink);
  color: var(--ivory);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  z-index: 999;
  transition: top var(--dur-s) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* --------------------------- Tipografía --------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); font-weight: 480; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; }

em, .accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--sage-deep);
}

p { max-width: 62ch; }
p.no-measure { max-width: none; }

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 56ch;
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: var(--space-3);
  margin-inline: auto;
  width: fit-content;
}
.eyebrow::before, .eyebrow::after {
  content: "";
  display: block;
  width: clamp(20px, 4vw, 48px);
  height: 1px;
  background: var(--ink-faint);
  opacity: 0.5;
}
.eyebrow--sage {
  background: linear-gradient(90deg, var(--sage-dark), var(--sage-light));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.eyebrow--sage::before, .eyebrow--sage::after {
  background: linear-gradient(90deg, var(--sage-dark), var(--sage-light));
  opacity: 0.6;
}
.eyebrow.align-left { justify-content: flex-start; margin-inline: 0; width: auto; }
.eyebrow.align-left::before { display: none; }

.section-head {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-6);
}
.section-head.align-left { margin-inline: 0; text-align: left; }
.section-head p { margin-inline: auto; }
.section-head.align-left p { margin-inline: 0; }
.section-head h2 { margin-bottom: var(--space-3); }

.text-center { text-align: center; }

/* --------------------------- Layout --------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.section {
  position: relative;
  padding-block: var(--space-7);
}
.section--deep { background: var(--ivory-deep); }
.section--sage { background: var(--sage-tint); }
.section--sand { background: var(--sand-tint); }
.section--paths-glow { background: var(--beige); overflow: hidden; }
.section--paths-glow::before {
  content: "";
  position: absolute;
  top: -8%;
  right: -6%;
  width: min(640px, 80%);
  height: 420px;
  background: radial-gradient(ellipse at center, var(--terracotta) 0%, transparent 70%);
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}
.section--paths-glow > .container { position: relative; z-index: 1; }
.section--ink { background: var(--ink); color: var(--ivory-soft); }
.section--ink h2, .section--ink h3 { color: var(--ivory-soft); }
.section--tight { padding-block: var(--space-6); }

.divider-shape {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: clamp(28px, 6vw, 64px);
  overflow: hidden;
  pointer-events: none;
}
.divider-shape svg { width: 100%; height: 100%; display: block; }

/* --------------------------- Botones --------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--sage-grad-mid), var(--sage-darker));
  color: var(--paper);
  box-shadow: 0 10px 24px -14px rgba(42, 36, 30, 0.55);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--sage-light), var(--sage-grad-mid));
  color: var(--ink);
  box-shadow: 0 14px 28px -14px rgba(42, 36, 30, 0.4);
  transform: translateY(-2px);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-secondary:hover { background: var(--ivory-soft); border-color: var(--tan); transform: translateY(-2px); }
.btn-text {
  padding: 0.5rem 0;
  border-radius: 0;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.btn-text:hover { border-color: var(--tan-dark); color: var(--tan-dark); }
.btn-text .arrow, .btn-secondary .arrow, .btn-primary .arrow {
  transition: transform var(--dur-s) var(--ease);
  display: inline-block;
}
.btn:hover .arrow { transform: translateX(4px); }
.btn-on-dark.btn-secondary { color: var(--ivory-soft); border-color: rgba(247,242,232,0.35); }
.btn-on-dark.btn-secondary:hover { background: rgba(247,242,232,0.08); border-color: var(--ivory-soft); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn .arrow, .btn:hover .arrow { transition: none; transform: none; }
}

/* --------------------------- Header --------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), padding var(--dur-m) var(--ease);
}
.site-header.is-scrolled {
  border-color: var(--line);
  box-shadow: 0 12px 30px -26px rgba(42, 36, 30, 0.5);
}
.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--edge);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
}
.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  object-fit: contain;
}
.brand-mark-photo {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}
.brand-word-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-word {
  font-family: var(--font-script);
  font-size: 2rem;
  line-height: 1;
  color: var(--sage-deep);
  display: block;
}
.footer-brand .brand-word { color: var(--ivory-soft); }

.nav-desktop {
  display: none;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.6vw, 1.9rem);
}
.nav-list > li { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.1rem;
  font-weight: 500;
  font-size: 0.96rem;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); border-color: var(--tan); }
.nav-caret { width: 9px; height: 9px; transition: transform var(--dur-s) var(--ease); opacity: 0.6; }
.has-dropdown:hover .nav-caret,
.has-dropdown:focus-within .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 270px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 30px 60px -30px rgba(42, 36, 30, 0.35);
  padding: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), visibility var(--dur-s);
  z-index: 10;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.nav-dropdown li:last-child a { border-bottom: none; }
.nav-dropdown a:hover { background: var(--ivory-deep); }
.nav-dropdown .drop-title { display: block; font-weight: 600; font-size: 0.95rem; }
.nav-dropdown .drop-desc { display: block; font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.15rem; font-weight: 400; }

.header-cta { display: none; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
}
.nav-toggle span {
  display: block;
  width: 19px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  inset: 0;
  top: var(--header-h);
  background: var(--ivory);
  padding: var(--space-4) var(--edge) var(--space-6);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), visibility var(--dur-m);
  z-index: 90;
}
.nav-mobile.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-mobile-list > li {
  border-bottom: 1px solid var(--line);
}
.nav-mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 0.1rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.nav-mobile-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-m) var(--ease);
}
.nav-mobile-sub.is-open { max-height: 400px; }
.nav-mobile-sub li a {
  display: block;
  padding: 0.85rem 0.1rem 0.85rem 1rem;
  border-left: 2px solid var(--tan-tint);
  color: var(--ink-soft);
  font-size: 1.02rem;
}
.nav-mobile-toggle {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-mobile-toggle svg { transition: transform var(--dur-s) var(--ease); }
.nav-mobile-link[aria-expanded="true"] .nav-mobile-toggle svg { transform: rotate(180deg); }
.nav-mobile-cta { margin-top: var(--space-4); }
.nav-mobile-meta {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-4);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

@media (min-width: 960px) {
  .nav-desktop { display: block; }
  .header-cta { display: inline-flex; }
  .nav-toggle, .nav-mobile { display: none; }
}

/* --------------------------- Hero --------------------------- */
.hero {
  position: relative;
  padding-block: var(--space-7) var(--space-6);
  overflow: hidden;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.hero h1 { margin-bottom: var(--space-4); }
.hero .lead { margin-inline: auto; margin-bottom: var(--space-5); font-size: var(--fs-lead); }
.hero-shape {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  opacity: 0.55;
}
.hero-scroll {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  margin-top: var(--space-6);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero-scroll .line { width: 1px; height: 34px; background: linear-gradient(var(--ink-faint), transparent); }

.page-hero {
  padding-block: var(--space-6) var(--space-6);
  text-align: center;
}
.page-hero .container { max-width: 900px; }
.page-hero h1 { margin-bottom: var(--space-3); }
.page-hero p { margin-inline: auto; }
.page-hero p + p { margin-top: var(--space-3); color: var(--ink-soft); }

/* --------------------------- Hero a pantalla completa (Inicio) --------------------------- */
.hero-full {
  position: relative;
  width: 100%;
  aspect-ratio: 2868 / 1000;
  overflow: hidden;
}
.hero-full-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero-full-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(15, 13, 10, 0.55) 0%, rgba(15, 13, 10, 0.28) 40%, rgba(15, 13, 10, 0.05) 70%, rgba(15, 13, 10, 0) 100%),
    linear-gradient(90deg, rgba(15, 13, 10, 0.55) 0%, rgba(15, 13, 10, 0.32) 30%, rgba(15, 13, 10, 0.05) 58%, rgba(15, 13, 10, 0) 80%);
}
.hero-full-copy {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-4);
}
.hero-full-copy-inner { max-width: 560px; margin-inline: auto; }
.hero-full-copy .eyebrow {
  color: rgba(251, 248, 242, 0.85);
  justify-content: center;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
}
.hero-full-copy .eyebrow::before, .hero-full-copy .eyebrow::after { background: rgba(251, 248, 242, 0.55); }
.hero-full-copy .claim {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
  color: var(--ivory-soft);
  line-height: 1;
  margin-bottom: 0.7rem;
}
.hero-full-copy h1 {
  color: var(--ivory-soft);
  margin-bottom: 0.5rem;
  font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.35rem);
}
.hero-full-copy-inner--home { max-width: 480px; }
.hero-full-copy-inner--home h1 { font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.05rem); }
.hero-full-copy h1 em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  color: var(--ivory-soft);
  font-size: 1.4em;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.08em;
}
.hero-full-copy p {
  color: rgba(251, 248, 242, 0.92);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 1rem;
  line-height: 1.5;
  font-size: clamp(0.88rem, 0.82rem + 0.3vw, 0.98rem);
}
.hero-full-copy .btn-row { row-gap: 0.75rem; justify-content: center; }
.hero-full-copy .btn { padding: 0.8rem 1.5rem; font-size: 0.9rem; }
.hero-full-copy .btn-primary { background: linear-gradient(135deg, var(--sage-grad-mid), var(--sage-darker)); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55); }
.hero-full-copy .btn-primary:hover { background: linear-gradient(135deg, var(--sage-light), var(--sage-grad-mid)); color: var(--ink); }
.hero-full-copy .btn-primary.btn-primary--terracotta {
  background: linear-gradient(135deg, var(--terracotta-mid), var(--terracotta-dark));
  color: var(--paper);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
}
.hero-full-copy .btn-primary.btn-primary--terracotta:hover {
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-mid));
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.4);
}
.hero-full-copy .eyebrow,
.hero-full-copy .claim,
.hero-full-copy h1,
.hero-full-copy p {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.6);
}

@media (min-width: 901px) {
  .hero-full { min-height: 420px; }
}
@media (max-width: 640px) {
  .hero-full { aspect-ratio: auto; min-height: clamp(480px, 74vh, 620px); }
  .hero-full-copy { min-height: clamp(480px, 74vh, 620px); }
  .hero-full-media { object-position: 62% 50%; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .hero-full { aspect-ratio: auto; min-height: clamp(440px, 62vh, 560px); }
  .hero-full-copy { min-height: clamp(440px, 62vh, 560px); }
  .hero-full-media { object-position: 58% 50%; }
}


/* --------------------------- Migas de pan (subpáginas de Servicios) --------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}
.breadcrumb a { color: var(--tan-dark); transition: color var(--dur-s) var(--ease); }
.breadcrumb a:hover { color: var(--brown); }

/* --------------------------- Servicios: bloques numerados por categoría --------------------------- */
.service-block {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 860px) {
  .service-block { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-6); align-items: start; }
}
.service-block .service-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--tan);
  margin-bottom: var(--space-2);
  display: block;
}
.service-block .service-intro h3 { margin-bottom: var(--space-2); }
.service-block .service-intro p { color: var(--ink-soft); }
.service-block .service-intro p.pull-quote { color: var(--brown); }
.service-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 620px) {
  .service-card { grid-template-columns: 160px 1fr; align-items: center; }
}
.service-card .service-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--ivory-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.service-card .service-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin-bottom: 0.4rem; }
.service-card p { color: var(--ink-soft); font-size: 0.97rem; margin-bottom: var(--space-2); }
.service-card .service-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.service-card .service-price { font-family: var(--font-display); font-style: italic; color: var(--tan-dark); font-size: 1.05rem; }
.services-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.services-jump a {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.services-jump a:hover { background: var(--tan); color: var(--paper); border-color: var(--tan); }

/* --------------------------- Preguntas frecuentes --------------------------- */
.faq-list {
  max-width: var(--container-narrow);
  margin-inline: auto;
  display: grid;
  gap: 0;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
}
.faq-question .faq-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  position: relative;
}
.faq-question .faq-icon::before, .faq-question .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--tan-dark);
  transition: transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.faq-question .faq-icon::before { top: 50%; left: 2px; right: 2px; height: 1.4px; transform: translateY(-50%); }
.faq-question .faq-icon::after { left: 50%; top: 2px; bottom: 2px; width: 1.4px; transform: translateX(-50%); }
.faq-item[data-open="true"] .faq-icon::after { opacity: 0; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-m) var(--ease);
}
.faq-item[data-open="true"] .faq-answer { max-height: 320px; }
.faq-answer p { color: var(--ink-soft); padding-bottom: var(--space-3); max-width: 66ch; }

/* --------------------------- También te puede interesar --------------------------- */
.related-grid {
  display: grid;
  gap: var(--space-4);
  max-width: 900px;
  margin-inline: auto;
}
@media (min-width: 700px) { .related-grid { grid-template-columns: 1fr 1fr; } }

/* --------------------------- Decorative SVG --------------------------- */
.deco { position: absolute; pointer-events: none; z-index: 0; }
.deco svg { display: block; }

/* --------------------------- Reveal animation --------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------- "Quizá has llegado" --------------------------- */
.arrival-grid {
  display: grid;
  gap: var(--space-3);
  max-width: 780px;
  margin-inline: auto var(--space-6);
}
.arrival-item {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}
.arrival-item:last-child { border-bottom: none; }
.arrival-mark {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tan);
  margin-top: 0.75em;
}
.pull-quote {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.08rem, 0.94rem + 0.8vw, 1.45rem);
  color: var(--brown);
  line-height: 1.4;
  position: relative;
  padding-block: var(--space-3);
}
.pull-quote--big {
  max-width: 780px;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.75rem);
  padding-block: var(--space-4);
  color: var(--sage-dark);
}
.pull-quote--left {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}
.pull-quote.pull-quote--terracotta {
  color: var(--terracotta);
  padding-block: var(--space-5);
}

/* --------------------------- Tarjetas de caminos (orgánicas) --------------------------- */
.paths-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 780px) {
  .paths-grid { grid-template-columns: repeat(3, 1fr); }
}
.path-card {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
  border: 1px solid var(--line);
  border-top: 3px solid var(--terracotta);
  color: var(--ink-soft);
  box-shadow: 0 16px 34px -26px rgba(42,36,30,0.28);
}
.path-card:hover { transform: translateY(-6px); box-shadow: 0 30px 55px -30px rgba(42,36,30,0.32); }
.path-card .path-index {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--terracotta);
  font-size: 1.6rem;
}
.path-card h3 { margin-top: 0.4rem; color: var(--sage-dark); }
.path-card p { color: var(--ink-soft); }
.path-card .btn-text { margin-top: auto; align-self: flex-start; color: var(--ink); border-color: var(--line); }
.path-card .btn-text:hover { color: var(--terracotta-dark); border-color: var(--terracotta); }
.path-card .path-card-shape circle { stroke: var(--terracotta); stroke-opacity: 0.45; }

/* Las tres tarjetas comparten un único tratamiento cálido; sin variantes de fondo */
.path-card--sage, .path-card--sand {
  background: var(--paper);
  border-color: var(--line);
  border-top-color: var(--terracotta);
  color: var(--ink-soft);
}
.path-card--sage .path-index, .path-card--sand .path-index { color: var(--terracotta); }
.path-card--sage h3, .path-card--sand h3 { color: var(--sage-dark); }
.path-card--sage p, .path-card--sand p { color: var(--ink-soft); }
.path-card--sage .btn-text, .path-card--sand .btn-text { color: var(--ink); border-color: var(--line); }
.path-card--sage .btn-text:hover, .path-card--sand .btn-text:hover { color: var(--terracotta-dark); border-color: var(--terracotta); }
.path-card--sage .path-card-shape circle, .path-card--sand .path-card-shape circle { stroke: var(--terracotta); stroke-opacity: 0.45; }
.path-card-shape {
  position: absolute;
  top: -18px; right: 22px;
  width: 46px; height: 46px;
  opacity: 0.7;
}

/* --------------------------- ¿Qué podemos trabajar juntas? --------------------------- */
.topic-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 700px) {
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .topic-grid .topic-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - var(--space-4) / 2); margin-inline: auto; }
}
.topic-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--dur-s) var(--ease);
}
.topic-card[data-open="true"] { box-shadow: 0 16px 34px -22px rgba(42,36,30,0.3); }
.topic-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: none;
  border: 0;
  text-align: left;
  padding: var(--space-4);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.topic-toggle .topic-index {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sage-dark);
  font-size: 1.4rem;
  opacity: 0.85;
  flex: none;
}
.topic-toggle h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.topic-toggle .topic-plus {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--terracotta);
  flex: none;
  transition: transform var(--dur-s) var(--ease);
}
.topic-card[data-open="true"] .topic-toggle .topic-plus { transform: rotate(45deg); }
.topic-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-m) var(--ease);
}
.topic-card[data-open="true"] .topic-panel { max-height: 420px; }
.topic-panel-inner { padding: 0 var(--space-4) var(--space-4); }
.topic-panel p { color: var(--ink-soft); margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .topic-panel, .topic-toggle .topic-plus { transition: none; }
}

/* --------------------------- Regala Andara --------------------------- */
.gift-grid {
  display: grid;
  gap: var(--space-4);
  align-items: stretch;
  max-width: 980px;
  margin-inline: auto;
}
@media (min-width: 780px) {
  .gift-grid { grid-template-columns: 1fr 1fr; }
}
.gift-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gift-card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.gift-card h3 { margin-bottom: 0; }
.gift-card p { color: var(--ink-soft); margin-bottom: 0; }
.gift-card .btn-text { margin-top: auto; align-self: flex-start; padding-top: var(--space-2); }
.gift-photo { aspect-ratio: 16 / 10; overflow: hidden; }
.gift-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gift-card--simple .gift-card-body, .gift-card--featured .gift-card-body { justify-content: center; padding: var(--space-5) var(--space-4); }
.gift-card--featured { border-color: var(--sage-dark); border-width: 2px; }
.gift-card--simple { border-color: var(--terracotta); border-width: 2px; }
.btn-primary--terracotta {
  background: linear-gradient(135deg, var(--terracotta-mid), var(--terracotta-dark));
  color: var(--paper);
  box-shadow: 0 10px 24px -14px rgba(42, 36, 30, 0.55);
}
.btn-primary--terracotta:hover {
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-mid));
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(42, 36, 30, 0.4);
}
.gift-note {
  text-align: center;
  max-width: 560px;
  margin: var(--space-4) auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem);
  color: var(--brown);
}

/* --------------------------- Cinco elementos --------------------------- */
.elements-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-2);
  margin-block: var(--space-5);
}
.element-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
  max-width: 150px;
  padding-inline: var(--space-3);
}
@media (min-width: 700px) {
  .element-item { border-left: 1px solid var(--line); }
  .element-item:first-child { border-left: none; }
}
.element-mark {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.element-item span { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink-soft); }
.element-item small { color: var(--ink-faint); font-size: 0.85rem; }

/* Variante dinámica: insignias circulares con degradado */
.elements-row--badge { gap: var(--space-4) var(--space-3); }
.elements-row--badge .element-item { border-left: none !important; transition: transform var(--dur-s) var(--ease); }
.elements-row--badge .element-item:hover { transform: translateY(-4px); }
.elements-row--badge .element-mark {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sage-light), var(--sage-grad-mid));
  box-shadow: 0 12px 22px -12px rgba(42,36,30,0.4);
  transition: box-shadow var(--dur-s) var(--ease);
}
.elements-row--badge .element-item:hover .element-mark { box-shadow: 0 18px 30px -14px rgba(42,36,30,0.5); }
.elements-row--badge .element-mark svg * { stroke: var(--paper); }
.elements-row--badge .element-item:nth-child(3n+2) .element-mark { background: linear-gradient(135deg, var(--sage-grad-mid), var(--sage-dark)); }
.elements-row--badge .element-item:nth-child(3n+3) .element-mark { background: linear-gradient(135deg, var(--sage-dark), var(--sage-darker)); }

/* --------------------------- Listas de casos / puntos --------------------------- */
.check-list {
  display: grid;
  gap: var(--space-2);
  max-width: var(--container-narrow);
  margin-inline: auto;
}
@media (min-width: 720px) { .check-list { grid-template-columns: 1fr 1fr; gap: var(--space-3); } }
.check-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: var(--space-3);
  background: var(--paper);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-soft);
}
.check-item .mark {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--tan);
  margin-top: 0.15rem;
}
.check-item p { color: var(--ink-soft); font-size: 0.98rem; }

/* --------------------------- Callout / posparto --------------------------- */
.callout {
  max-width: 880px;
  margin-inline: auto;
  background: var(--sage-tint);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}
.callout h3 { max-width: 30ch; }
.callout p { color: var(--ink-soft); max-width: 60ch; }
.callout--brown { background: var(--tan-tint); }

/* --------------------------- CTA banda --------------------------- */
.cta-band {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.cta-band h2 { margin-bottom: var(--space-4); }

/* --------------------------- Cómo trabajo (sesiones) --------------------------- */
.method-list {
  display: grid;
  gap: var(--space-3);
  max-width: 900px;
  margin-inline: auto;
}
@media (min-width: 760px) { .method-list { grid-template-columns: repeat(5, 1fr); } }
.method-item {
  text-align: center;
  padding: var(--space-3) var(--space-2);
}
.method-item .num { font-family: var(--font-display); font-style: italic; color: var(--tan); font-size: 1.3rem; }
.method-item h4 { margin-top: 0.5rem; font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }

/* --------------------------- RenaSer: comparación cálida --------------------------- */
.renaser-tracks {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 860px) { .renaser-tracks { grid-template-columns: 1fr 1fr; } }
.track-card {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  background: var(--paper);
  border: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.track-card .track-tag {
  align-self: flex-start;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tan-dark);
  background: var(--tan-tint);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
}
.track-card--full .track-tag { background: var(--sage-tint); color: #4d5c42; }
.track-card ul { margin-top: var(--space-2); display: grid; gap: 0.65rem; }
.track-card ul li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  color: var(--ink-soft); font-size: 0.98rem;
}
.track-card ul li::before {
  content: "";
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tan);
  margin-top: 0.6em;
}
.track-card .meta { display: flex; gap: var(--space-3); color: var(--ink-faint); font-size: 0.9rem; margin-top: 0.3rem; }

.note-panel {
  max-width: 880px;
  margin-inline: auto;
  background: var(--ink);
  color: var(--ivory-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}
.note-panel h3 { color: var(--ivory-soft); margin-bottom: var(--space-3); }
.note-panel p { color: rgba(247,242,232,0.82); margin-inline: auto; }
.note-panel .note-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(247,242,232,0.18);
}
.note-facts div { text-align: center; }
.note-facts strong { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--sand); }
.note-facts span { font-size: 0.85rem; color: rgba(247,242,232,0.7); }

/* --------------------------- Pricing cards RenaSer --------------------------- */
.pricing-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 860px) { .pricing-grid { grid-template-columns: 1fr 1fr; } }
.price-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--sage-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
}
.price-card--featured { border-top-color: var(--terracotta); }
.price-card .track-tag { align-self: flex-start; font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--sage-dark); background: rgba(92, 107, 94, 0.12); padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); margin-bottom: var(--space-3); }
.price-card--featured .track-tag { color: var(--terracotta-dark); background: var(--terracotta-line-soft); }
.price-value { font-family: var(--font-display); font-size: 1.75rem; margin-block: var(--space-2) var(--space-3); }
.price-value sup { font-size: 1rem; font-family: var(--font-body); color: var(--ink-faint); font-weight: 500; }
.price-card ul { display: grid; gap: 0.65rem; margin-block: var(--space-3) var(--space-4); }
.price-card ul li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.97rem; color: var(--ink-soft); }
.price-card ul li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--sage-dark); margin-top: 0.6em; }
.price-card--featured ul li::before { background: var(--terracotta); border: none; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
/* Los botones de pago son siempre idénticos entre planes: solo cambian los acentos de la tarjeta */
.price-card--featured .btn-primary {
  background: linear-gradient(135deg, var(--sage-grad-mid), var(--sage-darker));
  color: var(--paper);
  box-shadow: 0 10px 24px -14px rgba(42, 36, 30, 0.55);
}
.price-card--featured .btn-primary:hover {
  background: linear-gradient(135deg, var(--sage-light), var(--sage-grad-mid));
  color: var(--ink);
  box-shadow: 0 14px 28px -14px rgba(42, 36, 30, 0.4);
}
.price-note { font-size: 0.82rem; color: var(--ink-faint); margin-top: var(--space-2); }

/* --------------------------- Testimonios --------------------------- */
.testimonial-wrap { position: relative; }
.testimonial-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
  scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card {
  scroll-snap-align: start;
  flex: 0 0 min(560px, 88vw);
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  border: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.testimonial-card blockquote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink);
}
.testimonial-card cite {
  font-style: normal;
  color: var(--ink-faint);
  font-size: 0.88rem;
  font-weight: 600;
}
.testimonial-quotemark { font-family: var(--font-display); font-style: italic; font-size: 2.4rem; color: var(--tan); line-height: 1; }
.testimonial-controls {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.testimonial-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line);
  transition: background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.testimonial-dot.is-active { background: var(--tan); transform: scale(1.2); }
.testimonial-nav {
  display: none;
}
@media (min-width: 860px) {
  .testimonial-nav {
    display: flex;
    position: absolute;
    top: 40%;
    left: -18px; right: -18px;
    justify-content: space-between;
    pointer-events: none;
  }
  .testimonial-nav button {
    pointer-events: auto;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-s) var(--ease);
  }
  .testimonial-nav button:hover { background: var(--ivory-deep); }
}

/* --------------------------- Para quién / razones --------------------------- */
.reasons-list {
  display: grid;
  gap: var(--space-2);
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.reasons-list li {
  display: flex; gap: 1rem; align-items: flex-start;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}
.reasons-list li:last-child { border-bottom: none; }
.reasons-list .mark {
  flex-shrink: 0; margin-top: 0.5em;
  width: 20px; height: 20px;
}

/* --------------------------- Sobre mí --------------------------- */
.about-hero {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .about-hero { grid-template-columns: 1fr 1.05fr; gap: var(--space-6); }
}
.photo-frame {
  position: relative;
  border-radius: var(--radius-organic);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ivory-deep);
  border: 1px solid var(--line);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: var(--space-3);
  background: linear-gradient(160deg, var(--ivory-deep), var(--sand-tint));
  color: var(--ink-faint);
}
.photo-placeholder strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-soft); }
.photo-placeholder span { font-size: 0.82rem; max-width: 30ch; }
.about-copy p { color: var(--ink-soft); margin-bottom: var(--space-3); }

.origin-block {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: var(--space-4);
}
.origin-block p { margin-inline: auto; color: var(--ink-soft); }

/* Frases editoriales con el tratamiento tipográfico de "Andara" (script) */
.editorial-script-quote {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
  line-height: 1.25;
  color: var(--sage-dark);
  max-width: 26ch;
  margin-inline: auto;
}
.origin-block .editorial-script-quote,
.about-hero .editorial-script-quote {
  color: var(--sage-dark);
}
.editorial-script-quote--green { color: var(--sage-dark); }
.editorial-script-quote--terracotta,
.origin-block .editorial-script-quote--terracotta,
.about-hero .editorial-script-quote--terracotta {
  color: var(--terracotta);
}
.about-hero .editorial-script-quote {
  text-align: left;
  margin-inline: 0;
}

/* Fotografía con recorte orgánico (menos agresivo que un óvalo estrecho) */
.organic-photo {
  aspect-ratio: 1;
  border-radius: var(--radius-organic);
  overflow: hidden;
  max-width: 480px;
  margin-inline: auto;
}
.organic-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Espiral verde bajo la frase "El viaje..." */
.origin-spiral {
  display: block;
  width: 64px;
  height: auto;
  margin: 0 auto;
}

/* --------------------------- Contacto --------------------------- */
.contact-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 780px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-card {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact-card--whatsapp { background: var(--sage-tint); }
.contact-card--instagram { background: var(--sand-tint); }
.contact-card .icon-mark {
  width: 48px; height: 48px;
}
.contact-card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.contact-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-card-media--tall { aspect-ratio: 4 / 3; }
.contact-card-media--brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--sand-tint);
}
.contact-card-media--brand .brand-mark-photo-wrap { display: flex; }
.contact-card-media--brand .brand-mark-photo { height: 64px; width: auto; }
.contact-card-brandword { font-size: 2.4rem; color: var(--sage-deep); }
.contact-card-subheading {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.social-links-row {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}
.social-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
  transition: color var(--dur-s) var(--ease);
}
.social-link:hover, .social-link:focus-visible { color: var(--terracotta-dark); }
.social-icon { flex-shrink: 0; }
.btn--compact { padding: 0.7rem 1.5rem; font-size: 0.9rem; }

/* Contacto — composición editorial Sesiones / Conecta con Andara */
.contact-columns {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 780px) {
  .contact-columns { grid-template-columns: 1.2fr 1fr; align-items: center; }
}
.contact-col--sessions {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.contact-col-media {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.contact-col-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-col--sessions .btn { align-self: center; }
.contact-col--social {
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.social-list { display: grid; }
.social-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: gap var(--dur-s) var(--ease);
}
.social-row:last-child { border-bottom: none; }
.social-row:hover, .social-row:focus-visible { gap: calc(var(--space-3) + 6px); }
.social-row-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(92, 107, 94, 0.1);
  color: var(--sage-dark);
}
.social-row-body { flex: 1; display: flex; flex-direction: column; }
.social-row-body strong { font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; color: var(--ink); }
.social-row-body span { font-size: 0.85rem; color: var(--ink-faint); }
.social-row-arrow { flex-shrink: 0; color: var(--terracotta); font-size: 1.1rem; }

.quicklinks-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 780px) { .quicklinks-grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------- Footer --------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(247, 242, 232, 0.82);
  padding-block: var(--space-6) var(--space-4);
}
.footer-grid {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
@media (min-width: 780px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
.footer-brand .brand { color: var(--ivory-soft); margin-bottom: var(--space-2); }
.footer-brand p { color: rgba(247, 242, 232, 0.65); max-width: 34ch; }
.footer-heading { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,242,232,0.5); margin-bottom: var(--space-2); font-weight: 600; }
.footer-links { display: grid; gap: 0.7rem; }
.footer-links a { color: rgba(247, 242, 232, 0.82); transition: color var(--dur-s) var(--ease); }
.footer-links a:hover { color: var(--sand); }
.footer-bottom {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(247, 242, 232, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(247, 242, 232, 0.55);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-legal a:hover { color: var(--sand); }

/* ============================================================
   COMPOSICIONES EDITORIALES — dinamismo por composición (2026)
   ============================================================ */

/* Hero de dos columnas: texto + fotografía editorial (sin tarjeta pesada) */
.hero-split {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-split { grid-template-columns: 1.35fr 1fr; gap: var(--space-6); }
}
.page-hero .container.hero-split,
.page-hero .container.talleres-hero { max-width: var(--container); text-align: left; }
.hero-split-copy { text-align: left; }
.hero-split-copy p { margin-inline: 0; text-align: left; }
.hero-split-copy .btn-row { justify-content: flex-start; }
.talleres-hero-copy { text-align: left; }
.talleres-hero-copy p { margin-inline: 0; text-align: left; }
.hero-split-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  max-width: 360px;
  margin-inline: auto;
}
.hero-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) {
  .hero-split-media { max-width: none; }
}

/* RenaSer: la fotografía gana protagonismo (45% texto / 55% foto) y se acerca al borde */
@media (min-width: 900px) {
  .hero-split--wide-media { grid-template-columns: 0.85fr 1fr; padding-right: 0; }
}

/* Composición editorial: imagen / texto / imagen-vídeo, con asimetría controlada */
.editorial-triptych {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 960px) {
  .editorial-triptych { grid-template-columns: 0.8fr 1.1fr 0.8fr; gap: var(--space-5); }
  .editorial-triptych .editorial-media--left { margin-top: -2.4rem; }
  .editorial-triptych .editorial-media--right { margin-top: 2.4rem; }
}
.editorial-media { overflow: hidden; border-radius: var(--radius-md); }
.editorial-media img, .editorial-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial-copy { text-align: center; padding-inline: var(--space-2); }
.editorial-copy .pull-quote { padding-block: 0 var(--space-2); }
@media (max-width: 959px) {
  .editorial-triptych .editorial-copy { order: -1; margin-bottom: var(--space-2); }
  .editorial-triptych .editorial-media--left { max-width: 68%; margin-inline: 0 auto; }
  .editorial-triptych .editorial-media--right { max-width: 68%; margin: var(--space-4) 0 0 auto; }
}

/* Sobre mí — recorrido, en formato escaneable (no currículum) */
.journey-line {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line);
}
.journey-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.journey-item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
}

/* RenaSer — Cada proceso tiene su propio ritmo: vídeo + texto en dos columnas */
.ritmo-split {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
}
@media (min-width: 900px) {
  .ritmo-split { grid-template-columns: 1.2fr 1fr; gap: var(--space-6); text-align: left; }
}
.ritmo-media {
  aspect-ratio: 9 / 16;
  max-width: 340px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.ritmo-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ritmo-copy .pull-quote { margin-inline: auto; }
.ritmo-copy p:not(.pull-quote) { color: var(--ink-soft); max-width: 42ch; margin-inline: auto; }
@media (min-width: 900px) {
  .ritmo-copy .pull-quote { margin-inline: 0; text-align: left; }
  .ritmo-copy p:not(.pull-quote) { margin-inline: 0; }
}

/* Talleres — hero asimétrico con cita superpuesta */
.talleres-hero {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .talleres-hero { grid-template-columns: 0.7fr 1fr; gap: var(--space-6); }
  .talleres-hero-media { margin-right: calc(var(--edge) * -1); }
}
.talleres-hero-media {
  position: relative;
  aspect-ratio: 4 / 3;
}
.talleres-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}
.talleres-hero-quote {
  position: absolute;
  right: var(--space-3);
  bottom: -1.1rem;
  max-width: 210px;
  background: var(--paper);
  border-radius: var(--radius-md);
  border-top: 2px solid var(--terracotta);
  padding: var(--space-3);
  box-shadow: 0 14px 30px -18px rgba(42,36,30,0.35);
}
.talleres-hero-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.talleres-hero-quote cite {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
@media (max-width: 899px) {
  .talleres-hero-quote { right: var(--space-2); bottom: -0.9rem; max-width: 180px; padding: var(--space-2); }
}

/* Sesiones — categorías editoriales (¿Qué podemos trabajar?) */
.categories-editorial {
  display: grid;
  gap: var(--space-4) var(--space-5);
  max-width: 980px;
  margin-inline: auto;
}
@media (min-width: 700px) {
  .categories-editorial { grid-template-columns: repeat(6, 1fr); }
  .categories-editorial .category-item:nth-child(1) { grid-column: span 3; }
  .categories-editorial .category-item:nth-child(2) { grid-column: span 3; }
  .categories-editorial .category-item:nth-child(3) { grid-column: span 2; }
  .categories-editorial .category-item:nth-child(4) { grid-column: span 2; }
  .categories-editorial .category-item:nth-child(5) { grid-column: span 2; }
  .categories-editorial .category-item:nth-child(6) { grid-column: span 6; }
}
.category-item { border-top: 1px solid var(--line); padding-top: var(--space-2); }
.category-item .category-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
  margin-bottom: 0.5rem;
}
.category-item p { color: var(--ink-soft); }

/* Sesiones — ¿Qué podemos trabajar? (tres áreas, sin orden de fases) */
.work-areas {
  display: grid;
  gap: var(--space-4);
  max-width: 980px;
  margin-inline: auto;
}
@media (min-width: 780px) { .work-areas { grid-template-columns: repeat(3, 1fr); } }
.work-areas--two { max-width: 700px; }
@media (min-width: 780px) { .work-areas--two { grid-template-columns: repeat(2, 1fr); } }
.work-area {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--terracotta);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.work-area h3 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sage-dark);
}
.work-area p { color: var(--ink-soft); font-size: 0.95rem; }
.work-area-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* Sesiones — ¿Hacia dónde podemos trabajar? */
.outcomes-row {
  display: grid;
  gap: var(--space-4);
  max-width: 900px;
  margin-inline: auto;
}
@media (min-width: 700px) { .outcomes-row { grid-template-columns: repeat(3, 1fr); } }
.outcome-item { text-align: center; }
.outcome-item .outcome-word {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--sage-dark);
  margin-bottom: 0.5rem;
}
.outcome-item p { color: var(--ink-soft); font-size: 0.95rem; }

/* Sesiones — Cómo trabajo: line art conectado */
.connected-elements { position: relative; padding-block: var(--space-2); }
.connected-elements .connector-line {
  position: absolute;
  top: 8%;
  left: 0;
  width: 100%;
  height: 84%;
  z-index: 0;
  opacity: 0.5;
}
.connected-elements .elements-row { position: relative; z-index: 1; }
.connected-elements .element-item { border-left: none !important; }

/* Sesiones — Cómo funciona: datos claros */
.facts-row {
  display: grid;
  gap: var(--space-4);
  max-width: 780px;
  margin: 0 auto var(--space-4);
  text-align: center;
}
@media (min-width: 700px) { .facts-row { grid-template-columns: repeat(3, 1fr); } }
.facts-row .fact-label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--sage-dark);
  margin-bottom: 0.3rem;
}
.facts-row .fact-desc { font-size: 0.85rem; color: var(--ink-faint); }

/* Sesiones — Te puede interesar: navegación editorial */
.editorial-nav-list { max-width: 640px; margin-inline: auto; }
.editorial-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  transition: gap var(--dur-s) var(--ease);
}
.editorial-nav-item:hover, .editorial-nav-item:focus-visible { gap: calc(var(--space-3) + 6px); }
.editorial-nav-item:last-child { border-bottom: none; }
.editorial-nav-thumb {
  flex-shrink: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.editorial-nav-thumb img { width: 100%; height: 100%; object-fit: cover; }
.editorial-nav-body { flex: 1; }
.editorial-nav-body h3 { font-size: 1.05rem; margin-bottom: 0.15rem; }
.editorial-nav-body p { color: var(--ink-soft); font-size: 0.9rem; }
.editorial-nav-arrow { flex-shrink: 0; color: var(--ink-faint); }

/* --------------------------- Anclas bajo cabecera fija --------------------------- */
[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

/* --------------------------- Utilidades --------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.stack { display: grid; gap: var(--space-3); }
.narrow { max-width: var(--container-narrow); margin-inline: auto; }

/* --------------------------- Placeholder de datos editables --------------------------- */
[data-cfg-href], [data-cfg-text] { }