.elementor-5393 .elementor-element.elementor-element-227cbc8{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:20px 0px;--row-gap:20px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}.elementor-5393 .elementor-element.elementor-element-227cbc8.e-con{--flex-grow:0;--flex-shrink:0;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-5393 .elementor-element.elementor-element-227cbc8{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-5393 .elementor-element.elementor-element-227cbc8{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-5393 .elementor-element.elementor-element-227cbc8{--width:100%;}}@media(max-width:767px){.elementor-5393 .elementor-element.elementor-element-227cbc8{--width:100%;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-ccaf3ac *//* ============================================================================================
ARCHIVO ANOTADO (CSS) — Comentarios explicativos + separación grande entre bloques
Objetivo:
1) Explicar con detalle qué hace cada sección del CSS (sin alterar reglas ni valores, salvo los ajustes móviles solicitados).
2) Facilitar el mantenimiento: dónde ajustar, riesgos y cómo afectan otras partes.
3) Mantener el CSS original intacto: SOLO se agregan/ajustan comentarios y, en este encargo, se corrigen tamaños en móvil de los carruseles (.trc y .tfx) y se evita el recorte de la imagen de la “Ilustración del manifiesto”.
Lectura:
- Cada bloque comienza con “EXPLICACIÓN DE BLOQUE (CSS): …” y justo debajo va tu CSS original (o corregido).
- Entre bloques dejo ~16 líneas en blanco para localizar visualmente cada “capítulo”.
============================================================================================ */






















/* EXPLICACIÓN DE BLOQUE (CSS): Variables globales base (:root)
Este primer :root define colores y tokens que se usan como base en varias secciones (strap, hero, titulares).
ADAPTADO A TU PALETA:
- --violet → azul TextTop (principal)
- --teal/--teal2 → azules de apoyo (gradientes)
- --bg1/--bg2 → blanco
- --line → borde sutil para fondo blanco
*/
:root{
  --violet:#0863FF;        /* TextTop (azul principal) */
  --teal:#0B74FF;          /* azul profundo (gradiente/complemento) */
  --teal2:#3DC6FF;         /* azulito (apoyo/gradientes) */
  --ink:#1A1A1A;           /* texto principal (fondo blanco) */
  --muted:rgba(26,26,26,.66);
  --bg1:#ffffff; --bg2:#ffffff;
  --line:rgba(0,0,0,.12);
}
























/* EXPLICACIÓN DE BLOQUE (CSS): Tipografía global de display (GFS Didot)
Sin cambios; solo hereda la nueva paleta.
*/
/* ===== TIPOGRAFÍA GLOBAL (GFS Didot) ===== */
body, .zenith-strap p, .zh-title, .zh-marquee, .chip, .vsl-cue,
.micro-line, .step2-cue, .zs-item, .zs-kpi, .zs-sub,
.zol-quote, .zol-sub {
  
}
























/* EXPLICACIÓN DE BLOQUE (CSS): Strap adhesivo superior + Marquee de claims
Se sustituyen los halos dorados por halos azules suaves para que destaquen sobre blanco.
*/
/* Strap / Marquee */
.zenith-strap{ top:0; z-index:40;
  background:
    radial-gradient(1000px 220px at 6% 0%, rgba(8,99,255,.16), transparent 55%),   /* antes rgba(124,94,64,.17) */
    radial-gradient(900px 220px at 94% 0%, rgba(26,26,26,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.20));
  border-bottom:1px solid var(--line); backdrop-filter:saturate(120%) blur(6px);
}
.zenith-strap p{ margin:0; padding:.5rem clamp(10px,2.5vw,18px); color:var(--ink); font:700 .92rem/1.25; text-align:center; }
.zenith-strap .ia{ background:linear-gradient(90deg,var(--teal2),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.zh-marquee, .zh-marquee__track, .zh-marquee *{ background:transparent !important; }
.zh-marquee{ padding:0; margin:.10rem 0 .02rem; color:var(--ink); overflow:hidden; white-space:nowrap; }
.zh-marquee__track{ display:inline-flex; gap:.9rem; align-items:center; will-change:transform; animation: zh-marquee var(--marqueeDur, 20s) linear infinite; }
.zh-marquee .itm{ font-weight:800; font-size:clamp(.9rem,2.4vw,1.04rem); text-shadow:0 1px 8px rgba(0,0,0,.10); }
.zh-marquee .dot{ opacity:.7 }
@keyframes zh-marquee{ to{ transform:translateX(-33.333%) } }
























/* === HERO === */
#zenith-hero {
  color: var(--ink);
  background:
    radial-gradient(1200px 420px at 8% -10%, rgba(8,99,255,.18), transparent 60%),
    radial-gradient(1100px 400px at 92% -12%, rgba(26,26,26,.16), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 60%);
  padding: clamp(8px, 2.4vh, 16px) 0 clamp(6px, 1.6vh, 10px);
  isolation: isolate;
}

.zh--compact .zh-wrap { width: min(1200px, 92%); margin: auto; }

/* TÍTULO (Ajustado para frase larga) */
.zh-title {
  margin: 0;
  font-weight: 900;
  line-height: 1.15; /* Un poco más de aire para mejor lectura */
  /* Reduje ligeramente el máximo para que no se vea gigante en pantallas muy anchas */
  font-size: clamp(1.4rem, 3.5vw, 2.6rem); 
  text-wrap: balance;
}

/* Efecto Neon (sin salir del box) */
.zh-title .zh-neon {
  display: inline-block;
  padding: .02em .06em .06em;
  background: linear-gradient(90deg, var(--violet), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Énfasis fuerte (CrossFitters / Volver a entrenar) */
.zh-title .zh-strong, .zh-title strong {
  font-weight: 1000;
  background: linear-gradient(90deg, var(--teal2), var(--violet), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Alineaciones */
.zh--center .zh-title,
.zh--center .vsl-cue { text-align: center; }
.zh--center .zh-assure { justify-content: center; }

/* === CHIPS (Garantía - Intactos) === */
.zh-assure { margin: .5rem 0 .4rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .4ch; padding: .36rem .66rem; border-radius: 999px; font-weight: 900; font-size: clamp(.9rem, 2.5vw, 1.02rem); }
.chip--teal { color: #1A1A1A; background: linear-gradient(180deg, rgba(8,99,255,.22), rgba(8,99,255,.10)); border: 1px solid rgba(8,99,255,.55); box-shadow: 0 0 0 1px rgba(8,99,255,.16) inset, 0 10px 26px -18px rgba(8,99,255,.35); }

/* === PASO 1 === */
.vsl-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: .6rem auto 0;
  color: var(--ink);
  font-weight: 1000;
  white-space: normal; /* Salto de línea activado */
  line-height: 1.3;
  text-align: center;
  max-width: 800px;
}
.vsl-cue .arr { flex: 0 0 auto; color: var(--violet); filter: drop-shadow(0 0 6px rgba(8,99,255,.30)); }

/* === VSL FRAME === */
.zv { background: linear-gradient(180deg, var(--bg2), #ffffff); color: var(--ink); padding: clamp(6px, 1vh, 10px) 0 clamp(12px, 1.6vh, 20px); }
.zv-frame { width: min(1100px, 96%); margin: 0 auto; position: relative; border-radius: 16px; }
.zv-video { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,.15); background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02)); aspect-ratio: 16/9; box-shadow: 0 12px 40px -20px rgba(0,0,0,.20); }
.zv-wires { position: absolute; inset: -12% -6% -10% -6%; pointer-events: none; z-index: 0; background: linear-gradient(to right, rgba(8,99,255,.16), rgba(8,99,255,0) 30%) left top/50% 2px no-repeat, linear-gradient(to bottom, rgba(8,99,255,.16), rgba(8,99,255,0) 30%) left top/2px 50% no-repeat, linear-gradient(to left, rgba(26,26,26,.16), rgba(26,26,26,0) 30%) right bottom/50% no-repeat, linear-gradient(to top, rgba(26,26,26,.16), rgba(26,26,26,0) 30%) right bottom/2px 50% no-repeat; }
.zv-wires::before, .zv-wires::after { content: ""; position: absolute; inset: 8% 16%; border-radius: 14px; z-index: -1; border: 1px solid rgba(8,99,255,.30); transform: rotate(4deg); box-shadow: 0 10px 30px -20px rgba(8,99,255,.30); }
.zv-wires::after { inset: 14% 8%; border-color: rgba(26,26,26,.28); transform: rotate(-4deg); box-shadow: 0 10px 30px -20px rgba(26,26,26,.28); }

/* === MÓVIL (Ajustes chips) === */
@media (max-width: 560px) {
  .zh-assure { margin: .38rem 0 .14rem; gap: 6px; justify-content: center; }
  .chip { font-weight: 800; font-size: clamp(.78rem, 3.4vw, .92rem); padding: .28rem .52rem; border-radius: 999px; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.02)); color: var(--ink); border: 1px solid rgba(0,0,0,.14); box-shadow: none; }
  .chip--teal { background: linear-gradient(180deg, rgba(8,99,255,.14), rgba(8,99,255,.06)); border-color: rgba(8,99,255,.35); color: #1A1A1A; box-shadow: none; }
}

/* === SUBTÍTULO (MUCHO MÁS GRANDE) & PASO 2 === */
.zenith-micro { width: min(980px, 92%); margin: clamp(4px, .7vh, 8px) auto; }

.micro-line {
  margin: 0; padding: .42rem .8rem; text-align: center; text-wrap: balance;
  font-weight: 900; 
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.12); border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  box-shadow: 0 6px 18px -18px rgba(0,0,0,.20);
}

/* MODIFICADOR: TAMAÑO GRANDE */
.micro-line--big {
  /* Aumentado considerablemente: Min 1.15rem, Max 1.6rem */
  font-size: clamp(1.15rem, 4vw, 1.6rem); 
  line-height: 1.3;
  padding: .8rem 1rem; /* Más padding para que respire */
}

.micro-line .em {
  background: linear-gradient(90deg, var(--violet), var(--teal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (max-width:560px) { 
  .zenith-micro { margin: clamp(2px, .5vh, 6px) auto } 
  .micro-line { border-radius: 10px; }
  .micro-line--big { font-size: clamp(1.1rem, 4.5vw, 1.3rem); } /* Ajuste móvil fuerte pero legible */
}

/* Paso 2 Links */
.step2-cue { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: clamp(8px, 1vh, 12px) auto 0; color: var(--ink); font-weight: 1000; white-space: nowrap; text-align: center; }
.step2-text { font-size: clamp(.95rem, 2.5vw, 1.12rem); line-height: 1; letter-spacing: .01em; }
.step2-cue a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 1000; }
@media (max-width:360px) { .step2-text { font-size: .92rem } }










/* ===== Gate — Paleta azul vibrante ===== */
:root{
  --gate-main:   #0863FF;
  --gate-accent: #0B74FF;
  --gate-dark:   #1A1A1A;
  --gate-ink:    #1A1A1A;
  --gate-soft:   rgba(8,99,255,.05);
  --gate-line:   rgba(0,0,0,.08);
  --gate-glow:   rgba(8,99,255,.3);
}

.agenda-gate{
  width: min(1200px, 94%);
  margin: 14px auto 16px;
  padding: clamp(14px, 2.2vw, 18px);
  padding-inline: clamp(12px, 3.6vw, 24px);
  color: var(--gate-ink);
  background: 
    radial-gradient(130% 120% at 50% -10%, rgba(8,99,255,.12), transparent 60%),
    radial-gradient(120% 140% at 50% 110%, rgba(11,116,255,.10), transparent 65%),
    linear-gradient(180deg, #ffffff, #ffffff);
  border-radius: var(--radius, 20px);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  box-shadow: inset 0 0 40px rgba(0,0,0,.03), 0 10px 28px rgba(0,0,0,.12);
  outline: 1px solid rgba(0,0,0,.08);
  position: relative;
  isolation: isolate;
}

.agenda-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  background: conic-gradient(from 210deg, rgba(8,99,255,.75), rgba(11,116,255,.70), rgba(8,99,255,.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .95;
}

.agenda-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: 
    radial-gradient(220px 60px at 50% 0%, rgba(0,0,0,.06), transparent 70%),
    radial-gradient(220px 60px at 50% 100%, rgba(0,0,0,.05), transparent 70%);
}

.gate-title{ 
  margin: 0 0 .55rem; 
  text-align: center; 
  font-weight: 800; 
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

.gate-title strong {
  background: linear-gradient(92deg, #0863FF, #0B74FF, #1A1A1A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gate-title .gate-sub{ 
  display: block; 
  font-weight: 600; 
  font-size: .92em;
  color: rgba(26,26,26,.75);
  margin-top: .35rem;
  -webkit-text-fill-color: rgba(26,26,26,.75);
  background: none;
}

.gate-progress{
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.03));
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.08) inset;
  z-index: 1;
}

.gate-progress__fill{
  position: absolute; 
  left: 0; top: 0; bottom: 0; 
  width: 0%;
  background: linear-gradient(92deg, #0863FF 0%, #0B74FF 50%, #1A1A1A 100%);
  box-shadow: 0 0 20px rgba(8,99,255,.50), 0 0 30px rgba(11,116,255,.35), 0 1px 0 rgba(255,255,255,.3) inset;
  transition: width 0.3s ease;
}

.gate-meta{
  margin-top: .65rem;
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  gap: .75rem;
  font-weight: 700;
  font-size: clamp(.85rem, 1.8vw, .95rem);
  position: relative;
  z-index: 1;
}

.gate-hint{ opacity: .7; }

.gate-ttl{ 
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: 1.15em;
  background: linear-gradient(92deg, #0863FF, #0B74FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(8,99,255,.18);
  letter-spacing: .05em;
}

.agenda-gate.is-done{ animation: gateHide .35s ease forwards; }
@keyframes gateHide{ to{ opacity: 0; transform: translateY(-8px) scale(0.98); } }
#agenda-cal[hidden]{ display: none !important; }

@media (max-width: 560px){
  .agenda-gate { padding-inline: clamp(12px, 4vw, 16px); }
  .gate-meta{ flex-direction: column; align-items: flex-start; gap: .5rem; }
  .gate-title{ font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce){
  .agenda-gate, .gate-progress__fill{ transition: none !important; animation: none !important; }
}

/* ===== Alternativa WhatsApp (paleta azul vibrante) ===== */
.whatsapp-alt {
  width: min(1200px, 94%);
  margin: 24px auto 32px;
  padding: clamp(18px, 3vw, 24px);
  padding-inline: clamp(12px, 3.6vw, 24px);
  text-align: center;
  background: 
    radial-gradient(130% 120% at 50% -10%, rgba(8,99,255,.12), transparent 60%),
    radial-gradient(120% 140% at 50% 110%, rgba(11,116,255,.10), transparent 65%),
    linear-gradient(180deg, #ffffff, #ffffff);
  border-radius: var(--radius, 20px);
  backdrop-filter: saturate(120%) blur(6px);
  box-shadow: inset 0 0 40px rgba(0,0,0,.03), 0 10px 28px rgba(0,0,0,.12);
  outline: 1px solid rgba(0,0,0,.08);
  position: relative;
  isolation: isolate;
}

.whatsapp-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  background: conic-gradient(from 210deg, rgba(8,99,255,.75), rgba(11,116,255,.70), rgba(8,99,255,.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .95;
}

.whatsapp-alt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: 
    radial-gradient(220px 60px at 50% 0%, rgba(0,0,0,.06), transparent 70%),
    radial-gradient(220px 60px at 50% 100%, rgba(0,0,0,.05), transparent 70%);
}

.whatsapp-alt__text {
  margin: 0 0 18px;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  line-height: 1.5;
  color: var(--text, #1A1A1A);
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.whatsapp-alt__text strong {
  display: block;
  margin-top: 4px;
  font-weight: 900;
  color: #0863FF;
  background: linear-gradient(92deg, #0863FF, #0B74FF, #1A1A1A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(8,99,255,.18);
}

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 1.05rem;
  font-weight: 900;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(92deg, #0863FF, #0B74FF, #1A1A1A);
  border-radius: 999px;
  border: 1.5px solid rgba(8,99,255,.80);
  box-shadow: 0 0 20px rgba(8,99,255,.50), 0 0 30px rgba(11,116,255,.35), 0 6px 24px rgba(0,0,0,.20);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.whatsapp-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(92deg, #1a7aff, #2d8cff, #2d2d2d);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.whatsapp-btn:hover::before { opacity: 1; }

.whatsapp-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 28px rgba(8,99,255,.65), 0 0 40px rgba(11,116,255,.45), 0 10px 36px rgba(0,0,0,.28);
  border-color: rgba(8,99,255,.95);
}

.whatsapp-btn:active { transform: translateY(-1px) scale(0.98); }

.whatsapp-btn__icon {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
  filter: brightness(0) invert(1);
}

.whatsapp-btn__text { position: relative; z-index: 1; }

@media (max-width: 560px) {
  .whatsapp-alt { margin: 20px auto 24px; padding: 16px; padding-inline: clamp(12px, 4vw, 16px); }
  .whatsapp-btn { padding: 12px 22px; font-size: 0.98rem; gap: 8px; }
  .whatsapp-btn__icon { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-btn { transition: none; }
  .whatsapp-btn:hover { transform: none; }
  .whatsapp-btn::before { transition: none; }
  .whatsapp-alt__text strong { text-shadow: none; }
}
















/* EXPLICACIÓN DE BLOQUE (CSS): Variables y base de KPIs
Paleta de KPIs a azules.
*/
/* ================= KPIs ================= */
:root{
  /* Colores de marca */
  --brand-primary:#0863FF; /* principal (TextTop) */
  --brand-accent:#0B74FF;  /* acento (azul profundo) */

  /* Para fondo claro */
  --text:#1A1A1A;
  --muted:#5a5a5a;
  --muted-2:#7a7a7a;

  --radius:20px;
}
























/* EXPLICACIÓN DE BLOQUE (CSS): Contención de #theo-stats y box-sizing */
#theo-stats.zs, #theo-stats.zs *{ box-sizing:border-box; }

#theo-stats.zs{
  position:relative;
  color:var(--text);
  padding: clamp(18px, 3.6vw, 32px) 0;
  background: transparent;
  isolation:isolate;
  max-width:100dvw;
  overflow-x: clip;
}
























/* EXPLICACIÓN DE BLOQUE (CSS): Grid responsivo de KPIs */
.zs-wrap{
  width:min(1200px, 94%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.6vw, 22px);
  padding-inline: clamp(12px, 3.6vw, 24px);
}
@media (min-width: 740px){
  .zs-wrap{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1120px){
  .zs-wrap{ grid-template-columns: repeat(3, 1fr); }
}
























/* EXPLICACIÓN DE BLOQUE (CSS): Tarjeta KPI (+ halos y borde “aurora”)
Degradados internos con azul; el “aurora” pasa a azul.
*/
.zs-item{
  position:relative;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem;
  padding: clamp(16px, 2.6vw, 26px);
  border-radius: var(--radius);
  width:100%;
  min-width:0;

  background:
    radial-gradient(130% 120% at 50% -10%, rgba(8,99,255,.10), transparent 60%),    /* antes dorado */
    radial-gradient(120% 140% at 50% 110%, rgba(26,26,26,.10), transparent 65%),
    linear-gradient(180deg, #ffffff, #ffffff);
  backdrop-filter: saturate(120%) blur(6px);

  box-shadow:
    inset 0 0 40px rgba(0,0,0,.03),
    0 10px 28px rgba(0,0,0,.12);
  outline:1px solid rgba(0,0,0,.08);
  
}

/* Borde aurora */
.zs-item::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.25px;
  background: conic-gradient(from 210deg,
    rgba(8,99,255,.75),
    rgba(11,116,255,.70),
    rgba(8,99,255,.75)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; opacity:.95;
}

/* Halos interiores */
.zs-item::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(220px 60px at 50% 0%, rgba(0,0,0,.06), transparent 70%),
    radial-gradient(220px 60px at 50% 100%, rgba(0,0,0,.05), transparent 70%);
}
























/* EXPLICACIÓN DE BLOQUE (CSS): Valor numérico KPI + subtítulo */
.zs-kpi{
  display:inline-block;
  
  font-size: clamp(1.85rem, 4.8vw, 2.9rem);
  font-weight: 800;
  line-height:1.05;
  letter-spacing:.2px;

  background: linear-gradient(92deg,
    var(--brand-primary) 0%,
    var(--brand-primary) 55%,
    var(--brand-accent) 100%
  );
  -webkit-background-clip:text; background-clip:text;
  color:transparent;

  text-shadow: 0 0 12px rgba(8,99,255,.18);  /* brillo azul */
  -webkit-text-stroke: 0;

  white-space: nowrap; max-width:100%; min-width:0;
}

/* Tablet tweaks */
@media (min-width: 740px) and (max-width: 1120px){
  .zs-item{ padding: clamp(16px, 2.2vw, 24px); }
  .zs-kpi{ font-size: clamp(1.8rem, 3.8vw, 2.45rem); letter-spacing:.15px; }
}

/* Subtítulo */
.zs-sub{
  margin:.1rem 0 0;
  
  font-weight:500;
  color:var(--muted);
  font-size: clamp(1rem, 2.1vw, 1.16rem);
  line-height:1.38;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
  text-wrap: balance;
  max-width: 60ch;
}

/* Móvil pequeño */
@media (max-width: 480px){
  .zs-kpi{ font-size: clamp(1.7rem, 7.2vw, 2.3rem); }
  .zs-sub{ font-size: clamp(.98rem, 3.5vw, 1.08rem); max-width: 100%; }
}
@media (max-width: 360px){
  .zs-kpi{ font-size: clamp(1.55rem, 7vw, 1.95rem); }
  .zs-item{ padding: clamp(12px, 4vw, 16px); }
}

/* Accesibilidad motion */
@media (prefers-reduced-motion: reduce){
  .zs-item, .zs-kpi{ transition:none; text-shadow:none; }
}

/* Tablet (2 col) centrar última */
@media (min-width: 740px) and (max-width: 1120px){
  .zs-wrap{
    --zs-gap: clamp(12px, 2.6vw, 22px);
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--zs-gap);
  }
  .zs-wrap > .zs-item:last-child:nth-child(odd){
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--zs-gap)) / 2);
    max-width: none;
  }
}
























/* ======================================================================
CSS #1 — “¿Te conformas con alivio o buscas la solución?” (.csd-*)
- Título con acento, subtítulo, rails decorativos e imagen clicable.
- Pensado para fondo claro. Hereda tipografías si tienes variables globales.
- Sin JS necesario.
====================================================================== */

/* Utilidad accesible (por si no existiera globalmente) */
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Contenedor principal */
#csd-solucion.csd{
  color: var(--ink, #1A1A1A);
  background: transparent;
  padding: clamp(20px, 5.2vw, 54px) 0 clamp(10px, 3.2vw, 28px);
  position: relative;
  isolation: isolate;
}
.csd-wrap{ width:min(1100px,92%); margin:0 auto; text-align:center; }

/* Rails superiores decorativos */
.csd-rails{
  position:absolute; inset: -44px -6vw auto -6vw; height:40px; pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 8px,
      rgba(0,0,0,.10) 8px 10px,
      transparent 10px 22px,
      rgba(0,0,0,.10) 22px 24px,
      transparent 24px 36px,
      rgba(0,0,0,.10) 36px 38px,
      transparent 38px 48px
    );
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.16));
}

/* Marco + título */
.csd-frame{
  background: linear-gradient(180deg, #0d111a0f, #0a0e170f);
  border-radius: 26px;
  padding: clamp(12px, 2.2vw, 20px);
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.08),
    inset 0 0 0 10px #ffffff,
    0 18px 36px rgba(0,0,0,.08);
  outline: 6px solid #e8ecf6;
}
.csd-title{
  margin:0;
  font-weight:900;
  
  font-size: clamp(26px, 4.8vw, 48px);
  line-height:1.06;
  padding: clamp(16px, 3vw, 26px) clamp(16px, 3.2vw, 30px);
  color:#0f1421;
  background: linear-gradient(180deg, #ffffff, #f6f8ff);
  border: 2px solid rgba(0,0,0,.1);
  border-radius: 16px;
  text-wrap: balance;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.60),
    0 12px 28px rgba(0,0,0,.08);
}
.csd-title .csd-accent{
  background: linear-gradient(90deg, var(--violet, #0863FF), var(--teal, #0B74FF) 60%, var(--violet, #0863FF));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 16px color-mix(in srgb, var(--violet, #0863FF) 25%, transparent);
}

/* Subtítulo */
.csd-subtitle{
  margin:12px auto 0;
  max-width:60ch;
  color: var(--muted, rgba(26,26,26,.66));
  font-size:clamp(14px, 2.2vw, 18px);
  text-wrap: balance;
}

/* Imagen clicable */
.csd-panel{ width:min(1100px,92%); margin: clamp(18px, 4.6vw, 34px) auto 0; text-align:center; }
.csd-media{
  margin:0; border-radius:20px; padding: clamp(8px, 1.2vw, 12px);
  background: linear-gradient(180deg, #f7f9ff, #f2f5fc);
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 50px -22px rgba(0,0,0,.22);
}
.csd-media img{
  display:block; width:100%; height:auto; border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.25);
}
.csd-link:hover img,
.csd-link:focus img{
  transform: translateY(-2px);
  filter: saturate(1.03);
  box-shadow: 0 22px 60px -22px rgba(0,0,0,.28),
              0 8px 20px color-mix(in srgb, var(--violet, #0863FF) 22%, transparent);
}

/* Motion accesible */
@media (prefers-reduced-motion: reduce){
  .csd-media img{ transition:none !important; }
}















































/* ======================================================================
CSS #2 — Carrusel de testimonios (imágenes) (.trc-*)
- Imágenes SIEMPRE completas (object-fit: contain; max-height controlada).
- PC: items ~+33% y gap mínimo (1px). Puedes poner 0 si las quieres “pegadas”.
- Fallback CSS de animación (el JS lo desactiva para evitar reinicios).
- **CORRECCIÓN móvil**: en teléfono, los items nunca superan el ancho del viewport.
====================================================================== */

/* Variables base (laptop) */
.trc{
  --trc-item-w: clamp(560px, 82vw, 1170px);
  --trc-img-max-h: clamp(426px, 64vh, 740px);
  --trc-gap: clamp(6px, 1.2vw, 10px);
  --trc-speed: 18s;              /* solo fallback si no hay JS */
  color: var(--ink, #1A1A1A);
  margin-top: clamp(12px, 3vw, 28px);
}

/* Cabecera */
.trc-head{ width:min(1200px,92%); margin:0 auto clamp(10px, 2vw, 16px); text-align:center; padding-top:clamp(6px,1.4vw,12px); }
.trc-title{ margin:0 0 clamp(6px,1.2vw,10px); font-weight:800; font-size:clamp(1.15rem,3.2vw,1.8rem); line-height:1.12; text-wrap:balance; }
.trc-hint{ margin:.25rem 0 0; font-size:clamp(.85rem,2.4vw,.95rem); color:var(--muted,rgba(26,26,26,.66)); }

/* Viewport + fades laterales */
.trc-viewport{ position:relative; width:100%; overflow:hidden; }
.trc-viewport::before,.trc-viewport::after{
  content:""; position:absolute; top:0; bottom:0; width:4%; pointer-events:none; z-index:2;
  background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 70%);
}
.trc-viewport::after{ right:0; transform:scaleX(-1); }
.trc-viewport::before{ left:0; }

/* Pista (fila) + fallback animación */
.trc-track{
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  align-items:center; justify-content:flex-start !important;
  gap:var(--trc-gap) !important; padding:clamp(2px, .8vw, 6px) !important;
  will-change:transform;
  animation: trc-scroll var(--trc-speed) linear infinite;
}
.trc:hover .trc-track,
.trc:focus-within .trc-track{ animation-play-state:paused; }
@keyframes trc-scroll{ from{transform:translateX(0%);} to{transform:translateX(-50%);} }

/* Tarjeta + imagen completa (sin recortes) */
.trc-item{
  margin:0 !important; flex:0 0 auto; width:var(--trc-item-w) !important; height:auto !important;
  display:grid; place-items:center; border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.02)); border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 28px -20px rgba(0,0,0,.22);
}
.trc-item>img{
  display:block; user-select:none; width:100% !important; height:auto !important;
  max-height:var(--trc-img-max-h) !important; object-fit:contain !important; object-position:center !important;
  transition:transform .25s ease, filter .25s ease;
}
.trc-item:hover>img{ transform:translateY(-1px); filter:saturate(1.03); }

/* PC (≥1280px): +tamaño y gap mínimo */
@media (min-width:1280px){
  .trc{
    --trc-item-w: clamp(1060px, 88vw, 1800px);   /* ~+33% */
    --trc-img-max-h: clamp(820px, 76vh, 1200px); /* alto grande en PC */
    --trc-gap: 1px;                              /* casi pegadas (0 si quieres pegadas del todo) */
    --trc-speed: 12s;                            /* fallback rápido */
  }
  .trc .trc-track{ gap:var(--trc-gap) !important; padding:0 !important; }
  .trc .trc-item{ border:0 !important; box-shadow:0 10px 28px -20px rgba(0,0,0,.18); }
  .trc-viewport::before,.trc-viewport::after{ width:2%; }
}

/* Tablet */
@media (min-width:768px) and (max-width:1279.98px){
  .trc{ --trc-gap: clamp(3px, 0.8vw, 8px); --trc-speed: 12s; }
  .trc .trc-track{ gap:var(--trc-gap) !important; padding:2px !important; }
  .trc-viewport::before,.trc-viewport::after{ width:4%; }
}

/* Mobile — CORRECCIÓN: items nunca superan el ancho del teléfono */
@media (max-width:767.98px){
  .trc{
    --trc-item-w: 92vw;                 /* <= ancho del viewport móvil */
    --trc-img-max-h: min(60vh, 420px);  /* altura contenida para no “aplastar” */
    --trc-speed: 8s;
  }
  .trc-item>img{ max-width:100%; height:auto; }
  .trc-viewport::before,.trc-viewport::after{ width:8%; }
}

/* Modo JS activado (este carrusel): desactiva fallback CSS */
.js-marquee-trc .trc-track{ animation:none !important; }

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce){
  .trc .trc-track{ animation:none !important; }
  .trc-viewport{ overflow:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .trc .trc-item{ scroll-snap-align:center; }
}
























/* Testimonios en vídeo — MODO MINIMAL (solo el player, sin marcos externos) */
#zenith-testimonials.zt{ --vidW:min(92vw,680px); }
@media (min-width:600px){ #zenith-testimonials.zt{ --vidW:min(86vw,820px); } }
@media (min-width:1024px){ #zenith-testimonials.zt{ --vidW:min(78vw,980px); } }

.zt-viewport{
  width:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; outline:none; touch-action:pan-y;
}
.zt-viewport::-webkit-scrollbar{ display:none; }
.zt-track{ display:flex; align-items:flex-start; gap:clamp(8px,1.2vw,14px); padding:6px clamp(12px,4vw,28px) 10px; width:max-content; }

.zt-item{ flex:0 0 var(--vidW); width:var(--vidW); min-width:var(--vidW); scroll-snap-align:center; display:flex; flex-direction:column; gap:10px; }

.zt-frame{
  position:relative; width:100%; aspect-ratio:16/9; height:auto;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:visible;
}

.zt-skel{
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.25) 50%,rgba(255,255,255,0) 100%),#DDE5EE;
  background-size:300% 100%; animation:ztShine 1.4s infinite linear;
}
@keyframes ztShine{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.zt-embed,[data-embed="vslplay"] iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0 !important; border-radius:0 !important; background:transparent;
}

.zt-head{ width:min(1200px,92%); margin:0 auto 14px; }
.zt-title{ margin:0 0 4px; font-size:clamp(1.1rem,2.1vw,1.6rem); }
.zt-sub{ margin:.1rem 0 .6rem; opacity:.8; }
.zt-progress{ display:flex; align-items:center; gap:.6rem; }
.zt-progress__bar{ flex:1; height:6px; background:rgba(26,26,26,.12); border-radius:99px; position:relative; }
.zt-progress__fill{ position:absolute; inset:0 auto 0 0; width:0%; border-radius:inherit; background:linear-gradient(90deg,#0863FF,#3DC6FF); box-shadow:0 0 .8rem rgba(26,26,26,.25),0 0 2rem rgba(26,26,26,.15); }
.zt-dots{ display:flex; gap:.35rem; list-style:none; margin:0; padding:0; }
.zt-dots li{ width:10px; height:10px; border-radius:999px; background:radial-gradient(6px 6px at 50% 50%,#3DC6FF,#0863FF); opacity:.35; transition:opacity .2s,transform .2s; }
.zt-dots li.is-active{ opacity:1; transform:scale(1.05); }

.zt-nav{ display:flex; justify-content:flex-end; gap:.5rem; width:min(1200px,92%); margin:10px auto 0; }
.zr-btn{ width:42px; height:42px; border-radius:10px; border:1px solid rgba(26,26,26,.12); background:rgba(26,26,26,.04); color:inherit; font-size:1.35rem; cursor:pointer; transition:transform .15s ease; }
.zr-btn:hover{ transform:translateY(-1px); }

@media (prefers-reduced-motion:reduce){ .zt-skel{ animation:none; } .zr-btn{ transition:none; } }
























/* EXPLICACIÓN DE BLOQUE (CSS): Sección ¿Es para ti?
Paleta “beige” → gris; acentos negros → azules.
*/
:root{
  --bg:#FFFFFF;              /* Blanco puro — Fondo general */
  --card:#F3F6FA;            /* Gris suave — Fondo tarjetas (antes beige) */
  --text:#1A1A1A;            /* Negro profundo — Texto/Botones */
  --muted:rgba(26,26,26,.70);
  --line:rgba(26,26,26,.18);
  --accent:#0863FF;          /* Acentos y barras */
  --accent-2:#3DC6FF;
  --glow:0 0 .8rem rgba(26,26,26,.25), 0 0 2rem rgba(26,26,26,.15);
  --radius:18px;
}

#zenith-fit.zf{
  color:var(--text);
  background:transparent;
  padding: clamp(36px,6vw,72px) 0;
  
  position:relative;
}
#zenith-fit.zf::before{
  content:"";
  position:absolute; inset:-10% -10% auto -10%;
  height:60%; pointer-events:none;
  background: radial-gradient(900px 360px at 20% 0%, rgba(243,246,250,.60), rgba(0,0,0,0) 55%); /* gris */
  filter: blur(12px);
}
.zf-wrap{ width:min(1100px,92%); margin:0 auto; }

/* ===== Head ===== */
.zf-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
#zf-title{
  margin:0;
  font-size: clamp(1.25rem, 2.8vw, 1.9rem);
  
}
.zf-hint{ display:none; color:var(--muted); margin:.25rem 0 0; font-size:.95rem; }

/* Conmutador */
.zf-toggle{
  display:flex; gap:6px;
  background:rgba(26,26,26,.06);
  border:1px solid rgba(26,26,26,.12);
  padding:6px; border-radius:12px;
}
.zf-tab{
  flex:1; border:none; background:transparent; color:var(--muted);
  font-weight:700; padding:.5rem .75rem; border-radius:10px; cursor:pointer;
  
}
.zf-tab.is-active{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#FFFFFF; box-shadow:var(--glow);
}

/* ===== Grid ===== */
.zf-grid{ display:grid; gap:12px; }
@media (min-width: 900px){
  .zf-toggle{ display:none; }
  .zf-grid{ grid-template-columns: 1fr 1fr; }
}

/* ===== Cards ===== */
.zf-card{
  position:relative;
  background: linear-gradient(180deg, rgba(243,246,250,.95), rgba(243,246,250,.90));  /* gris */
  border:1px solid rgba(26,26,26,.12);
  border-radius:var(--radius);
  padding: clamp(16px, 2.2vw, 24px);
  backdrop-filter: blur(6px);
  overflow:hidden;
  transition: transform .35s ease, border-color .2s ease, box-shadow .2s ease;
}
.zf-card:hover{ transform: translateY(-1px); }

/* Topline de acento */
.zf-topline{ position:absolute; left:-1px; right:-1px; top:-1px; height:6px; }
.zf-card--for .zf-topline{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow:var(--glow); }
.zf-card--not .zf-topline{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow:var(--glow); }

.zf-h3{
  margin:.1rem 0 .6rem;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  
}
.zf-list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }

/* Items */
.zf-list li{
  position:relative; padding:.75rem .9rem .75rem 2.4rem;
  border:1px solid rgba(26,26,26,.12); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.55));
  line-height:1.35;
}
.zf-list li strong{ color:var(--text); }

/* Dot / icono */
.zf-dot{
  position:absolute; left:.7rem; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:999px; display:inline-grid; place-items:center; font-weight:900; color:#FFFFFF;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:var(--glow);
}
.zf-list--for .zf-dot::before{ content:"✓"; }
.zf-list--not .zf-dot::before{ content:"✕"; }

/* ===== Mobile tuning ===== */
.zf-card[hidden]{ display:none !important; }
@media (max-width: 899.98px){
  .zf-head{ flex-direction: column; align-items: center; text-align:center; gap:8px; margin-bottom:16px; }
  #zf-title{ max-width: 22ch; line-height:1.15; margin-bottom: .1rem; text-wrap: balance; }
  .zf-hint{ display:block; }
  .zf-toggle{ width:100%; max-width:520px; justify-content:space-between; margin-top:.25rem; }
  .zf-tab{ flex:1; white-space:nowrap; }
  .zf-grid[data-view="for"] #panel-not{ display:none !important; }
  .zf-grid[data-view="not"] #panel-for{ display:none !important; }
}

/* Animación de entrada */
@keyframes zfFadeUp { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.zf-list li{ opacity:0; transform: translateY(8px); }
.zf-list.is-visible li{ animation: zfFadeUp .45s ease both; }
.zf-list.is-visible li:nth-child(2){ animation-delay:.06s }
.zf-list.is-visible li:nth-child(3){ animation-delay:.12s }
.zf-list.is-visible li:nth-child(4){ animation-delay:.18s }
@media (prefers-reduced-motion: reduce){ .zf-list li, .zf-card{ animation:none; transition:none; } }
























/* =========================================================
CSS — Carrusel .tfx-* (misma estética que .trc-*, invertido)
- **CORRECCIÓN móvil**: en teléfono, los items nunca superan el ancho del viewport.
========================================================= */

/* Variables base (laptop) */
.tfx{
  --tfx-item-w: clamp(560px, 82vw, 1170px);
  --tfx-img-max-h: clamp(426px, 64vh, 740px);
  --tfx-gap: clamp(6px, 1.2vw, 10px);
  --tfx-speed: 18s; /* fallback solo-CSS si no carga el JS */
  color: var(--ink, #1A1A1A);
  margin-top: clamp(12px, 3vw, 28px);
}

/* Cabecera vistosa del carrusel */
.tfx-head{ width:min(1200px,92%); margin:0 auto clamp(10px, 2vw, 18px); text-align:center; padding-top:clamp(6px,1.4vw,12px); }
.tfx-title{
  margin:0 0 .4rem; font-weight:900;
  font-size:clamp(1.15rem,3.2vw,1.9rem); line-height:1.1; letter-spacing:.2px;
  background:linear-gradient(90deg,#0863FF,#3DC6FF,#0863FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 16px rgba(8,99,255,.18);
}
.tfx-sub{ margin:.1rem 0 0; font-size:clamp(.95rem,2.2vw,1.05rem); color:var(--muted,rgba(26,26,26,.66)); }

/* Viewport + fades laterales */
.tfx-viewport{ position:relative; width:100%; overflow:hidden; }
.tfx-viewport::before,.tfx-viewport::after{
  content:""; position:absolute; top:0; bottom:0; width:4%; pointer-events:none; z-index:2;
  background:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 70%);
}
.tfx-viewport::after{ right:0; transform:scaleX(-1); }
.tfx-viewport::before{ left:0; }

/* Pista (fila) + fallback animación invertida */
.tfx-track{
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  align-items:center; justify-content:flex-start !important;
  gap:var(--tfx-gap) !important; padding:clamp(2px,.8vw,6px) !important;
  will-change:transform;
  /* Fallback: de -50% a 0% (izquierda → derecha) */
  animation: tfx-scroll var(--tfx-speed) linear infinite;
  transform: translateX(-50%);
}
.tfx:hover .tfx-track, .tfx:focus-within .tfx-track{ animation-play-state:paused; }
@keyframes tfx-scroll{ from{ transform:translateX(-50%); } to{ transform:translateX(0%); } }

/* Tarjeta + imagen completa */
.tfx-item{
  margin:0 !important; flex:0 0 auto; width:var(--tfx-item-w) !important; height:auto !important;
  display:grid; place-items:center; border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.02)); border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 28px -20px rgba(0,0,0,.22);
}
.tfx-item>img{
  display:block; user-select:none; width:100% !important; height:auto !important;
  max-height:var(--tfx-img-max-h) !important; object-fit:contain !important; object-position:center !important;
  transition:transform .25s ease, filter .25s ease;
}
.tfx-item:hover>img{ transform:translateY(-1px); filter:saturate(1.03); }

/* Desktop (≥1280px): items grandes + gap mínimo */
@media (min-width:1280px){
  .tfx{
    --tfx-item-w: clamp(1060px, 88vw, 1800px);
    --tfx-img-max-h: clamp(820px, 76vh, 1200px);
    --tfx-gap: 1px;
    --tfx-speed: 12s; /* fallback más rápido */
  }
  .tfx .tfx-track{ gap:var(--tfx-gap) !important; padding:0 !important; }
  .tfx .tfx-item{ border:0 !important; box-shadow:0 10px 28px -20px rgba(0,0,0,.18); }
  .tfx-viewport::before,.tfx-viewport::after{ width:2%; }
}

/* Tablet */
@media (min-width:768px) and (max-width:1279.98px){
  .tfx{ --tfx-gap: clamp(3px, 0.8vw, 8px); --tfx-speed: 12s; }
  .tfx .tfx-track{ gap:var(--tfx-gap) !important; padding:2px !important; }
  .tfx-viewport::before,.tfx-viewport::after{ width:4%; }
}

/* Mobile — CORRECCIÓN: items nunca superan el ancho del teléfono */
@media (max-width:767.98px){
  .tfx{
    --tfx-item-w: 92vw;                 /* <= ancho del viewport móvil */
    --tfx-img-max-h: min(60vh, 420px);  /* altura contenida */
    --tfx-speed: 8s;                    /* consistente con .trc */
  }
  .tfx-item>img{ max-width:100%; height:auto; }
  .tfx-viewport::before,.tfx-viewport::after{ width:8%; }
}

/* Modo JS activado: anula fallback para evitar reinicios al pausar */
.js-marquee-tfx .tfx-track{ animation:none !important; }

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce){
  .tfx .tfx-track{ animation:none !important; }
  .tfx-viewport{ overflow:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .tfx .tfx-item{ scroll-snap-align:center; }
}
























/* EXPLICACIÓN DE BLOQUE (CSS): Ruta “Despierta tu Estilo” (4 pasos)
Paleta a gris/azules.
*/
:root{
  --bg:#FFFFFF;
  --card:#F3F6FA;
  --text:#1A1A1A;
  --muted:rgba(26,26,26,.70);
  --turq:#0863FF;
  --turq-2:#3DC6FF;
  --purple:#0B74FF;
  --line:rgba(26,26,26,.20);
  --glow:0 0 .8rem rgba(26,26,26,.25), 0 0 2rem rgba(26,26,26,.15);
  --radius:18px;

  --cta-space: 68px;
}

#DESPIERTA-route-pins.zr{
  color:var(--text);
  background:transparent;
  padding:clamp(30px,5.5vw,64px) 0 12px;
  position:relative;
}
#DESPIERTA-route-pins.zr::before{
  content:"";
  position:absolute; inset:-10% -10% auto -10%;
  height:50%; pointer-events:none;
  background: radial-gradient(900px 360px at 20% 0%, rgba(243,246,250,.58), rgba(0,0,0,0) 55%); /* gris */
  filter: blur(12px);
}

/* Cabecera y progreso */
.zr-head{ width:min(1200px,92%); margin:0 auto 10px; }
.zr-title{ margin:0 0 2px; font-size:clamp(1.05rem,2vw,1.45rem); line-height:1.25; }
.zr-sub{ margin:.1rem 0 .55rem; color:var(--muted); }
.zr-progress{ display:flex; align-items:center; gap:.6rem; }
.zr-progress__bar{ flex:1; height:6px; background:rgba(26,26,26,.12); border-radius:99px; position:relative; }
.zr-progress__fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, var(--turq), var(--turq-2));
  border-radius:inherit; box-shadow: var(--glow);
  transition: width .35s ease;
}
.zr-progress__dots{ display:flex; gap:.35rem; list-style:none; margin:0; padding:0; }
.zr-progress__dots li{
  width:10px; height:10px; border-radius:999px;
  background: radial-gradient(5px 5px at 50% 50%, var(--turq-2), var(--turq));
  opacity:.35; transition:opacity .2s ease, transform .2s ease;
  cursor:pointer;
}
.zr-progress__dots li.is-active{ opacity:1; transform:scale(1.05); }

/* Viewport horizontal */
.zr-viewport{
  width:100%; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  outline:none; scrollbar-width:none;
  max-height: calc(100vh - var(--cta-space));
}
.zr-viewport::-webkit-scrollbar{ display:none; }

/* Canvas */
.zr-canvas{
  position:relative;
  display:flex; align-items:flex-start; gap:clamp(22px,3.4vw,40px);
  padding: 96px clamp(18px,4vw,40px) 56px;
  min-height: 360px;
}

/* Compactación */
@media (max-width: 768px){
  .zr-head{ margin-bottom:8px; }
  .zr-title{ font-size:clamp(1rem,4.2vw,1.3rem); }
  .zr-sub{ margin-bottom:.45rem }
  .zr-progress__bar{ height:5px }
  .zr-canvas{ padding: 84px 16px 44px; min-height: 330px; }
}
@media (max-width: 430px){
  .zr-canvas{ padding: 72px 14px 36px; min-height: 300px; }
}

/* SVG path */
.zr-path{ position:absolute; left:0; top:0; pointer-events:none; z-index:0; }
.zr-path__line{ fill:none; stroke: var(--line); stroke-width:3; opacity:.8; }
.zr-path__progress{ fill:none; stroke: url(#zrGrad); stroke-width:3.4; filter:url(#zrGlow); stroke-linecap:round; }

/* Paso + pin + card */
.zr-step{
  position:relative;
  min-width: min(88vw, 520px);
  scroll-snap-align:center;
  z-index:1;
}
@media (min-width: 1024px){ .zr-step{ min-width: 520px; } }

/* Pines */
.zr-pin{
  position:absolute; left:50%; transform: translateX(-50%);
  top: calc(var(--pinY, 0px));
  width:16px; height:16px; border-radius:999px; border:none; cursor:pointer;
  background: radial-gradient(7px 7px at 50% 50%, var(--turq-2), var(--turq));
  box-shadow: var(--glow);
}
.zr-step:nth-child(odd){ --pinY: -44px; margin-top: 0; }
.zr-step:nth-child(even){ --pinY: 38px;  margin-top: 22px; }

/* Tarjeta */
.zr-card{
  background: linear-gradient(180deg, rgba(243,246,250,.95), rgba(243,246,250,.90));  /* gris */
  border:1px solid rgba(26,26,26,.12);
  border-radius:var(--radius);
  padding: clamp(12px, 1.9vw, 18px);
  backdrop-filter: blur(6px);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  will-change: transform, box-shadow;
}
.zr-step.is-active .zr-card{
  transform: translateY(-8px) scale(1.008);
  border-color: rgba(26,26,26,.5);
  box-shadow: 0 8px 26px -16px rgba(0,0,0,.25), 0 0 0 1px rgba(26,26,26,.24), var(--glow);
}

/* Entrada direccional */
#DESPIERTA-route-pins[data-dir="right"] .zr-step.is-active .zr-card{ animation: zrInRight .40s cubic-bezier(.22,1,.36,1) both; }
#DESPIERTA-route-pins[data-dir="left"]  .zr-step.is-active .zr-card{ animation: zrInLeft  .40s cubic-bezier(.22,1,.36,1) both; }
@keyframes zrInRight{ 0%{ transform: translate3d(7%,6px,0) rotate(1deg) scale(.988) } 100%{ transform: translateY(-8px) scale(1.008) } }
@keyframes zrInLeft{  0%{ transform: translate3d(-7%,6px,0) rotate(-1deg) scale(.988) } 100%{ transform: translateY(-8px) scale(1.008) } }

.zr-kicker{ display:block; color:rgba(26,26,26,.75); letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; margin-bottom:.15rem; }
.zr-h3{ margin:.1rem 0 .25rem; font-size: clamp(1rem, 1.8vw, 1.3rem); line-height:1.25; }
.zr-p{ color:var(--muted); margin:.15rem 0 0; font-size:clamp(.9rem,1.6vw,1rem); }

/* Thumb */
.zr-thumb{
  width:min(140px, 34vw); aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  border:1px solid rgba(26,26,26,.12);
  margin:.1rem 0 .65rem; box-shadow: 0 10px 30px -20px rgba(0,0,0,.15);
  background: linear-gradient(180deg, rgba(243,246,250,.95), rgba(243,246,250,.90)); /* gris */
}
.zr-thumb img{ width:100%; height:100%; object-fit:contain; padding:14px; }
@media (max-width: 430px){
  .zr-thumb{ width: 110px; border-radius:12px; }
  .zr-thumb img{ padding:12px; }
}

/* Botones */
.zr-nav{
  display:flex; justify-content:flex-end; gap:.55rem;
  width:min(1200px,92%); 
  margin:4px auto 0;
  transform: translateY(-14px);
}
.zr-btn{
  width:46px; height:46px; border-radius:12px;
  border:1px solid rgba(26,26,26,.12);
  background: linear-gradient(180deg, rgba(26,26,26,.06), rgba(26,26,26,.02));
  color:var(--text); font-size:1.5rem; line-height:1; cursor:pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.zr-btn:hover{ transform: translateY(-1px); border-color:rgba(26,26,26,.5); box-shadow: var(--glow); }

@media (max-width: 1024px){
  .zr-nav{ margin-top:2px; transform: translateY(-16px); }
  .zr-btn{ width:50px; height:50px; font-size:1.6rem; }
}
@media (max-width: 600px){
  .zr-nav{ margin-top:0; transform: translateY(-18px); }
  .zr-btn{ width:54px; height:54px; font-size:1.7rem; }
}

@media (prefers-reduced-motion: reduce){
  .zr-card{ transition:none; animation:none !important; }
  .zr-progress__fill{ transition:none; }
}
/* =========================
   DESKTOP FIX — overflow forzado
   (tarjetas más anchas + cola de espacio)
   ========================= */
#DESPIERTA-route-pins{
  /* Ajustables */
  --pc-step-min: 560px;   /* ancho mínimo por tarjeta en PC (antes: 520px) */
  --pc-step-vw:  36vw;    /* porcentaje de viewport por tarjeta (3 pasos => ~108vw total) */
  --pc-tail:     12vw;    /* espacio de cola para centrar el último paso y que siempre haya recorrido */
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px){
  /* 1) Tarjetas más anchas en escritorio:
        - ocupan al menos 560px o 36vw (lo que sea mayor)
        - con 3 pasos ⇒ 3 × 36vw ≈ 108vw → siempre hay overflow */
  #DESPIERTA-route-pins .zr-step{
    min-width: max(var(--pc-step-min), var(--pc-step-vw));
  }

  /* 2) Añadimos una "cola" al final del carrusel para que el último paso pueda centrarse
        y el botón "siguiente" siempre tenga desplazamiento disponible */
  #DESPIERTA-route-pins .zr-canvas::after{
    content: "";
    flex: 0 0 var(--pc-tail);
  }
}
























/* EXPLICACIÓN DE BLOQUE (CSS): Sticky CTA (botón fijo inferior) — ADAPTADO A PALETA AZUL
Sustituimos “dorado/negro” por TextTop + azul profundo.
*/






















/* =================================== BLOQUE 08 — STICKY CTA =================================== */
:root{
  --brand-gold:#0863FF;   /* Reuso del nombre: ahora TextTop */
  --brand-ink:#0B74FF;    /* Azul profundo */

  /* Variantes luminosas para brillos sobre fondo oscuro del CTA */
  --gold-soft: color-mix(in srgb, var(--brand-gold) 68%, white);
  --gold-glow: rgba(8,99,255,.30);   /* brillo azul */
  --ink-glow:  rgba(11,116,255,.28); /* brillo azul profundo */
}

#sticky-cta{
  position:fixed; left:50%;
  bottom:calc(12px + env(safe-area-inset-bottom));
  transform:translate(-50%,120%); opacity:0; z-index:9999;
  width:min(100%,1100px); pointer-events:none;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s;
}
#sticky-cta.is-visible{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }

#sticky-cta .cta-inner{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  margin:0 12px; background:rgba(0,0,0,.85); border-radius:16px; padding:14px 16px; backdrop-filter:blur(10px);
  border:1px solid transparent;

  background-image:
    linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,.85)),
    linear-gradient(90deg, var(--brand-gold), var(--brand-ink));
  background-origin:border-box; background-clip:padding-box, border-box;

  box-shadow:
    0 8px 24px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.04) inset;
}

