/* ==========================================================================
   De la Calle a la Vida — Base styles
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

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

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, figure { margin: 0; }

button { font: inherit; cursor: pointer; }

input, textarea, select {
  font: inherit;
  color: inherit;
}

/* ---- Focus visibility (keyboard) ---- */
:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Typography ---- */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

h1, .h1 { font-size: var(--fs-3xl); }
h2, .h2 { font-size: var(--fs-2xl); }
h3, .h3 { font-size: var(--fs-lg); }

@media (min-width: 700px) {
  h1, .h1 { font-size: var(--fs-4xl); }
  h2, .h2 { font-size: var(--fs-3xl); }
  h3, .h3 { font-size: var(--fs-xl); }
}

p { color: var(--text); }
p.lead { font-size: var(--fs-md); color: var(--text-muted); }

.kicker {
  display: inline-block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* naranja-oscuro da 3.22:1 sobre crema, no alcanza el 4.5:1 que pide
     texto de este tamaño (AA). Negro pasa AA y AAA. */
  color: var(--negro);
}

/* Línea de contexto sobre un título que sí aporta información propia (a
   quién va dirigido, por ejemplo) — a diferencia de .kicker, nunca va en
   mayúsculas sostenidas ni como etiqueta decorativa (dirección de
   rediseño Fase 2: nada de "etiquetas pequeñas en mayúsculas sostenidas
   encima de cada título"). Mismo texto que antes, solo cambia el trato. */
.eyebrow-plain {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-3xs);
}

/* Última palabra de cada título — 2026-09-23, segunda vuelta: el cliente
   pidió un solo font por título (nada de mezclar Bebas + Poppins, ver
   captura "Cambio fonts en titulos.png"), así que este span ya no cambia
   de tipografía: hereda Bebas Neue y mayúsculas del h1/h2 que lo contiene,
   y el único acento es el color. naranja-oscuro, no naranja puro: naranja
   da ~2.4:1 sobre crema (no pasa ni el mínimo de 3:1 para texto grande),
   naranja-oscuro da 3.22:1, que sí pasa (todos los usos son h1/h2, ≥24px).
   No es el kicker del Hero (.hero-eyebrow, más abajo), que sí es Baksoda. */
.accent-word {
  color: var(--naranja-oscuro);
}

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

@media (min-width: 700px) {
  .container { padding-inline: var(--space-lg); }
}

.section { padding-block: var(--space-xl); }

@media (min-width: 900px) {
  .section { padding-block: var(--space-2xl); }
}

/* Vertical rhythm variants — not every section carries the same weight */
.section--compact { padding-block: var(--space-lg); }

@media (min-width: 900px) {
  .section--compact { padding-block: var(--space-xl); }
}

.section--roomy { padding-block: var(--space-2xl); }

@media (min-width: 900px) {
  .section--roomy { padding-block: var(--space-3xl); }
}

.section--tint {
  background: var(--arena);
  background: linear-gradient(180deg, var(--crema) 0%, var(--arena) 12%, var(--arena) 88%, var(--crema) 100%);
}

/* Sección de marca en negro — para dar respiración entre bloques crema/arena
   (dirección de rediseño Fase 2). Un solo uso por página, reservado para una
   cita real, nunca para vender algo dentro de ella. */
.section--dark {
  background: var(--negro);
  color: var(--crema);
}

.section--dark .pull-quote { color: var(--crema); }
.section--dark .pull-quote cite {
  display: block;
  margin-top: var(--space-sm);
  font-style: normal;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--amarillo);
}

/* Foco visible sobre negro: el mismo naranja de :focus-visible no cambia,
   pero su outline-offset por defecto no se nota bien contra --negro sin un
   halo — este halo extra solo aplica dentro de una sección oscura. */
.section--dark :focus-visible {
  box-shadow: 0 0 0 4px rgba(250, 125, 71, 0.35);
}

.pull-quote {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-style: italic;
  color: var(--negro-suave);
}

@media (min-width: 700px) {
  .pull-quote { font-size: var(--fs-xl); }
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-lg);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

/* Section titles must all read as one size, whether the section opens
   with an h1 (page hero) or an h2 (later sections). Sized off the
   h2 scale, reduced ~10%, so the first title stops reading larger. */
