.elementor-5707 .elementor-element.elementor-element-bad7009{--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:center;--align-items:center;--gap:20px 0px;--row-gap:20px;--column-gap:0px;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5707 .elementor-element.elementor-element-40f6be8 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-5707 .elementor-element.elementor-element-bad7009{--gap:10px 0px;--row-gap:10px;--column-gap:0px;}}@media(min-width:768px){.elementor-5707 .elementor-element.elementor-element-bad7009{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-40f6be8 */.zen-progress{
    /* —— Theming (SOLO colores) —— */
    --accent-1: #0077B6;    /* teal de marca */
    --accent-2: #333333;    /* magenta de marca (color principal) */
    --accent-3: #333333;    /* para bordes/halos sutiles */
    --height: clamp(36px, 5.2vw, 56px);
    --radius: 9999px;

    width: min(100%, 880px);
    margin: clamp(8px, 2vh, 16px) auto;
    position: relative;
    height: var(--height);
    border-radius: var(--radius);
    overflow: hidden;

    /* Pista (discreta) */
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow:
      0 0 0 1px rgba(233, 30, 140, .25) inset,   /* fino borde magenta */
      0 10px 24px rgba(0,0,0,.25),
      0 0 48px rgba(233, 30, 140, .06);          /* halo muy sutil en magenta */
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: white; /* texto siempre oscuro */
  }

  /* Relleno animado — INICIA EN MAGENTA y luego “respira” hacia teal */
  .zen-progress__fill{
    position: absolute; inset: 0 auto 0 0;
    width: 0; height: 100%;
    border-radius: inherit;
    /* magenta domina al inicio; teal aparece al desplazarse el fondo */
    background: linear-gradient(90deg,
      var(--accent-2) 0%,
      var(--accent-2) 55%,
      var(--accent-1) 100%
    );
    background-size: 200% 100%;
    box-shadow:
      0 0 0 1px rgba(233, 30, 140, .40) inset,
      0 8px 24px rgba(233, 30, 140, .25),
      0 0 36px rgba(233, 30, 140, .30);
    animation: zp-fill 1.05s ease-out forwards, zp-shift 8s ease-in-out infinite 0.8s;
  }
  /* Brillo diagonal suave */
  .zen-progress__fill::before{
    content:"";
    position:absolute; inset:-20% -60%;
    background: linear-gradient(-75deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 55%);
    transform: translateX(-60%);
    animation: zp-sheen 2.2s ease-in-out infinite 1.2s;
    pointer-events:none;
    mix-blend-mode: soft-light;
  }
  @keyframes zp-fill { from { width: 0%; } to { width: calc(var(--val, 96) * 1%); } }
  @keyframes zp-shift { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
  @keyframes zp-sheen { from { transform: translateX(-60%); opacity: .0; } 35% { opacity: .55; } to { transform: translateX(160%); opacity: 0; } }

  /* Contenido encima del relleno (siempre legible) */
  .zen-progress__content{
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    height: 100%;
    padding-inline: clamp(12px, 4vw, 28px);
  }
  .zen-progress__text{
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1;
    font-size: clamp(12px, 2.4vw, 16px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .zen-progress__pct{
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: clamp(12px, 2.2vw, 15px);
    color: white;
    margin-left: 12px;
  }

  /* Tablet */
  @media (max-width: 1024px){
    .zen-progress{ width: min(100%, 680px); }
  }
  /* Móvil */
  @media (max-width: 600px){
    .zen-progress{ width: 100%; }
  }

  /* Respeto a usuarios con “reducir animaciones” */
  @media (prefers-reduced-motion: reduce){
    .zen-progress__fill{ animation: none; width: calc(var(--val, 96) * 1%); }
    .zen-progress__fill::before{ display:none; }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* =========================================================
  CrawlFit — Estética masculina, robusta y deportiva
  Fondo blanco; colores de marca:
  --blue: #0077B6 (azul CrawlFit), --ink: #333333 (grafito)
  Tipografía global: Open Sans (ya cargada en tu web)
  Mobile-first. Vídeo vertical 9:16, centrado y sin rellenos extra.
========================================================= */
:root{
  --blue: #0077B6;
  --ink:  #333333;
  --muted:#4a4a4a;
  --bg:   #ffffff;
  --wrap: min(1100px, 92vw);
}

*{ box-sizing: border-box; }
.cf-wrap{ width: var(--wrap); margin-inline:auto; padding-inline: clamp(12px,2.4vw,22px); color: var(--ink); }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

/* ===== HERO (pegado arriba, líneas “llenitas”) ===== */
.cf-hero{ text-align:center; padding: clamp(6px,1.4vw,10px) 0 0; }
.cf-title{
  font-weight:800;
  font-size: clamp(26px,5.6vw,46px);
  line-height: 1.16;
  margin: 0 0 clamp(8px,1.8vw,10px);
  letter-spacing:.01em;
  color: var(--ink);
}

/* Bloques balanceados para evitar huérfanas */
.cf-row{
  display:block;
  margin-inline:auto;
  max-inline-size: clamp(30ch, 60vw, 36ch); /* controla anchura para rellenar líneas */
  text-wrap: balance;
  text-wrap: pretty;
}

/* Énfasis cromático */
.cf-blue{ color: var(--blue); }

/* Subrayado SEGURO con background (no tapa acentos) */
.cf-accent{
  color: var(--ink);
  background-image: linear-gradient(to top, rgba(0,119,182,.20), rgba(0,119,182,.20));
  background-size: 100% .28em;
  background-position: 0 100%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Shine + shimmer sobrios (metal/azul) */
.cf-title--shine{ position: relative; }
.cf-title--shine::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 52%, transparent 72%);
  transform: translateX(-160%);
  mix-blend-mode: screen;
  animation: cfShine 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cfShine{
  0%{ transform: translateX(-160%); opacity: 0; }
  25%{ opacity:.9; }
  55%{ transform: translateX(160%); opacity: 0; }
  100%{ transform: translateX(160%); opacity: 0; }
}
.cf-title--shimmer{
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 40%, var(--blue) 70%, var(--ink) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cfHue 9s linear infinite alternate;
}
@keyframes cfHue{ 0%{background-position:0% 50%} 100%{background-position:100% 50%} }

/* ===== COPY (compacto, tono técnico/deportivo) ===== */
.cf-copy{ padding: clamp(10px,3vw,16px) 0; }
.cf-copy p{ margin:0 0 10px; font-size: clamp(15px,3.6vw,17px); color: var(--muted); }

/* Llamado al vídeo — estética “pro” (chip + barra angular) */
.cf-video-intro{
  margin: clamp(12px,3vw,18px) 0 clamp(8px,2.2vw,12px);
  text-align:center;
  display:grid;
  gap:8px;
}
.cf-chip{
  display:inline-block;
  font: 700 11px/1 'Open Sans', sans-serif;
  letter-spacing:.12em;
  text-transform: uppercase;
  color:#fff;
  background:
    linear-gradient(135deg, rgba(0,119,182,1) 0%, rgba(0,119,182,.85) 60%),
    linear-gradient(135deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 60%);
  padding:6px 12px;
  border-radius:6px;
  box-shadow: 0 4px 14px rgba(0,119,182,.25);
}
.cf-video-intro__txt{
  position: relative;
  display: inline-block;
  font-weight:800;
  font-size: clamp(18px,4.8vw,26px);
  color: var(--ink);
  letter-spacing:.01em;
  line-height:1.18;
  padding: 0 .08em .06em;
}
/* barra angular de base (no linea “flotante”) */
.cf-video-intro__txt::after{
  content:"";
  position:absolute; left:-2px; right:-2px; bottom:-6px; height:7px;
  background:
    linear-gradient(100deg, rgba(0,119,182,.22) 0%, rgba(0,119,182,.10) 60%, transparent 100%);
  border-radius:4px;
}

/* ===== VÍDEO · VERTICAL (centrado y sin relleno extra) ===== */
.cf-video{ padding: clamp(8px,2vw,12px) 0 clamp(8px,2vw,12px); }
.cf-video__frame{
  position: relative;
  width: clamp(240px, 80vw, 420px); /* tamaño “teléfono”; seguro en móvil */
  aspect-ratio: 9 / 16;
  margin-inline: auto;             /* centrado perfecto */
  border-radius: 14px;
  overflow: hidden;
  background: #F5F7FA;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: box-shadow .25s ease, transform .25s ease;
}
.cf-video__frame:hover{ box-shadow:0 8px 22px rgba(0,119,182,.18); transform: translateY(-1px); }
.cf-video__frame vslplay-player{ position:absolute; inset:0; width:100%; height:100%; display:block; }

@media (max-width:600px){
  .cf-video__frame{ width: min(82vw, 340px); border-radius:12px; }
}

/* ===== CIERRE (compacto) ===== */
.cf-closing{ text-align:center; padding: clamp(10px,3vw,16px) 0 clamp(12px,3.2vw,18px); }
.cf-closing p{ font-size:clamp(15px,3.6vw,17px); margin:0 0 10px; color:var(--muted); }
.cf-emph{
  font-weight:600;
  font-size: clamp(16px,4vw,19px);
  color: var(--ink);
  line-height: 1.34;
}
.cf-emph strong{ color: var(--blue); }
.cf-emph span{ color: var(--ink); font-weight:800; }
.cf-sign{ margin-top: clamp(10px,3vw,14px); color: var(--ink); font-style: italic; }

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce){
  .cf-title--shine::before,
  .cf-title--shimmer,
  .cf-video-intro__txt::after{
    animation: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bad7009 *//* Ocultar contenedor 2 al inicio */
  #step2 { display: none !important; }
  .is-hidden { display: none !important; }
  .fade-in { animation: fadeIn .35s ease-out both; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity:1; transform:none; } }

  /* Ajustes de la barra para que el lado derecho sea texto (no número) */
  #progressTop .zen-progress__pct{
    font-weight: 800;
    letter-spacing: .2px;
    font-variant-numeric: normal; /* ya no es número */
    white-space: nowrap;
  }

  /* En móviles, si hace falta, permite dos líneas en el lado izquierdo */
  @media (max-width: 480px){
    #progressTop .zen-progress__text{
      white-space: normal;
      line-height: 1.15;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    #progressTop .zen-progress__pct{
      font-size: clamp(11px, 3.5vw, 13px);
    }
  }/* End custom CSS */