/* Halos */
#sticky-cta .cta-inner::before{
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:inherit;
  background:
    radial-gradient(60% 60% at 15% 30%, color-mix(in srgb, var(--brand-gold) 60%, transparent), transparent 70%),
    radial-gradient(60% 60% at 80% 60%, color-mix(in srgb, var(--brand-ink) 50%, transparent), transparent 70%);
  filter:blur(18px); opacity:.55; pointer-events:none;
}

/* Icono */
#sticky-cta .cta-icon{
  width:42px; height:42px; flex:0 0 42px; border-radius:12px; position:relative; overflow:hidden;
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.06);
}
#sticky-cta .cta-icon::before{
  content:""; position:absolute; inset:1px; border-radius:10px;
  background-color:#0b0b0b; background-image:var(--icon-url);
  background-position:center; background-repeat:no-repeat; background-size:60%;
}

/* Copia */
#sticky-cta .cta-copy{
  color:#f5f5f5; font-weight:700; line-height:1.2; letter-spacing:.2px; display:flex; align-items:center; gap:.35em;
  font-size:clamp(14px,2.2vw,18px);
}
#sticky-cta .cta-copy .accent{
  background-image:linear-gradient(90deg, var(--gold-soft), var(--brand-gold));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800;
}

/* Botón */
#sticky-cta .cta-button{
  appearance:none; border:none; cursor:pointer; font-weight:800; letter-spacing:.3px;
  padding:12px 18px; border-radius:12px;

  background:linear-gradient(90deg, var(--brand-gold), var(--brand-ink));
  background-size:200% auto;

  color:#FFFFFF;

  box-shadow:
    0 10px 24px var(--gold-glow),
    0 10px 24px var(--ink-glow);

  transition:transform .15s ease, box-shadow .3s ease, background-position .6s ease; white-space:nowrap;
}
#sticky-cta .cta-button:hover{
  background-position:100% 0; transform:translateY(-1px);
  box-shadow:
    0 12px 28px rgba(8,99,255,.36),
    0 12px 28px rgba(11,116,255,.34);
}
#sticky-cta .cta-button:active{ transform:translateY(0); box-shadow:0 6px 12px rgba(0,0,0,.35) inset; }
#sticky-cta .cta-button:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px; }

