/* ============================================================
   layouts.css — Lienzo, slides y plantillas · Club Noel
   Modelo: lienzo fijo 1920×1080 escalado uniformemente al viewport
   (fidelidad pixel-perfect + responsive trivial, letterbox navy).
   ============================================================ */

/* ---- Stage = viewport ---- */
.stage {
  position: fixed; inset: 0;
  overflow: hidden;
  background: var(--navy-principal);   /* color de letterbox */
}

/* ---- Lienzo escalado 1920×1080 (solo slides "imagen": intro/menú/transición) ---- */
.canvas {
  position: absolute;
  left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
  overflow: hidden;
}

/* ---- Slide ---- */
.slide {
  position: absolute; inset: 0;
  z-index: var(--z-content);
  opacity: 0;
  visibility: hidden;
  content-visibility: hidden;   /* no se renderiza si no está activo */
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  content-visibility: visible;
}

/* ---- Controles de navegación: abajo-izquierda, color por sección ---- */
.nav {
  position: fixed; z-index: var(--z-nav);
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px;
  pointer-events: none;
  --nav-color: var(--navy-principal);   /* default; se sobreescribe por sección */
}
.nav[data-section="historia"] { --nav-color: var(--navy-principal); }
.nav[data-section="ruta"]     { --nav-color: var(--magenta-principal); }
.nav[data-section="calidad"]  { --nav-color: var(--naranja-principal); }

/* Píldora combinada Atrás | Siguiente */
.nav__pill {
  pointer-events: auto;
  display: inline-flex; align-items: stretch;
  background: var(--nav-color);
  border-radius: 999px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(29, 29, 27, 0.28);
}
.nav__btn {
  pointer-events: auto;
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  color: var(--blanco-1); background: transparent;
  padding: 0.7em 1.5em;
  transition: filter 160ms var(--ease), opacity 160ms;
}
.nav__btn--prev { border-right: 1px solid rgba(255, 255, 255, 0.35); }
.nav__btn:hover { filter: brightness(1.12); }
.nav__btn[disabled] { opacity: 0.4; pointer-events: none; }
.nav__label {
  pointer-events: none;
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(0.8rem, 1vw, 1rem);
  color: var(--nav-color);
}
.nav.is-hidden { display: none; }

/* ============================================================
   PLANTILLA: portada (slide 1)
   Foto aérea (WebP) + corazón Club Noel (SVG vectorial inline).
   ============================================================ */
.tpl-portada { position: absolute; inset: 0; }

.portada-bg {
  position: absolute; inset: 0; z-index: var(--z-bg);
  background-size: cover; background-position: center;
  transform: scale(1.06);              /* punto de partida del ken-burns */
}
.is-in .portada-bg { animation: kenburns 14s ease-out forwards; }

/* velo sutil para contraste del logo */
.portada-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%,
              rgba(29,29,27,0) 40%, rgba(29,29,27,0.28) 100%);
}

.portada-overlay {
  position: absolute; inset: 0; z-index: var(--z-content);
}
.portada-overlay svg { width: 100%; height: 100%; }
/* transform-box para que el scale de grupos SVG gire sobre su propio centro */
.portada-overlay svg [data-anim] { transform-box: fill-box; transform-origin: center; }

/* ============================================================
   PLANTILLA: inicio (slide 2) — ico + botón INICIO + manito
   ============================================================ */
.tpl-inicio { position: absolute; inset: 0; }
.tpl-inicio .inicio-overlay { position: absolute; inset: 0; z-index: var(--z-content); }
.tpl-inicio .inicio-overlay svg { width: 100%; height: 100%; }

/* Botón HTML transparente sobre el botón "INICIO" del SVG
   (rect SVG: x848.49 y701.62 w223 h37.92 sobre 1920×1080) — área ampliada
   para toque cómodo en mobile. */
.inicio-btn {
  position: absolute; z-index: var(--z-nav);
  left: 42.5%; top: 63%;
  width: 15%; height: 6.5%;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
}
.inicio-btn:focus-visible { outline: 3px solid var(--cyan-saturado); outline-offset: 4px; }

