@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   Ayahuasca México — hoja de estilo del sitio
   Sistema de marca "Raíz". Modo claro únicamente.
   Tokens tomados del design system (skill ayahuasca-mexico-design).
   ============================================================ */

:root {
  /* Marca */
  --green-900:#233B2C; --green-700:#2F4C39; --green-600:#3A5A45;
  --green-400:#5C7C64;  --green-200:#A9C1AB; --green-100:#DCE6DA;
  --violet-900:#2E1F42; --violet-700:#3D2A57; --violet-600:#4B3568;
  --violet-400:#7A628F; --violet-200:#CBBEDB; --violet-100:#E9E2F0;
  --bone-000:#FCFAF4; --bone-050:#F7F2E7; --bone-100:#F4EFE4;
  --bone-200:#EDE6D6; --bone-300:#DCD3C1; --bone-400:#C7BBA4;
  --ink-900:#201B16; --ink-700:#3A332A; --ink-500:#5C5347; --ink-300:#8A8071;
  --green-050:#EBF1E6; --green-025:#F3F7EF;
  --amber-600:#B8792E; --amber-100:#F3E1C3;
  --teal-600:#3E6E77; --teal-100:#D9E8EA;

  /* Semánticos */
  --bg-page:var(--green-050);
  --bg-surface:var(--bone-000);
  --bg-sunken:var(--green-025);
  --border-subtle:var(--bone-300);
  --border-default:var(--bone-400);
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-500);
  --text-muted:var(--ink-300);
  --accent:var(--green-600);
  --accent-hover:var(--green-700);
  --accent-2:var(--violet-600);

  /* Tipografía */
  --font-display:'Instrument Serif',Georgia,serif;
  --font-body:'Public Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --text-xs:0.8125rem; --text-sm:0.9375rem; --text-base:1.0625rem;
  --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:1.875rem;
  --text-3xl:2.5rem; --text-4xl:3.5rem; --text-5xl:4.75rem;
  --leading-tight:1.08; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.7;
  --tracking-tight:-0.01em; --tracking-wide:0.04em; --tracking-wider:0.12em;

  /* Espacio y forma */
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-xl:22px; --radius-pill:999px;
  --container:1180px;
  --pad-x:clamp(20px,4vw,56px);
  --shadow-sm:0 1px 2px rgba(32,27,22,.06);
  --shadow-md:0 2px 6px rgba(32,27,22,.06),0 8px 24px rgba(32,27,22,.08);
  --shadow-lg:0 6px 16px rgba(32,27,22,.08),0 24px 48px rgba(32,27,22,.12);
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:240ms;
}

*,*::before,*::after { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  background:var(--bg-page);
  color:var(--text-primary);
  /* Peso Medium en cuerpo: petición explícita de Guillermo (21 jul 2026) */
  font:500 var(--text-base)/var(--leading-relaxed) var(--font-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4 {
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-tight);
  margin:0;
}

p { margin:0; }

a { color:var(--accent-2); text-decoration:none; }
a:hover { color:var(--violet-700); text-decoration:underline; text-underline-offset:3px; }

img { max-width:100%; display:block; }

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

/* --- Layout ------------------------------------------------ */

.container { max-width:var(--container); margin:0 auto; padding-inline:var(--pad-x); }
.container--narrow { max-width:760px; }

/* El piso del clamp es el que se aplica en móvil (8vw a 390px son 31px, o sea
   que siempre gana el mínimo) y el techo el que se aplica en escritorio. Estaba
   en 56px contra 104px: el móvil recibía la mitad del respiro justo donde todo
   se apila en una columna y la separación vertical es la única señal de que una
   sección terminó. Medido: de 9 secciones, el respiro era el 7.9% de una página
   de 12,411px. El piso sube a 72px; el techo no se mueve porque en escritorio
   ya funciona. */
section { padding-block:clamp(72px,8vw,104px); }
section.tight { padding-block:clamp(52px,5vw,64px); }

/* Divisor entre secciones claras. La alternancia de fondos que ya existía da
   1.06:1 de contraste (page #EBF1E6 contra sunken #F3F7EF): en un teléfono a
   plena luz es el mismo color. Subir el fondo a --green-100 solo llega a
   1.11:1, así que la paleta clara no puede cargar el divisor sin oscurecer la
   marca. Un filete de 1px sí se ve, porque un borde duro se lee a mucho menos
   contraste que un área grande. Las oscuras no lo llevan: se separan solas. */
section + section { border-top:1px solid var(--border-subtle); }
section.oscura, section.cierre,
.oscura + section, .cierre + section { border-top:0; }
.band { background:var(--bg-sunken); }
.band-surface { background:var(--bg-surface); }

.stack { display:flex; flex-direction:column; }
.stack-2 { gap:8px; }  .stack-3 { gap:12px; }  .stack-4 { gap:16px; }
.stack-5 { gap:24px; } .stack-6 { gap:32px; }  .stack-7 { gap:48px; }

/* --- Tipografía de apoyo ----------------------------------- */

.eyebrow {
  font-family:var(--font-body);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:var(--tracking-wider);
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow--violet { color:var(--accent-2); }

.display-1 { font-size:clamp(2.5rem,5.5vw,var(--text-5xl)); }
.display-2 { font-size:clamp(2rem,4vw,var(--text-4xl)); }
.display-3 { font-size:clamp(1.75rem,3vw,var(--text-3xl)); }
.display-4 { font-size:var(--text-2xl); line-height:var(--leading-snug); }

.lead { font-size:var(--text-lg); color:var(--text-secondary); line-height:var(--leading-relaxed); }
.muted { color:var(--text-secondary); }
.small { font-size:var(--text-sm); color:var(--text-secondary); }
.xs { font-size:var(--text-xs); color:var(--text-muted); }
.measure { max-width:62ch; }
.measure-tight { max-width:46ch; }

.serif-quote {
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3vw,var(--text-3xl));
  line-height:var(--leading-snug);
  color:var(--text-primary);
}

/* --- Botones ------------------------------------------------ */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:600;
  padding:13px 24px; border-radius:var(--radius-md);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }

.btn--primary { background:var(--accent); color:var(--bone-000); }
.btn--primary:hover { background:var(--accent-hover); color:var(--bone-000); }

.btn--secondary { background:transparent; color:var(--text-primary); border-color:var(--border-default); }
.btn--secondary:hover { background:var(--bone-200); color:var(--text-primary); border-color:var(--ink-300); }

.btn--tertiary { background:transparent; color:var(--accent-2); padding-inline:4px; }
.btn--tertiary:hover { color:var(--violet-900); }

.btn--onDark { background:var(--bone-050); color:var(--green-900); }
.btn--onDark:hover { background:#fff; color:var(--green-900); }

/* Botón con borde sobre foto oscura. Al pasar el mouse se rellena y el texto
   pasa al verde primario: con el color en línea el hover dejaba texto claro
   sobre fondo claro. */
.btn--ghostDark { background:transparent; color:var(--bone-000); border-color:rgba(252,250,244,.45); }
.btn--ghostDark:hover { background:var(--bone-050); color:var(--accent); border-color:var(--bone-050); }

.btn--sm { padding:9px 16px; font-size:var(--text-xs); }

/* --- Badges -------------------------------------------------- */

.badge {
  display:inline-flex; align-items:center;
  font-size:var(--text-xs); font-weight:600; letter-spacing:var(--tracking-wide);
  padding:5px 12px; border-radius:var(--radius-pill);
  background:var(--green-100); color:var(--green-900);
  width:fit-content; white-space:nowrap;
}
.badge--violet { background:var(--violet-100); color:var(--violet-900); }
.badge--neutral { background:var(--bone-200); color:var(--ink-500); }
.badge--amber { background:var(--amber-100); color:#6B4A1C; }

/* --- Navegación ---------------------------------------------- */

.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(235,241,230,.86);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(58,90,69,.14);
}
.nav__inner {
  max-width:var(--container); margin:0 auto; padding:14px var(--pad-x);
  display:flex; align-items:center; gap:28px;
}
.nav__logo { display:flex; align-items:center; gap:10px; color:var(--text-primary); }
.nav__logo:hover { text-decoration:none; }
.nav__logo img { height:34px; width:auto; }
.nav__wordmark {
  font-family:var(--font-display); font-size:1.2rem; letter-spacing:var(--tracking-tight);
  line-height:1; white-space:nowrap;
}
.nav__links { display:flex; gap:26px; margin-left:auto; align-items:center; }
.nav__links a {
  font-size:var(--text-sm); font-weight:500; color:var(--text-secondary);
  transition:color var(--dur) var(--ease);
}
.nav__links a:hover { color:var(--text-primary); text-decoration:none; }
.nav__links a.is-active { color:var(--text-primary); font-weight:600; }
.nav__cta { margin-left:4px; white-space:nowrap; }

/* Botón de menú: solo existe en móvil. */
.nav__toggle {
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; margin-left:4px;
  background:transparent; border:0; cursor:pointer;
}
.nav__toggle span {
  display:block; height:2px; width:100%; border-radius:2px;
  background:var(--text-primary);
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav.is-open .nav__toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px) {
  .nav__inner { gap:12px; }
  .nav__toggle { display:flex; }
  .nav__cta { margin-left:auto; }

  /* Los enlaces bajan a un panel desplegable bajo la barra. */
  .nav__links {
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    margin-left:0; padding:8px var(--pad-x) 16px;
    background:var(--bone-050);
    border-bottom:1px solid rgba(58,90,69,.14);
    box-shadow:0 12px 24px rgba(31,46,36,.10);
  }
  .nav.is-open .nav__links { display:flex; }
  .nav__links a {
    padding:14px 4px; font-size:var(--text-base);
    border-bottom:1px solid var(--border-subtle);
  }
  .nav__links a:last-child { border-bottom:0; }
}

/* Pantallas muy angostas: el wordmark cede espacio antes que el CTA. */
@media (max-width:400px) {
  .nav__wordmark { display:none; }
}

/* --- Hero ---------------------------------------------------- */

.hero {
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,64px);
  align-items:center;
  padding-block:clamp(48px,7vw,96px);
}
@media (max-width:880px) { .hero { grid-template-columns:1fr; } }