.section-head h1,
.section-head h2 {
  font-size: calc(var(--fs-2xl) * 0.9);
}

@media (min-width: 700px) {
  .section-head h1,
  .section-head h2 {
    font-size: calc(var(--fs-3xl) * 0.9);
  }
}

.grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background: transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              padding-block var(--dur-base) var(--ease-out);
  padding-block: var(--space-md);
}

.site-header.is-solid {
  background: var(--crema);
  box-shadow: var(--shadow-sm);
  padding-block: var(--space-xs);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

@media (max-width: 479px) {
  /* El lockup completo (isotipo + wordmark) es más ancho que el ícono
     solo que tenía antes; un poco más chico en pantallas muy angostas
     deja espacio al botón de WhatsApp y al menú. */
  .brand-mark-full { height: 50px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--negro);
}

@media (min-width: 560px) {
  .brand { font-size: 30px; }
}

.brand-mark {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

@media (min-width: 560px) {
  .brand-mark { height: 46px; }
}

/* Lockup completo del header: más grande que el ícono solo que reemplazó
   (ver breakpoint <479px arriba para el tamaño en pantallas angostas). */
.brand-mark-full {
  height: 60px;
}

@media (min-width: 560px) {
  .brand-mark-full { height: 70px; }
}

/* Logo del footer: mismo lockup, versión crema (el original es oscuro y
   se pierde sobre el negro de marca), más grande que en el header. */
.brand-mark-footer {
  height: 72px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

/* Instagram / TikTok en el header. En pantallas angostas se ocultan aquí
   y quedan disponibles en el panel del menú (nav-panel-foot) para no
   apretar el header junto al botón de WhatsApp y el logo más grande. */
.header-social {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
}

@media (min-width: 700px) {
  .header-social { display: flex; }
}

.header-social a {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 2px solid var(--negro);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--negro);
}

.header-social a:hover {
  background: var(--naranja);
  border-color: var(--naranja);
  color: var(--negro);
}

.nav-panel-foot .footer-social a {
  border-color: var(--negro);
  color: var(--negro);
}

.nav-panel-foot .footer-social a:hover {
  background: var(--naranja);
  border-color: var(--naranja);
  color: var(--negro);
}

@media (min-width: 560px) {
  .header-actions { gap: var(--space-sm); }
}

.btn.header-cta {
  display: inline-flex;
  padding: 0.7em 1.1em;
}

.btn.header-cta .btn-label { display: none; }

@media (min-width: 560px) {
  .btn.header-cta { padding: 0.9em 1.6em; }
  .btn.header-cta .btn-label { display: inline; }
}

.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: transparent;
  border: 2px solid var(--negro);
  border-radius: var(--radius-sm);
}

.nav-toggle svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.nav-toggle .icon-close { opacity: 0; transform: rotate(-45deg) scale(0.6); }

.nav-toggle[aria-expanded="true"] .icon-burger { opacity: 0; transform: rotate(45deg) scale(0.6); }
.nav-toggle[aria-expanded="true"] .icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

.nav-panel-close svg { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle svg { transition: none; }
}

/* ---- Nav panel (hamburger menu, all widths) ---- */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 18, 10, 0.5);
  z-index: 98;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.site-nav {
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: 99;
  width: min(88vw, 380px);
  background: var(--crema);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg) var(--space-md);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.site-nav.is-open { transform: translateX(0); }

.nav-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-panel-head .brand { font-size: var(--fs-md); }

.site-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xl);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  /* naranja puro da 2.39:1 sobre crema, no alcanza ni el 3:1 de texto
     grande (AA). naranja-oscuro sí pasa (3.22:1) a este tamaño. */
  color: var(--naranja-oscuro);
}

.nav-panel-foot {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--arena);
}

/* Bug: el botón de WhatsApp aquí es un <a class="btn ..."> dentro de
   .site-nav, así que sin este reset "gana" la tipografía de enlace de
   menú (.site-nav a: Bebas Neue, mayúsculas, fs-xl) en vez de la de
   botón -se veía enorme- y en :hover .site-nav a le pinta el texto del
   mismo naranja-oscuro que .btn-primary:hover ya le pone de fondo, así
   que las letras desaparecían. Vuelve a comportarse como botón. */
