/* ═══════════════════════════════════════════════════════════
   CREA — WEB · WOW LAYER (carga ÚLTIMA, después de premium)
   Objetivo: confianza + conversión.
   · Menos cajas → composición editorial orgánica
   · Caras reales, prueba social, número que respira
   · Motion con intención (no decorativo)
═══════════════════════════════════════════════════════════ */

:root {
  --ww-ease: cubic-bezier(0.16, 1, 0.30, 1);
  --ww-radius: clamp(28px, 4.5vw, 56px);
}

/* ━━━━━━━━ 0 · GRANO DE FILM (textura orgánica global) ━━━━━━━━ */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ━━━━━━━━ 1 · SECCIONES OSCURAS CON HOMBROS REDONDEADOS ━━━━━━━━
   Las planchas oscuras dejan de ser bloques: entran con curva
   sobre el papel — el flujo se siente orgánico, no apilado.    */
.servicios, .casos, .about, .contacto {
  border-radius: var(--ww-radius) var(--ww-radius) 0 0;
}
.servicios, .casos, .about { overflow: clip; }

/* ━━━━━━━━ 2 · HERO — prueba social humana + video vivo ━━━━━━━━ */
@media (prefers-reduced-motion: no-preference) {
  .hero__bg video { animation: ww-kenburns 22s ease-in-out infinite alternate; }
  @keyframes ww-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
}
.hero__stats { gap: 16px; flex-wrap: wrap; }
.hero__avs { display: inline-flex; align-items: center; flex-shrink: 0; }
.hero__avs img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,0.85); margin-left: -10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transition: transform .35s var(--ww-ease);
}
.hero__avs img:first-child { margin-left: 0; }
.hero__avs:hover img { transform: translateY(-2px); }
.hero__avs img:nth-child(2):hover, .hero__avs img:hover { transform: translateY(-3px) scale(1.08); }

/* ━━━━━━━━ 3 · CASOS — editorial orgánico (adiós cuadros) ━━━━━━━━ */
.casos__grid { gap: clamp(28px, 4vw, 56px); align-items: start; }
.casos__row2 { gap: clamp(28px, 4vw, 56px); margin-top: clamp(36px, 5vw, 64px); align-items: start; }

.voice {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.voice:hover { background: transparent !important; transform: none !important; box-shadow: none !important; }

.voice__q {
  font-size: clamp(72px, 7vw, 110px) !important;
  height: 0.52em; overflow: visible;
  background: linear-gradient(135deg, var(--navy-light), var(--red));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
  opacity: 0.9;
}
.voice__text {
  font-size: clamp(18px, 1.6vw, 22px) !important;
  line-height: 1.55 !important;
  font-weight: 450;
  color: rgba(255,255,255,0.92) !important;
  letter-spacing: -0.005em;
  margin-top: 4px !important;
  text-wrap: pretty;
}
.voice--sm .voice__text { font-size: clamp(15.5px, 1.2vw, 17px) !important; color: rgba(255,255,255,0.78) !important; }
.voice__who { border-top: none !important; padding-top: 0 !important; margin-top: 26px !important; }
.voice__av { width: 44px !important; height: 44px !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.14), 0 8px 20px rgba(0,0,0,0.4); }
.voice__nm { font-size: 14.5px; }
.voice__rl { color: rgba(255,255,255,0.42) !important; }

/* métrica: número desnudo, enorme, que cuenta solo */
.voice--metric {
  background: transparent !important;
  box-shadow: none !important;
  align-items: flex-start !important; justify-content: flex-start !important;
  text-align: left !important;
  padding-left: clamp(0px, 2vw, 28px) !important;
}
.voice--metric .v {
  font-size: clamp(86px, 9vw, 150px) !important;
  letter-spacing: -0.04em !important; line-height: 0.85 !important;
  background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,0.55));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.voice--metric .l {
  font-size: 11px !important; color: rgba(255,255,255,0.6) !important;
  margin-top: 18px !important; letter-spacing: 0.14em !important;
  padding-left: 2px; position: relative;
}
.voice--metric .l::before {
  content: ""; display: block; width: 44px; height: 2px; border-radius: 2px;
  margin-bottom: 14px; background: linear-gradient(90deg, var(--red), transparent);
}
.voice--metric .x { font-size: 14px !important; color: rgba(255,255,255,0.5) !important; margin-top: 12px !important; font-style: italic; }