.hero__meta {
  display:flex; flex-wrap:wrap; gap:8px 30px; align-items:center;
  font-size:var(--text-sm); color:var(--text-muted);
  padding-top:12px; border-top:1px solid var(--border-subtle);
}

/* --- Fotografía (placeholders mientras llegan las reales) ----- */

.photo {
  position:relative; overflow:hidden;
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  background:linear-gradient(160deg,var(--green-100),var(--bone-200));
  display:flex; align-items:center; justify-content:center;
  min-height:220px;
}
.photo--violet { background:linear-gradient(160deg,var(--violet-100),var(--bone-200)); }
.photo--flat { box-shadow:var(--shadow-md); border-radius:var(--radius-lg); }
/* Con aspect-ratio, un min-height fijo obliga un ancho mínimo (220px de alto
   en 16/9 son 391px de ancho) y desborda en móvil. La proporción manda. */
.photo--tall { aspect-ratio:4/5; min-height:0; }
.photo--wide { aspect-ratio:16/9; min-height:0; }
.photo--square { aspect-ratio:1/1; min-height:0; }
.photo__label {
  font-size:var(--text-xs); letter-spacing:var(--tracking-wide);
  color:var(--ink-300); text-align:center; padding:16px; max-width:26ch;
}

/* --- Encabezado de sección ------------------------------------ */

.section-head { display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(28px,4vw,48px); }
.section-head--split {
  flex-direction:row; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap;
}

/* --- Grid genérica -------------------------------------------- */

.grid { display:grid; gap:20px; }
.grid--2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid--4 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

/* En móvil esos mínimos superan el ancho disponible, sobre todo cuando la grid
   vive anidada dentro de una columna de .split. Se fijan a mano en vez de
   dejárselo a auto-fit, que con un mínimo porcentual llega a inventar columnas
   de 55px. */
@media (max-width:720px) {
  .grid--2, .grid--3 { grid-template-columns:1fr; }
  .grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:420px) {
  .grid--4 { grid-template-columns:1fr; }
}
/* Los ítems de grid traen min-width:auto y por eso no encogen bajo su contenido. */
.grid > *, .split > * { min-width:0; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }
.split--sidebar { grid-template-columns:.8fr 1.2fr; align-items:start; }
@media (max-width:880px) { .split, .split--sidebar { grid-template-columns:1fr; } }

/* El libro de Contenido: en escritorio la portada a la izquierda y el texto
   centrado a la derecha; en móvil el título va antes de la foto y la
   descripción después (Guillermo, 21 sep 2026). Las filas 1fr de arriba y
   abajo centran la cabeza y el cuerpo contra la foto. */
.libro {
  grid-template-areas:"foto ." "foto cabeza" "foto cuerpo" "foto .";
  grid-template-rows:1fr auto auto 1fr; row-gap:16px;
}
.libro__cabeza { grid-area:cabeza; }
.libro__foto { grid-area:foto; }
.libro__cuerpo { grid-area:cuerpo; }
@media (max-width:880px) {
  .libro { grid-template-areas:"cabeza" "foto" "cuerpo"; grid-template-rows:auto; row-gap:24px; }
}

/* --- Card ------------------------------------------------------ */