/* ============================================================
   PLANTILLA: bienvenida (slide 3) — foto + titular
   ============================================================ */
/* .cover-bg: utilidad de fondo compartida (inicio, menú) */
.cover-bg {
  position: absolute; inset: 0; z-index: var(--z-bg);
  background-size: cover; background-position: center;
}

/* PLANTILLA: bienvenida (slide 3) — split: texto izq + doctora/corazón der */
.tpl-bienvenida {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(120deg, #eaf4fb 0%, #d4e9f8 100%);
  display: grid; grid-template-columns: 46% 54%;
}
.bv-citybg { position: absolute; left: 0; top: 0; width: 58%; height: 100%; background-size: cover; background-position: center; opacity: 0.16; z-index: 0; }
.bv-left { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 0 6%; }
.bv-title { display: flex; flex-direction: column; gap: 0.12em; line-height: 1.04; }
.bv-title .bv-big { font-family: var(--font-titulo); font-weight: 700; font-size: var(--fs-display); color: var(--navy-principal); text-transform: uppercase; letter-spacing: 0.01em; }
.bv-title .bv-sub { font-family: var(--font-cuerpo); font-weight: 400; font-size: var(--fs-h2); color: var(--navy-principal); }
.bv-title .bv-brand { font-family: var(--font-titulo); font-weight: 700; font-size: var(--fs-display); color: var(--navy-principal); }
.bv-right { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.bv-heart { position: absolute; inset: 7% 9% 0; z-index: 1; }
.bv-doctora { position: relative; z-index: 2; max-height: 98%; max-width: 86%; width: auto; object-fit: contain; }
@media (max-aspect-ratio: 1/1) {
  .tpl-bienvenida { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .bv-left { padding: 9% 8% 2%; text-align: center; align-items: center; }
  .bv-citybg { width: 100%; height: 42%; }
  .bv-heart { inset: 2% 12% 0; }
}

/* ============================================================
   PLANTILLA: transición (slide 4) — barrido de corazón
   ============================================================ */
.tpl-transicion { position: absolute; inset: 0; background: var(--navy-principal); }
.tpl-transicion svg { width: 100%; height: 100%; }
.tpl-transicion [data-anim] { transform-box: fill-box; transform-origin: center; }

/* ============================================================
   PLANTILLA: video (slide 5) — poster + play → YouTube
   ============================================================ */
.tpl-video { position: absolute; inset: 0; background: var(--texto-base); }
.video-poster {
  position: absolute; inset: 0; z-index: var(--z-bg);
  background-size: cover; background-position: center; filter: brightness(0.85);
}
.video-play {
  position: absolute; z-index: var(--z-content);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--magenta-principal); color: var(--blanco-1);
  display: grid; place-items: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.video-play:hover { transform: translate(-50%, -50%) scale(1.07); background: var(--magenta-secundario); }
.video-play__icon { font-size: 3rem; margin-left: 8px; line-height: 1; }
.video-titulo {
  position: absolute; z-index: var(--z-content);
  left: 0; right: 0; bottom: 12%; text-align: center;
  color: var(--blanco-1); font-size: var(--fs-h1);
}
.video-frame { position: absolute; inset: 0; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }

/* ============================================================
   Fallback — plantilla pendiente
   ============================================================ */
.tpl-fallback {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 8px;
  text-align: center; background: var(--blanco-2); color: var(--navy-principal);
}
.tpl-fallback span { font-family: var(--font-titulo); font-weight: 700; font-size: 3rem; }
.tpl-fallback small { color: var(--gris-base); }

/* ============================================================
   SLOT DE GIF (Fase 1 = placeholder · Fase 2 = animación real)
   src:null  → caja punteada con descripción
   src:'...' → <img>/<video> (WebP animado o MP4)
   ============================================================ */
.gif-slot { position: absolute; overflow: hidden; border-radius: 16px; z-index: var(--z-content); }
.gif-slot--full { inset: 0; border-radius: 0; z-index: var(--z-bg); }
.gif-slot img, .gif-slot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-slot--pending {
  display: grid; place-content: center; gap: 10px; padding: 16px; text-align: center;
  border: 3px dashed var(--magenta-principal);
  background: rgba(231, 31, 133, 0.07);
  color: var(--navy-principal); font-family: var(--font-ui);
}
.gif-slot--pending .gif-tag { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.05em; }
.gif-slot--pending .gif-desc { font-size: 0.95rem; max-width: 80%; margin: 0 auto; opacity: 0.85; }

/* ============================================================
   PLANTILLA: gif-screen (slides de transición — vienen como GIF)
   ============================================================ */
.tpl-gif { position: absolute; inset: 0; background: var(--navy-principal); background-size: cover; background-position: center; }

/* ============================================================
   PLANTILLA: menu (menú-pivote, 3 botones de sección)
   ============================================================ */
.tpl-menu { position: absolute; inset: 0; }
.menu-buttons {
  position: absolute; z-index: var(--z-content);
  right: 7%; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 22px; width: 34%;
}
.menu-btn {
  font-family: var(--font-ui); font-weight: 700; color: var(--blanco-1);
  font-size: clamp(1rem, 1.6vw, 1.5rem); text-align: left;
  padding: 0.85em 1.4em; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(29, 29, 27, 0.28);
  transition: transform 200ms var(--ease), filter 200ms var(--ease);
}
.menu-btn:hover { transform: translateX(8px); filter: brightness(1.06); }
.menu-btn:nth-child(1) { background: var(--magenta-principal); }
.menu-btn:nth-child(2) { background: var(--cyan-saturado); }
.menu-btn:nth-child(3) { background: var(--naranja-principal); }

/* ============================================================
   PLANTILLA: seccion (arranque de sección — stub Fase 1)
   ============================================================ */
.tpl-seccion { position: absolute; inset: 0; }
.seccion-bg { position: absolute; inset: 0; z-index: var(--z-bg); background-size: cover; background-position: center; }
.seccion-velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(58,71,123,0.55), rgba(58,71,123,0.8)); }
.seccion-texto { position: absolute; z-index: var(--z-content); left: 8%; top: 14%; color: var(--blanco-1); }
.seccion-texto .titulo { font-size: var(--fs-display); color: var(--cyan-principal); }
.seccion-texto .kicker { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.12em; opacity: 0.85; }

/* ============================================================
   CONTENT SLIDES (responsive · 3 capas: fondo/contenido/nav)
   No usan .canvas: layout fluido que refluye en móvil sin recortes.
   ============================================================ */
.content-slide { position: absolute; inset: 0; overflow: hidden; background: var(--blanco-1); }

/* ============================================================
   PLANTILLA: timeline (slide 8) — ÚNICA animación que codeamos
   Línea que se dibuja L→R + 5 nodos con imágenes circulares
   apareciendo una por una con delay progresivo.
   ============================================================ */
.timeline { --stagger: 300ms; }
.tl-tag {
  position: absolute; top: 6%; right: 5%; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--magenta-principal); color: var(--blanco-1);
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  padding: 0.55em 1.1em; border-radius: 999px;
}
.tl-wrap { position: absolute; left: 0; right: 0; top: 52%; transform: translateY(-50%); padding: 0 6%; }
.tl-segments { display: flex; gap: 8px; transform: scaleX(0); transform-origin: left center; }
.is-in .tl-segments { animation: tl-draw 1.8s var(--ease) forwards; }
@keyframes tl-draw { to { transform: scaleX(1); } }
.tl-seg {
  flex: 1; text-align: center; color: var(--blanco-1);
  font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(0.75rem, 1.2vw, 1.25rem); white-space: nowrap;
  padding: 0.7em 0.4em; border-radius: 999px;
}
.tl-seg--navy { background: var(--navy-principal); }
.tl-seg--orange { background: var(--naranja-principal); }
.tl-seg--magenta { background: var(--magenta-principal); }
.tl-seg--cyan { background: var(--cyan-principal); color: var(--navy-principal); }
.tl-items { position: absolute; left: 6%; right: 6%; top: 52%; height: 0; }
.tl-item { position: absolute; transform: translateX(-50%); width: 160px; }
.tl-item-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tl-img {
  width: clamp(86px, 9vw, 140px); aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  border: 6px solid var(--blanco-1); box-shadow: 0 8px 18px rgba(29, 29, 27, 0.22);
  margin: 0 auto; display: block;
}
.tl-item--top { bottom: 42px; }
.tl-item--bottom { top: 42px; }
.tl-node {
  width: 18px; height: 18px; border-radius: 50%; background: var(--blanco-1);
  border: 4px solid var(--navy-principal); margin: 8px auto 0;
}
/* blob decorativo + corazón (fieles al ref) */
.tl-blob { position: absolute; left: -3%; bottom: -6%; width: 22%; color: var(--navy-principal); opacity: 0.9; z-index: 0; }
.tl-heart { position: absolute; right: 3%; bottom: 6%; width: 5%; z-index: 2; }