.nav-panel-foot .btn {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: normal;
  text-transform: none;
}

.nav-panel-foot .btn:hover {
  color: var(--negro);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav, .nav-overlay { transition: none; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.9em 1.6em;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--naranja);
  /* Texto negro sobre naranja: 6.8:1, pasa AA y AAA en texto grande.
     Blanco/crema sobre naranja da 2.6:1 y reprueba AA. */
  color: var(--negro);
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover { background: var(--naranja-oscuro); }

.btn-secondary {
  background: transparent;
  border-color: var(--negro);
  color: var(--negro);
}

.btn-secondary:hover { background: var(--negro); color: var(--crema); }

.btn-light {
  background: var(--crema);
  color: var(--negro);
}

.btn-light:hover { background: var(--amarillo); }

.btn-block { width: 100%; }

/* ---- Cards ---- */
.card {
  background: var(--crema);
  border: 1px solid var(--arena);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* Solo se levanta/ensombrece al hover la única .card que es realmente
   clicable en todo el sitio (el <a class="card"> de "Ayudar o sostener"
   en historias-y-recursos.html) — el resto son contenedores de
   contenido, no enlaces, y Andrés notó que la sombra los hacía parecer
   clicables sin serlo. */
a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Tarjetas de artículo que todavía no existen: sin efecto de clic,
   sin cursor de enlace, con etiqueta visible. */
.card--soon {
  cursor: default;
}

.card--soon:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

.badge-soon {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 0.25em 0.85em;
  border-radius: var(--radius-full);
  background: var(--arena);
  color: var(--negro);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Precio de un servicio dentro de una card — fondo naranja exige texto
   negro (nunca crema/blanco), misma regla de contraste que .btn-primary. */
.price-tag {
  display: inline-block;
  margin-block: var(--space-2xs) var(--space-sm);
  padding: 0.3em 0.9em;
  border-radius: var(--radius-full);
  background: var(--naranja);
  color: var(--negro);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}

.price-tag small {
  font-weight: var(--fw-regular);
  opacity: 0.85;
}

.card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-sm);
  color: var(--naranja);
}

.card-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card h3 { margin-bottom: var(--space-2xs); }
.card p { color: var(--text-muted); }

/* Tarjeta destacada — no todas las tarjetas de una grilla pesan igual.
   Reservada para lo principal de un grupo de 3 (dirección de rediseño
   Fase 2: "tarjetas con jerarquía, evita el kit idéntico"). */
.card--featured {
  border-color: var(--naranja);
  border-width: 2px;
  background: var(--crema-oscuro);
}

@media (min-width: 700px) {
  .card--featured { padding: calc(var(--space-md) * 1.25); }
  .card--featured h3 { font-size: calc(var(--fs-xl) * 0.85); }
}

.card--featured .card-icon { color: var(--naranja-oscuro); }

/* ---- Media placeholders (fixed aspect ratio) ---- */
.media-placeholder {
  position: relative;
  width: 100%;
  /* height:auto es necesario: los atributos width/height del HTML (para
     evitar CLS) fijan un alto en píxeles que si no, gana sobre
     aspect-ratio y deja las fotos estiradas/cortadas mal. */
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--arena), var(--crema-oscuro));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(24,18,10,0.04) 0 2px, transparent 2px 14px);
}