.card {
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:26px;
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:10px;
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card--link:hover { box-shadow:var(--shadow-md); border-color:var(--border-default); text-decoration:none; }
.card__eyebrow {
  font-size:var(--text-xs); font-weight:700; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--accent);
}
.card__title { font-family:var(--font-display); font-size:var(--text-xl); color:var(--text-primary); }
.card__text { color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-relaxed); }

/* Tarjeta de motivación: icono arriba y vuelco a verde al pasar el cursor */
.card--motivo { gap:14px; transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card__icono { color:var(--accent); transition:color var(--dur) var(--ease); }
.card__icono svg { display:block; width:40px; height:40px; }
.card--motivo:hover { background:var(--green-900); border-color:var(--green-900); }
.card--motivo:hover .card__icono,
.card--motivo:hover .card__title { color:var(--bone-000); }
.card--motivo:hover .card__text { color:var(--bone-050); }

/* --- Pasos numerados (editorial, sin cajas) --------------------- */

.steps { display:grid; gap:0; }
.step {
  display:grid; grid-template-columns:auto 1fr; gap:24px;
  padding-block:28px; border-top:1px solid var(--border-subtle);
}
.step:last-child { border-bottom:1px solid var(--border-subtle); }
.step__num {
  font-family:var(--font-display); font-size:var(--text-2xl);
  color:var(--green-400); line-height:1; min-width:2.2ch;
}
.step__title { font-family:var(--font-display); font-size:var(--text-xl); margin-bottom:6px; }
.step__text { color:var(--text-secondary); }

/* --- Calendario de ceremonias (listado tipo programa) ----------- */

.programa { border-top:1px solid var(--border-subtle); }
.programa__item {
  display:grid; grid-template-columns:88px 1fr auto; gap:24px; align-items:center;
  padding:22px 4px;
  border-bottom:1px solid var(--border-subtle);
  transition:background var(--dur) var(--ease);
}
.programa__item:hover { background:var(--bone-050); }
.programa__fecha { text-align:center; }
.programa__dia {
  font-family:var(--font-display); font-size:var(--text-2xl); line-height:1; display:block;
}
.programa__mes {
  font-size:var(--text-xs); font-weight:700; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--accent); display:block; margin-top:4px;
}
.programa__cuerpo { display:flex; flex-direction:column; gap:4px; }
.programa__titulo { font-family:var(--font-display); font-size:var(--text-xl); }
.programa__detalle { font-size:var(--text-sm); color:var(--text-secondary); }
.programa__vacio { font-size:var(--text-sm); color:var(--text-secondary); padding:24px 0; }
.programa__accion { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

@media (max-width:720px) {
  .programa__item { grid-template-columns:64px 1fr; gap:16px; }
  .programa__accion { grid-column:1 / -1; padding-left:80px; gap:10px; }
}

/* Bajo 520px la sangría de 80px ya no cabe junto a la etiqueta y el botón. */
@media (max-width:520px) {
  .programa__accion { padding-left:0; }
}

/* Eventos en celular (19 oct): tarjeta de un renglón. La sección ya dice si son
   ceremonias o retiros, así que el título queda en la sede; "Inscripción
   abierta" se omite porque el botón "Apartar lugar" ya lo dice. Los otros
   estados (lista de espera, por confirmar) sí conservan su etiqueta y bajan
   al renglón de abajo como siempre. */
.programa__ver-mas { display:none; }
/* Al plegar se regresa al subtítulo: que no quede debajo de la barra fija. */
.programa-titulo { scroll-margin-top:88px; }
@media (max-width:720px) {
  .programa--eventos .programa__tipo { display:none; }
  .programa--eventos .programa__item { padding:16px 0; gap:12px; grid-template-columns:48px 1fr; }
  .programa--eventos .programa__item--abierta { grid-template-columns:48px 1fr auto; }
  .programa--eventos .programa__item--abierta .programa__accion { grid-column:auto; padding-left:0; }
  .programa--eventos .programa__item--abierta .badge { display:none; }
  .programa--eventos .programa__accion { padding-left:60px; }
  .programa--eventos .programa__dia { font-size:var(--text-xl); }
  .js .programa--eventos:not(.is-abierto) .programa__item--extra { display:none; }
  .js .programa__ver-mas { display:inline-flex; margin-top:20px; }
}

/* --- Callout ----------------------------------------------------- */

.callout {
  background:var(--teal-100); color:#274A51;
  border-radius:var(--radius-lg); padding:24px 26px;
  display:flex; flex-direction:column; gap:8px;
}
.callout--green { background:var(--green-100); color:var(--green-900); }
.callout--violet { background:var(--violet-100); color:var(--violet-900); }
.callout--amber { background:var(--amber-100); color:#6B4A1C; }
.callout__title { font-family:var(--font-display); font-size:var(--text-xl); }
.callout p { font-size:var(--text-sm); line-height:var(--leading-relaxed); }

/* --- Listas de contenido ------------------------------------------ */

.lista { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.lista li {
  position:relative; padding-left:22px;
  color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-relaxed);
}
.lista li::before {
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--green-400);
}
.lista--violet li::before { background:var(--violet-400); }

.dos-columnas { columns:2; column-gap:48px; }
@media (max-width:720px) { .dos-columnas { columns:1; } }

/* --- Comparativa sí / no ------------------------------------------- */

.comparativa { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:720px) { .comparativa { grid-template-columns:1fr; } }

/* --- Acordeón de preguntas ------------------------------------------ */

.faq { border-top:1px solid var(--border-subtle); }
.faq details { border-bottom:1px solid var(--border-subtle); }
.faq summary {
  cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-family:var(--font-display); font-size:var(--text-lg); color:var(--text-primary);
  transition:color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--accent); }