@media (max-width:640px){
  #sticky-cta .cta-inner{ gap:12px; padding:12px; }
  #sticky-cta .cta-icon{ width:38px; height:38px; }
  #sticky-cta .cta-copy{ font-size:clamp(13px,4vw,16px); }
}
@media (max-width:480px){
  #sticky-cta .cta-inner{
    display:grid; grid-template-columns:38px 1fr;
    grid-template-areas: "icon copy" "button button";
  }
  #sticky-cta .cta-icon{ grid-area:icon; }
  #sticky-cta .cta-copy{ grid-area:copy; }
  #sticky-cta .cta-button{ grid-area:button; width:100%; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  #sticky-cta, #sticky-cta .cta-button{ transition:none !important; }
}
























/* EXPLICACIÓN DE BLOQUE (CSS): Ilustración del manifiesto + Manifiesto (título/lead/puntos)
Fallbacks de acentos pasan a azules; **CORRECCIÓN**: la imagen se muestra SIEMPRE completa (sin recorte).
*/
:root{
  --zm-cyan: var(--brand-primary, #3DC6FF);   /* azulito por defecto */
  --zm-violet: var(--brand-accent, #0863FF);  /* TextTop por defecto */
  --zm-ink: var(--ink, #1A1A1A);
  --zm-line: var(--line, rgba(0,0,0,.12));
}

.zm-illustration{
  background: transparent;
  padding: clamp(10px, 2.6vw, 22px) 0;
  isolation: isolate;
  display: grid;
  justify-items: center;
}

.zm-illustration__figure{
  margin: 0;
  width: 100%;
  max-width: min(1200px, 96%);
  margin-inline: auto !important;
  position: relative;
  border-radius: clamp(12px, 2vw, 20px);
  overflow: clip;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  outline: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 0 36px rgba(0,0,0,.28),
    0 18px 60px -24px rgba(0,0,0,.65);
}
.zm-illustration__figure::before{
  content:""; position:absolute; inset:-2%;
  border-radius: inherit; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70% 60% at 20% 15%, color-mix(in srgb, var(--zm-cyan) 20%, transparent), transparent 70%),
    radial-gradient(70% 60% at 80% 85%, color-mix(in srgb, var(--zm-violet) 20%, transparent), transparent 70%);
  filter: blur(18px); opacity:.55;
}

/* CORRECCIÓN: no recortar la imagen (usar object-fit:contain y aspect-ratio:auto) */
.zm-illustration__img{
  display:block; width:100%; height:auto;
  aspect-ratio: auto;                 /* que respete su proporción natural */
  object-fit: contain;                /* sin recorte */
  object-position: center;
}

/* Eliminamos forzados de proporción también en móviles (mantener imagen completa) */
@media (max-width: 680px){
  .zm-illustration__img{ aspect-ratio: auto; height:auto; }
}
@media (max-width: 420px){
  .zm-illustration__img{ aspect-ratio: auto; height:auto; }
}

/* ===== Manifiesto — (tu CSS tal cual) ===== */
#zenith-manifiesto.zm{
  color: var(--ink, #1A1A1A);
  background: transparent;
  padding: clamp(14px,3.2vw,28px) 0;
}
#zenith-manifiesto .zm-wrap{
  width: min(1100px,92%);
  margin: 0 auto;
  max-width: 72ch;
}
#zenith-manifiesto .zm-title{
  margin: 0 0 .35rem;
  font-weight: 800;
  font-size: clamp(1.375rem, 2.1vw, 2rem);
  line-height: 1.15;
  text-wrap: balance;
}
#zenith-manifiesto .zm-title .zm-soft{ font-weight:700; opacity:.9; }