/* ============================================================
   PLANTILLA: info-dual (Misión 13 / Visión 14) — 2 columnas
   Izq: placeholder GIF (corazón) detrás + foto del niño (cutout)
   Der: placeholder GIF (círculo) + título + texto + píldora sección
   Móvil: stack vertical (niño arriba, texto abajo), sin recortes.
   ============================================================ */
.info-dual { position: absolute; inset: 0; background: var(--blanco-1); display: grid; grid-template-columns: 44% 56%; }

.id-left { position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.id-heart { /* gif-slot detrás del niño */ position: absolute; left: 4%; top: 14%; width: 92%; height: 78%; z-index: 1; }
.id-child { position: relative; z-index: 2; max-height: 92%; max-width: 86%; width: auto; object-fit: contain; }

.id-right { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; padding: 8% 7% 8% 4%; gap: var(--space-md); }
.id-circle { position: absolute; right: 4%; top: 6%; width: 16%; height: 24%; z-index: 1; }
.id-title { font-size: var(--fs-display); line-height: 1.05; z-index: 2; }
.id-title .lead { color: var(--cyan-saturado); font-weight: 400; }
.id-title .main { color: var(--navy-principal); }
.id-text { font-size: clamp(1rem, 1.45vw, 1.5rem); color: var(--navy-principal); max-width: 32ch; z-index: 2; }
.id-pill {
  z-index: 2; align-self: flex-end;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cyan-principal); color: var(--navy-principal);
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(0.95rem, 1.2vw, 1.25rem);
  padding: 0.7em 1.3em; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(29, 29, 27, 0.18);
}
.id-pill__ico { width: 1.6em; height: 1.6em; background: var(--blanco-1); border-radius: 50%; display: grid; place-items: center; color: var(--cyan-saturado); }