.faq summary::after {
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--font-body); font-weight:400; font-size:1.4rem; color:var(--accent);
  transition:transform var(--dur) var(--ease);
}
.faq details[open] summary::after { content:'−'; }
.faq__body { padding:0 40px 24px 0; color:var(--text-secondary); font-size:var(--text-sm); line-height:var(--leading-relaxed); }
.faq__body p + p { margin-top:12px; }

/* --- Franja de cierre (CTA) ------------------------------------------ */

.cierre { background:var(--green-900); color:var(--bone-050); }
.cierre h2 { color:var(--bone-000); }
.cierre p { color:var(--green-200); }

/* --- Footer ----------------------------------------------------------- */

.footer { background:var(--ink-900); color:var(--bone-300); padding-block:56px 32px; }
.footer a { color:var(--bone-300); font-size:var(--text-sm); }
.footer a:hover { color:var(--bone-000); text-decoration:none; }
.footer__grid {
  display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px;
  padding-bottom:36px; border-bottom:1px solid rgba(244,239,228,.14);
}
@media (max-width:820px) { .footer__grid { grid-template-columns:1fr 1fr; } }
/* A dos columnas el número de WhatsApp no cabe abajo de ~420px. */
@media (max-width:420px) { .footer__grid { grid-template-columns:1fr; } }
/* El pie va sobre ink-900, así que usa la versión montada en disco hueso
   (assets/logo-oscuro.png). No aplicar filtros: el fondo lo trae el archivo. */
.footer__logo img { height:32px; }
.footer__col h4 {
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:700;
  letter-spacing:var(--tracking-wider); text-transform:uppercase;
  color:var(--bone-000); margin-bottom:14px;
}
.footer__col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer__bottom {
  padding-top:24px; display:flex; flex-wrap:wrap; gap:12px 24px;
  justify-content:space-between; font-size:var(--text-xs); color:var(--ink-300);
}
/* El crédito de agencia se firma, no se anuncia: hereda el tamaño chico del
   pie en vez del text-sm que .footer a le pondría. */
.footer__credito a { font-size:inherit; color:var(--bone-400); }
.footer__credito a:hover { color:var(--bone-000); }

/* --- Aviso de versión (solo en la maqueta, se quita al publicar) ------- */

.aviso-maqueta {
  background:var(--violet-900); color:var(--violet-200);
  font-size:var(--text-xs); text-align:center; padding:9px var(--pad-x);
  letter-spacing:var(--tracking-wide);
}
.aviso-maqueta strong { color:#fff; font-weight:600; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}

/* ============================================================
   Bloques de landing: base verde clara, bandas alternadas,
   la fotografía manda y el texto acompaña.
   ============================================================ */

/* Banda oscura genérica */
.oscura { background:var(--green-900); color:var(--bone-050); }
.oscura h2, .oscura h3 { color:var(--bone-000); }
.oscura p, .oscura li { color:var(--green-200); }
.oscura .eyebrow { color:var(--green-200); }
.oscura .serif-quote { color:var(--bone-000); }
.oscura .declaracion footer { color:var(--green-200); }

/* --- Hero a sangre completa ---------------------------------- */

.hero-full {
  position:relative; min-height:min(86vh,760px);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-full__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-full::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(32,27,22,.34) 0%, rgba(32,27,22,.10) 30%, rgba(35,59,44,.90) 100%);
}
.hero-full__contenido {
  position:relative; z-index:2;
  max-width:var(--container); margin:0 auto; width:100%;
  padding:0 var(--pad-x) clamp(40px,6vw,72px);
  display:flex; flex-direction:column; gap:22px;
}
.hero-full h1, .hero-full__titulo {
  color:var(--bone-000);
  font-size:clamp(2.4rem,5.4vw,4.5rem);
  max-width:16ch;
  text-shadow:0 2px 24px rgba(32,27,22,.35);
}
/* Un hero a media página (el de retiros en eventos.html) lleva h2, no h1: la
   página tiene un solo h1. Se ve igual. */

