/* ══════════════════════════════════════════════════════════════════════
   ESTE ARCHIVO ES LA FUENTE LEGIBLE — NO ES EL QUE SE PUBLICA.
   Lo que sirve el sitio en producción es deploy-A\tribu.css, MINIFICADO
   (26KB vs 48KB de éste). Excepción deliberada a la regla del proyecto de
   "mismo md5 entre las dos carpetas" — decidida con team-lead el 30/08/2026
   para bajar Lighthouse sin perder un CSS editable. Edita SIEMPRE este
   archivo (_propuestas-planas\tribu.css), nunca el de deploy-A directo.

   Para regenerar el minificado tras editar:
     npx --yes clean-css-cli -o deploy-A\tribu.css tribu.css
   Verifica después que el número de reglas ({) no cambió entre los dos,
   y revisa visualmente las 11 páginas (móvil + escritorio) antes de dar
   por bueno el redeploy — un minificador no debería tocar selectores,
   pero confirma con tus ojos, no sólo con el byte count.
   ══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
   §1 — CONTRATO DE TOKENS (SOP-04a). Paleta y tipografía: DESIGN.md Tribu.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── COLOR — roles ─────────────────────────────────────────────────── */
  --canvas-top:    #f7f4ee; /* crema — lienzo base, nunca #FFFFFF plano */
  --canvas-bottom: #efe8da; /* un paso más profundo, para bandas alternas */
  --canvas-bottom-deep: #dad3c6; /* canvas-bottom ~9% más oscuro — degradado de Quiénes somos (ronda 4) */
  --paper-white:   #ffffff; /* reservado: topbar y tarjetas/polaroids sobre color */
  --ink:           #2b2620; /* tinta principal, nunca #000000 */
  --ink-soft:      #5b5348;
  /* --gray igualado a --ink-soft (barrido de contraste, 01/09): el valor
     viejo (#8a8175) reprobaba 4.5:1 en TODOS los fondos claros del sitio
     (3.49 en canvas-top, 3.14 en canvas-bottom, 2.58 en canvas-bottom-deep,
     3.83 en blanco — verificado con la fórmula de contraste, sin ningún
     doodle de por medio). #5b5348 es el único candidato que pasa en los
     cuatro. La jerarquía de este texto secundario la hacen el tamaño y el
     peso, nunca un color más claro — no inventar un gris intermedio. */
  --gray:          #5b5348;
  --border:        rgba(43,38,32,0.12);
  --accent:        #EB5153; /* coral */
  --accent-hover:  #f17673;
  --accent-active: #d93f3f;
  /* Coral oscurecido para TEXTO PEQUENO sobre el lienzo crema. El coral de
     marca (#EB5153) sobre el degradado del hero da 3.28:1 en su punto claro
     y 2.95:1 en el oscuro — no pasa AA (4.5:1) para texto bajo 18.66px.
     Este da 5.56:1 y 5.01:1. Para botones y trazos gruesos sigue el coral. */
  --accent-ink:    #B62F31;
  --amber:         #C8843A; /* segundo tono de acción, botones sobre banda */
  --surface-dark:  #2b2019; /* cierre / resenas — oscuro CALIDO */
  --surface-deep:  #17110d; /* pie — un paso mas profundo, para que la onda
                               del pie se vea contra el bloque de cierre */ /* footer y tarjeta de reseñas */

  /* Colores de identidad por línea de negocio (rol, no "acento" único —
     ver DESIGN.md: cada burbuja es el mismo avión en otro color) */
  --band-after-school: #7B4E9E;
  --band-camps:        #2F5D45;
  --band-gestion:       #3B5083;
  --band-fun-day:       #1A6E8E;
  --band-team-building: #16283F;
  --band-coaching:      #2A4438;
  --band-experiencias:  #5C5A2E;

  /* ── ESPACIADO — escala de 8, fija ───────────────────────────────────── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;

  /* ── RADIOS — fijos ───────────────────────────────────────────────────  */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ── SOMBRAS — vocabulario de cuatro, tintadas a tinta ───────────────── */
  --shadow-sm:   0 1px  2px  rgba(43,38,32,0.06);
  --shadow-md:   0 8px  24px rgba(43,38,32,0.10);
  --shadow-lg:   0 20px 50px rgba(43,38,32,0.16);
  --shadow-glow: 0 0    30px rgba(235,81,83,0.30); /* UN momento: halo del CTA del hero */
  /* Extra de régimen (no sustituye el vocabulario de arriba): sombra dura
     desplazada, identidad plana de Tribu — DESIGN.md §Elevation */
  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 4px 4px 0 var(--ink);

  /* ── MOVIMIENTO — dos capas, fijo ─────────────────────────────────────  */
  --ease-out:       cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:    cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-signature: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-press:    140ms;
  --dur-ui:       200ms;
  --dur-overlay:  300ms;
  --dur-entrance: 800ms;

  /* ── TIPOGRAFÍA — dos familias, aprobadas en 04a §4 ──────────────────── */
  --font-display: 'Nunito', sans-serif;
  --font-body:    'Lato', sans-serif;

  /* Tamaño de la barra superior (componente, no token de sistema) */
  --nav-h: 80px;
}

/* ══════════════════════════════════════════════════════════════════════
   Reset y base
   ══════════════════════════════════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body);
  font-size: 1.125rem; /* 18px — cuerpo, §4 */
  line-height: 1.6;
  color: var(--ink);
  background: linear-gradient(180deg, var(--canvas-top) 0%, var(--canvas-top) 100%);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}
@media (min-width: 768px) {
.container { padding: 0 var(--space-5); } }
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--ink);
}

/* Rol "script/marcador a mano" — logrado con Nunito itálica pesada +
   subrayado de trazo (NO se introduce una tercera familia: 04a §4 borra
   toda fuente que no sea display+body). */
.script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  color: var(--accent);
  display: inline-block;
  position: relative;
  transform: rotate(-2deg);
  letter-spacing: -0.01em;
}
.script::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -4%;
  bottom: -0.12em;
  height: 0.14em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q20 2 38 9 T76 8 T114 7 T152 10 T198 6' fill='none' stroke='%23EB5153' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.85;
}
.script--light { color: var(--paper-white); }
.script--light::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q20 2 38 9 T76 8 T114 7 T152 10 T198 6' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: 0.7;
}

/* Etiqueta/label — 04a §4 escala (poco usada: presupuesto de 2 en 8 secciones) */
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.95rem; /* 12–15px con clamp más abajo si se necesita */
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.section {
  padding: var(--space-6) 0;
  position: relative;
}
.section-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem); /* headline, §4 */
  line-height: 1.1;
  margin-bottom: var(--space-3);
}
.section-desc {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ── Botones — familia única, banderín (ronda 5) ──────────────────────
   Primario (.btn--coral): la acción principal, en cualquier fondo.
   Secundario (.btn--pill-white / .band-link): cuerpo blanco sobre banda de
   color; el texto toma el color propio de esa banda (overrides junto a
   cada .band--X más abajo, y en el <style> de cada página interna).
   Terciario (.btn--outline): tinta sólida, segunda acción sobre crema/blanco.
   Los tres comparten la forma de banderín — rectángulo que termina en punta,
   mayúsculas espaciadas, SIN sombra dura ni borde-radio de pastilla — y el
   mismo gesto: al pasar el cursor se alargan hacia la punta y cambian de
   color. Conservan el efecto magnético (`data-magnetic`, en tribu.js). ──── */
.btn,
.band-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  isolation: isolate; /* el ::before de la forma pinta detrás (z-index:-1) sin escaparse del stacking context */
  font-family: var(--font-display);
  font-weight: 800;
  /* 1.2rem/800 franquea el umbral WCAG de "texto grande" (≥18.66px y
     negrita): el coral #EB5153 con texto blanco da 3.6:1, que sólo pasa
     AA como texto grande (≥3:1), no como texto normal (≥4.5:1). */
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 15px 34px 15px 24px;
  border: none;
  /* SIN white-space:nowrap: varios CTA son frases largas ("Contarles qué
     necesita mi equipo", "Avísame de la próxima experiencia"). Con nowrap
     el texto se volvía el contenido más ancho de toda la columna y, como
     los items de flex/grid no encogen bajo su min-content por defecto,
     empujaba .band-text/.prog-text — y con ellos la página entera — más
     allá del viewport en celular (raíz del desborde horizontal). Sin
     nowrap el botón envuelve a 2 líneas cuando hace falta; en escritorio
     hay espacio de sobra y sigue en una sola línea. */
  transition: padding var(--dur-ui) var(--ease-out), color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
/* La forma de banderín (clip-path) vive en un ::before, NO en el ancla.
   Probado con Playwright: un `clip-path` puesto directo en el elemento
   enfocable recorta también su `outline` Y su `filter: drop-shadow`
   (ambos se probaron primero — el anillo de foco salía invisible en los
   dos casos porque el recorte pasa DESPUÉS del filtro en el orden de
   pintado). Al mover el clip-path a un ::before, el ancla queda sin
   recortar y su `outline` normal, offset hacia AFUERA, se ve completo. */
.btn::before,
.band-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  transition: background var(--dur-ui) ease;
}
.btn:focus-visible,
.band-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Primario — coral */
.btn--coral::before { background: var(--accent); }
.btn--coral { color: var(--paper-white); }
@media (hover: hover) and (pointer: fine) {
.btn--coral:hover { padding-right: 48px; }
.btn--coral:hover::before { background: var(--ink); }
}
.btn--coral:active::before { background: var(--accent-active); }
.btn--coral:active { transform: scale(0.97); }