.media-placeholder span {
  position: relative;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.media-placeholder.square { aspect-ratio: 1 / 1; }
.media-placeholder.wide { aspect-ratio: 16 / 9; }
.media-placeholder.video { aspect-ratio: 9 / 16; }

/* ---- Hero ---- */
.hero {
  position: relative;
  padding-block: var(--space-lg);
}

/* Debajo de 900px .hero .container no es grid (ver media query abajo),
   así que los dos .reveal (texto y foto) caen uno tras otro sin espacio
   propio y quedan pegados a los botones. */
@media (max-width: 899px) {
  .hero .container > .reveal + .reveal {
    margin-top: var(--space-lg);
  }
}

@media (min-width: 900px) {
  .hero {
    padding-block: var(--space-2xl);
  }
  .hero .container {
    display: grid;
    grid-template-columns: 0.95fr 1.15fr;
    align-items: center;
    gap: var(--space-xl);
  }
  /* El kicker vive fuera de las dos columnas (ver HTML) y ocupa las dos,
     en su propia fila arriba — así tiene el ancho completo del hero para
     la frase en Baksoda, no solo el 55% de la columna de texto. */
  .hero-eyebrow {
    grid-column: 1 / -1;
  }
}

/* 2026-09-23: única palabra/frase del sitio en Baksoda (instrucción del
   cliente). Tamaño fluido (clamp, no breakpoints fijos) y white-space:
   nowrap para que "Acompañamiento virtual para familias" quede siempre
   en una sola fila, sin bajarse, sin importar el ancho de pantalla —
   antes con tamaños fijos se cortaba a dos líneas en varios anchos.
   line-height y padding-bottom dan espacio a los descendentes del
   script, que si no quedan cortados. */
.hero-eyebrow {
  display: block;
  font-family: var(--font-hero-eyebrow);
  font-weight: var(--fw-regular);
  font-size: clamp(1.6rem, 7.5vw, var(--fs-4xl));
  white-space: nowrap;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--naranja-oscuro);
  padding-bottom: 0.2em;
  margin-top: 3.25rem;
  margin-bottom: var(--space-sm);
}
.hero h1 { margin-block: var(--space-sm); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* El hero de cada página interna (section.section[data-hero]) necesita
   ser un contexto de posicionamiento para anclar su manchón de fondo;
   overflow-x:clip corta el sangrado lateral del manchón para que no
   genere scroll horizontal, sin recortar el sangrado hacia arriba. */
[data-hero] {
  position: relative;
  overflow-x: clip;
}

/* ---- Elementos gráficos de marca (manual, página 12) ----
   Manchón orgánico y cadena, recreados en SVG a partir del manual —ya no
   son aproximaciones en CSS. aria-hidden + pointer-events ya vienen del
   propio elemento en el HTML. Cada uno vive dentro de un .parallax-el:
   el SVG hace el movimiento lento y continuo (float-slow, esta hoja);
   el wrapper .parallax-el recibe el desplazamiento hacia el cursor
   (interactivo, ver main.js). Los dos se apagan con prefers-reduced-motion. */
.deco-blob {
  display: block;
  color: var(--arena);
  filter: blur(1px);
  animation: float-slow 24s ease-in-out infinite;
}

/* Manchón "nube" (elemento gráfico aportado por Andrés), usado como
   imagen de fondo decorativa en el hero de las páginas internas —
   mismo tratamiento que .deco-blob (movimiento propio + parallax)
   pero como <img>, no SVG, porque la fuente es un PNG ya con su color
   final aplicado. */
.deco-cloud-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: blur(1px);
  opacity: 0.55;
  animation: float-slow 26s ease-in-out infinite;
}

.parallax-el {
  pointer-events: none;
  transition: transform 0.2s linear;
}

/* Visual de la sección Metodología del inicio: la nube grande y nítida
   sobre un acento naranja borroso detrás (mismo manchón SVG que ya usa
   este hero, reutilizado) para que la nube tenga contraste — sin esto,
   nube y fondo quedan casi del mismo tono arena. */
.metodologia-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 420px;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
}
.metodologia-visual-accent {
  position: absolute;
  width: 78%;
  color: var(--naranja);
  opacity: 0.3;
  filter: blur(3px);
}
.metodologia-visual-img {
  width: 62%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(24, 18, 10, 0.16));
  animation: float-slow 24s ease-in-out infinite;
}

@media (max-width: 899px) {
  .deco-blob { display: none; }
  .deco-cloud-img { display: none; }
}

/* Cadena lateral (solo inicio): estática, no se mueve con scroll ni con
   el mouse. Vive dentro de <main> (ver #main position:relative) y usa
   position:absolute + top:0/bottom:0 contra ese contenedor —no contra
   <body>— para cubrir el alto real del contenido de inicio SIN entrar
   al footer. La imagen se repite verticalmente (background, no <img>)
   porque una sola cadena no llega ni de cerca al alto total de la
   página. Oculta hasta que hay margen real de sobra a la izquierda del
   container (1180px + algo de aire) para que nunca quede encima del
   texto. */
#main {
  position: relative;
}