#zenith-manifiesto .zm-lead{
  margin: .25rem 0 .6rem;
  color: var(--muted, rgba(26,26,26,.78));
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.35;
  text-wrap: balance;
}
#zenith-manifiesto .zm-lead .zm-zenith{
  background: linear-gradient(90deg, var(--violet, #0863FF), var(--teal, #0B74FF));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 800;
}
#zenith-manifiesto .zm-points{
  margin:.1rem 0 0; padding:0; list-style:none;
  display:grid; gap:.55rem;
}
#zenith-manifiesto .zm-points li{
  position:relative;
  padding-left:14px;
  font-size: clamp(.98rem, 1.5vw, 1.08rem);
  line-height:1.35;
  color: var(--ink, #1A1A1A);
  text-wrap: pretty;
}
#zenith-manifiesto .zm-points li::before{
  content:"";
  position:absolute; left:0; top:.45em;
  width:6px; height:6px; border-radius:999px;
  background: radial-gradient(circle at 50% 50%, var(--teal2, #3DC6FF), var(--teal, #0B74FF));
  box-shadow: 0 0 14px color-mix(in srgb, var(--teal, #0B74FF) 35%, transparent);
}
@media (max-width:680px){
  #zenith-manifiesto .zm-wrap{ max-width: 66ch; }
  #zenith-manifiesto .zm-title{ line-height:1.12; }
  #zenith-manifiesto .zm-lead{ line-height:1.32; }
  #zenith-manifiesto .zm-points{ gap:.45rem; }
}
@media (max-width:420px){
  #zenith-manifiesto.zm{ padding:14px 0; }
  #zenith-manifiesto .zm-title{ font-size:clamp(1.25rem, 6vw, 1.6rem); }
  #zenith-manifiesto .zm-lead{ font-size:clamp(.95rem, 4.4vw, 1.05rem); }
  #zenith-manifiesto .zm-points li{ font-size:clamp(.95rem, 4.2vw, 1.02rem); }
}
@media (prefers-reduced-motion:reduce){
  #zenith-manifiesto *{ transition:none !important; animation:none !important; }
}
























/* EXPLICACIÓN DE BLOQUE (CSS): FAQ épico
Turquesas → azules; beige → gris.
*/
:root{
  --bg:#FFFFFF;
  --card:#F3F6FA;
  --text:#1A1A1A;
  --muted:rgba(26,26,26,.70);
  --turq:#0863FF;
  --turq-2:#3DC6FF;
  --purple:#0B74FF;
  --line:rgba(26,26,26,.20);
  --glow:0 0 .8rem rgba(26,26,26,.25), 0 0 2rem rgba(26,26,26,.15);
  --radius:18px;
  --display:'GFS Didot', Georgia, 'Times New Roman', serif;
}

#zenith-faq.zf{
  color:var(--text);
  background:transparent;
  padding:clamp(42px,6vw,80px) 0 18px;
  position:relative;
}
#zenith-faq.zf::before{
  content:"";
  position:absolute; inset:-10% -10% auto -10%;
  height:60%; pointer-events:none;
  background: radial-gradient(900px 360px at 20% 0%, rgba(243,246,250,.60), rgba(0,0,0,0) 55%); /* gris */
  filter: blur(12px);
}
.zf-head{ width:min(1200px,92%); margin:0 auto; }

/* Título */
.zf-title{
  
  font-weight:400;
  font-size:clamp(2rem, 4.2vw, 3rem);
  line-height:1.08;
  letter-spacing:.2px;
  text-wrap:balance;
  margin:0 0 12px;
  position:relative;
  display:inline-block;
  padding-bottom:20px;
}
.zf-title::after{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:2px;
  width:clamp(160px, 56%, 420px);
  height:6px;
  border-radius:999px;
  background:
    linear-gradient(90deg, rgba(26,26,26,.05), rgba(26,26,26,.75) 18%, rgba(26,26,26,.9) 50%, rgba(26,26,26,.75) 82%, rgba(26,26,26,.05));
  box-shadow: 0 6px 20px -12px rgba(0,0,0,.25);
}
.zf-title::before{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%) rotate(45deg);
  bottom:7px;
  width:12px; height:12px;
  background:var(--text);
  border-radius:2px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85) inset, 0 4px 14px -6px rgba(0,0,0,.35);
}