/* Secundario — cuerpo blanco, para ir sobre una banda de color.
   .band-link es el mismo tratamiento con flecha incorporada. El color de
   texto por defecto es tinta; cada banda lo sobreescribe a su propio color. */
.btn--pill-white::before,
.band-link::before { background: var(--paper-white); }
.btn--pill-white,
.band-link { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
a.btn--pill-white:hover,
a.band-link:hover { padding-right: 48px; color: var(--paper-white); }
a.btn--pill-white:hover::before,
a.band-link:hover::before { background: var(--ink); }
}
.btn--pill-white:active,
.band-link:active { transform: scale(0.97); }
/* .btn--pill-white/.band-link viven SIEMPRE sobre una banda de color: un
   anillo tinta ahí se pierde contra fondos oscuros. Blanco sí contrasta
   contra las 7 bandas, todas medio-oscuras a oscuras. */
a.btn--pill-white:focus-visible,
a.band-link:focus-visible { outline-color: var(--paper-white); }

/* Terciario — tinta sólida, segunda acción sobre crema/blanco */
.btn--outline::before { background: var(--ink); }
.btn--outline { color: var(--paper-white); }
@media (hover: hover) and (pointer: fine) {
.btn--outline:hover { padding-right: 48px; }
.btn--outline:hover::before { background: var(--accent); }
}
.btn--outline:active { transform: scale(0.97); }

/* ── Stickers — contorno blanco grueso + tinta fina + relleno color ──── */
.sticker { position: absolute; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(43,38,32,0.18)); }
.sticker .outline-w { fill: none; stroke: #fff; stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.sticker .outline-i { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }

/* ── Marco de foto tipo polaroid ──────────────────────────────────────── */
.polaroid {
  background: var(--paper-white);
  padding: var(--space-2);
  padding-bottom: var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), var(--shadow-lg);
  display: inline-block;
  max-width: 100%;
}
.polaroid img {
  border-radius: var(--radius-sm);
  width: 100%;
  height: auto;
  display: block;
}
.rot--l3 { transform: rotate(-3deg); }
.rot--l2 { transform: rotate(-2deg); }
.rot--r2 { transform: rotate(2deg); }
.rot--r4 { transform: rotate(4deg); }

/* Sobre crema o blanco el garabato va oscuro, en multiply, como la seccion. *//* Sobre casi-negro el multiply no pinta nada (multiplicar por 0.1 da 0.1):
   aqui el garabato va invertido y sin blend, igual que en .reviews::before. */
/* ══════════════════════════════════════════════════════════════════════
   Barra superior
   ══════════════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--paper-white);
  z-index: 100;
  box-shadow: var(--shadow-sm);
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
.topbar-inner { padding: 0 var(--space-5); } }
/* Logo mas grande — la clienta lo pidio tres veces ("sigue sin quedar").
   La barra mide 80px fijos (--nav-h, tope de 04a §9.2) y no tiene
   overflow:hidden en ningun ancestro, asi que el logo puede rebasarla un
   poco sin romper nada: se ve mas presente sin tocar la altura de la
   barra. Subida real: 52->64px en movil, 72->92px en escritorio (+28%). */
/* Jose, 09/09/2026: "el logotipo no cabe en la barra, esta demasiado grande".
   Medido: la barra mide 80px y el logo estaba en 92 — se salia 6px por arriba
   y 6 por abajo. 64px lo deja dentro con aire a los lados. */
.topbar-logo img { height: 56px; width: auto; }
@media (min-width: 768px) {
.topbar-logo img { height: 64px; } }
.topbar-nav {
  display: none;
  align-items: center;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
.topbar-nav { display: flex; } }
.topbar-nav a {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
}
@media (hover: hover) and (pointer: fine) {
.topbar-nav a { transition: opacity var(--dur-ui) ease; }
.topbar-nav a:hover { opacity: 0.6; }
}
/* ── Desplegable "Programas" (ronda 3, punto 2) ──────────────────────── */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
}
.nav-dropdown-caret { width: 16px; height: 16px; transition: transform var(--dur-ui) var(--ease-out); }
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: var(--paper-white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard), var(--shadow-lg);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  z-index: 110;
}
.nav-dropdown-menu.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown-menu a {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}
@media (hover: hover) and (pointer: fine) {
.nav-dropdown-menu a:hover { background: var(--canvas-top); } }
.nav-dropdown-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* El pill "Conocer Tribu" se quito por decision del cliente (04/09): confundia,
   mandaba a WhatsApp cuando esperaban ir a Quienes somos. Sin el, este bloque
   solo le sirve al boton de menu movil (oculto el mismo desde 1024px) — se
   colapsa por completo en escritorio para que la barra quede en dos bloques
   (logo + navegacion) en vez de dejar un hueco vacio a la derecha. */
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); }
@media (min-width: 1024px) {
.topbar-actions { display: none; } }

/* Control de interfaz — el menú móvil arranca oculto: es su estado natural
   (excepción del §8.2, no es contenido). */
.nav-toggle {
  width: 44px;  /* WCAG 2.5.5 — gana sobre la escala de 8 */
  height: 44px; /* WCAG 2.5.5 — gana sobre la escala de 8 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
@media (min-width: 1024px) {
.nav-toggle { display: none; } }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink);
  transition: transform var(--dur-ui) var(--ease-in-out);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translateY(-7px) rotate(-45deg); }
.mobile-panel {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--paper-white);
  border-bottom: 2px solid var(--ink);
  z-index: 99;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  opacity: 0;               /* control de interfaz: su estado de reposo es oculto (§8.2) */
  pointer-events: none;
  transform: translateY(-8px);
}
@media (min-width: 1024px) {
.mobile-panel { display: none; } }
/* :not(.btn) — antes esta regla también le ganaba en especificidad al
   padding propio de .btn (15px 34px 15px 24px) y se lo dejaba en
   "var(--space-1) 0". Sin su padding derecho el texto del botón
   ("Conocer Tribu") quedaba pegado a la punta del banderín (el ::before
   con clip-path) y se veía cortado — el botón, blanco sobre coral, perdía
   su fondo justo donde el texto lo necesitaba. */
.mobile-panel a:not(.btn) { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; padding: var(--space-1) 0; }
.mobile-panel .btn { align-self: flex-start; margin-top: var(--space-1); }

/* ══════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════ */
.hero {
  padding-top: calc(var(--nav-h) + var(--space-5));
  padding-bottom: var(--space-6);
  background: linear-gradient(135deg, var(--canvas-top) 0%, var(--canvas-bottom) 100%);
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* Fondo de la primera pantalla. Elegido por Jose el 09/09/2026 entre tres
   propuestas: el material del juego visto desde arriba. Reemplaza el beige
   plano del que se quejaron las tres en la junta ("vemos muy plana la primera
   hoja... se ve vacia esa parte"). El color de abajo se queda como respaldo:
   si la imagen no carga, el hero sigue siendo legible. */
.pg-portada .hero#inicio {
  background-color: var(--canvas-top);
  background-image: url("img/hero-portada-movil.webp");
  background-repeat: no-repeat;
  /* Movil. El 09/09 se habia puesto "100% auto" anclado abajo para que la
     cuerda y los aros no cayeran debajo del titulo; el costo fue que la foto
     entraba COMPLETA y aplastada al pie, con toda la mitad de arriba en crema
     liso. Se ve como un error, y Jose lo marco como tal el 11/09.
     Ahora recorta de verdad ("cover"), encuadrado al 50% del ancho: esa franja
     de la foto es el lienzo con sus sombras y hojas sueltas, sin objetos
     duros, asi que el titulo se sigue leyendo limpio y el fondo ya es foto en
     toda la pantalla. Comprobado a 390px contra cinco encuadres. */
  background-size: cover;
  background-position: 50% center;
}
@media (min-width: 760px) {
  .pg-portada .hero#inicio {
    background-image: url("img/hero-portada.webp");
    background-size: cover;
    background-position: center right;
  }
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 1024px) {
/* Revision cliente 09/09: "hay un espacio enorme de aire entre el video y
   el texto... se ve un avion chiquito y como amplio". Con 7fr para una
   columna que solo aloja un video vertical (9:16, ~294px), el video quedaba
   pegado a la derecha (margin-left:auto) y dejaba ~360px de columna vacia
   antes de el, mas los 64px del gap: 424px de aire muerto medido con
   agent-browser. "auto" hace que la columna se ajuste al ancho real del
   video en vez de reservar un 7fr fijo, y el gap baja de --space-6 a
   --space-5: el resto del aire lo absorbe la columna de texto (1fr), que
   ahora tiene mas espacio para respirar. Solo toca >=1024px; movil intacto. */
.hero-grid { grid-template-columns: 1fr auto; gap: var(--space-5); }
}
.hero-title {
  font-size: clamp(1.75rem, 6vw, 3.5rem); /* H1 móvil 28 → escritorio 56, §4 */
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.hero-title span.script { font-size: 1.15em; }
/* Antetitulo del H1 de la portada. Va DENTRO del <h1> a proposito: asi las
   palabras que la gente teclea ("juego y movimiento", "Cuajimalpa") viven en
   el titulo principal sin desplazar la frase de marca, que sigue grande.
   Variante D, elegida por Jose el 30/08/2026 sobre otras tres. */
.hero-title .hero-eyebrow {
  display: block;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  line-height: 1.3;
  margin-bottom: 0.55rem;
}
.hero-icons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.hero-icon-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: 128px; text-align: center; }
.hero-icon-badge {
  width: 56px; height: 56px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm), var(--shadow-hard-sm);
  border: 2px solid var(--ink);
}
.hero-icon-badge svg { width: 30px; height: 30px; }
.hero-icon-label { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; }
.hero-sub { font-size: 1.0625rem; color: var(--ink-soft); margin-top: var(--space-4); max-width: 40ch; }
.hero-cta { margin-top: var(--space-3); }