.chain-side {
  display: none;
  position: absolute;
  left: clamp(12px, 2vw, 32px);
  top: 0;
  bottom: 0;
  width: 52px;
  z-index: 2;
  pointer-events: none;
  background-image: url('../img/marca/cadena-vertical.webp?v=3');
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 52px auto;
  /* La cadena "grande" que se conserva (2026-09-22): deriva lentamente
     hacia arriba, un tile completo (968px, alto real de cadena-vertical.webp
     a este background-size) por ciclo, para que el loop no se note. */
  animation: chain-flow 40s linear infinite;
}

@keyframes chain-flow {
  from { background-position-y: 0; }
  to { background-position-y: -968px; }
}

@media (min-width: 1300px) {
  .chain-side { display: block; }
}

@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(22px, -18px) scale(1.04); }
}

/* ---- Reveal animation ----
   Dirección de rediseño Fase 2 (extendida a todo el sitio, Etapa 4): un
   solo momento de movimiento orquestado -la cadena de Metodología-, no un
   fundido en cada sección. La clase .reveal y los observers de main.js
   quedan en el HTML (inertes) por ahora; limpiarlos del marcado es tarea
   de una pasada posterior, no un cambio visual urgente. */
.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .deco-blob {
    animation: none;
  }

  .deco-cloud-img {
    animation: none;
  }

  .chain-side {
    animation: none;
  }

  .metodologia-visual-img {
    animation: none;
  }

  .parallax-el {
    transition: none;
  }
}

/* ---- Check lists (señales / calificación) ---- */
.check-list li {
  position: relative;
  padding-left: 2em;
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--arena);
}

.check-list li:last-child { border-bottom: none; }

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1em;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--naranja);
}

.check-list--no li::before { background: var(--negro); }

/* ---- Pillars / methodology phases ---- */
.phase {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--arena);
}

.phase:last-child { border-bottom: none; }

.phase-number {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  /* naranja puro da 2.39:1 sobre crema, no alcanza el 3:1 de texto
     grande (AA). naranja-oscuro sí pasa (3.22:1) a este tamaño. */
  color: var(--naranja-oscuro);
  line-height: 1;
}

/* ---- Forms ---- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-bottom: var(--space-sm);
}

.form-field label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.85em 1em;
  border: 2px solid var(--arena);
  border-radius: var(--radius-sm);
  background: var(--crema);
  color: var(--negro);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--naranja);
}

.form-field textarea { resize: vertical; min-height: 120px; }

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.form-check input { margin-top: 0.3em; }
.form-check label { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- CTA band ---- */
.cta-band {
  background: linear-gradient(135deg, var(--naranja), var(--amarillo));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--negro);
  text-align: center;
}

/* Sin esto, la última palabra del h2 ("soledad") heredaría el naranja-
   oscuro de .accent-word encima del propio fondo naranja/amarillo del
   CTA — mismo tipo de bug de contraste que ya se corrigió antes en botones
   dentro del footer y del panel móvil. */
.cta-band .accent-word { color: inherit; }

.cta-band h2 { margin-bottom: var(--space-sm); }
.cta-band p { max-width: 520px; margin-inline: auto; margin-bottom: var(--space-md); }

/* ---- Footer ---- */
.site-footer {
  background: var(--negro);
  color: var(--crema);
  padding-block: var(--space-xl);
}

/* :not(.btn) evita el mismo bug que ya se arregló en .nav-panel-foot: sin
   esto, cualquier <a class="btn ..."> dentro del footer -como "Apoya lo
   que hacemos"- hereda este crema en vez de su propio color, y crema
   sobre naranja da 2.6:1, reprueba AA. */
.site-footer a:not(.btn) { color: var(--crema); }
.site-footer a:not(.btn):hover { color: var(--amarillo); }

.footer-grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