.zf-sub{ margin:.1rem 0 1rem; color:var(--muted); }

/* Herramientas */
.zf-tools{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:10px;
}
.zf-search{ position:relative; flex:1 1 420px; min-width:min(100%, 260px); }
.zf-search input{
  width:100%; height:46px; padding:0 42px 0 14px;
  border-radius:12px; border:1px solid rgba(26,26,26,.12);
  background: linear-gradient(180deg, rgba(243,246,250,.95), rgba(243,246,250,.90));  /* gris */
  color:var(--text); font-size:0.95rem;
  box-shadow: 0 0 0 1px rgba(26,26,26,.06) inset;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.zf-search input::placeholder{ color:rgba(26,26,26,.55) }
.zf-search input:focus{ outline:none; border-color:rgba(26,26,26,.5); box-shadow: 0 0 0 1px rgba(26,26,26,.2), var(--glow); }
.zf-clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:8px; border:1px solid rgba(26,26,26,.12);
  background:linear-gradient(180deg, rgba(26,26,26,.06), rgba(26,26,26,.02));
  color:var(--text); cursor:pointer;
}
.zf-actions{ display:flex; gap:8px; }

/* Progreso y meta */
.zf-progress{ display:flex; align-items:center; gap:.75rem; margin:6px 0 14px; }
.zf-progress__bar{ flex:1; height:6px; background:rgba(26,26,26,.12); border-radius:99px; position:relative; overflow:hidden; }
.zf-progress__fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background: linear-gradient(90deg, var(--turq), var(--turq-2));
  border-radius:inherit; box-shadow: var(--glow);
  transition: width .25s ease;
}
.zf-meta{ display:flex; gap:12px; color:var(--muted); font-size:.92rem; }