/* Acomodo móvil más apretado (ronda velocidad, 30/08): en celular el video
   arrancaba casi en el borde inferior de la pantalla — la visitante tenía
   que bajar para verlo, y el video es lo único que vende el programa. Se
   aprietan los espacios del bloque de arriba SÓLO bajo 1024px; el botón
   "Conocer Tribu" de la barra superior (fixed) sigue siempre visible, así
   que el CTA de aquí abajo puede vivir más pegado sin perder la llamada
   a la acción. */
@media (max-width: 1023px) {
.hero { padding-top: calc(var(--nav-h) + var(--space-3)); padding-bottom: var(--space-4); }
.hero-grid { gap: var(--space-3); }
.hero-icons { margin-top: var(--space-2); gap: var(--space-2); }
.hero-icon-item { width: 96px; gap: 4px; }
.hero-icon-badge { width: 44px; height: 44px; }
.hero-icon-badge svg { width: 24px; height: 24px; }
.hero-icon-label { font-size: 0.75rem; }
.hero-sub { margin-top: var(--space-2); }
.hero-cta { margin-top: var(--space-2); }
}
.hero-media-wrap { position: relative; }
/* 11/09/2026 — el video del hero pasó de vertical a horizontal (el que
   mandó Chad). La columna era "auto" y se ajustaba al ancho de un 9:16,
   así que un 16:9 entraba recortado a una franja. Se le da ancho propio:
   el marco ya es 16/9, con esto el video entra completo y queda un poco
   más chico que la franja de antes. */
@media (min-width: 1024px) {
.hero-media-wrap { width: min(42vw, 470px); }
}
.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  border: 6px solid var(--paper-white);
  outline: 3px solid var(--ink);
  box-shadow: var(--shadow-sm), var(--shadow-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink-soft);
}
.media-frame img,
.media-frame video { width: 100%; height: 100%; object-fit: cover; display:block; background:#000; }
.media-frame.is-playing .play-btn { opacity:0; pointer-events:none; }
.play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: var(--radius-pill);
  background: var(--paper-white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm), var(--shadow-lg);
}
.play-btn svg { width: 26px; height: 26px; margin-left: 4px; }
.media-pending {
  position: absolute; bottom: var(--space-2); left: var(--space-2);
  background: rgba(43,38,32,0.72);
  color: var(--paper-white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}

/* ══════════════════════════════════════════════════════════════════════
   RESEÑAS
   ══════════════════════════════════════════════════════════════════════ */

.reviews {
  background: linear-gradient(135deg, var(--paper-white) 0%, var(--canvas-top) 100%);
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.reviews-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 1024px) {
.reviews-grid { grid-template-columns: 6fr 6fr; gap: var(--space-6); } }
.reviews-title-wrap { position: relative; }
.reviews-title { font-size: clamp(2rem, 4.5vw, 3rem); }
/* Tarjeta de reseña (ronda 4, punto 6): crema/blanca, sombra dura, borde
   tinta, comillas grandes en coral — reemplaza la tarjeta negra plana. */
/* El alto de la tarjeta lo aparta el script (el de la reseña mas larga) para
   que no cambie de tamano al rotar cada 7s y no empuje lo de abajo. Con el
   alto fijo, una resena corta dejaba todo el aire abajo: por eso el contenido
   se centra en vertical. */
.review-card {
  background: var(--paper-white);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4) var(--space-4);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-hard);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.review-card::before {
  content: "\201C";
  position: absolute;
  top: 10px; left: 22px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.35;
  pointer-events: none;
}
.review-quote {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: 1.3rem;
  line-height: 1.5;
  margin-top: var(--space-3);
}
.review-author { margin-top: var(--space-2); font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--ink-soft); }
.review-controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
/* Controles del carrusel de reseñas (ronda 5) — banderín pequeño de
   tinta, con la punta hacia su dirección (el de "anterior" es el mismo
   recorte espejeado). El paginador de FAQ se retiró (ronda "preguntas
   visibles"): las preguntas ya no se paginan, así que estos controles
   quedan exclusivos del carrusel de reseñas. */
.review-arrow {
  width: 44px; height: 44px; /* WCAG 2.5.5 — gana sobre la escala de 8 */
  position: relative;
  isolation: isolate; /* mismo patrón que .btn: la forma vive en ::before, el propio botón queda sin recortar para que su outline se vea */
  color: var(--paper-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  transition: transform var(--dur-ui) var(--ease-out);
}
.review-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  transition: background var(--dur-ui) ease;
}
.review-arrow:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* "anterior" apunta a la izquierda: el mismo recorte, espejeado. */
#reviewPrev::before {
  clip-path: polygon(100% 0, 10px 0, 0 50%, 10px 100%, 100% 100%);
}
@media (hover: hover) and (pointer: fine) {
.review-arrow:hover::before { background: var(--accent); }
.review-arrow:hover { transform: scale(1.08); }
}
.review-arrow:active { transform: scale(0.94); }
.review-dots { display: flex; gap: var(--space-2); } /* 16px — separa a los puntos lo suficiente para que su área de toque llegue a 26px sin pisar al vecino */
.review-dots button {
  width: 10px; height: 10px; padding: 0; border-radius: 50%;
  background: var(--paper-white); border: 2px solid var(--ink);
  position: relative; /* referencia para el ::after que agranda el área de toque */
  transition: background var(--dur-ui) ease, border-color var(--dur-ui) ease, transform var(--dur-ui) ease;
}
/* El punto se queda del mismo tamaño (se vería tosco agrandado) — lo que
   crece es su área de toque, invisible. Vertical llega a los 44px del
   WCAG 2.5.5 (no hay vecino arriba/abajo). Horizontal llega hasta el
   punto medio con el punto de al lado (gap:var(--space-2)=16px ÷ 2 = 8px
   por lado) — pasar de ahí haría que dos puntos vecinos compitan por el
   mismo toque, así que primero se separaron los puntos (16px) para que
   ese tope alcance 26px en vez de los 18px que daba el gap de 8px. */