/* CTA: la única pieza con cuerpo — es el botón de la sección */
.voice--cta {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-top-color: rgba(255,255,255,0.22) !important;
  border-radius: 26px !important;
  padding: 30px !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 46px rgba(0,0,0,0.28) !important;
}
.voice--cta:hover { transform: translateY(-4px) !important; }
.voice--cta .lab { color: var(--navy-light) !important; letter-spacing: 0.16em !important; }
.voice--cta p { color: rgba(255,255,255,0.66) !important; }
.voice--cta .btn { margin-top: 22px; }

/* pill de clientes: caras reales */
.casos__avs img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,0.25); margin-left: -8px; display: block;
}
.casos__avs img:first-child { margin-left: 0; }

@media (max-width: 860px) {
  .casos__grid, .casos__row2 { gap: 44px; }
  .voice--metric { padding-left: 0 !important; }
}

/* ━━━━━━━━ 4 · MÉTODO — un camino que se dibuja, no tres cajas ━━━━━━━━ */
.steps { counter-reset: ww-step; }
.step { counter-increment: ww-step; padding-top: 14px; }
.step::before {
  content: "0" counter(ww-step);
  position: absolute; top: -22px; right: 0; z-index: 0; pointer-events: none;
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(88px, 9vw, 128px); line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(27,47,110,0.13);
  transition: -webkit-text-stroke-color .5s var(--ww-ease);
}
.step:hover::before { -webkit-text-stroke-color: rgba(204,34,51,0.30); }
.step__num { color: var(--red); font-weight: 700; position: relative; z-index: 1; }
.step__name, .step__desc { position: relative; z-index: 1; }

/* la línea recorre todo el ancho, en secuencia — un recorrido */
.step__line { height: 2px; background: rgba(20,36,88,0.10); overflow: hidden; }
.step__line::before {
  background: linear-gradient(90deg, var(--navy), var(--navy-light)) !important;
  transition: width 1.1s var(--ww-ease) !important;
}
.steps.in .step:nth-child(1) .step__line::before { width: 100%; transition-delay: .1s !important; }
.steps.in .step:nth-child(2) .step__line::before { width: 100%; transition-delay: .55s !important; }
.steps.in .step:nth-child(3) .step__line::before { width: 100%; transition-delay: 1s !important; }
.steps.in .step:nth-child(3) .step__line::before { background: linear-gradient(90deg, var(--navy-light), var(--red)) !important; }

/* nodo al inicio de cada tramo */
.step__line::after {
  content: ""; position: absolute; left: 0; top: 50%; transform: translate(0,-50%) scale(0);
  width: 8px; height: 8px; border-radius: 50%; background: var(--navy);
  transition: transform .5s var(--ww-ease);
}
.steps.in .step:nth-child(1) .step__line::after { transform: translate(0,-50%) scale(1); transition-delay: .05s; }
.steps.in .step:nth-child(2) .step__line::after { transform: translate(0,-50%) scale(1); transition-delay: .5s; }
.steps.in .step:nth-child(3) .step__line::after { transform: translate(0,-50%) scale(1); transition-delay: .95s; background: var(--red); }

/* ━━━━━━━━ 5 · STATS — números abiertos, sin jaula ━━━━━━━━ */
.stats {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  box-shadow: none !important; overflow: visible !important;
  gap: clamp(28px, 3.5vw, 48px) clamp(28px, 4vw, 56px) !important;
}
.stat { background: transparent !important; padding: 0 0 0 18px !important; }
.stat:hover { background: transparent !important; }
.stat::before {
  top: 4px; bottom: 4px; left: 0; right: auto; height: auto; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--navy-light), transparent) !important;
}
.stat__v { font-size: clamp(44px, 4.6vw, 68px) !important; }
.stat__l { margin-top: 10px !important; }