/* Móvil / vertical: stack, niño arriba, texto abajo, scroll si hace falta */
@media (max-aspect-ratio: 1/1) {
  .info-dual { grid-template-columns: 1fr; grid-template-rows: 46% 54%; overflow-y: auto; }
  .id-right { text-align: center; align-items: center; padding: 6% 8% 9%; }
  .id-text { max-width: 46ch; }
  .id-circle { display: none; }
}

/* ============================================================
   PLANTILLA: valores (slide 15) — 5 valores con niño animado (GIF)
   ============================================================ */
.valores { position: absolute; inset: 0; background: var(--blanco-1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); padding: 6% 5%; }
.valores-title { font-family: var(--font-titulo); font-weight: 700; font-size: var(--fs-h1); color: var(--navy-principal); }
.valores-title .lead { color: var(--cyan-saturado); }
.valores-row { display: flex; gap: 2.5%; width: 100%; justify-content: center; }
.valor { flex: 1 1 0; max-width: 17%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.valor .gif-slot { position: relative; inset: auto; width: 100%; aspect-ratio: 1; border-radius: 18px; }
.valor-label { font-family: var(--font-ui); font-weight: 700; font-size: clamp(0.85rem, 1.1vw, 1.25rem); color: var(--navy-principal); text-align: center; }
@media (max-aspect-ratio: 1/1) {
  .valores-row { flex-wrap: wrap; gap: 4%; }
  .valor { max-width: 42%; flex-basis: 42%; }
}

/* ============================================================
   PLANTILLA: stat-foto (24-31) — número grande + foto niño/médico
   ============================================================ */
.stat-foto { position: absolute; inset: 0; background: var(--blanco-1); display: grid; grid-template-columns: 45% 55%; }
.sf-left { display: flex; flex-direction: column; justify-content: center; padding: 0 4% 0 7%; gap: var(--space-sm); z-index: 2; }
.sf-kicker { font-family: var(--font-ui); font-weight: 700; color: var(--cyan-saturado); font-size: clamp(1rem, 1.7vw, 1.7rem); }
.sf-num { font-family: var(--font-titulo); font-weight: 700; color: var(--navy-principal); font-size: clamp(3rem, 7.5vw, 7.5rem); line-height: 0.95; }
.sf-desc { font-family: var(--font-cuerpo); color: var(--navy-principal); font-size: clamp(1rem, 1.7vw, 1.7rem); max-width: 20ch; }
.sf-right { position: relative; overflow: hidden; }
.sf-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
@media (max-aspect-ratio: 1/1) {
  .stat-foto { grid-template-columns: 1fr; grid-template-rows: 48% 52%; }
  .sf-left { order: 2; padding: 6% 8%; text-align: center; align-items: center; }
  .sf-desc { max-width: 30ch; }
  .sf-right { order: 1; }
}

/* ============================================================
   PLANTILLA: personas (Alta Dirección 18) — 3 fotos circulares
   ============================================================ */
.personas { position: absolute; inset: 0; background: var(--blanco-1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); padding: 6%; }
.personas-title { font-family: var(--font-titulo); font-weight: 700; font-size: var(--fs-h1); color: var(--navy-principal); text-align: center; }
.personas-title .lead { color: var(--cyan-saturado); }
.personas-row { display: flex; gap: 5%; justify-content: center; width: 100%; }
.persona { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 26%; }
.persona-foto { width: clamp(120px, 14vw, 230px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 7px solid var(--cyan-principal); box-shadow: 0 8px 20px rgba(29,29,27,0.18); }
.persona-nombre { font-family: var(--font-titulo); font-weight: 700; font-size: clamp(1rem,1.4vw,1.5rem); color: var(--navy-principal); text-align: center; }
.persona-cargo { font-family: var(--font-ui); font-weight: 700; font-size: clamp(0.85rem,1.1vw,1.15rem); color: var(--magenta-principal); text-align: center; }
@media (max-aspect-ratio: 1/1) { .personas-row { flex-direction: column; align-items: center; gap: 6%; } .persona { max-width: 70%; } }

/* ============================================================
   PLANTILLA: cards (Portafolio 33-35) — tarjetas de servicio
   ============================================================ */
.cards { position: absolute; inset: 0; background: var(--blanco-1); display: flex; flex-direction: column; padding: 4% 5%; gap: var(--space-md); }
.cards-title { font-family: var(--font-titulo); font-weight: 700; font-size: var(--fs-h1); color: var(--navy-principal); }
.cards-title .lead { color: var(--cyan-saturado); }
.cards-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 2.2%; }
.card { border-radius: 20px; padding: 1.4em 1.6em; color: var(--blanco-1); display: flex; flex-direction: column; justify-content: center; gap: 0.4em; }
.card h3 { font-family: var(--font-titulo); font-weight: 700; font-size: clamp(1.1rem,1.7vw,1.8rem); }
.card p { font-family: var(--font-cuerpo); font-size: clamp(0.85rem,1.2vw,1.2rem); opacity: 0.95; }
.card--navy { background: var(--navy-principal); } .card--magenta { background: var(--magenta-principal); }
.card--cyan { background: var(--cyan-saturado); } .card--orange { background: var(--naranja-principal); }
@media (max-aspect-ratio: 1/1) { .cards-grid { grid-template-columns: 1fr; } .cards { overflow-y: auto; } }

/* ============================================================
   PLANTILLA: logos (Calidad 38 / Entidades 39) — grid de logos
   ============================================================ */
.logos { position: absolute; inset: 0; background: var(--blanco-1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding: 5%; }
.logos-title { font-family: var(--font-titulo); font-weight: 700; font-size: var(--fs-h2); color: var(--navy-principal); text-align: center; max-width: 80%; }
.logos-title .lead { color: var(--cyan-saturado); }
.logos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; width: 92%; max-width: 1500px; }
.logos-grid--few { grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); justify-content: center; }
.logo-cell { background: var(--blanco-1); border: 1px solid #e7e7e7; border-radius: 14px; padding: 14px; display: grid; place-items: center; aspect-ratio: 1.7; box-shadow: 0 3px 10px rgba(29,29,27,0.06); }
.logo-cell img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ============================================================
   PLANTILLA: static-svg (diagramas vectoriales 16/19/20/21)
   Inlinea el SVG del diseño (vector puro) ajustado al viewport.
   ============================================================ */
.static-svg { position: absolute; inset: 0; background: var(--blanco-1); display: grid; place-items: center; }
.ss-frame { width: 100%; height: 100%; display: grid; place-items: center; }
.ss-frame svg { width: 100%; height: 100%; }
@media (max-aspect-ratio: 1/1) { .static-svg { overflow: auto; } .ss-frame { min-height: 100%; } }

/* ============================================================
   PLANTILLA: ventas (slide 32) — distribución por régimen
   ============================================================ */
.ventas { position: absolute; inset: 0; background: var(--blanco-1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); padding: 5%; }
.ventas-title { font-family: var(--font-titulo); font-weight: 700; font-size: var(--fs-h1); color: var(--navy-principal); text-align: center; }
.ventas-row { display: flex; gap: 4%; width: 100%; justify-content: center; align-items: stretch; }
.venta-block { flex: 1; max-width: 34%; border-radius: 22px; padding: 1.6em; color: var(--blanco-1); display: flex; flex-direction: column; align-items: center; gap: 0.3em; text-align: center; }
.venta--navy { background: var(--navy-principal); }
.venta--orange { background: var(--naranja-principal); }
.vb-num { font-family: var(--font-titulo); font-weight: 700; font-size: clamp(2.6rem, 6vw, 6rem); line-height: 1; }
.vb-label { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.9rem); }
.vb-sub { font-family: var(--font-cuerpo); font-size: clamp(0.85rem, 1.2vw, 1.25rem); opacity: 0.95; margin-top: 0.4em; }
.ventas-note { font-family: var(--font-cuerpo); color: var(--navy-principal); font-size: clamp(0.9rem, 1.3vw, 1.35rem); text-align: center; max-width: 60ch; }
.ventas-note strong { color: var(--magenta-principal); }
@media (max-aspect-ratio: 1/1) { .ventas-row { flex-direction: column; align-items: center; } .venta-block { max-width: 80%; } }

/* texto opcional en plantilla seccion (slide 23) */
.seccion-texto .seccion-parrafo { font-family: var(--font-cuerpo); font-size: clamp(1rem, 1.5vw, 1.5rem); color: var(--blanco-1); max-width: 42ch; margin-top: var(--space-sm); }

/* Móvil: timeline con scroll horizontal (sin recortes) */
@media (max-aspect-ratio: 1/1) {
  .tl-wrap, .tl-items { padding-left: 5%; padding-right: 5%; }
  .timeline .tl-scroll { position: absolute; inset: 18% 0 12%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .timeline .tl-inner { position: relative; min-width: 760px; height: 100%; }
}