.footer-donations {
  background: rgba(252, 245, 229, 0.06);
  border: 1px solid rgba(252, 245, 229, 0.16);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.footer-donations h3 { color: var(--amarillo); margin-bottom: var(--space-2xs); }
.footer-donations p { color: rgba(252, 245, 229, 0.75); margin-bottom: var(--space-sm); }

.footer-nav ul { display: flex; flex-direction: column; gap: var(--space-2xs); }

.footer-social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(252, 245, 229, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-social a:hover { background: var(--naranja); border-color: var(--naranja); color: var(--negro); }

/* Iconos de redes en la tarjeta "Síguenos" de contacto.html — más grandes
   que el .footer-social genérico del pie de página, es lo único visible
   en esa tarjeta además del texto, así que necesitan más peso. */
.contact-social a { width: 52px; height: 52px; }

/* Bloque de crisis del pie de página (todas las páginas) — franja
   compacta, tono sereno, sin rojo de alarma ni íconos de sirena. */
.footer-crisis {
  margin-top: var(--space-lg);
  padding-block: var(--space-md);
  border-top: 1px solid rgba(252, 245, 229, 0.16);
  border-bottom: 1px solid rgba(252, 245, 229, 0.16);
}

.footer-crisis h3 {
  color: var(--crema);
  font-size: var(--fs-md);
  margin-bottom: var(--space-2xs);
}

.footer-crisis > p {
  color: rgba(252, 245, 229, 0.75);
  margin-bottom: var(--space-sm);
}

/* 2026-09-23: columna fija (antes flex-wrap) para que las 3 líneas se
   apilen siempre una debajo de otra, igual en desktop que en mobile —
   con wrap, 123 y 106 quedaban en la misma fila y 192 sola debajo,
   dando un orden visual distinto según el ancho de pantalla. */
.footer-crisis ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.footer-crisis li {
  color: rgba(252, 245, 229, 0.75);
  font-size: var(--fs-sm);
}

.footer-crisis strong { color: var(--crema); }

.footer-bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(252, 245, 229, 0.16);
  font-size: var(--fs-xs);
  color: rgba(252, 245, 229, 0.6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
}

/* ---- WhatsApp floating button ---- */
.wa-float {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  height: 48px;
  padding-inline: 0.9rem;
  background: var(--naranja);
  /* Texto negro sobre naranja: 6.8:1, pasa AA y AAA. Crema reprueba (2.6:1). */
  color: var(--negro);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-glow);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  opacity: 0;
  transform: translateY(24px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

@media (min-width: 700px) {
  .wa-float { height: 56px; padding-inline: 1.1rem; }
}

.wa-float.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wa-float svg { width: 22px; height: 22px; flex-shrink: 0; }

.wa-float .wa-label { display: none; }

@media (min-width: 480px) {
  .wa-float .wa-label { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: opacity var(--dur-fast) linear; transform: none; }
  .wa-float:not(.is-visible) { transform: none; }
}

/* ==========================================================================
   Videos (2026-10-05)
   Todos los videos de la web usan el mismo componente y la misma medida
   (9:16, hasta 360px de ancho):

   .video-frame    -> reproductor dentro de la página: iframe del reproductor
                      oficial de TikTok (https://www.tiktok.com/player/v1/ID),
                      o un <video> propio cuando haya archivos MP4.
   .video-fallback -> enlace "Míralo en TikTok" debajo, por si el reproductor
                      no carga.
   ========================================================================== */
.video-frame {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-md);
}

.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
}

.video-fallback {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.video-fallback a {
  color: var(--negro);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.video-fallback a:hover { color: var(--naranja-oscuro); }

/* ---- Móvil: fotos de sección (2026-10-08) ----
   En celular las fotos ocupaban todo el ancho (343x400) y quedaban pegadas a
   su texto y a la foto de la sección anterior, con anchos distintos entre sí.
   Ahora miden lo mismo (280px), van centradas y con más aire. !important
   porque algunas llevan max-width en línea en el HTML. */
@media (max-width: 699px) {
  .section .grid .media-placeholder {
    width: 100%;
    max-width: 280px !important;
    margin-inline: auto;
  }
  .grid:has(.media-placeholder) { gap: var(--space-lg); }
  .hero { padding-bottom: var(--space-xl); }
  /* fotos dentro de tarjetas (Andrés, mamá): mismo tamaño en ambas */
  .card .media-placeholder.square { width: 240px !important; max-width: 100% !important; }
}

/* ---- Metodología: reglas, límites y consecuencias (2026-10-22) ----
   Tres pilares + contraste castigo/consecuencia + bloque del amor
   responsable como enfoque que los articula (no es una cuarta categoría). */
.pillar { display: flex; flex-direction: column; }
.pillar .pillar-example {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--arena-oscuro);
  font-size: var(--fs-sm);
}
.pillar .pillar-example strong { color: var(--negro); }

.method-lead {
  margin: var(--space-xl) auto var(--space-md);
  max-width: 820px;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--negro);
}

.method-love {
  max-width: 820px;
  margin: var(--space-lg) auto 0;
  text-align: center;
}
.method-formula {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  color: var(--negro) !important;
}
.method-formula span:not(.plus) {
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--arena-oscuro);
  border-radius: 999px;
  background: var(--crema);
}
.method-formula .plus { color: var(--naranja-oscuro); }
.method-formula-note {
  margin: var(--space-2xs) 0 var(--space-sm);
  font-weight: var(--fw-semibold);
  color: var(--naranja-oscuro) !important;
}