/* ━━━━━━━━ 6 · COMBOS + CATS — más blandos, más táctiles ━━━━━━━━ */
.combo { border-radius: 26px !important; }
.combo--star { transform: scale(1.015); }
.combo--star:hover { transform: scale(1.015) translateY(-8px) !important; }
.cat { border-radius: 18px !important; }
.cat__see { transition: color .3s, letter-spacing .3s var(--ww-ease); }
.cat:hover .cat__see { color: var(--red); }

/* ━━━━━━━━ 7 · MARQUEE — desvanecido en bordes ━━━━━━━━ */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ━━━━━━━━ 8 · DOCK DE CONVERSIÓN (sticky, glass) ━━━━━━━━ */
.dock {
  position: fixed; left: 50%; bottom: 18px; z-index: 94;
  transform: translate(-50%, calc(100% + 30px));
  display: flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 14px; border-radius: 100px;
  background: rgba(12,16,34,0.62);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.14); border-top-color: rgba(255,255,255,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 50px rgba(0,0,0,0.42);
  opacity: 0; pointer-events: none;
  transition: transform .55s var(--ww-ease), opacity .45s var(--ww-ease);
}
.dock.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
body:has(.chat.open) .dock, body:has(.mnav.open) .dock, body:has(.svc.open) .dock {
  transform: translate(-50%, calc(100% + 30px)); opacity: 0; pointer-events: none;
}
.dock__av-wrap { position: relative; flex-shrink: 0; }
.dock__av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.35); }
.dock__av-wrap::after {
  content: ""; position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px;
  border-radius: 50%; background: #22c55e; border: 2.5px solid #11152b;
  animation: ww-online 2.4s ease-in-out infinite;
}
@keyframes ww-online { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); } 60% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }
.dock__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dock__txt b {
  font-family: var(--f-display); text-transform: uppercase; font-weight: 600;
  font-size: 14px; letter-spacing: 0.01em; color: #fff; line-height: 1.1; white-space: nowrap;
}
.dock__txt span {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); white-space: nowrap;
}
.dock__btn { font-size: 14px; padding: 12px 20px; flex-shrink: 0; }
@media (max-width: 720px) {
  /* Dock compacto: deja libre el fab del bot (derecha) y no apila tanto texto */
  .dock { left: 12px; right: 80px; bottom: 14px; transform: translate(0, calc(100% + 30px));
    gap: 10px; padding: 7px 8px 7px 10px; }
  .dock.show { transform: translate(0, 0); }
  body:has(.chat.open) .dock, body:has(.mnav.open) .dock, body:has(.svc.open) .dock { transform: translate(0, calc(100% + 30px)); }
  .dock__av { width: 36px; height: 36px; }
  .dock__txt { flex: 1; min-width: 0; }
  .dock__txt b { font-size: 12px; line-height: 1.15; white-space: normal; }
  .dock__txt span { display: none; } /* subtítulo rotativo se oculta en mobile para no crecer en alto */
  .dock__btn { font-size: 12.5px; padding: 9px 14px; }
  .dock__btn .arrow { display: none; }
}

/* ━━━━━━━━ 9 · BOTONES — feedback táctil ━━━━━━━━ */
.btn { will-change: transform; }
.btn:active { transform: scale(0.97) !important; transition-duration: .1s; }

/* ━━━━━━━━ 10 · FORM — foco con intención ━━━━━━━━ */
.cfield input:focus, .cfield textarea:focus, .cfield select:focus {
  border-color: rgba(77,127,232,0.7) !important;
  box-shadow: 0 0 0 4px rgba(77,127,232,0.16), inset 0 1px 0 rgba(255,255,255,0.08);
  outline: none;
}

/* ━━━━━━━━ 11 · FOUNDER — firma editorial ━━━━━━━━ */
.founder__quote { position: relative; }
.founder__quote::before {
  content: "“"; position: absolute; left: -0.12em; top: -0.42em;
  font-family: Georgia, serif; font-size: 2.6em; line-height: 1;
  color: rgba(204,34,51,0.35); pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg video { animation: none !important; }
  .dock { transition: opacity .3s; }
}