/* Portada con recorte propio de 2.8:1 en escritorio y 4:5 en celular (<picture>).
   El alto sale del ancho y no del alto de la ventana: con vh, una ventana ancha y
   baja (1680x590) dejaba una franja de 4.6:1 y cortaba las caras de arriba. El
   tope de 760px solo recorta un poco en monitores de más de 2100px. */
.hero-full--franja { min-height:min(calc(100vw / 2.8), 760px); }
@media (max-width:700px) { .hero-full--franja { min-height:min(62vh,520px); } }

/* Destino de un enlace #ancla: que la barra fija no tape el arranque. */
.ancla { scroll-margin-top:88px; }
.hero-full h1 em { font-style:italic; color:var(--green-200); }
.hero-full__sub {
  color:var(--bone-100); font-size:var(--text-lg);
  max-width:44ch; line-height:var(--leading-relaxed);
  text-shadow:0 1px 16px rgba(32,27,22,.4);
}
.hero-full__acciones { display:flex; gap:14px; flex-wrap:wrap; }

/* --- Franja de datos ------------------------------------------ */

.franja-datos {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:28px; padding-block:clamp(32px,4vw,48px);
}
.franja-datos__item { display:flex; flex-direction:column; gap:6px; }
.franja-datos__cifra { font-family:var(--font-display); font-size:var(--text-3xl); color:var(--bone-000); line-height:1; }
.franja-datos__texto { font-size:var(--text-sm); color:var(--green-200); }
/* Solo la del hero, en todos los anchos: las tres cifras sueltas se leen como
   un bloque y alineadas a la izquierda quedaban colgando del borde. La otra
   franja (el aviso del IMAO) lleva un párrafo largo y centrarlo lo haría menos
   legible, por eso la regla va acotada a --hero. */
.franja-datos--hero .franja-datos__item { align-items:center; text-align:center; }

/* --- Video (fachada ligera, el iframe carga al hacer clic) ----- */