/* ---- Video horizontal (entrevista de YouTube, 2026-10-22) ---- */
.video-frame--wide { max-width: 720px; aspect-ratio: 16 / 9; }

/* ---- Cadena de esquina (2026-10-22) ----
   Imagen de la diseñadora (archivo sin modificar) en la esquina superior
   derecha de todas las páginas excepto Inicio. Va dentro de <main>
   (position: relative) justo debajo del header. No recibe clics. Los cuatro
   bordes se difuminan con máscara (solo visual) para que no se note el corte
   de la imagen. Por debajo de 1100px el texto del hero llega hasta la zona
   de la cadena, así que se le reserva su propia franja arriba en vez de
   taparlo. */
.chain-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 208px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 1099px) {
  .chain-corner { width: 104px; }
  .chain-corner + .section { padding-top: calc(116px + var(--space-sm)); }
}

/* Foto de la mamá de Andrés (Madre a madre): más grande solo en PC
   (2026-10-22). La foto original es de 420px, así que 360px sigue nítida. */
@media (min-width: 900px) {
  .card .media-placeholder.square.mama-foto {
    width: 360px !important;
    max-width: 100% !important;
  }
}

/* Banda final "Tu historia también puede cambiar de rumbo" (2026-10-22):
   menos aire arriba para que suba y quede junto al bloque anterior. */
.section--roomy.section--cta-final { padding-top: var(--space-xl); }

/* ---- Ritmo vertical en PC (2026-10-26) ----
   Entre el título de una página y su contenido había ~200px de aire
   (relleno inferior del hero + relleno superior de la sección siguiente) y
   ~160px entre secciones. Se reduce a un ritmo más compacto sin tocar el
   celular, que ya estaba bien. */
@media (min-width: 900px) {
  .section { padding-block: var(--space-xl); }
  .section--roomy { padding-block: var(--space-2xl); }
  .section--roomy.section--cta-final { padding-top: var(--space-xl); }
  section[data-hero].section { padding-bottom: var(--space-md); }
  .hero { padding-block: var(--space-xl); }
}

/* Hero de página interna: también en celular, menos aire debajo del título */
section[data-hero].section { padding-bottom: var(--space-md); }


/* ---- Contacto: dos vías, precios y consejería (2026-11-03) ---- */
.price-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-block: var(--space-2xs) var(--space-xs);
}
.contact-ways .card { display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-way-action { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.contact-way-action .btn { max-width: 100%; text-align: center; }
.contact-way-note { font-size: var(--fs-sm); color: var(--text-muted); }
.contact-way-hours { font-size: var(--fs-sm); }
.contact-way-center { width: 100%; align-items: center; text-align: center; }
/* Contenedor para el iframe de Google Calendar (Appointment Schedule): ocupa
   todo el ancho disponible sin desbordar en móvil. */
#agenda-orientacion iframe { display: block; width: 100%; min-height: 640px; border: 0; border-radius: var(--radius-md); }
@media (max-width: 699px) {
  #agenda-orientacion iframe { min-height: 720px; }
  .contact-way-action .btn { width: 100%; }
}

/* Botones con texto largo: que se partan en vez de ensanchar la página */
.contact-ways > * { min-width: 0; }
.contact-way-action .btn,
.cta-band .btn { white-space: normal; max-width: 100%; text-align: center; }

/* Línea "Para quién es" de las tarjetas de servicio (2026-11-03): antes era
   texto chico encima del título; ahora va debajo del precio, en tamaño normal. */
.card-audience { font-weight: 600; color: var(--negro-suave); margin-bottom: var(--space-xs); }