/* Lista FAQ */
.zf-list{
  width:min(1200px,92%); margin:0 auto;
  display:grid; gap:12px;
}

/* Item */
.zf-item{
  border:1px solid rgba(26,26,26,.12);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(243,246,250,.95), rgba(243,246,250,.90));  /* gris */
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.15);
  overflow:hidden;
}

/* Summary */
.zf-q{
  list-style:none; cursor:pointer; user-select:none;
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px;
  padding:14px 14px;
}
.zf-item > .zf-q::-webkit-details-marker{ display:none; }
.zf-num{
  width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
  font-size:.9rem; background: radial-gradient(8px 8px at 50% 50%, var(--turq-2), var(--turq));
  color:#fff; box-shadow: var(--glow);
}
.zf-ask{ font-size: clamp(1rem,1.8vw,1.1rem); }
.zf-icons{ opacity:.55; transition: transform .2s ease, opacity .2s ease; }
.zf-link{
  margin-left:6px; width:34px; height:34px; border-radius:8px; border:1px solid rgba(26,26,26,.12);
  background:linear-gradient(180deg, rgba(26,26,26,.06), rgba(26,26,26,.02));
  color:var(--text); cursor:pointer;
}
.zf-q:focus-visible{ outline:2px solid rgba(26,26,26,.5); outline-offset:2px; }
.zf-item[open] .zf-icons{ transform:rotate(180deg); opacity:.9; }