.video {
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:var(--radius-xl); overflow:hidden;
  box-shadow:var(--shadow-lg); cursor:pointer; border:0; padding:0;
  background:var(--green-700); display:block;
}
.video img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video::after {
  content:''; position:absolute; inset:0;
  background:rgba(32,27,22,.28);
  transition:background var(--dur) var(--ease);
}
.video:hover::after { background:rgba(32,27,22,.16); }
.video__play {
  position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%;
  background:rgba(252,250,244,.92);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.video:hover .video__play { background:#fff; transform:translate(-50%,-50%) scale(1.04); }
.video__play::before {
  content:''; margin-left:5px;
  border-left:22px solid var(--green-900);
  border-top:14px solid transparent; border-bottom:14px solid transparent;
}
.video__pie {
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:20px 24px; color:var(--bone-000);
  font-size:var(--text-sm);
  background:linear-gradient(180deg,transparent,rgba(32,27,22,.72));
  text-align:left;
}
.video-resumen {
  max-width:62ch; margin:24px auto 0; text-align:center;
  font-size:var(--text-sm); line-height:var(--leading-relaxed);
  color:var(--text-secondary);
}
.video--sm .video__play { width:56px; height:56px; }
.video--sm .video__play::before { border-left-width:16px; border-top-width:10px; border-bottom-width:10px; }
.video__aviso {
  position:absolute; z-index:3; inset:auto 12px 12px 12px;
  background:var(--bone-000); color:var(--ink-700);
  font-size:var(--text-xs); padding:10px 14px; border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
}

/* --- Momentos (foto + una línea) -------------------------------- */

.momentos { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.momento { display:flex; flex-direction:column; gap:14px; }
.momento img {
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--radius-xl); box-shadow:var(--shadow-md);
}
.momento__num {
  font-family:var(--font-display); font-size:var(--text-sm);
  letter-spacing:var(--tracking-wider); color:var(--accent);
}
.momento h3 { font-size:var(--text-xl); }
.momento p { color:var(--text-secondary); font-size:var(--text-sm); }
/* En Eventos las tres fotos y el calendario viven dentro de la misma sección,
   así que no hay padding de sección que los separe: el borde superior de
   .programa caía pegado al texto de las fotos. Mismo aire que deja
   .section-head debajo de un título. */
.momentos + .programa { margin-top:clamp(28px,4vw,48px); }
/* Desde el 19 oct un subtítulo ("Próximas ceremonias") separa las fotos del
   calendario. Más aire arriba que abajo: el título pertenece a la lista. */
.momentos + .programa-titulo { margin-top:clamp(48px,6vw,80px); margin-bottom:clamp(16px,2vw,24px); }

/* --- Mosaico de fotos -------------------------------------------- */

.mosaico {
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:190px; gap:14px;
}
.mosaico img {
  width:100%; height:100%; object-fit:cover;
  border-radius:var(--radius-lg);
}
.mosaico__alto { grid-row:span 2; }
.mosaico__ancho { grid-column:span 2; }
@media (max-width:880px) {
  .mosaico { grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .mosaico__ancho { grid-column:span 2; }
}

/* --- Testimonios --------------------------------------------------- */

/* Mínimo 300px y no 260 como el resto de las retículas: por debajo de eso el
   resumen del testimonio se pasa de tres líneas y deja de cumplir el bloque 08
   de la wiki. Medido: a 300px de ancho caben ~38 caracteres por línea. */
.testimonios {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px; margin-bottom:32px;
}
/* Sin align-items:start a propósito: los ítems se estiran a la altura del
   renglón y, con flex:1 en la cita, las tres tarjetas cierran parejas abajo
   aunque una cita ocupe dos líneas y otra tres. */
.testimonios > * { min-width:0; }
/* Video arriba y su cita debajo, en la misma columna. El testimonio es uno
   solo: si la cita viviera en su propia retícula, con un número distinto de
   tarjetas las columnas dejarían de emparejar. */
.testimonio { display:flex; flex-direction:column; gap:14px; }
.testimonio .cita { flex:1; }

/* .citas sigue viva porque la usa prueba-azul.html, que genera _prueba_azul.py. */
.citas { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.cita {
  /* margin:0 porque blockquote trae 40px a los lados del user agent y dentro de
     la retícula eso encogía la tarjeta y abría un hueco que parecía de la grid. */
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:22px; margin:0;
  display:flex; flex-direction:column; gap:12px;
}
.cita p { font-size:var(--text-sm); line-height:var(--leading-relaxed); color:var(--text-secondary); }
.cita footer { font-size:var(--text-xs); color:var(--text-muted); }

/* El texto que acompaña al video. Va a --text-base, el mismo cuerpo que la
   declaración de Guillermo: son ~350 caracteres de alguien contando su
   experiencia y a 13px no se leían en un teléfono.
   Para que eso no dispare el alto de la página, arranca cortado a tres líneas
   dentro de un <details>. Sin JavaScript: el estado vive en el elemento. El
   texto completo está siempre en el DOM y dentro del <summary>, así que un
   lector de pantalla lo lee entero; el recorte es solo visual. */
.cita__texto > summary {
  list-style:none; cursor:pointer;
  display:flex; flex-direction:column; gap:10px;
}
.cita__texto > summary::-webkit-details-marker { display:none; }
.cita__texto > summary:focus-visible {
  outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--radius-sm);
}
.cita__parrafo {
  font-size:var(--text-base); line-height:var(--leading-relaxed);
  color:var(--text-secondary);
}
.cita__texto:not([open]) .cita__parrafo {
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.cita__mas { font-size:var(--text-sm); color:var(--accent); font-weight:600; }
.cita__texto:not([open]) .cita__mas::after { content:'Leer completo'; }
.cita__texto[open]      .cita__mas::after { content:'Leer menos'; }

.declaracion { display:flex; flex-direction:column; gap:20px; margin:0; }
.declaracion p { line-height:var(--leading-relaxed); }
.declaracion footer {
  font-family:var(--font-display); font-size:var(--text-lg);
  padding-top:8px;
}

/* --- Podcast --------------------------------------------------------- */

/* Los episodios con miniatura: misma forma en la portada y en contenido
   desde el 14 sep 2026. El título va debajo de la imagen, porque la
   miniatura del podcast ya lo trae quemado abajo a la izquierda. */
.episodio-card { display:flex; flex-direction:column; gap:6px; }
.episodio-card .video { margin-bottom:10px; }
.episodio-card__titulo { font-family:var(--font-display); font-weight:400; font-size:var(--text-lg); color:var(--bone-000); }
.episodio-card__meta { font-size:var(--text-xs); color:var(--green-200); }
.oscura .episodio-card .video:focus-visible { outline:2px solid var(--bone-050); outline-offset:4px; }

/* --- Collage de cierre ------------------------------------------------ */

.collage { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.collage img {
  width:104px; height:104px; object-fit:cover; border-radius:50%;
  border:3px solid rgba(244,239,228,.25);
}

/* --- FAQ sobre banda oscura -------------------------------------------- */

.oscura .faq { border-top-color:rgba(244,239,228,.18); }
.oscura .faq details { border-bottom-color:rgba(244,239,228,.18); }
.oscura .faq summary { color:var(--bone-000); }
.oscura .faq summary:hover { color:var(--green-200); }
.oscura .faq summary::after { color:var(--green-200); }
.oscura .faq__body { color:var(--green-200); }

@media (max-width:640px) {
  .franja-datos { grid-template-columns:1fr; gap:20px; }
  .collage img { width:78px; height:78px; }
}

/* --- Documento legal (aviso de privacidad) ---------------------------- */

/* El documento va en dos columnas: el indice fijo a la izquierda y el texto a
   760px, que es la medida legible. Son 17 apartados y ~10,600 palabras, asi que
   tener el indice siempre a la vista importa mas que ganar ancho de linea. */
.legal-layout { display:grid; grid-template-columns:minmax(0,1fr); }
.legal-intro, .legal, .legal-layout > .legal__indice {
  max-width:760px; width:100%; margin-inline:auto;
}

.legal { color:var(--text-secondary); }
.legal h2 {
  font-family:var(--font-display); font-weight:400;
  font-size:var(--text-xl); color:var(--text-primary);
  margin-top:48px; margin-bottom:14px;
  padding-top:20px; border-top:1px solid var(--border-subtle);
  scroll-margin-top:88px;
}
.legal h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.legal h3 {
  font-size:var(--text-base); font-weight:600; color:var(--text-primary);
  margin-top:26px; margin-bottom:8px;
}
.legal p { margin-bottom:16px; }
.legal p:last-child { margin-bottom:0; }
.legal a { color:var(--accent); }

.legal__indice {
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:14px; padding:24px 26px; margin-bottom:40px;
}
.legal__indice-titulo {
  font-size:var(--text-xs); font-weight:700; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--text-secondary); margin-bottom:12px;
}
.legal__indice ol {
  list-style:none; margin:0; padding:0;
  column-count:2; column-gap:28px;
}
@media (max-width:640px) { .legal__indice ol { column-count:1; } }
.legal__indice li { margin-bottom:6px; font-size:var(--text-sm); }
.legal__indice a {
  color:var(--text-secondary); text-decoration:none;
  display:block; padding:3px 0;
}
.legal__indice a:hover { color:var(--accent); text-decoration:underline; }
.legal__indice a.is-active { color:var(--accent); font-weight:600; }

/* A partir de 1080px caben las dos columnas: 236 + 64 + 760 = 1060, dentro del
   contenedor de 1180. Abajo de eso el indice vuelve a ser una tarjeta arriba
   del texto, que es como funciona en telefono. */
@media (min-width:1080px) {
  .legal-layout {
    grid-template-columns:236px minmax(0,760px);
    gap:0 clamp(32px,4vw,64px);
  }
  .legal-layout > .legal-intro,
  .legal-layout > .legal { grid-column:2; }
  .legal-layout > .legal__indice {
    grid-column:1; align-self:start;
    position:sticky; top:88px;
    max-height:calc(100vh - 128px); overflow-y:auto; overscroll-behavior:contain;
    margin-bottom:0; padding:0 20px 0 0;
    background:transparent; border:0; border-radius:0;
    border-right:1px solid var(--border-subtle);
  }
  .legal__indice ol { column-count:1; }
  .legal__indice a.is-active {
    box-shadow:inset 2px 0 0 var(--accent); padding-left:10px; margin-left:-12px;
  }
}

.legal__tabla { overflow-x:auto; margin:20px 0 24px; }
.legal__tabla table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.legal__tabla th, .legal__tabla td {
  text-align:left; vertical-align:top;
  padding:12px 16px; border-bottom:1px solid var(--border-subtle);
}
.legal__tabla th {
  font-weight:600; color:var(--text-primary);
  background:var(--bg-sunken); border-bottom-color:var(--border-default);
}
.legal__tabla tr:last-child td { border-bottom:0; }