.review-dots button::after {
  /* el inset se mide desde el borde de PADDING, adentro de los 2px de
     border — se le suman esos 2px para que el área de toque de verdad
     llegue a 44px de alto y 26px de ancho, medido desde el punto visible
     hacia afuera. */
  content: ""; position: absolute; inset: -19px -10px;
}
.review-dots button.is-active { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.review-card[data-fading] { opacity: 0; }
.review-card { transition: opacity 220ms var(--ease-out); }
.review-cta { margin-top: var(--space-4); text-align: center; }
.reviews-photo-wrap { position: relative; display: flex; justify-content: center; }

/* Diálogo de las 18 reseñas completas */
.reviews-dialog {
  border: none; border-radius: var(--radius-xl);
  padding: 0; max-width: 640px; width: calc(100% - var(--space-4));
  max-height: 82vh;
  box-shadow: var(--shadow-hard), var(--shadow-lg);
  background: var(--paper-white); color: var(--ink);
}
.reviews-dialog::backdrop { background: rgba(43,38,32,0.55); }
.reviews-dialog-inner { display: flex; flex-direction: column; max-height: 82vh; }
.reviews-dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 2px solid var(--ink);
}
.reviews-dialog-head h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; }
.reviews-dialog-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--ink); font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.reviews-dialog-list { overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.reviews-dialog-list li { border-bottom: 1px solid var(--border); padding-bottom: var(--space-3); }
.reviews-dialog-list li:last-child { border-bottom: none; padding-bottom: 0; }
.reviews-dialog-list p:first-child { font-style: italic; }
.reviews-dialog-list .review-author { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; opacity: 0.75; margin-top: var(--space-1); }

/* ══════════════════════════════════════════════════════════════════════
   Zigzag genérico (foto + texto)
   ══════════════════════════════════════════════════════════════════════ */

.zigzag {
  background: linear-gradient(135deg, var(--canvas-bottom) 0%, var(--canvas-bottom-deep) 100%);
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.zigzag-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 1024px) {
.zigzag-grid { grid-template-columns: 5fr 7fr; gap: var(--space-6); } }
.zigzag-grid.is-reverse .zigzag-media { order: 2; }
@media (min-width: 1024px) {
.zigzag-grid.is-reverse .zigzag-media { order: 1; }
.zigzag-grid.is-reverse .zigzag-text { order: 2; }
}
.zigzag-media { position: relative; display: flex; justify-content: center; }
.feature-list { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.feature-item { display: flex; align-items: flex-start; gap: var(--space-2); }
.feature-icon { width: 32px; height: 32px; flex-shrink: 0; }
.feature-text { font-family: var(--font-display); font-weight: 800; font-size: 1rem; padding-top: 2px; }

/* ── Quiénes llevan Tribu — fichas de Ana/Majo/Heidi, dentro de #quienes-somos ──── */
.team-wrap { position: relative; z-index: 1; margin-top: var(--space-6); }
/* Mismo peso que .section-title (el resto del sitio) — "Hemos trabajado con"
   y "Quiénes llevan Tribu" son dos títulos del mismo nivel, no uno un
   tercio del otro. */
.team-heading {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
.team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card {
  background: var(--paper-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Círculo con inicial — de pie hasta que llegue su foto (ver comentario en el
   HTML): mismo hueco de 72px, así el día que se sustituya por <img> el card
   no se recalcula. */
.team-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--paper-white);
  margin-bottom: var(--space-2);
  object-fit: cover; /* sin efecto si sigue siendo el div-inicial; listo para cuando sea <img> */
}
.team-name { font-size: 1.15rem; line-height: 1.2; }
.team-nick { font-weight: 700; color: var(--ink-soft); font-size: 0.9em; }
.team-role { font-size: 0.9rem; color: var(--ink-soft); font-weight: 700; margin: 2px 0 var(--space-1); }
.team-creds { display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; color: var(--ink-soft); padding-left: var(--space-2); }
.team-creds li { position: relative; }
.team-creds li::before { content: "•"; position: absolute; left: -14px; color: var(--accent); }
.team-note { margin-top: var(--space-3); font-size: 0.85rem; font-style: italic; color: var(--ink-soft); max-width: 70ch; }

/* ══════════════════════════════════════════════════════════════════════
   Instituciones — franja curada (propuesta pág. 9)
   ══════════════════════════════════════════════════════════════════════ */
.institutions {
  background: linear-gradient(135deg, var(--paper-white) 0%, var(--canvas-top) 100%);
  position: relative;
  isolation: isolate;
}

.inst-block { margin-top: var(--space-4); }
.inst-block:first-of-type { margin-top: var(--space-3); }
.inst-block-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
/* Grid, no flex: con flex simple los logos quedaban en su tamaño mínimo,
   apelmazados en un tercio de la fila (ronda 1). Columnas fijas de 156px
   con auto-fit colapsa las que sobran a 0 y deja el espacio libre COMO
   espacio libre — no como logo estirado. justify-content:start lo manda
   completo detrás del último logo, así el primero arranca exactamente en
   el margen del título (ronda 2: space-evenly repartía espacio también
   ANTES del primer logo, y lo despegaba del margen). Un bloque de 2 no se
   estira a 4 columnas: sólo usa 2 y se queda pegado a la izquierda, con
   el mismo gap que el bloque de 4 — parejo entre bloques, no relleno. */
.inst-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, 156px);
  justify-content: start;
  align-items: center;
  /* gap angosto en celular — con el ancho de columna fijo (156px), un gap
     más generoso ya no deja caber 2 por renglón en 390px (se iban a 1). */
  gap: var(--space-4) var(--space-3);
}
@media (min-width: 768px) {
.inst-row { gap: var(--space-4) var(--space-5); } }
/* Caja de peso visual parejo: todos los logos comparten el mismo hueco
   (156×92) sin importar su proporción nativa — object-fit:contain los
   centra dentro. Antes cada <img> sólo compartía la ALTURA (56–64px) y un
   logo angosto y alto (Tomás Moro, 89×128) se veía diminuto junto a uno
   apaisado (Inlakesh, 287×85) que llegaba a ocupar el triple de ancho.
   La caja pareja no elimina la diferencia — sigue siendo real, cada logo
   trae su propia densidad — pero la acota a un rango razonable. */
.inst-logo-box {
  width: 156px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Escala de grises + opacidad hasta que se pasa el cursor — evita que 8
   paletas distintas peleen entre sí. Tomás Moro, Inlakesh y Clara Moreno
   llegaron con placa de color propia (verde/verde salvia/rosa) — a los
   otros cinco los recortaron sobre transparente y a estos tres no, así que
   eran tres cajas grises entre cinco logos flotando (ronda 2). Se les quitó
   la placa a mano (img/logos/*.png, respaldo del original en
   _backup-r2/logos-originales/): a Tomás Moro y Clara Moreno les bastaba —
   su trazo ya era oscuro y se lee solo sobre el crema. A Inlakesh no: su
   marca es blanca, pensada para ir sobre la placa, así que se recoloreó a
   --ink (#2b2620) al quitarle el fondo — si se dejaba blanca, desaparecía
   contra la página. Los ocho llegan aquí ya sobre transparente; el filtro
   de abajo es el mismo para los ocho, sin excepción. */
.inst-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  transition: filter var(--dur-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
.inst-logo:hover { transform: scale(1.04); }
}

/* ══════════════════════════════════════════════════════════════════════
   Bandas de línea de negocio
   ══════════════════════════════════════════════════════════════════════ */
.band { color: var(--paper-white); position: relative; overflow: visible; isolation: isolate; }
/* Garabato de fondo en multiply + degradado sutil del mismo color (ronda 3, punto 1).
   El degradado va de la base a un tono ~9% más oscuro, en diagonal. */
.band--after-school { background: linear-gradient(135deg, var(--band-after-school) 0%, #6f468e 100%); }
.band--camps { background: linear-gradient(135deg, var(--band-camps) 0%, #2a543e 100%); }
.band--gestion { background: linear-gradient(135deg, var(--band-gestion) 0%, #354876 100%); }
.band--fun-day { background: linear-gradient(135deg, var(--band-fun-day) 0%, #155A75 100%); }
.band--team-building { background: linear-gradient(135deg, var(--band-team-building) 0%, #101d2e 100%); }
.band--coaching { background: linear-gradient(135deg, var(--band-coaching) 0%, #263d32 100%); }
.band--experiencias { background: linear-gradient(135deg, var(--band-experiencias) 0%, #535129 100%); }

/* Texto de .band-link / .btn--pill-white = el color propio de cada banda
   (ronda 5, familia banderín) */
.band--after-school .band-link,
.band--after-school .btn--pill-white { color: var(--band-after-school); }
.band--camps .band-link,
.band--camps .btn--pill-white { color: var(--band-camps); }
.band--gestion .band-link,
.band--gestion .btn--pill-white { color: var(--band-gestion); }
.band--fun-day .band-link,
.band--fun-day .btn--pill-white { color: var(--band-fun-day); }
.band--team-building .band-link,
.band--team-building .btn--pill-white { color: var(--band-team-building); }
.band--coaching .band-link,
.band--coaching .btn--pill-white { color: var(--band-coaching); }
.band--experiencias .band-link,
.band--experiencias .btn--pill-white { color: var(--band-experiencias); }
.band-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 1024px) {
.band-grid { grid-template-columns: 6fr 6fr; gap: var(--space-6); } }
.band-grid.is-reverse .band-media { order: 2; }
@media (min-width: 1024px) {
.band-grid.is-reverse .band-media { order: 1; }
.band-grid.is-reverse .band-text { order: 2; }
}
.band-media { position: relative; display: flex; justify-content: center; }
/* Ritmo vertical (ronda 4, punto 2): columna flex con UN solo valor de aire
   entre título / subtítulo / párrafo / datos / botón — antes cada quien
   traía su propio margin-top y el avión con estela (ya retirado, ver
   HTML) rompía el ritmo con un hueco de ~150px. Medido con Playwright
   1440×900 en las 7 bandas: padding arriba = padding abajo = 64px,
   texto y foto centrados entre sí (diferencia <0.1px), mismo ancho de
   columna de texto (560px) en las 7 — ver R4-COMPONENTES.md. */
.band-text { display: flex; flex-direction: column; gap: var(--space-3); }
.band-text > .script { align-self: flex-start; }
.band-title { color: var(--paper-white); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.05; }
.band-desc { font-size: 1.0625rem; opacity: 0.92; max-width: 55ch; }
.band-details { display: flex; flex-direction: column; gap: 6px; font-size: 0.95rem; opacity: 0.92; }
.band-details b { font-weight: 800; }
.band-pending {
  margin-top: var(--space-3);
  font-size: 0.9rem;
  font-style: italic;
  opacity: 0.9;
  background: rgba(255,255,255,0.14);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}
.band-cta.is-disabled .btn {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* ── "Conocer <programa>" — ronda 4, punto 3: ahora es un botón con
   cuerpo real (secundario, ver arriba), no un enlace de texto. La flecha
   se conserva y avanza al hover; el seguimiento magnético sigue viniendo
   de `data-magnetic` en tribu.js. ───────────────────────────────────── */
.band-link-arrow { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.band-link:hover .band-link-arrow { transform: translateX(4px); }
}
.polaroid.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  min-width: 280px;
  text-align: center;
}
.polaroid.is-empty .polaroid-empty-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: var(--space-3);
}
/* ══════════════════════════════════════════════════════════════════════
   Preguntas frecuentes — buscador + paginación de 8, tarjeta con
   jerarquía propia (ronda 01/09/2026)
   Queja del cliente: "no hay dos pesos de diseño en esa sección" — el
   home tenía 40 preguntas en <h3>+<p> corridas, sin caja ni número.
   Sigue SIN acordeón: cada pregunta visible tiene su respuesta visible
   siempre — <details> queda prohibido. Lo único que se oculta con
   `hidden` es qué PÁGINA de preguntas se muestra, o cuáles no coinciden
   con la búsqueda; eso está permitido (SOP no lo cubre, lo pidió Jose).
   ══════════════════════════════════════════════════════════════════════ */

.faq {
  background: linear-gradient(135deg, var(--paper-white) 0%, var(--canvas-top) 100%);
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.faq > .container { position: relative; z-index: 1; }
/* El título/desc queda tapado bajo la barra fija (80px) al saltar aquí con
   el paginador (scrollIntoView block:'start' no la descuenta sola).
   Por id, no por clase: after-school (#faq) y gestión emocional
   (#preguntas) no llevan .faq ni .faq-sec en su <section>. */
/* Jose, 09/09/2026: al tocar "Ver los datos" en Coaching, el titulo de la
   seccion quedaba DECAPITADO detras de la barra fija. Solo #faq y #preguntas
   compensaban los 80px de la barra; el resto de las anclas (#datos, #galeria,
   #talleres, #precios, #donde-corre, #cierre...) caian debajo de ella. Ahora
   la compensacion es para CUALQUIER destino de ancla. */
section[id], [id^="paso"], .prog-head[id], #faq, #preguntas {
  scroll-margin-top: calc(var(--nav-h) + var(--space-3));
}

/* `hidden` por sí solo pierde contra reglas de display más específicas
   (.faq-item usa flex, .faq-list usa grid en escritorio) — sin esto la
   paginación no ocultaría nada. */
[hidden] { display: none !important; }

/* ── Buscador ─────────────────────────────────────────────────────── */
.faq-toolbar { margin-top: var(--space-3); max-width: 520px; }
.faq-search { position: relative; display: flex; align-items: center; }
.faq-search-icon { position: absolute; left: 16px; color: var(--ink-soft); pointer-events: none; }
.faq-search-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-white);
  border: 1.5px solid var(--ink-soft);
  border-radius: var(--radius-pill);
  padding: 12px 44px;
}
.faq-search-input::placeholder { color: var(--gray); }
.faq-search-input:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.faq-search-clear {
  position: absolute; right: 8px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--radius-pill);
  color: var(--ink-soft); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.faq-search-clear:hover { color: var(--ink); background: var(--canvas-top); }
.faq-search-clear:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }

/* ── Lista y tarjeta ──────────────────────────────────────────────────
   Antes era .faq-list en columnas CSS con .faq-item como párrafo suelto.
   Ahora cada .faq-item es una tarjeta: número, acento a la izquierda,
   pregunta con más peso que la respuesta — eso es lo que da "dos pesos
   de diseño". Nada de opacidad/rgba para lograrlo: tamaño y peso. */
.faq-list { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; }
.faq-item {
  position: relative;
  background: var(--paper-white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 34px);
}
.faq-num {
  position: absolute;
  left: var(--space-2);
  top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--accent-ink);
}
.faq-item .faq-q { font-size: 1.1rem; font-weight: 800; line-height: 1.25; margin-bottom: 6px; }
.faq-answer { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
@media (min-width: 900px) {
/* align-items: start (no el stretch por defecto de grid) — si no, la
   tarjeta con respuesta corta se estira vacía hasta igualar a su vecina
   con respuesta larga. */
.faq-list { max-width: 1120px; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); align-items: start; }
}

/* ── Sin resultados ───────────────────────────────────────────────── */
.faq-empty {
  margin-top: var(--space-4);
  padding: var(--space-3);
  max-width: 620px;
  background: var(--paper-white);
  border: 1px dashed var(--ink-soft);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}
.faq-empty a { color: var(--accent-ink); font-weight: 700; }

/* ── Paginador ────────────────────────────────────────────────────── */
.faq-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.faq-pager-btn {
  font-family: var(--font-display); font-weight: 800; font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper-white);
  border: 1.5px solid var(--ink-soft);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  cursor: pointer;
}
.faq-pager-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.faq-pager-btn:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.faq-pager-btn:disabled { color: var(--gray); border-color: var(--border); cursor: not-allowed; }
.faq-pager-status { font-size: 0.9rem; color: var(--ink-soft); min-width: 90px; text-align: center; }
@media (max-width: 760px) {
/* A 390 los tres elementos del paginador no caben en una fila: sin esto
   quedaban partidos a la mitad, descuadrados. Los botones van juntos
   arriba, el estado abajo, centrado — ambas líneas ordenadas.
   El ellipsis en el buscador es red de seguridad (el placeholder ya se
   acortó para caber completo), por si el texto crece más adelante. */
.faq-search-input { text-overflow: ellipsis; overflow: hidden; }
.faq-pager-prev { order: 1; }
.faq-pager-next { order: 2; }
.faq-pager-status { order: 3; flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════════════════ */
.site-footer { background: var(--surface-dark); color: var(--paper-white); padding: var(--space-6) 0 var(--space-4); position: relative; overflow: hidden; }
/* Franja visual del pie (ronda 3, punto 5): el avión —la marca— cruzando con su
   estela larga, para que no quede sólo texto sobre negro. */
.footer-plane-trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* En celular el pie es larguisimo y alto: estirar la estela a TODO ese alto la
   volvia una raya casi vertical que no se parecia a una trayectoria ni llegaba
   al avion. Se le da una franja de arriba y ahi conserva su curva. */
@media (max-width: 759px) {
.footer-plane-trail { height: 190px; }
}
/* El avion, ya fuera del svg que se estira. Se para donde muere la estela:
   arriba a la derecha. Tamano fijo, sin deformarse en ningun ancho. */
.footer-plane {
  position: absolute;
  top: 14px; right: 12px;
  width: 44px; height: 44px;
  z-index: 0;
  pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 1; }
.footer-top { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 768px) {
.footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); } }
.footer-logo {
  display: inline-flex;
  align-items: center;
  background: var(--canvas-top);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
}
.footer-logo img { height: 44px; width: auto; display: block; }
.footer-socials { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.social-icon {
  width: 44px; height: 44px; /* WCAG 2.5.5 — gana sobre la escala de 8 */
  border-radius: var(--radius-pill);
  border: 2px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
}
.social-icon svg { width: 20px; height: 20px; flex: none; }
/* El nombre al lado del icono (11/09/2026). Antes el pie tenia dos circulos
   sin texto: se veia el logotipo de Instagram, pero no CUAL cuenta era —
   justo el dato que hay que repetir en todos lados despues del cambio de
   @tribu_camps a @vive_tribu. Con el nombre escrito, el pie lo dice y
   los buscadores lo leen como texto, no como un icono mudo.
   El alto tocable sigue en 44px (WCAG 2.5.5) y el ancho pasa a auto. */
.social-icon { width: auto; padding: 0 var(--space-3); gap: 10px; }
.social-nombre {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}
/* En 390px los dos caben en un renglon; si alguna vez se agrega un tercero,
   que baje en vez de desbordar. */
.footer-socials { flex-wrap: wrap; }
@media (hover: hover) and (pointer: fine) {
.social-icon { transition: opacity var(--dur-ui) ease; }
.social-icon:hover { opacity: 0.65; }
}
.footer-col h3.script--light { font-size: 1.6rem; margin-bottom: var(--space-2); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a,
.footer-col li { font-size: 0.95rem; color: rgba(255,255,255,0.82); }
/* El texto se queda del mismo tamaño; el padding agranda el alto tocable
   a 44px y el margen negativo cancela ese espacio en el flujo, para que
   la lista no se vuelva una escalera (el gap de 10px entre renglones no
   cambia). */
.footer-col a:not(.social-icon) { display: inline-block; padding: var(--space-2) 0; margin: calc(var(--space-2) * -1) 0; }
@media (hover: hover) and (pointer: fine) {
.footer-col a:not(.social-icon) { transition: opacity var(--dur-ui) ease; }
.footer-col a:not(.social-icon):hover { opacity: 0.6; }
}
.footer-tag { font-size: 0.75rem; opacity: 0.55; }
.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 0.85rem;
  opacity: 0.6;
  text-align: left;
}

/* ══════════════════════════════════════════════════════════════════════
   Coaching — ilustración "muy pronto" (aún sin fotos del cliente)
   ══════════════════════════════════════════════════════════════════════ */
.coaching-soon { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.coaching-soon-media { position: relative; }
.coaching-soon-title {
  position: absolute;
  left: 15.4%; right: 23.4%; top: 16.1%; bottom: 41.3%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.68rem, 2.3vw, 0.85rem);
  line-height: 1.2;
  color: var(--ink);
  padding: 4px;
}
.coaching-soon-invite { font-size: 0.98rem; max-width: 34ch; }

/* ══════════════════════════════════════════════════════════════════════
   Galería de fotos reales — grid de polaroids (Fun Day, Experiencias,
   Team Building; internas)
   ══════════════════════════════════════════════════════════════════════ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 640px) {
.gallery-grid { grid-template-columns: repeat(3, 1fr); } }
/* Con 4 fotos y 3 columnas quedaba una fila de 3 y una suelta abajo, y ese
   hueco se lee como error (Jose, 09/09/2026: "hay tres fotografias juntas y
   luego una cuarta abajo y eso nos deja todo un espacio enorme"). Si la
   galeria tiene EXACTAMENTE 4, van las 4 en una sola fila. */
@media (min-width: 900px) {
.gallery-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } }
.gallery-grid .polaroid { width: 100%; align-self: start; }

/* Miniatura clicable dentro del polaroid — abre la versión grande en el
   lightbox de abajo. Sin JS sigue siendo una <img> normal en la rejilla,
   nada depende del script para verse (§8.2). */
.foto-trigger {
  display: block; width: 100%; padding: 0; margin: 0; border: none; background: none;
  cursor: pointer; border-radius: var(--radius-sm);
}
.foto-trigger img { transition: opacity var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.foto-trigger:hover img { opacity: 0.85; } }

/* ══════════════════════════════════════════════════════════════════════
   Lightbox de fotos — <dialog> nativo, mismo patrón que .reviews-dialog
   del home: ::backdrop, Escape nativo, clic fuera y botón cierran.
   ══════════════════════════════════════════════════════════════════════ */
.lightbox-dialog {
  position: relative;
  border: none; border-radius: var(--radius-lg);
  padding: 0; max-width: min(92vw, 900px); max-height: 88vh;
  background: transparent; box-shadow: var(--shadow-hard), var(--shadow-lg);
}
.lightbox-dialog::backdrop { background: rgba(43,38,32,0.75); }
.lightbox-img { display: block; max-width: 100%; max-height: 88vh; border-radius: var(--radius-lg); }
.lightbox-close {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 44px; height: 44px; /* WCAG 2.5.5 — gana sobre la escala de 8 */
  border-radius: 50%; border: 2px solid var(--paper-white);
  /* 0.68 y no menos: con el peor píxel posible detrás (foto blanca) el
     texto blanco sigue pasando 4.5:1 (B.5.4) — 0.55 se quedaba en ~3.4:1. */
  background: rgba(43,38,32,0.68); color: var(--paper-white);
  font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════
   Utilidades de sección y accesibilidad
   ══════════════════════════════════════════════════════════════════════ */
.va-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media print {
* { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

main > section:not(.band):not(.zigzag):not([class*="band--"]) {
  position: relative;
  isolation: isolate;
  
  background-color: var(--canvas-top);
}

body { position: relative; }
body > * { position: relative; z-index: 1; }

.reviews,
.zigzag,
.faq,
.institutions,
main > section:not(.band):not(.zigzag):not([class*="band--"]) {
  background-color: var(--canvas-top);
  background-image: none;
}

/* Base: el crema claro es el default de cualquier seccion clara que no tenga
   tratamiento propio (paginas internas incluidas). Sin !important, para que
   las reglas de abajo puedan darle su tono a cada una.                     */
main > section:not(.band):not([class*="band--"]) {
  background: var(--canvas-top);
}

/* 1. Portada — crema claro, se queda como estaba. */
.hero { background: var(--canvas-top); }

/* 2. Resenas — TINTA OSCURA. Es el corte fuerte de la portada: la prueba
      social frena el ojo. Las tarjetas ya son blancas con borde de tinta y
      sombra dura, asi que sobre oscuro ganan, no pierden.                  */
.reviews { background: var(--surface-dark) !important; color: var(--paper-white); }

.reviews .section-title,
.reviews .reviews-title,
.reviews .script { color: var(--paper-white); }
.reviews .script::after { background: var(--accent); }
/* El enlace "Leer mas resenas" heredaba tinta sobre tinta: invisible. */
.reviews .reviews-more,
.reviews a:not(.btn):not(.review-arrow) { color: var(--paper-white); }
/* Flechas del carrusel: eran tinta sobre crema. Sobre tinta desaparecian. */
.reviews .review-arrow { color: var(--surface-dark); }
.reviews .review-arrow::before { background: var(--paper-white); }
.reviews .review-dots button { border-color: var(--paper-white); }
/* Sombra dura de las tarjetas: la de tinta se pierde contra el fondo de
   tinta. Se cambia a coral, que es el acento de la marca.                  */
.reviews .review-card { box-shadow: 6px 6px 0 var(--accent); }

/* 3. Quienes somos — crema medio. Vuelve a lo claro despues del corte. */
.zigzag,
#quienes-somos { background: var(--canvas-bottom) !important; }

/* 4. Hemos trabajado con — papel limpio. Cambio de MATERIAL, no de matiz:
      los logotipos de las instituciones piden fondo neutro. No es blanco
      plano: lleva su garabato al 8%.                                       */
.institutions,
#instituciones { background: var(--paper-white) !important; }

.faq,
.faq-sec,
#faq { background: var(--canvas-bottom-deep) !important; }
/* 6. Cierre / llamada final — tinta oscura, igual que resenas. Jose, 31/08:
      "la cola de la pagina se aplana siempre" — preguntas y cierre caian en
      el mismo crema que las genericas de alrededor, en las 11 paginas
      internas. Antes cada pagina traia su PROPIO `.cierre-sec` en el color
      de su banda (ver <style> de cada html) — con el ritmo de arriba esa
      regla ya perdia de todos modos por especificidad, asi que quedaba
      muerta en 6 archivos. Se centraliza aqui, una sola vez, para las 11.  */
.cierre-sec {
  background: var(--surface-dark) !important;
  color: var(--paper-white);
  text-align: center;
  position: relative;
  isolation: isolate;
}
.cierre-sec h2,
.cierre-sec .section-title { color: var(--paper-white); }
.cierre-sec p { max-width: 52ch; margin: var(--space-3) auto 0; opacity: 0.92; }

/* `.resenas-sec` (camps, testimonios) no tenia tono propio y caia entre dos
   paper-white — la regla de alternancia del punto 7 no la alcanza porque su
   vecino anterior trae `style="background"` inline (queda excluido a
   proposito, ver punto 7). Se le da tono fijo aqui, igual que faq-sec y
   cierre-sec: si aparece en otra pagina, ya hereda esto sin recablear.    */
.resenas-sec { background: var(--canvas-bottom) !important; }

/* 7. Secciones SIN tratamiento propio (contenido suelto entre las de arriba):
      alternan solas entre crema claro y crema medio para que nunca queden
      dos vecinas del mismo tono. Regla, no excepcion por pagina: una
      seccion nueva con `class="section"` a secas hereda el ritmo sin que
      nadie la recablee a mano. Cubre hasta 4 seguidas — ninguna pagina real
      pasa de 3 (camps, la mas larga, llega a "resenas-sec" sola entre
      zigzag y faq-sec).

      `:not([style*="background"])` es la salvedad: after-school y
      gestion-emocional YA alternan a mano, seccion por seccion, con
      `style="background:var(--canvas-X)"` — esta regla NO debe pisar eso
      (paso primero: la aplique sin la salvedad y rompio las dos paginas que
      ya estaban bien, con !important encima del inline). Sólo entra a
      resolver las secciones que de verdad no tienen tono propio.          */
main > section.section:not(.zigzag):not(.faq-sec):not(.cierre-sec):not([class*="band"]):not([style*="background"])
  + section.section:not(.zigzag):not(.faq-sec):not(.cierre-sec):not([class*="band"]):not([style*="background"]) {
  background: var(--canvas-bottom) !important;
}
main > section.section:not(.zigzag):not(.faq-sec):not(.cierre-sec):not([class*="band"]):not([style*="background"])
  + section.section:not(.zigzag):not(.faq-sec):not(.cierre-sec):not([class*="band"]):not([style*="background"])
  + section.section:not(.zigzag):not(.faq-sec):not(.cierre-sec):not([class*="band"]):not([style*="background"]) {
  background: var(--canvas-top) !important;
}
main > section.section:not(.zigzag):not(.faq-sec):not(.cierre-sec):not([class*="band"]):not([style*="background"])
  + section.section:not(.zigzag):not(.faq-sec):not(.cierre-sec):not([class*="band"]):not([style*="background"])
  + section.section:not(.zigzag):not(.faq-sec):not(.cierre-sec):not([class*="band"]):not([style*="background"])
  + section.section:not(.zigzag):not(.faq-sec):not(.cierre-sec):not([class*="band"]):not([style*="background"]) {
  background: var(--canvas-bottom) !important;
}

.hero,
main > section { position: relative; }

.site-footer,
footer.site-footer { background: var(--surface-deep) !important; }

/* Sobre los fondos oscuros el multiply no pinta nada (multiplicar por 0.1 da
   0.1). Esas secciones llevan la MISMA capa continua, invertida, recortada a
   su propia silueta — sigue siendo el mismo mosaico y en la misma posicion,
   asi que no se corta al entrar ni al salir de ellas. */

/* Las bandas de color llevan el dibujo de SU linea, no el general — es parte
   de la identidad de cada programa. Se montan POR ENCIMA de la capa continua
   (z-index 51 contra 50) y la tapan con su propio fondo: dentro de una banda
   sigue habiendo UNA sola capa, la suya. El corte del mosaico en su borde es
   intencional aqui — ahi cambia el color Y el dibujo, es otro bloque. */
.band { z-index: auto; }

.hero,
main > section { position: relative; isolation: isolate; }
/* Cada banda de color, con el dibujo de SU linea, invertido y con opacidad
   fija — su degradado ya no puede apagarlo. */
/* Secciones oscuras: el garabato va invertido, en trazo claro. */

/* ══════════════════════════════════════════════════════════════════════
   TEXTURA — SOLO en las bandas de actividades, una por una
   ══════════════════════════════════════════════════════════════════════
   Reglas duras aprendidas en las 24 h del 30-31/08. No se rompen:
   1. UNA sola capa por banda. Si algo se ajusta, se ajusta AQUI — nunca se
      agrega otra regla encima (asi se llego a tener seis apiladas).
   2. NINGUNA mascara de desvanecido en los bordes. La textura llega al filo,
      arriba y abajo. `--doodle-fade` fue la causa de "nunca llega hasta abajo".
   3. NADA de mix-blend-mode: multiply. Estas bandas tienen degradado, y
      multiply rinde menos cuanto mas oscuro es el fondo: la capa se apaga
      sola de arriba hacia abajo aunque este declarada uniforme.
      Va invertida con opacidad fija, que rinde igual sobre cualquier color.
   4. Detras del contenido (z-index 0 contra 1), nunca encima.               */
.band--after-school#after-school::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/after-school.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.band > * { position: relative; z-index: 1; }

.band--camps#camps::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/camps.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.band--gestion#gestion::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/gestion.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.band--fun-day#fun-day::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/fun-day.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
/* Su fondo es el mas oscuro del sitio (#16283F -> #101d2e) y con la capa al
   0.09 la textura rendia la mitad que en las otras seis (medido: 1.7-3.0 de
   diferencia contra 4-8 del resto). Se sube AQUI, en su propia regla. */
.band--team-building#team-building::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/team-building.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
.band--coaching#coaching::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/coaching.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.band--experiencias#experiencias::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/experiencias.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 760px) {
  /* El mosaico de 900px no cabe en 390 de ancho y quedaban franjas enteras
     cayendo en un hueco del dibujo. */
  .band[id]::before { background-size: 420px; }
}

/* ══════════════════════════════════════════════════════════════════════
   DOODLES POR SECCION — un dibujo de apoyo por seccion, sitio completo
   Agregado 2026-09-01. Mapa completo: MAPA-doodles.md en la raiz del sitio.

   Reglas duras (24 h de reclamos del cliente hasta llegar a esto):
   1. UNA sola capa por seccion. Si algo se ajusta, se ajusta en la regla
      que ya existe — jamas se agrega otra encima.
   2. NINGUNA mascara de desvanecido en los bordes: la textura llega al
      filo, arriba y abajo.
   3. NADA de mix-blend-mode. Sobre fondo con degradado, multiply rinde
      menos cuanto mas oscuro es el color y la capa se apaga sola de
      arriba a abajo aunque este declarada uniforme.
   4. Detras del contenido siempre (z-index 0 en el ::before, 1 en los
      hijos directos de la seccion), nunca encima.
   5. Nunca background-attachment: fixed (parallax, ya rechazado).

   Cada seccion se acota por PAGINA (clase en <body>) + selector propio,
   nunca solo por clase de color — varias paginas reusan .band--X,
   .zigzag, .quote-sec, #datos, #galeria, #faq con dibujos distintos.

   Calibracion: fondo claro (--canvas-top/-bottom/-bottom-deep,
   --paper-white) sin filtro, opacity 0.055 — a esa intensidad la parte
   blanca del dibujo aclara el fondo menos de 1 punto sobre 255.
   Fondo oscuro (bandas de color, .reviews, .cierre-sec, .notfound,
   .legal-head, #no-es) con filter:invert(1), opacity 0.09.

   Tamano del mosaico: los 16 dibujos nuevos (iconos mas chicos) van a
   1200px de escritorio / 560px en movil; los 9 viejos se quedan en
   900px / 420px, como ya estaban calibrados en las 7 bandas de A.html.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Migradas: vivian en el <style> de cada pagina, se centralizan aqui.
   Mismos valores de siempre (invert, 0.09, 900px) — no se recalibran,
   solo se relocan. UNICA excepcion: fiestas.html usaba after-school.jpg
   por error (heredado de compartir .band--after-school); el mapa pide
   fun-day.jpg para esa cabecera y aqui queda corregido. ────────────── */

.pg-after-school .program-head#inicio::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/after-school.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-after-school .program-head#inicio > * { position: relative; z-index: 1; }

.pg-camps .prog-head#camps::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/camps.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-camps .prog-head#camps > * { position: relative; z-index: 1; }

.pg-coaching .prog-head#coaching::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/coaching.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-coaching .prog-head#coaching > * { position: relative; z-index: 1; }

.pg-experiencias .prog-head#experiencias::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/experiencias.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-experiencias .prog-head#experiencias > * { position: relative; z-index: 1; }

.pg-fiestas .prog-head#fiestas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/fun-day.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-fiestas .prog-head#fiestas > * { position: relative; z-index: 1; }

.pg-fun-day .prog-head#fun-day::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/fun-day.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-fun-day .prog-head#fun-day > * { position: relative; z-index: 1; }

.pg-gestion header.prog-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/gestion.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-gestion header.prog-head > * { position: relative; z-index: 1; }

.pg-team-building .prog-head#team-building::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/team-building.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-team-building .prog-head#team-building > * { position: relative; z-index: 1; }

/* ── Nuevas: las 58 secciones que no tenian ningun dibujo. ────────── */

/* Jose, 09/09/2026: fuera la textura de garabatos del hero de la portada.
   Con el beige plano era decoracion; encima de una imagen de fondo se ve
   como suciedad sobre la foto. La regla de z-index de abajo se queda: es
   la que mantiene el contenido por encima de cualquier capa del hero. */
.pg-portada .hero#inicio > * { position: relative; z-index: 1; }

.pg-portada .reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/resenas.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-portada .reviews > * { position: relative; z-index: 1; }

/* Revision del cliente 09/09: "Quienes somos" subio para quedar antes de las
   resenas, quedo pegada al hero, y aparecio un arreglo de gradiente+mascara
   para esa costura (ver historial). El mismo dia, el documento de ACUERDOS
   revirtio el orden: las resenas van primero otra vez, "Quienes somos" vuelve
   a su lugar de siempre, lejos del hero. El arreglo ya no aplica aqui —
   revisado que la costura hero->resenas (ver .pg-portada .reviews::before,
   mas arriba) no repite el defecto: .reviews cierra en --surface-dark solido,
   un bloque de color deliberado contra el cierre claro del hero, no dos
   crema casi iguales peleando por notarse. Comprobado con captura 1440x900,
   09/09. Esta seccion vuelve a su doodle plano, igual que las otras 58. */
.pg-portada .zigzag#quienes-somos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/equipo.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-portada .zigzag#quienes-somos > * { position: relative; z-index: 1; }

.pg-portada .institutions#instituciones::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/instituciones.jpg");
  background-repeat: repeat;
  background-position: center top;
  /* mosaico mas chico que el resto A PROPOSITO: aqui el contenido son logos de
     marca pequenos, y a 1200px los birretes del fondo median casi lo mismo y
     competian con ellos. Si hay que ajustar, se ajusta ESTE valor. */
  background-size: 760px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.pg-portada .institutions#instituciones > * { position: relative; z-index: 1; }

.pg-portada .faq#faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/faq.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-portada .faq#faq > * { position: relative; z-index: 1; }

.pg-after-school #que-es::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/equipo.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-after-school #que-es > * { position: relative; z-index: 1; }

.pg-after-school #talleres::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/talleres.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-after-school #talleres > * { position: relative; z-index: 1; }

.pg-after-school #precios::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/precios.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-after-school #precios > * { position: relative; z-index: 1; }

.pg-after-school .band.band--after-school#como-funciona::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cierre.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-after-school .band.band--after-school#como-funciona > * { position: relative; z-index: 1; }

.pg-after-school #faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/faq.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-after-school #faq > * { position: relative; z-index: 1; }

.pg-after-school #cierre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/familia.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-after-school #cierre > * { position: relative; z-index: 1; }

.pg-camps .video-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/galeria.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-camps .video-sec > * { position: relative; z-index: 1; }

.pg-camps .zigzag#temporadas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/temporadas.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-camps .zigzag#temporadas > * { position: relative; z-index: 1; }

.pg-camps #que-se-hace::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/talleres.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-camps #que-se-hace > * { position: relative; z-index: 1; }

.pg-camps .zigzag#sedes::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/sedes.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-camps .zigzag#sedes > * { position: relative; z-index: 1; }

.pg-camps #datos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/datos.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-camps #datos > * { position: relative; z-index: 1; }

.pg-camps .resenas-sec#resenas-camps::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/resenas.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-camps .resenas-sec#resenas-camps > * { position: relative; z-index: 1; }

.pg-camps .faq-sec#preguntas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/faq.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-camps .faq-sec#preguntas > * { position: relative; z-index: 1; }

.pg-camps .cierre-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cierre.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-camps .cierre-sec > * { position: relative; z-index: 1; }

.pg-coaching .quote-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cita.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-coaching .quote-sec > * { position: relative; z-index: 1; }

.pg-coaching .zigzag#datos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/datos.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-coaching .zigzag#datos > * { position: relative; z-index: 1; }

.pg-coaching .faq-sec#preguntas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/faq.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-coaching .faq-sec#preguntas > * { position: relative; z-index: 1; }

.pg-coaching .cierre-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cierre.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-coaching .cierre-sec > * { position: relative; z-index: 1; }

.pg-experiencias .quote-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cita.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-experiencias .quote-sec > * { position: relative; z-index: 1; }

.pg-experiencias .zigzag#tipos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/crecimiento.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-experiencias .zigzag#tipos > * { position: relative; z-index: 1; }

.pg-experiencias #galeria::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/galeria.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-experiencias #galeria > * { position: relative; z-index: 1; }

.pg-experiencias #datos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/datos.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-experiencias #datos > * { position: relative; z-index: 1; }

.pg-experiencias .faq-sec#preguntas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/faq.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-experiencias .faq-sec#preguntas > * { position: relative; z-index: 1; }

.pg-experiencias .cierre-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cierre.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-experiencias .cierre-sec > * { position: relative; z-index: 1; }

.pg-fiestas .quote-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cita.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-fiestas .quote-sec > * { position: relative; z-index: 1; }

.pg-fiestas .zigzag#datos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/datos.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-fiestas .zigzag#datos > * { position: relative; z-index: 1; }

.pg-fiestas #precios::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/precios.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-fiestas #precios > * { position: relative; z-index: 1; }

.pg-fiestas #parte-as::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/after-school.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-fiestas #parte-as > * { position: relative; z-index: 1; }

.pg-fiestas .faq-sec#preguntas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/faq.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-fiestas .faq-sec#preguntas > * { position: relative; z-index: 1; }

.pg-fiestas .cierre-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cierre.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-fiestas .cierre-sec > * { position: relative; z-index: 1; }

.pg-fun-day .quote-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cita.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-fun-day .quote-sec > * { position: relative; z-index: 1; }

.pg-fun-day #galeria::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/galeria.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-fun-day #galeria > * { position: relative; z-index: 1; }

.pg-fun-day .zigzag#datos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/datos.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-fun-day .zigzag#datos > * { position: relative; z-index: 1; }

.pg-fun-day .faq-sec#preguntas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/faq.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-fun-day .faq-sec#preguntas > * { position: relative; z-index: 1; }

.pg-fun-day .cierre-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cierre.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-fun-day .cierre-sec > * { position: relative; z-index: 1; }

.pg-gestion #promesas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/familia.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-gestion #promesas > * { position: relative; z-index: 1; }

.pg-gestion #para-quien::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/equipo.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-gestion #para-quien > * { position: relative; z-index: 1; }

.pg-gestion #grupos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/emociones.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-gestion #grupos > * { position: relative; z-index: 1; }

.pg-gestion #precios::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/precios.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-gestion #precios > * { position: relative; z-index: 1; }

.pg-gestion #detalles::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/datos.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-gestion #detalles > * { position: relative; z-index: 1; }

.pg-gestion #no-es::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/crecimiento.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-gestion #no-es > * { position: relative; z-index: 1; }

.pg-gestion #preguntas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/faq.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-gestion #preguntas > * { position: relative; z-index: 1; }

.pg-gestion #cierre::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cierre.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-gestion #cierre > * { position: relative; z-index: 1; }

.pg-team-building .quote-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cita.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-team-building .quote-sec > * { position: relative; z-index: 1; }

.pg-team-building .zigzag#que-incluye::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/crecimiento.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-team-building .zigzag#que-incluye > * { position: relative; z-index: 1; }

.pg-team-building #galeria::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/galeria.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-team-building #galeria > * { position: relative; z-index: 1; }

.pg-team-building #datos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/datos.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-team-building #datos > * { position: relative; z-index: 1; }

.pg-team-building .faq-sec#preguntas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/faq.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-team-building .faq-sec#preguntas > * { position: relative; z-index: 1; }

.pg-team-building .cierre-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/cierre.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-team-building .cierre-sec > * { position: relative; z-index: 1; }

.pg-404 .notfound::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/perdido.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-404 .notfound > * { position: relative; z-index: 1; }

.pg-privacidad .legal-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/legal.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-privacidad .legal-head > * { position: relative; z-index: 1; }

.pg-privacidad .legal-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/datos.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-privacidad .legal-body > * { position: relative; z-index: 1; }

.pg-terminos .legal-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/legal.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  filter: invert(1);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.pg-terminos .legal-head > * { position: relative; z-index: 1; }

.pg-terminos .legal-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/doodles/datos.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1200px;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.pg-terminos .legal-body > * { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .pg-after-school .program-head#inicio::before { background-size: 420px; }
  .pg-camps .prog-head#camps::before { background-size: 420px; }
  .pg-coaching .prog-head#coaching::before { background-size: 420px; }
  .pg-experiencias .prog-head#experiencias::before { background-size: 420px; }
  .pg-fiestas .prog-head#fiestas::before { background-size: 420px; }
  .pg-fun-day .prog-head#fun-day::before { background-size: 420px; }
  .pg-gestion header.prog-head::before { background-size: 420px; }
  .pg-team-building .prog-head#team-building::before { background-size: 420px; }
  .pg-portada .reviews::before { background-size: 560px; }
  .pg-portada .zigzag#quienes-somos::before { background-size: 560px; }
  .pg-portada .institutions#instituciones::before { background-size: 560px; }
  .pg-portada .faq#faq::before { background-size: 420px; }
  .pg-after-school #que-es::before { background-size: 560px; }
  .pg-after-school #talleres::before { background-size: 560px; }
  .pg-after-school #precios::before { background-size: 560px; }
  .pg-after-school .band.band--after-school#como-funciona::before { background-size: 560px; }
  .pg-after-school #faq::before { background-size: 420px; }
  .pg-after-school #cierre::before { background-size: 560px; }
  .pg-camps .video-sec::before { background-size: 560px; }
  .pg-camps .zigzag#temporadas::before { background-size: 560px; }
  .pg-camps #que-se-hace::before { background-size: 560px; }
  .pg-camps .zigzag#sedes::before { background-size: 560px; }
  .pg-camps #datos::before { background-size: 560px; }
  .pg-camps .resenas-sec#resenas-camps::before { background-size: 560px; }
  .pg-camps .faq-sec#preguntas::before { background-size: 420px; }
  .pg-camps .cierre-sec::before { background-size: 560px; }
  .pg-coaching .quote-sec::before { background-size: 560px; }
  .pg-coaching .zigzag#datos::before { background-size: 560px; }
  .pg-coaching .faq-sec#preguntas::before { background-size: 420px; }
  .pg-coaching .cierre-sec::before { background-size: 560px; }
  .pg-experiencias .quote-sec::before { background-size: 560px; }
  .pg-experiencias .zigzag#tipos::before { background-size: 560px; }
  .pg-experiencias #galeria::before { background-size: 560px; }
  .pg-experiencias #datos::before { background-size: 560px; }
  .pg-experiencias .faq-sec#preguntas::before { background-size: 420px; }
  .pg-experiencias .cierre-sec::before { background-size: 560px; }
  .pg-fiestas .quote-sec::before { background-size: 560px; }
  .pg-fiestas .zigzag#datos::before { background-size: 560px; }
  .pg-fiestas #parte-as::before { background-size: 420px; }
  .pg-fiestas .faq-sec#preguntas::before { background-size: 420px; }
  .pg-fiestas .cierre-sec::before { background-size: 560px; }
  .pg-fun-day .quote-sec::before { background-size: 560px; }
  .pg-fun-day #galeria::before { background-size: 560px; }
  .pg-fun-day .zigzag#datos::before { background-size: 560px; }
  .pg-fun-day .faq-sec#preguntas::before { background-size: 420px; }
  .pg-fun-day .cierre-sec::before { background-size: 560px; }
  .pg-gestion #promesas::before { background-size: 560px; }
  .pg-gestion #para-quien::before { background-size: 560px; }
  .pg-gestion #grupos::before { background-size: 560px; }
  .pg-gestion #precios::before { background-size: 560px; }
  .pg-gestion #detalles::before { background-size: 560px; }
  .pg-gestion #no-es::before { background-size: 560px; }
  .pg-gestion #preguntas::before { background-size: 420px; }
  .pg-gestion #cierre::before { background-size: 560px; }
  .pg-team-building .quote-sec::before { background-size: 560px; }
  .pg-team-building .zigzag#que-incluye::before { background-size: 560px; }
  .pg-team-building #galeria::before { background-size: 560px; }
  .pg-team-building #datos::before { background-size: 560px; }
  .pg-team-building .faq-sec#preguntas::before { background-size: 420px; }
  .pg-team-building .cierre-sec::before { background-size: 560px; }
  .pg-404 .notfound::before { background-size: 560px; }
  .pg-privacidad .legal-head::before { background-size: 560px; }
  .pg-privacidad .legal-body::before { background-size: 560px; }
  .pg-terminos .legal-head::before { background-size: 560px; }
  .pg-terminos .legal-body::before { background-size: 560px; }
}