/* Boceto A · "Raíz & Tierra" — botánico sobrio con acentos oro */

:root {
  --forest: #1f3a2f;
  --forest-deep: #16281f;
  --sage: #6f8a70;
  --sand: #f2ede1;
  --sand-2: #e9e1cf;
  --cream: #faf7ef;
  --gold: #b08d4f;
  --gold-soft: #c9a86a;
  --ink: #263029;
  --muted: #5c6a5e;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  --maxw: 1140px;
  --radius: 4px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5.25rem; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* height:auto deja que manden los aspect-ratio del CSS y no los atributos del HTML */
img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(100% - 3rem, var(--maxw)); margin-inline: auto; }
.narrow { max-width: 760px; }
.center { text-align: center; margin-inline: auto; }

/* Tipografía */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.1; color: var(--forest); margin: 0; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: 0.5px; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold);
  margin: 0 0 0.9rem;
}

.lede { font-size: 1.2rem; color: var(--muted); max-width: 38ch; }
.lugar {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--sage);
}
.big { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--forest); font-style: italic; }
.note { font-size: 0.9rem; color: var(--muted); font-style: italic; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
  padding: 1.25rem 0;
}
.site-header.is-scrolled {
  background: rgba(250, 247, 239, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(31,58,47,0.08);
  padding: 0.7rem 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.brand {
  font-family: var(--serif); font-size: 1.35rem; color: var(--forest);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; letter-spacing: 0.5px;
}
.brand-mark { width: 26px; height: 26px; color: var(--gold); flex: none; }
.nav { display: flex; gap: 1.6rem; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; font-size: 0.9rem; letter-spacing: 0.02em; transition: color .2s; }
.nav a:hover { color: var(--gold); }
.nav a.is-current { color: var(--gold); }
.nav-cta { border: 1px solid var(--gold); border-radius: 999px; padding: 0.45rem 1.1rem; color: var(--gold) !important; }
.nav-cta:hover { background: var(--gold); color: #fff !important; }

/* Botón de menú · sólo visible en pantallas chicas */
.nav-toggle {
  display: none; background: none; border: 1px solid rgba(111,138,112,0.4); border-radius: 999px;
  color: var(--forest); width: 42px; height: 42px; padding: 0; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle-cerrar { display: none; }
.nav[data-nav].is-open ~ .nav-toggle .nav-toggle-abrir { display: none; }
.nav[data-nav].is-open ~ .nav-toggle .nav-toggle-cerrar { display: block; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; font-size: 0.95rem; letter-spacing: 0.02em;
  padding: 0.85rem 1.7rem; border-radius: 999px; transition: all .25s ease; cursor: pointer;
}
.btn-ico { width: 19px; height: 19px; flex: none; }
.btn-primary { background: var(--forest); color: var(--cream); border: 1px solid var(--forest); }
.btn-primary:hover { background: var(--forest-deep); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22,40,31,0.25); }
.btn-ghost { border: 1px solid var(--sage); color: var(--forest); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.center-actions { justify-content: center; }

/* HERO */
.hero { position: relative; padding: 3rem 0 5rem; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1.05fr 0.8fr; gap: 3.5rem; align-items: center; }
/* Rama que crece detrás del retrato y asoma por el margen derecho */
.hero-botanic { position: absolute; top: 0; right: 0; height: 100%; width: 240px; color: var(--sage); opacity: 0.45; pointer-events: none; }
.hero-botanic svg { height: 100%; width: 100%; }
.hero-media { position: relative; }
/* Arco: remite a un portal, y suaviza el recorte de la foto */
.hero-media img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; position: relative; z-index: 2;
  border-radius: 220px 220px 8px 8px; box-shadow: 0 30px 60px rgba(22,40,31,0.18);
}

/* ── Atmósfera: humo de sahumerio y chispas ──────────────────────────────
   Dos capas decorativas del hero. Ninguna recibe clics y las dos desaparecen
   si el sistema pide menos movimiento: una chispa congelada a media luz
   parece un error, no un adorno. */

/* El humo nace de la vela de la foto. Las coordenadas son las de la vela ya
   recortada por object-fit; si algún día cambia la foto del hero, hay que
   volver a medirlas o el humo sale de la nada. */
.humo {
  position: absolute; left: 39%; bottom: 11%;
  width: 20%; height: 38%;
  transform: translateX(-50%);
  z-index: 3; pointer-events: none;
  /* screen porque el humo arranca sobre el interior oscuro del cuenco: ahí
     aclara y se ve. Más arriba la foto se vuelve luminosa y el humo se apaga
     solo, que es justo lo que hace el humo real contra un fondo claro. */
  mix-blend-mode: screen;
}
.humo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.humo-hilo {
  fill: none; stroke: #fdf7ea; stroke-width: 5; stroke-linecap: round;
  filter: blur(3.5px); opacity: 0;
  transform-origin: 50% 100%;
  animation: humo-subir 11s ease-in-out infinite;
}
/* Duraciones distintas y desfasadas para que los tres hilos no vayan a la par */
.humo-hilo:nth-child(2) { animation-duration: 14s;   animation-delay: -5s; stroke-width: 3.6; }
.humo-hilo:nth-child(3) { animation-duration: 9.5s;  animation-delay: -8s; stroke-width: 2.6; }

/* La opacidad va cargada al principio: el hilo tiene cuerpo cuando todavía
   está sobre la zona oscura y se deshace al subir. */
@keyframes humo-subir {
  0%   { opacity: 0;    transform: translateY(20%)  scale(0.5, 0.45) skewX(0deg); }
  12%  { opacity: 0.8; }
  40%  { opacity: 0.46; transform: translateY(-22%) scale(1, 1.05)   skewX(7deg); }
  100% { opacity: 0;    transform: translateY(-62%) scale(1.45, 1.3) skewX(-6deg); }
}

.chispas { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.chispa {
  position: absolute; width: 20px; height: 20px;
  color: var(--gold); opacity: 0;
  /* Sin el halo, a este tamaño el destello se lee como un signo "+"
     tipográfico en lugar de una luz. */
  filter: drop-shadow(0 0 7px rgba(201,168,106,0.85));
  animation: chispa-titilar 7s ease-in-out infinite;
}
/* Cada una brilla sólo durante el primer quinto del ciclo; el resto del
   tiempo está apagada. Eso es lo que evita el efecto purpurina. */
@keyframes chispa-titilar {
  0%   { opacity: 0;    transform: scale(0.3) rotate(-25deg); }
  8%   { opacity: 0.85; transform: scale(1)   rotate(0deg); }
  20%  { opacity: 0;    transform: scale(0.5) rotate(22deg); }
  100% { opacity: 0;    transform: scale(0.3) rotate(-25deg); }
}
/* Van en el aire alrededor de la foto, nunca encima: sobre la foto el dorado
   no tiene contra qué contrastar y el destello se pierde. Tampoco sobre el
   titular ni los botones, donde parecería un error de maquetación.
   Así queda repartido: el humo dentro de la escena, las chispas fuera. */
.chispa:nth-child(1) { left: 6%;  top: 24%; animation-delay: 0.4s; }
.chispa:nth-child(2) { left: 41%; top: 11%; animation-delay: 2.9s; width: 15px; height: 15px; }
.chispa:nth-child(3) { left: 93%; top: 28%; animation-delay: 4.6s; width: 17px; height: 17px; }
.chispa:nth-child(4) { left: 70%; top: 92%; animation-delay: 6.1s; }
.chispa:nth-child(5) { left: 17%; top: 76%; animation-delay: 8.3s; width: 14px; height: 14px; }

/* Energía de las manos · sección Enfoque.
   Centrada sobre el hueco entre las manos, medida sobre el recorte apaisado.
   El ancho del marco puede cambiar sin tocar nada, pero si cambia la proporción
   o el `object-position` de la foto, hay que volver a medir estas dos cifras. */
.energia {
  position: absolute; left: 58%; top: 55%;
  width: 56%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 2; pointer-events: none;
  mix-blend-mode: screen;
}
.energia span { position: absolute; border-radius: 50%; }

/* Ámbar y no blanco: sobre el vestido claro, un centro muy blanco con screen
   se lava y parece una bombilla en vez de una luz cálida. */
.energia-nucleo {
  inset: 28%;
  background: radial-gradient(circle, rgba(255,224,152,0.72), rgba(250,198,110,0.32) 48%, rgba(250,198,110,0) 74%);
  filter: blur(10px);
  animation: energia-respirar 5.5s ease-in-out infinite;
}
/* El mínimo no baja a cero: si no, media respiración queda en nada. */
@keyframes energia-respirar {
  0%, 100% { opacity: 0.44; transform: scale(0.84); }
  50%      { opacity: 0.85; transform: scale(1.12); }
}

/* Anillos difusos y no trazos nítidos: un círculo de borde duro expandiéndose
   se lee como un indicador de interfaz cargando, no como energía. */
.energia-onda {
  inset: 0;
  background: radial-gradient(circle, rgba(255,226,168,0) 46%, rgba(255,226,168,0.72) 66%, rgba(255,226,168,0) 86%);
  filter: blur(4px); opacity: 0;
  animation: energia-irradiar 7.5s ease-out infinite;
}
.energia-onda:nth-child(3) { animation-delay: 2.5s; }
.energia-onda:nth-child(4) { animation-delay: 5s; }
@keyframes energia-irradiar {
  0%   { opacity: 0;    transform: scale(0.28); }
  18%  { opacity: 0.78; }
  100% { opacity: 0;    transform: scale(1.08); }
}

/* En móvil el hero se apila y queda muy alto, así que las chispas ubicadas
   por porcentaje caen sobre el titular o los botones, y ahí parecen un error.
   Se podrían reubicar, pero cualquier cambio de texto las volvería a
   descolocar: mejor dejarlas fuera y conservar el humo, que va anclado a la
   foto y no puede desalinearse. De paso, una animación menos en el teléfono. */
@media (max-width: 860px) {
  .chispas { display: none; }
}

/* Fuera de pantalla no tiene sentido seguir animando: consume batería sin
   que nadie lo vea. La clase la pone reveal.js. */
.fuera-de-vista .humo-hilo,
.fuera-de-vista .chispa,
.fuera-de-vista .energia span,
.fuera-de-vista .mota,
.fuera-de-vista .corazon-luz,
.fuera-de-vista .corazon-chispa { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .humo, .chispas, .energia, .motas, .corazon { display: none; }
}

/* Tratamiento de fotos · natural cálido */
.photo { filter: saturate(1.04) contrast(1.02); }
.halo {
  position: absolute; inset: -8% -8% -8% -8%; z-index: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(201,168,106,0.35), rgba(201,168,106,0) 62%);
  filter: blur(6px);
}

/* Secciones */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-head { margin-bottom: 3rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.sobre { background: var(--sand); }
/* Recorte en forma de hoja (el clipPath vive en el HTML, #recorte-hoja).
   La sombra va en el contenedor y no en la foto: box-shadow sobre un elemento
   recortado dibujaría el rectángulo original, mientras que drop-shadow sigue
   el contorno real. */
.sobre-media { position: relative; filter: drop-shadow(0 22px 40px rgba(22,40,31,0.22)); }
.sobre-media img {
  display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
  clip-path: url(#recorte-hoja);
}

/* Motas de polvo · sección "¿Quién soy?".
   La foto ya tiene un foco cálido entrando por arriba a la izquierda entre el
   follaje; las motas son el polvo suspendido en ese haz, así que se concentran
   de ese lado y no repartidas por igual. Llevan el mismo recorte de hoja que la
   foto: sueltas por fuera del contorno delatarían que son una capa encima. */
.motas {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  clip-path: url(#recorte-hoja);
  mix-blend-mode: screen;
}
.mota {
  position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,248,228,1), rgba(255,234,184,0.45) 42%, rgba(255,232,178,0) 72%);
  animation: mota-flotar 18s linear infinite;
}
/* Suben despacio y con una deriva lateral mínima. Nunca llegan a opacidad
   plena: una mota nítida parece suciedad en la pantalla, no polvo en el aire. */
@keyframes mota-flotar {
  0%   { opacity: 0;    transform: translate(0, 0) scale(0.7); }
  18%  { opacity: 0.85; }
  72%  { opacity: 0.6; }
  100% { opacity: 0;    transform: translate(13px, -84px) scale(1.15); }
}
/* Las posiciones no están repartidas parejo: van sobre las zonas oscuras de la
   foto —el follaje de la izquierda, el tapiz del fondo, la mesa al pie—, que es
   donde `screen` tiene contra qué iluminar. Sobre el vestido, que es claro, una
   mota no se ve por más que se le suba la opacidad.
   La proporción del marco (4/5) es la del archivo, así que no hay recorte y
   estos porcentajes son los mismos que en la foto original. */
.mota:nth-child(1) { left: 17%; top: 46%; width: 11px; height: 11px; animation-duration: 17s; animation-delay: -2s;  }
.mota:nth-child(2) { left: 24%; top: 64%; width: 8px;  height: 8px;  animation-duration: 23s; animation-delay: -9s;  }
.mota:nth-child(3) { left: 41%; top: 17%; width: 13px; height: 13px; animation-duration: 20s; animation-delay: -14s; }
.mota:nth-child(4) { left: 69%; top: 30%; width: 9px;  height: 9px;  animation-duration: 26s; animation-delay: -5s;  }
.mota:nth-child(5) { left: 12%; top: 72%; width: 12px; height: 12px; animation-duration: 19s; animation-delay: -17s; }
.mota:nth-child(6) { left: 76%; top: 44%; width: 7px;  height: 7px;  animation-duration: 15s; animation-delay: -11s; }
.mota:nth-child(7) { left: 55%; top: 24%; width: 9px;  height: 9px;  animation-duration: 22s; animation-delay: -7s;  }

/* Latido · sección "¿Quién soy?".
   Centrado donde ella apoya la mano en el pecho: 62% / 53% de la foto, medido
   sobre el archivo (el marco 4/5 es su proporción, así que no hay recorte).
   El ritmo es de latido y no de respiración —dos pulsos y una pausa larga— para
   que no repita la energía de "Enfoque", que late parejo. */
.corazon {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  clip-path: url(#recorte-hoja);
  mix-blend-mode: screen;
}
.corazon-luz {
  position: absolute; left: 62%; top: 53%;
  width: 30%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,226,190,0.82), rgba(255,200,152,0.3) 46%, rgba(255,200,152,0) 74%);
  filter: blur(9px);
  animation: corazon-latir 4.6s ease-in-out infinite;
}
/* El `translate` se repite en cada paso a propósito: la animación reemplaza el
   `transform` entero, así que si se declarara aparte el latido lo descartaría y
   el resplandor se correría del pecho. */
@keyframes corazon-latir {
  0%   { opacity: 0.40; transform: translate(-50%,-50%) scale(0.88); }
  8%   { opacity: 0.88; transform: translate(-50%,-50%) scale(1.08); }
  17%  { opacity: 0.52; transform: translate(-50%,-50%) scale(0.93); }
  25%  { opacity: 0.76; transform: translate(-50%,-50%) scale(1.03); }
  36%  { opacity: 0.42; transform: translate(-50%,-50%) scale(0.88); }
  100% { opacity: 0.40; transform: translate(-50%,-50%) scale(0.88); }
}

/* Tres destellos alrededor del pecho, cada uno encendido apenas un instante de
   un ciclo largo: casi nunca coinciden. */
.corazon-chispa {
  position: absolute; width: 13px; height: 13px;
  color: var(--gold); opacity: 0;
  filter: drop-shadow(0 0 6px rgba(201,168,106,0.85));
  animation: corazon-destello 9s ease-in-out infinite;
}
@keyframes corazon-destello {
  0%   { opacity: 0;    transform: scale(0.3) rotate(-20deg); }
  6%   { opacity: 0.9;  transform: scale(1)   rotate(0deg); }
  15%  { opacity: 0;    transform: scale(0.5) rotate(18deg); }
  100% { opacity: 0;    transform: scale(0.3) rotate(-20deg); }
}
/* Van en el follaje oscuro que rodea el hombro y el brazo, no sobre la tela:
   medida sobre el archivo, esa zona tiene luminancia 22–56 de 255, mientras que
   el vestido ronda 180–200. Con fusión `screen` el dorado sólo aparece sobre lo
   oscuro; puesto sobre la tela clara se anula por completo.
   Forman un arco que sube desde el pecho hacia la izquierda y la derecha. */
.corazon-chispa:nth-child(2) { left: 56%; top: 40%; animation-delay: 1.2s; }
.corazon-chispa:nth-child(3) { left: 72%; top: 50%; animation-delay: 4.4s; width: 10px; height: 10px; }
.corazon-chispa:nth-child(4) { left: 63%; top: 44%; animation-delay: 7.1s; width: 11px; height: 11px; }

/* Marco apaisado sobre un archivo vertical: se recorta bastante arriba y abajo,
   pero las manos son el motivo y quedan holgadas. El `object-position` corrido
   al 60% baja el encuadre para no perder la vela, que está en el tercio
   inferior; centrado se la comía.
   El redondeo y la sombra van acá y no en la foto porque el contenedor recorta
   (`overflow: hidden`): así el resplandor de la animación no puede desbordar
   fuera de la imagen. La sombra no se ve afectada, porque `overflow` recorta
   a los hijos y no la sombra del propio elemento. */
.enfoque-media {
  position: relative; margin: 0 auto 2.6rem; width: min(520px, 90%);
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 20px 44px rgba(22,40,31,0.16);
}
.enfoque-media img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 60%; }
.sobre-text p { color: var(--muted); }
.sobre-text h2 { margin-bottom: 1.2rem; }

.enfoque { background: linear-gradient(180deg, var(--cream), var(--sand-2)); }
.enfoque h2 { margin: 0 0 1.4rem; }
.enfoque .big { margin-bottom: 1.4rem; }
.enfoque p:last-child { color: var(--muted); }

/* Tarjetas */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card {
  background: var(--cream); border: 1px solid rgba(111,138,112,0.25); border-radius: var(--radius);
  padding: 2rem 1.8rem; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; position: relative;
}
.card-ico { width: 50px; height: 50px; color: var(--gold); transition: color .3s ease, transform .5s ease; }
.card h3 { margin: 1.1rem 0 0.7rem; }
.card p { color: var(--muted); font-size: 0.98rem; margin: 0; }
.card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(22,40,31,0.12); border-color: var(--gold-soft); }
.card:hover .card-ico { color: var(--forest); transform: scale(1.06); }
.card-wide { grid-column: span 3; text-align: center; background: var(--forest); border-color: var(--forest); }
.card-wide .card-ico { color: var(--gold-soft); }
.card-wide:hover .card-ico { color: var(--cream); }
.card-wide h3 { color: var(--cream); }
.card-wide p { color: rgba(250,247,239,0.82); max-width: 60ch; margin-inline: auto; }

/* Texturas de fondo por terapia. Las rutas están en assets/fondos.css; acá
   sólo se decide cuánto se ven. Son fotos claras sobre tarjeta crema, así que
   sin multiply quedarían invisibles: mezclando en multiply el verde y el ocre
   de las hierbas tiñen la tarjeta sin levantar el fondo del texto. */
.terapias .cards { --fondo-op: 0.55; --fondo-op-hover: 0.78; }
.card::before { mix-blend-mode: multiply; }

/* La tarjeta ancha es verde oscura y su textura (el libro) es casi negra:
   multiply no dejaría nada. Con screen sólo emerge la luz de las páginas. */
.card-wide { --fondo-op: 0.55; --fondo-op-hover: 0.72; }
.card-wide::before { mix-blend-mode: screen; }

/* Sin hover no hay forma de descubrirlas, así que en táctiles se muestran
   directamente en su estado intermedio. */
@media (hover: none) {
  .terapias .cards { --fondo-op: 0.5; }
  .card-wide { --fondo-op: 0.58; }
}

/* Ceremonias */
.ceremonias { background: var(--sand-2); }
.ceremonias-lead {
  max-width: 52ch;
  margin: 1.15rem auto 0;
  color: var(--muted);
}
.ceremonias-cards {
  grid-template-columns: 1fr 1fr;
  --fondo-op: 0.48;
  --fondo-op-hover: 0.72;
}
.card-span-2 { grid-column: span 2; text-align: center; }
.card-span-2 p { max-width: 62ch; margin-inline: auto; }

@media (hover: none) {
  .ceremonias-cards { --fondo-op: 0.46; }
}

/* Relatos */
.relatos { background: var(--forest); color: var(--cream); }
.relatos .eyebrow { color: var(--gold-soft); }
.relatos h2 { color: var(--cream); }
.relatos .note { color: rgba(250,247,239,0.6); }
.relatos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.relato {
  margin: 0; padding: 2rem; background: rgba(250,247,239,0.05); border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.relato-comilla { width: 30px; height: 25px; color: var(--gold); opacity: 0.55; margin-bottom: 0.6rem; }
.relato p { font-family: var(--serif); font-size: 1.15rem; font-style: italic; color: rgba(250,247,239,0.92); margin: 0 0 1rem; line-height: 1.5; }
.relato cite { font-family: var(--sans); font-style: normal; font-size: 0.85rem; letter-spacing: 0.1em; color: var(--gold-soft); }

/* Separador botánico entre secciones · el aspect-ratio 6/1 es el del viewBox */
.separador { display: block; width: min(240px, 55%); aspect-ratio: 6 / 1; color: var(--sage); opacity: 0.75; margin: 3.2rem auto 0; }
.separador-sup { margin: 0 auto 2.2rem; }

/* Contacto */
.contacto { background: linear-gradient(180deg, var(--sand-2), var(--sand)); }
.contacto p { color: var(--muted); }
.contacto .lugares {
  margin-top: 1.1rem;
  font-size: 1.02rem;
  color: var(--ink);
}
.contacto .lugares strong { font-weight: 500; color: var(--forest); white-space: nowrap; }

/* Footer */
.site-footer { background: var(--forest-deep); color: rgba(250,247,239,0.7); padding: 2rem 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; }

/* WhatsApp flotante */
.wa-float {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25); transition: transform .25s ease;
}
.wa-float svg { width: 26px; height: 26px; }
.wa-float:hover { transform: scale(1.08); }

/* Foco visible para navegación por teclado */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1180px) and (min-width: 901px) {
  .nav { gap: 1.05rem; }
  .nav a { font-size: 0.84rem; }
}
@media (max-width: 900px) {
  /* En móvil el contenido debe estar disponible desde el primer fotograma.
     Algunos navegadores demoran la primera notificación de IntersectionObserver
     y dejarían el hero transparente mientras tanto. */
  [data-reveal] { opacity: 1; transform: none; }

  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Apilado, la foto va arriba del texto. Si no, el retrato del hero queda
     pegado a la foto de "¿Quién soy?" —dos imágenes seguidas sin una línea de
     texto que las presente—. Con el orden invertido, el titular y los botones
     quedan entre las dos.
     Se invierte sólo la posición visual: en el HTML el texto sigue primero, que
     es el orden con el que conviene que lo lea un lector de pantalla. Como en
     la foto no hay nada enfocable, el recorrido con teclado tampoco se altera. */
  .hero-media { order: 1; max-width: 420px; margin-inline: auto; }
  .hero-text  { order: 2; }
  .hero-botanic { display: none; }
  .grid-2 { grid-template-columns: 1fr; gap: 2rem; }
  .cards { grid-template-columns: 1fr 1fr; }
  .card-wide { grid-column: span 2; }
  .relatos-grid { grid-template-columns: 1fr; }

  /* El menú pasa a un panel desplegable */
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; top: 100%; right: 1.5rem; left: 1.5rem;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border: 1px solid rgba(111,138,112,0.3); border-radius: 8px;
    box-shadow: 0 20px 44px rgba(22,40,31,0.16); padding: 0.5rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 0.85rem 1rem; border-radius: 4px; font-size: 1rem; }
  .nav a + a { border-top: 1px solid rgba(111,138,112,0.18); }
  .nav-cta { border: none; border-radius: 4px; text-align: left; padding: 0.85rem 1rem !important; }
  .nav-cta:hover { background: rgba(176,141,79,0.12); color: var(--gold) !important; }
  .header-inner { position: relative; }
  .site-header { padding: 1rem 0; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .card-wide, .card-span-2 { grid-column: span 1; }
  .card-span-2 { text-align: left; }
  .hero-actions .btn { justify-content: center; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}