@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; }

section { padding-block:clamp(56px,8vw,104px); }
section.tight { padding-block:clamp(40px,5vw,64px); }
.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); }

.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; } }

/* --- 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); }

/* --- 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__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; }
}

/* --- 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; }

/* --- Ciudades ------------------------------------------------------- */

.ciudades { display:flex; flex-wrap:wrap; gap:10px; }
.ciudad-chip {
  padding:9px 18px; border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle); background:var(--bg-surface);
  font-size:var(--text-sm); font-weight:500; color:var(--text-secondary);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ciudad-chip:hover { border-color:var(--green-400); color:var(--green-900); background:var(--green-100); text-decoration:none; }

/* --- 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; } }
.footer__logo img { height:32px; filter:brightness(0) invert(1); opacity:.9; }
.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);
}

/* --- 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); }

/* --- 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 {
  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);
}
.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); }

/* --- 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--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); }

/* --- 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 --------------------------------------------------- */

.citas { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.cita {
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:22px;
  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); }

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

.podcast { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,56px); align-items:center; }
@media (max-width:880px) { .podcast { grid-template-columns:1fr; } }
.episodios { display:flex; flex-direction:column; }
.episodio {
  display:flex; align-items:center; gap:18px;
  padding:18px 0; border-bottom:1px solid rgba(244,239,228,.18);
}
.episodio:first-child { border-top:1px solid rgba(244,239,228,.18); }
.episodio__play {
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(244,239,228,.35);
  display:flex; align-items:center; justify-content:center;
}
.episodio__play::before {
  content:''; margin-left:3px;
  border-left:12px solid var(--bone-050);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.episodio__titulo { font-family:var(--font-display); font-size:var(--text-lg); color:var(--bone-000); }
.episodio__meta { font-size:var(--text-xs); color:var(--green-200); }

/* --- 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; }
}