/* Panel */
.zf-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.zf-item[open] .zf-panel{ grid-template-rows:1fr; }
.zf-a{ overflow:hidden; }
.zf-a p{ margin: 0 14px 16px; color:var(--muted); }

/* Estados de búsqueda */
.zf-item.is-dim{ opacity:.35; filter:saturate(.9); }
.zf-item.is-hit{ border-color: rgba(26,26,26,.5); box-shadow: 0 0 0 1px rgba(26,26,26,.2), var(--glow); }

/* Scroll anchor */
.zf-item{ scroll-margin-top: 14vh; }

/* Botones */
.zr-btn{
  width:42px; height:42px; border-radius:10px; border:1px solid rgba(26,26,26,.12);
  background: linear-gradient(180deg, rgba(26,26,26,.06), rgba(26,26,26,.02));
  color:var(--text); font-size:.95rem; line-height:1; cursor:pointer; padding:0 12px;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.zr-btn:hover{ transform: translateY(-1px); border-color:rgba(26,26,26,.5); box-shadow: var(--glow); }
.zr-btn:focus-visible{ outline:2px solid rgba(26,26,26,.5); outline-offset:2px; }

/* Botones de acción */
.zf-actions .zr-btn{
  width:auto; height:40px; padding:0 14px; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Accesibilidad motion */
@media (prefers-reduced-motion: reduce){
  .zf-panel{ transition:none }
  .zf-icons{ transition:none }
}

/* Ajustes responsive finos del título */
@media (max-width: 768px){
  .zf-title{ padding-bottom:18px; }
  .zf-title::after{ height:5px; width:clamp(150px, 64%, 360px); }
  .zf-title::before{ bottom:6px; width:10px; height:10px; }
}
@media (max-width: 420px){
  .zf-title{ padding-bottom:16px; }
  .zf-title::after{ height:4px; width:clamp(120px, 68%, 300px); }
  .zf-title::before{ bottom:5px; width:9px; height:9px; }
}










/* ===== Calendly contenedor: evita overflow y problemas de apilamiento ===== */
#calendly-widget {
  width: min(1100px, 96%);
  margin: 0 auto;
  aspect-ratio: 16/10;
  min-height: 640px;
  /* CAMBIO: Removemos position relative y isolation que pueden causar conflictos */
  overflow: hidden; /* Previene desbordamiento del iframe */
  background: transparent;
}

@media (max-width: 640px) {
  #calendly-widget {
    min-height: 680px;
    padding: 10px 12px;
  }
}

/* Aseguramos que el iframe de Calendly se comporte correctamente */
#calendly-widget iframe {
  max-width: 100% !important;
  border: 0;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-227cbc8 *//*
.seccion-retardada {
  display: none !important;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.seccion-retardada.mostrar {
  display: block !important;
  opacity: 1;
}
*//* End custom CSS */