/* ==========================================================================
   recorrido.css — Landing inmersiva "El CRM en acción" (TRÍADA CRM)
   Scrollytelling del caos al control. Paleta INMERSIVA propia (aprobada por
   el dueño + Claude Design), scopeada bajo .rec para no tocar el resto del
   sitio. Las capturas reales son protagonistas; la IA es solo atmósfera.
   Carga solo en /recorrido (css_extra). CSP: estilos self + unsafe-inline ok.
   El movimiento se apaga solo con prefers-reduced-motion (animations.css).
   ========================================================================== */

.rec {
  /* ----- Paleta inmersiva (distinta al teal apagado del sitio) ----- */
  --petrol-0: #080d18;
  --petrol-1: #0A0F1C;
  --petrol-2: #0E1830;
  --teal-1:   #1FB8C4;
  --teal-2:   #2ED3C6;
  --teal-soft:#7fd9d3;
  --teal-pale:#bff6f0;
  --blue:     #3F63C9;
  --cream-1:  #F6F0E4;
  --cream-2:  #EFE6D4;
  --cream-deep:#F3ECDD;
  --ink:      #F4F1EA;
  --txt:      #c4cdda;
  --txt-soft: #aeb9cb;
  --txt-mut:  #8b97ac;
  --txt-faint:#5e7088;
  --line:     rgba(255,255,255,.08);
  --line-2:   rgba(255,255,255,.12);

  position: relative;
  background: var(--petrol-1);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow-x: clip;
}
.rec .tr-serif, .rec h1, .rec h2, .rec h3 { font-family: var(--font-serif); }

/* ----- Keyframes de atmósfera (se apagan con reduced-motion) ----- */
@keyframes recBreathe { 0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:.9;transform:scale(1.06)} }
@keyframes recBreathe2{ 0%,100%{opacity:.3} 50%{opacity:.62} }
@keyframes recCore    { 0%,100%{opacity:.78;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes recRing    { 0%{transform:translate(-50%,-50%) scale(.6);opacity:.7} 100%{transform:translate(-50%,-50%) scale(1.8);opacity:0} }
@keyframes recBob     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
@keyframes recFloatA  { 0%,100%{transform:translateY(0) rotate(-7deg)} 50%{transform:translateY(-10px) rotate(-7deg)} }
@keyframes recFloatB  { 0%,100%{transform:translateY(0) rotate(5deg)} 50%{transform:translateY(-13px) rotate(5deg)} }
@keyframes recFloatC  { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-8px) rotate(-3deg)} }
@keyframes recScroll  { 0%{transform:translateY(0);opacity:.9} 50%{transform:translateY(9px);opacity:.35} 100%{transform:translateY(0);opacity:.9} }

/* ==========================================================================
   Primitivas compartidas
   ========================================================================== */
.rec-scene {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 11vh, 130px) var(--gutter);
  isolation: isolate;
}
.rec-wrap { position: relative; z-index: 3; max-width: 1240px; margin-inline: auto; }

/* Atmósfera de fondo (imagen IA) — siempre detrás, oscurecida */
.rec-amb {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; object-fit: cover; opacity: .5;
}
.rec-amb--soft { opacity: .34; }
.rec-glow {
  position: absolute; z-index: 1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,211,198,.18), transparent 66%);
  animation: recBreathe2 9s ease-in-out infinite;
}
/* Velo para asegurar contraste de texto sobre la atmósfera */
.rec-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* Kicker / eyebrow */
.rec-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: var(--teal-2);
}
.rec-kicker::before { content:""; width: 26px; height: 1px; background: var(--teal-2); }
.rec-kicker--cream { color: #1f7a72; }
.rec-kicker--cream::before { background: #1f7a72; }

.rec-title { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.04; letter-spacing: -.01em; }
.rec-lead  { color: var(--txt-soft); line-height: 1.55; }

/* Botones / CTA */
.rec-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.rec-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: .95rem; font-weight: 700;
  padding: 13px 24px; border-radius: var(--r-pill); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  min-height: 44px;
}
.rec-btn:hover { transform: translateY(-2px); }
.rec-btn--cream { color: var(--petrol-1); background: var(--cream-deep); box-shadow: 0 14px 32px -12px rgba(243,236,221,.4); }
.rec-btn--teal  { color: #06262a; background: linear-gradient(180deg,#3fd9cd,#1fb8c4); box-shadow: 0 14px 30px -10px rgba(31,184,196,.5); }
.rec-btn--ghost { color: #cfe9ea; border-color: rgba(46,211,198,.4); background: transparent; }
.rec-btn--wa    { color: #06262a; background: linear-gradient(180deg,#3fd9cd,#1fb8c4); }

/* Mockup navegador (captura PC) */
.rec-browser { position: relative; border-radius: 13px; overflow: hidden; background: #0d1322;
  box-shadow: 0 40px 80px -28px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08), 0 0 56px -16px rgba(46,211,198,.16); }
.rec-browser__bar { height: 32px; background: linear-gradient(180deg,#141d30,#0f1626); display: flex; align-items: center; gap: 7px; padding: 0 13px; border-bottom: 1px solid var(--line); }
.rec-browser__bar i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.rec-browser__bar i:nth-child(1){ background:#ec6a5e } .rec-browser__bar i:nth-child(2){ background:#f4bf4f } .rec-browser__bar i:nth-child(3){ background:#61c554 }
.rec-browser__bar span { margin-left: 8px; flex: 1; max-width: 320px; height: 17px; border-radius: 9px; background: rgba(255,255,255,.05); }
.rec-browser img { display: block; width: 100%; height: auto; }

/* Teléfono (captura móvil) */
.rec-phone { position: relative; border-radius: 30px; background: #05080f; padding: 7px;
  box-shadow: 0 40px 78px -22px rgba(0,0,0,.85), 0 0 0 1.5px rgba(255,255,255,.1), 0 0 50px -14px rgba(46,211,198,.28); }
.rec-phone::before { content:""; position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 52px; height: 15px; background: #05080f; border-radius: 9px; z-index: 3; }
.rec-phone__screen { border-radius: 24px; overflow: hidden; background: var(--petrol-1); }
.rec-phone__screen img { display: block; width: 100%; height: auto; }

/* Chips / etiquetas de captura */
.rec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-chip { font-size: .78rem; color: var(--txt); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); padding: 6px 12px; border-radius: 18px; }
.rec-tag { font-size: .7rem; color: var(--teal-2); background: rgba(46,211,198,.1); border: 1px solid rgba(46,211,198,.22); padding: 3px 9px; border-radius: 5px; font-family: var(--font-sans); }
.rec-feat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.rec-feat-list li { display: flex; align-items: center; gap: 11px; color: var(--txt); font-size: .95rem; }
.rec-feat-list li::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-2); box-shadow: 0 0 8px rgba(46,211,198,.7); flex-shrink: 0; }

/* Núcleo teal abstracto (gráfico de MARCA, nunca una pantalla) */
.rec-core { position: relative; }
.rec-core__halo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(46,211,198,.5), rgba(46,211,198,.12) 40%, transparent 66%); animation: recCore 6s ease-in-out infinite; }
.rec-core__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(46,211,198,.3); animation: recRing 5s ease-out infinite; }
.rec-core__dot  { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--teal-pale); box-shadow: 0 0 22px 6px rgba(46,211,198,.85); }

/* ==========================================================================
   Barra de progreso fija + CTA pegajoso (desde M5)
   ========================================================================== */
.rec-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0%; z-index: 70;
  background: linear-gradient(90deg, var(--teal-1), var(--teal-2) 60%, var(--cream-deep)); box-shadow: 0 0 12px rgba(46,211,198,.6); transition: width .12s linear; }
/* A la IZQUIERDA: el botón flotante de WhatsApp (fab) ocupa la esquina derecha */
.rec-sticky-cta { position: fixed; left: clamp(14px, 3vw, 26px); bottom: clamp(16px, 4vh, 26px); z-index: 65;
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
.rec-sticky-cta.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ==========================================================================
   M1 · HERO (Esc. 0 Portal + Esc. 1 Caos)
   ========================================================================== */
.rec-hero { min-height: 100svh; display: flex; align-items: center; padding-top: clamp(96px, 14vh, 150px);
  background: radial-gradient(130% 120% at 72% 6%, #10203a 0%, var(--petrol-1) 44%, var(--petrol-0) 100%); }
.rec-hero__amb { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; object-position: center; pointer-events: none; }
.rec-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,13,24,.82) 0%, rgba(8,13,24,.5) 42%, rgba(8,13,24,.2) 100%); }
.rec-hero .rec-wrap { width: 100%; }
.rec-hero__grid { display: grid; grid-template-columns: 46% 54%; align-items: center; gap: 30px; }

.rec-hero__eyebrow { display: block; margin-bottom: 18px; font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--teal-2); }
.rec-hero__h1 { font-size: clamp(2.8rem, 1.6rem + 5.4vw, 5.6rem); line-height: .98; }
.rec-hero__h1 .a { display: block; color: #7e8aa0; }
.rec-hero__h1 .b { display: block; color: var(--ink); }
.rec-hero__h1 .grad { background: linear-gradient(180deg,#9af0e8,#2ED3C6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rec-hero__copy .rec-lead { margin: 24px 0 0; font-size: clamp(1.05rem, 1rem + .5vw, 1.2rem); max-width: 440px; }
.rec-hero__copy .rec-cta-row { margin-top: 32px; }
.rec-scroll-hint { margin-top: 46px; display: flex; align-items: center; gap: 11px; color: #6c7c93; font-size: .8rem; letter-spacing: .04em; }
.rec-scroll-hint .mouse { width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid rgba(108,124,147,.5); position: relative; flex-shrink: 0; }
.rec-scroll-hint .mouse::after { content:""; position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: 3px; height: 7px; border-radius: 2px; background: var(--teal-2); animation: recScroll 1.8s ease-in-out infinite; }

/* Escenario de dispositivos (derecha) */
.rec-hero__stage { position: relative; min-height: 440px; display: flex; align-items: center; justify-content: center; }
.rec-hero__core { position: absolute; left: 42%; top: 40%; width: 280px; height: 280px; transform: translate(-50%,-50%); pointer-events: none; }
.rec-hero__core .rec-core__halo { width: 280px; height: 280px; }
.rec-hero__core .rec-core__ring { width: 120px; height: 120px; transform: translate(-50%,-50%); }
.rec-hero__laptop { position: relative; width: min(100%, 680px); transform: perspective(1600px) rotateY(-9deg) rotateX(2deg); }
.rec-hero__phone { position: absolute; right: -4px; bottom: 18px; width: 168px; animation: recBob 6s ease-in-out infinite; z-index: 4; }

/* Fragmentos de caos (Esc.1) — decorativos */
.rec-chaos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rec-chaos i { position: absolute; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); display: block; }
.rec-chaos i:nth-child(1){ left: 4%; top: 34%; width: 120px; height: 78px; transform: rotate(-7deg); animation: recFloatA 9s ease-in-out infinite; }
.rec-chaos i:nth-child(2){ left: 9%; top: 54%; width: 100px; height: 70px; transform: rotate(5deg); animation: recFloatB 11s ease-in-out infinite; background: rgba(255,221,120,.05); border-color: rgba(255,221,120,.1); }
.rec-chaos i:nth-child(3){ left: 2%; top: 70%; width: 140px; height: 58px; transform: rotate(-3deg); animation: recFloatC 10s ease-in-out infinite; }
@media (max-width: 900px){ .rec-chaos { display: none; } }

/* ==========================================================================
   Layout genérico de escena: dispositivo a un lado, copy al otro
   ========================================================================== */
.rec-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 5vw, 64px); }
.rec-split--rev .rec-split__media { order: 2; }
.rec-split__media { position: relative; }
.rec-stack { display: flex; flex-direction: column; gap: 12px; }
.rec-src { font-size: .72rem; color: var(--teal-2); background: rgba(46,211,198,.08); border: 1px solid rgba(46,211,198,.2); padding: 3px 9px; border-radius: 5px; font-family: var(--font-sans); }
.rec-note { font-size: .8rem; color: var(--txt-faint); }
.rec-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-faint); }

.rec-h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
.rec-h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem); }

/* M2 control: highlight teal */
.rec-m2 { background: radial-gradient(120% 130% at 88% 12%, #10203a, var(--petrol-1) 46%, var(--petrol-0)); }
.rec-m3 { background: radial-gradient(120% 130% at 12% 14%, #10203a, var(--petrol-1) 46%, var(--petrol-0)); }

/* Pareja de dispositivos M3 (leads + pipeline) */
.rec-duo { position: relative; }
.rec-duo__a { position: relative; z-index: 2; transform: perspective(2000px) rotateY(6deg); }
.rec-duo__b { position: absolute; right: -6px; bottom: -34px; width: 46%; z-index: 3; transform: perspective(1400px) rotateY(-10deg); box-shadow: 0 30px 60px -22px rgba(0,0,0,.85); border-radius: 10px; overflow: hidden; }
.rec-duo__b img { display: block; width: 100%; }

/* ==========================================================================
   M4 · Diagnóstico 360 (CLÍMAX 1) — núcleo octágono de marca
   ========================================================================== */
.rec-m4 { background: radial-gradient(110% 90% at 26% 26%, #11243f, var(--petrol-1) 52%, var(--petrol-0)); border-block: 1px solid rgba(46,211,198,.1); }
.rec-m4__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: 36px; }
.rec-octa { position: relative; border-radius: 16px; background: linear-gradient(160deg, rgba(46,211,198,.05), rgba(10,15,28,.2)); border: 1px solid rgba(46,211,198,.16); padding: 24px; }
.rec-octa__svg { display: block; width: 100%; max-width: 360px; margin-inline: auto; height: auto; }
.rec-octa__halo { position: absolute; left: 50%; top: 48%; width: 180px; height: 180px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(46,211,198,.5), transparent 66%); animation: recCore 6s ease-in-out infinite; pointer-events: none; }
.rec-warn { margin-top: 16px; font-size: .72rem; color: #e0b486; background: rgba(224,180,134,.08); border: 1px dashed rgba(224,180,134,.34); padding: 8px 11px; border-radius: 8px; line-height: 1.4; }
.rec-gauge { display: flex; align-items: center; gap: 16px; border-top: 1px solid rgba(46,211,198,.14); padding-top: 16px; margin-top: 18px; }

/* Long shot (form vertical que se recorre) */
.rec-longshot { position: relative; border-radius: 12px; overflow: hidden; background: #0d1322; box-shadow: var(--sh-dark), 0 0 0 1px rgba(255,255,255,.08); max-height: 560px; }
.rec-longshot__bar { height: 28px; background: #11192b; display: flex; align-items: center; gap: 6px; padding: 0 11px; position: relative; z-index: 2; }
.rec-longshot__bar i { width: 8px; height: 8px; border-radius: 50%; }
.rec-longshot__bar i:nth-child(1){ background:#ec6a5e } .rec-longshot__bar i:nth-child(2){ background:#f4bf4f } .rec-longshot__bar i:nth-child(3){ background:#61c554 }
.rec-longshot__scroll { position: relative; overflow: hidden; height: 532px; }
.rec-longshot__scroll img { display: block; width: 100%; height: auto; }
.rec-longshot__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(0deg, #0d1322, transparent); pointer-events: none; }
.rec-longshot__cap { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: .72rem; color: #8fa0b6; }

/* ==========================================================================
   M5 · Informe Ejecutivo (CLÍMAX 2 · CREMA)
   ========================================================================== */
.rec-m5 { padding: 0; background: none; }
.rec-m5__shift { height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 var(--gutter);
  background: linear-gradient(90deg, var(--petrol-1), var(--petrol-2) 22%, #2a4350 46%, #bfae8e 66%, var(--cream-deep) 84%); }
.rec-m5__shift span { font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.rec-m5__body { background: linear-gradient(160deg, var(--cream-1), var(--cream-2)); color: #22302c; padding: clamp(48px,7vh,72px) var(--gutter); }
/* M5 apila: titular + bloque 22→69 arriba, el CILINDRO a todo el ancho debajo */
.rec-m5__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px,4vw,44px); align-items: start; max-width: 1240px; margin-inline: auto; }
.rec-m5 .rec-title { color: #22302c; }
.rec-m5 .rec-lead { color: #5b6660; }
.rec-reveal-num { margin-top: 28px; background: #FBF7EE; border: 1px solid rgba(31,122,114,.2); border-radius: 14px; padding: 22px 24px; box-shadow: 0 18px 40px -22px rgba(40,30,15,.3); }
.rec-reveal-num__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rec-reveal-num__head .lab { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8a7f6a; }
.rec-reveal-num__head .pill { font-size: .65rem; font-weight: 700; color: #1f7a72; background: rgba(31,122,114,.1); border: 1px solid rgba(31,122,114,.26); padding: 3px 8px; border-radius: 5px; }
.rec-reveal-num__row { margin-top: 16px; display: flex; align-items: center; gap: 24px; }
.rec-bignum { font-family: var(--font-serif); font-size: clamp(2.6rem,2rem+2vw,3.6rem); font-weight: 700; line-height: 1; }
.rec-bignum--bad { color: #b6453f; } .rec-bignum--good { color: #3f8f6b; }
.rec-reveal-num .meta { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #9a8e78; text-transform: uppercase; margin-top: 2px; text-align: center; }
.rec-reveal-num__arrow { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #3f8f6b; font-weight: 700; font-size: .85rem; }
.rec-m5__chips { margin-top: 24px; }
.rec-m5__chips .rec-chip { color: #3a463f; background: rgba(31,122,114,.08); border-color: rgba(31,122,114,.22); }

/* Carrusel del Informe — CILINDRO 3D giratorio (M5 · "La revelación").
   Las 9 páginas viven en las caras de un cilindro que rota solo entre cada
   página. Capturas reales, cero UI inventada. Con JS (.is-enhanced): rotación
   automática + flechas/dots/teclado + pausa al hover/focus. Sin JS (html.no-js):
   degrada a una pila vertical legible. reduced-motion: sin giro, salto instantáneo. */
.rec-carousel {
  display: flex; flex-direction: column; gap: 12px;
  --face-w: clamp(230px, 27vw, 360px);   /* más presencia en pantallas grandes */
  --face-h: calc(var(--face-w) * 1.42);
  --radius: calc(var(--face-w) * 1.374);   /* 9-gono regular: las caras tilan el cilindro */
  --rot: 0deg;
}
.rec-carousel__stage { position: relative; display: flex; align-items: center; gap: 8px; }
.rec-carousel__viewport {
  flex: 1; min-width: 0; height: calc(var(--face-h) + 56px);
  perspective: 1250px; overflow: hidden; border-radius: 14px;
  background: radial-gradient(120% 130% at 50% 32%, #f1e9d9, #e3d8c1);
  box-shadow: inset 0 0 0 1px rgba(31,122,114,.14), 0 22px 50px -28px rgba(40,30,15,.5);
}
.rec-carousel__track {
  list-style: none; margin: 0; padding: 0;
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--radius) * -1)) rotateY(var(--rot));
}
html:not(.no-js) .rec-carousel__track { transition: transform 1.05s var(--rec-ease-out); }
.rec-carousel__slide {
  position: absolute; top: 50%; left: 50%;
  width: var(--face-w); height: var(--face-h);
  margin: calc(var(--face-h) / -2) 0 0 calc(var(--face-w) / -2);
  transform: rotateY(var(--a)) translateZ(var(--radius));
  backface-visibility: hidden; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; padding: 12px;
  border-radius: 8px; background: #fff;
  box-shadow: 0 18px 40px -16px rgba(30,22,10,.55), 0 0 0 1px rgba(0,0,0,.06);
  opacity: .46; filter: brightness(.78) saturate(.9) blur(1px);   /* profundidad de campo: el frente resalta */
  transition: opacity .8s var(--rec-ease-out), filter .8s var(--rec-ease-out), box-shadow .8s var(--rec-ease-out);
}
.rec-carousel__slide.is-front {
  opacity: 1; filter: none;
  box-shadow: 0 28px 56px -16px rgba(30,22,10,.62), 0 0 0 1px rgba(31,122,114,.22);
}
.rec-carousel__slide img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 4px; }
.rec-carousel__tag {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); white-space: nowrap;
  font-size: .66rem; font-weight: 700; color: #1f7a72; background: rgba(251,247,238,.94);
  border: 1px solid rgba(31,122,114,.24); padding: 3px 10px; border-radius: 6px;
  opacity: 0; transition: opacity .5s ease;
}
.rec-carousel__slide.is-front .rec-carousel__tag { opacity: 1; }

/* Degradación sin JS: pila vertical, todas las páginas visibles y legibles */
html.no-js .rec-carousel__viewport { perspective: none; height: auto; overflow: visible; background: none; box-shadow: none; }
html.no-js .rec-carousel__track { transform: none; display: flex; flex-direction: column; gap: 16px; }
html.no-js .rec-carousel__slide {
  position: relative; top: auto; left: auto; width: 100%; max-width: 420px; height: auto;
  margin: 0 auto; padding: 0; transform: none; opacity: 1; filter: none; background: none; box-shadow: none;
}
html.no-js .rec-carousel__slide img { box-shadow: 0 16px 36px -16px rgba(30,22,10,.5), 0 0 0 1px rgba(0,0,0,.06); }
html.no-js .rec-carousel__tag { opacity: 1; position: static; transform: none; display: inline-block; margin-top: 8px; }
.rec-carousel__nav { display: none; }
.rec-carousel.is-enhanced .rec-carousel__nav {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: #1f7a72;
  border: 1px solid rgba(31,122,114,.3); background: #fbf7ee;
  box-shadow: 0 6px 16px -8px rgba(40,30,15,.5);
  transition: background .2s var(--rec-ease-soft), transform .2s var(--rec-ease-soft);
}
.rec-carousel.is-enhanced .rec-carousel__nav:hover { background: #fff; transform: scale(1.06); }
.rec-carousel.is-enhanced .rec-carousel__nav:active { transform: scale(.95); }
.rec-carousel__bar { display: flex; align-items: center; gap: 12px; }
.rec-carousel__toggle { display: none; }
.rec-carousel.is-enhanced .rec-carousel__toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: #1f7a72;
  border: 1px solid rgba(31,122,114,.3); background: #fbf7ee;
}
.rec-carousel__toggle svg { fill: currentColor; }
.rec-carousel__toggle .rec-carousel__ico-play { display: none; }
.rec-carousel__toggle.is-paused .rec-carousel__ico-pause { display: none; }
.rec-carousel__toggle.is-paused .rec-carousel__ico-play { display: block; }
.rec-carousel__cap { flex: 1; margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .03em; color: #1f7a72; }
.rec-carousel__dots { display: none; }
.rec-carousel.is-enhanced .rec-carousel__dots { display: flex; gap: 7px; flex-wrap: wrap; }
.rec-carousel__dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(31,122,114,.5); background: transparent;
  transition: background .2s, transform .2s;
}
.rec-carousel__dots button[aria-current="true"] { background: #1f7a72; transform: scale(1.2); }
.rec-carousel__note { margin: 0; font-size: .7rem; color: #8a7f6a; }

/* ==========================================================================
   M6 · Negocio (Propuesta → Cliente → Facturación)
   ========================================================================== */
.rec-m6 { background: radial-gradient(120% 130% at 50% 0%, #0f1d34, var(--petrol-1) 50%, var(--petrol-0)); }
.rec-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 16px; margin-top: 38px; }
.rec-flow__arrow { display: flex; align-items: center; color: var(--teal-2); font-size: 1.6rem; font-weight: 300; }
.rec-step { display: flex; flex-direction: column; }
.rec-step__lab { margin-top: 16px; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-2); }
.rec-step__t { margin-top: 6px; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); line-height: 1.2; }

/* ==========================================================================
   M7 · Móvil + trIA + CTA
   ========================================================================== */
.rec-m7 { background: radial-gradient(120% 130% at 80% 18%, #0f1d34, var(--petrol-1) 50%, var(--petrol-0)); }
.rec-phones { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.rec-phones .rec-phone { width: 188px; }
.rec-phones .rec-phone--side { width: 168px; opacity: .96; }
.rec-phone__lab { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); font-size: .62rem; color: var(--teal-soft); background: #0c1322; border: 1px solid rgba(46,211,198,.3); padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.rec-phone__longshot .rec-phone__screen { max-height: 372px; overflow: hidden; position: relative; }
.rec-phone__longshot .rec-phone__screen::after { content:""; position: absolute; left:0; right:0; bottom:0; height: 80px; background: linear-gradient(0deg,#05080f,transparent); }

.rec-m7b { background: radial-gradient(120% 120% at 20% 16%, #13183a, var(--petrol-1) 52%, var(--petrol-0)); border-block: 1px solid rgba(120,110,200,.1); }
.rec-tria { display: grid; grid-template-columns: 320px 1fr; gap: clamp(24px,3vw,40px); align-items: start; margin-top: 32px; }
.rec-tria__card { border-radius: 14px; background: linear-gradient(160deg, rgba(46,211,198,.06), rgba(10,15,28,.2)); border: 1px solid rgba(46,211,198,.16); padding: 20px; display: flex; flex-direction: column; align-items: center; }
.rec-tria__card .rec-phone { width: 188px; }
.rec-tria__desk { display: flex; flex-direction: column; }
.rec-tria__screens { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; }
.rec-tag--warn { color: #e0b486; background: rgba(224,180,134,.1); border-color: rgba(224,180,134,.3); }
.rec-tag--pc { color: #9ad0e8; background: rgba(63,140,201,.12); border-color: rgba(63,140,201,.3); }
.rec-noscreen { border-radius: 11px; border: 1px dashed rgba(120,110,200,.34); background: radial-gradient(circle at 50% 34%, rgba(120,110,200,.12), rgba(10,15,28,.2)); padding: 18px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 170px; }
.rec-noscreen__dot { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, rgba(120,110,200,.5), transparent 70%); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.rec-noscreen__dot::after { content:""; width: 8px; height: 8px; border-radius: 50%; background: #c2b9e8; box-shadow: 0 0 12px 3px rgba(120,110,200,.7); }

/* M7c · CTA final */
.rec-final { position: relative; min-height: 86svh; display: flex; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(90% 120% at 50% 44%, #11243f, #0a1120 56%, var(--petrol-0)); }
.rec-final__amb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; z-index: 0; pointer-events: none; }
.rec-final__core { position: absolute; left: 50%; top: 46%; width: min(560px, 86vw); aspect-ratio: 1; transform: translate(-50%,-50%); z-index: 1; pointer-events: none; }
.rec-final__core .rec-core__halo { width: 100%; height: 100%; background: radial-gradient(circle, rgba(46,211,198,.28), rgba(46,211,198,.06) 42%, transparent 66%); animation: recCore 7s ease-in-out infinite; }
.rec-final__core .rec-core__ring { width: 54%; height: 54%; animation: recRing 6s ease-out infinite; }
.rec-final .rec-wrap { z-index: 3; }
.rec-final__h { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 3.5rem); }
.rec-final .rec-cta-row { justify-content: center; margin-top: 36px; }
.rec-final__kicker { justify-content: center; }
.rec-final__kicker::after { content:""; width: 24px; height: 1px; background: var(--teal-2); }

/* logo isotipo doble chevron (beat de marca) */
.rec-mark { display: block; margin: 0 auto 22px; filter: drop-shadow(0 0 22px rgba(46,211,198,.5)); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .rec-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .rec-hero__stage { min-height: 360px; order: 2; }
  .rec-tria { grid-template-columns: 1fr; }
  .rec-tria__screens { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px){
  .rec-split { grid-template-columns: 1fr; gap: 28px; }
  .rec-split--rev .rec-split__media { order: 0; }
  .rec-m4__grid { grid-template-columns: 1fr; }
  .rec-flow { grid-template-columns: 1fr; }
  .rec-flow__arrow { transform: rotate(90deg); justify-content: center; padding: 4px 0; }
  .rec-duo__b { position: relative; right: auto; bottom: auto; width: 70%; margin: 14px auto 0; transform: none; }
}
@media (max-width: 560px){
  .rec-hero__h1 { font-size: clamp(2.6rem, 2rem + 6vw, 3.4rem); }
  .rec-tria__screens { grid-template-columns: 1fr; }
  .rec-btn { width: 100%; }
  .rec-final .rec-btn { width: auto; }
}

/* ==========================================================================
   v2 DINÁMICA — motor de motion, reveals, ignición de gráficos y boxes
   ========================================================================== */

/* ----- Tokens de easing/duración ----- */
.rec {
  --rec-ease-out:  cubic-bezier(.16,1,.3,1);
  --rec-ease-soft: cubic-bezier(.4,0,.2,1);
  --rec-spring:    cubic-bezier(.34,1.4,.5,1);
  --rec-d1: .5s; --rec-d2: .8s; --rec-d3: 1.2s;
}

/* ----- Reveals direccionales (data-reveal) — no-JS y reduced-motion seguros - */
.rec [data-reveal] { opacity: 1; }                 /* visible por defecto (no-JS) */
html:not(.no-js) .rec [data-reveal] {
  opacity: 0;
  transition: opacity var(--rec-d2) var(--rec-ease-out), transform var(--rec-d2) var(--rec-ease-out);
}
html:not(.no-js) .rec [data-reveal="up"]    { transform: translateY(32px); }
html:not(.no-js) .rec [data-reveal="left"]  { transform: translateX(-44px); }
html:not(.no-js) .rec [data-reveal="right"] { transform: translateX(44px); }
html:not(.no-js) .rec [data-reveal="scale"] { transform: scale(.93); }
html:not(.no-js) .rec [data-reveal].is-in { opacity: 1; transform: none; }

/* Cascada de hijos (data-stagger) */
html:not(.no-js) .rec [data-stagger] > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--rec-d1) var(--rec-ease-out), transform var(--rec-d1) var(--rec-ease-out);
}
html:not(.no-js) .rec [data-stagger].is-in > * { opacity: 1; transform: none; }
.rec [data-stagger].is-in > *:nth-child(1){ transition-delay: .04s }
.rec [data-stagger].is-in > *:nth-child(2){ transition-delay: .12s }
.rec [data-stagger].is-in > *:nth-child(3){ transition-delay: .20s }
.rec [data-stagger].is-in > *:nth-child(4){ transition-delay: .28s }
.rec [data-stagger].is-in > *:nth-child(5){ transition-delay: .36s }

/* ----- Hilo conductor: el núcleo crece (consume --rec-core-grow) ----- */
.rec-hero__core { transform: translate(-50%,-50%) scale(calc(.5 + var(--rec-core-grow,.85) * .6)); }
.rec-final__core { transform: translate(-50%,-50%) scale(calc(.7 + var(--rec-core-grow,.85) * .4)); }

/* ----- M1 parallax suave + scroll-hint que se desvanece (consume --p) ----- */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .rec-hero__amb  { transform: translateY(calc(var(--p,0) * -36px)); }
  .rec-hero__stage{ transform: translateY(calc(var(--p,0) * 18px)); }
}
.rec-scroll-hint { opacity: clamp(0, calc(1 - var(--p,0) * 3), 1); transition: opacity .2s linear; }

/* ----- M2: barrido de luz (sheen) al revelar el dashboard ----- */
.rec-tilt { position: relative; }
.rec-sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 13px; }
.rec-sheen::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(190,246,240,.28), transparent);
  transform: translateX(-160%) skewX(-12deg); opacity: 0;
}
html:not(.no-js) .rec [data-reveal].is-in .rec-sheen::before { animation: recSheen 1.1s var(--rec-ease-out) .35s 1; }
@keyframes recSheen { 0%{ transform: translateX(-160%) skewX(-12deg); opacity:0 } 12%{opacity:1} 100%{ transform: translateX(360%) skewX(-12deg); opacity:0 } }

/* ----- M4 · octágono que se enciende (is-lit) — no-JS seguro ----- */
.rec-octa__lines line { stroke-dasharray: 150; stroke-dashoffset: 0; }
.rec-octa__poly { stroke-dasharray: 880; stroke-dashoffset: 0; }
.rec-octa__dots circle, .rec-octa__hub { transform-box: fill-box; transform-origin: center; }
html:not(.no-js) .rec-octa__lines line { stroke-dashoffset: 150; transition: stroke-dashoffset .55s var(--rec-ease-out); transition-delay: calc(var(--i) * .1s); }
html:not(.no-js) .rec-octa__poly { stroke-dashoffset: 880; transition: stroke-dashoffset 1s var(--rec-ease-out) .7s; }
html:not(.no-js) .rec-octa__dots circle { transform: scale(0); opacity: 0; transition: transform .5s var(--rec-spring), opacity .4s ease; transition-delay: calc(.2s + var(--i) * .1s); }
html:not(.no-js) .rec-octa__hub { transform: scale(.2); opacity: .4; transition: transform .6s var(--rec-spring) 1s, opacity .6s ease 1s; }
html:not(.no-js) .rec-octa.is-lit .rec-octa__lines line { stroke-dashoffset: 0; }
html:not(.no-js) .rec-octa.is-lit .rec-octa__poly { stroke-dashoffset: 0; }
html:not(.no-js) .rec-octa.is-lit .rec-octa__dots circle { transform: scale(1); opacity: 1; }
html:not(.no-js) .rec-octa.is-lit .rec-octa__hub { transform: scale(1); opacity: 1; }

/* ----- M4 · gauge que barre (is-swept) ----- */
.rec-gauge__arc { stroke-dasharray: 132; stroke-dashoffset: 0; }
html:not(.no-js) .rec-gauge__arc { stroke-dashoffset: 132; transition: stroke-dashoffset 1.1s var(--rec-ease-out) .4s; }
html:not(.no-js) .rec-gauge.is-swept .rec-gauge__arc { stroke-dashoffset: 0; }

/* ----- M5 · barra de madurez (la cifra que crece) ----- */
.rec-matbar { margin-top: 18px; height: 8px; border-radius: 6px; background: rgba(31,122,114,.14); overflow: hidden; }
.rec-matbar i { display: block; height: 100%; width: var(--fill, 69%); border-radius: 6px;
  background: linear-gradient(90deg, #b6453f, #d39a3f 45%, #3f8f6b); transition: width .2s linear; }

/* (M5 dossier "en abanico" reemplazado por el carrusel del informe — ver arriba) */

/* ==========================================================================
   BOX A · Simulador Diagnóstico 360
   ========================================================================== */
.rec-sim { margin-top: clamp(40px, 6vw, 72px); border-radius: 18px; padding: clamp(22px, 3vw, 36px);
  background: linear-gradient(160deg, rgba(46,211,198,.06), rgba(10,15,28,.35)); border: 1px solid rgba(46,211,198,.18);
  box-shadow: 0 30px 70px -34px rgba(5,12,26,.8); }
.rec-sim__head { text-align: center; max-width: 620px; margin: 0 auto 6px; }
.rec-sim__head .rec-kicker { justify-content: center; }
.rec-sim__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; margin-top: 24px; }
.rec-sim__form { display: flex; flex-direction: column; gap: 13px; }
.rec-sim__row { display: grid; grid-template-columns: 116px 1fr 26px; align-items: center; gap: 12px; }
.rec-sim__row label { font-size: .82rem; color: var(--txt); }
.rec-sim__v { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--teal-2); text-align: center; font-size: .9rem; }
.rec-sim__presets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.rec-btn--sm { padding: 9px 16px; font-size: .82rem; min-height: 38px; }
.rec-sim__reset { background: transparent; border: 1px solid var(--line-2); color: var(--txt-soft); border-radius: var(--r-pill); padding: 9px 16px; font: 700 .82rem var(--font-sans); cursor: pointer; min-height: 38px; }
.rec-sim__reset:hover { color: var(--ink); border-color: var(--teal-2); }
.rec-sim__row input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 4px; background: linear-gradient(90deg, rgba(46,211,198,.5), rgba(46,211,198,.12)); outline-offset: 4px; }
.rec-sim__row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #bff6f0; box-shadow: 0 0 0 4px rgba(46,211,198,.25), 0 2px 6px rgba(0,0,0,.5); cursor: pointer; }
.rec-sim__row input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: #bff6f0; box-shadow: 0 0 0 4px rgba(46,211,198,.25); cursor: pointer; }
.rec-sim__viz { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.rec-sim__radar { width: 100%; max-width: 340px; aspect-ratio: 1 / 1; height: auto; margin: 0 auto; }
.rec-sim__readout { justify-content: center; }
.rec-sim__readout { display: flex; align-items: center; gap: 16px; }
.rec-sim__gauge { flex-shrink: 0; }
.rec-sim__arc { stroke-dasharray: 158; stroke-dashoffset: calc(158 * (1 - var(--sweep, .48))); transition: stroke-dashoffset .3s var(--rec-ease-soft); }
.rec-sim__num { font-family: var(--font-serif); line-height: 1; }
.rec-sim__num strong { font-size: 2.6rem; font-weight: 700; color: var(--ink); }
.rec-sim__num span { font-size: 1rem; color: var(--txt-mut); }
.rec-sim__band { display: flex; flex-direction: column; }
.rec-sim__band strong { font-size: 1rem; color: var(--teal-2); }
.rec-sim__band strong[data-band="bad"]  { color: #e58b73; }
.rec-sim__band strong[data-band="mid"]  { color: #e0b486; }
.rec-sim__band strong[data-band="good"] { color: #6fe0b0; }
.rec-sim__band span { font-size: .78rem; color: var(--txt-mut); }
.rec-sim__seal { margin-top: 22px; }
.rec-sim .rec-btn--teal { margin-top: 16px; }
.rec-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   BOX B · trIA demo
   ========================================================================== */
.rec-triademo { margin-top: clamp(36px, 5vw, 60px); border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, rgba(120,110,200,.08), rgba(10,15,28,.4)); border: 1px solid rgba(120,110,200,.2);
  box-shadow: 0 30px 70px -34px rgba(5,12,26,.8); }
.rec-triademo__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.06); }
.rec-triademo__head strong { font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink); }
.rec-triademo__avatar { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(46,211,198,.12); border: 1px solid rgba(46,211,198,.3); }
.rec-triademo__head .rec-tag { margin-left: auto; }
.rec-triademo__log { min-height: 150px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.rec-tria__placeholder { color: var(--txt-faint); font-size: .92rem; margin: auto; text-align: center; }
.rec-tria__bubble { max-width: 80%; padding: 12px 16px; border-radius: 14px; font-size: .92rem; line-height: 1.5; }
.rec-tria__bubble--user { align-self: flex-end; background: rgba(46,211,198,.16); border: 1px solid rgba(46,211,198,.3); color: var(--ink); border-bottom-right-radius: 4px; }
.rec-tria__bubble--tria { align-self: flex-start; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); color: var(--txt); border-bottom-left-radius: 4px; }
.rec-triademo__chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 22px 22px; }
.rec-triademo__chip { font: 600 .85rem var(--font-sans); color: #cfe9ea; background: rgba(46,211,198,.08); border: 1px solid rgba(46,211,198,.3); padding: 9px 15px; border-radius: var(--r-pill); cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); min-height: 40px; }
.rec-triademo__chip:hover { background: rgba(46,211,198,.18); transform: translateY(-1px); }
.rec-triademo__chip[aria-pressed="true"] { background: rgba(46,211,198,.24); border-color: var(--teal-2); color: var(--ink); }
.rec-triademo__clear { font: 600 .85rem var(--font-sans); color: var(--txt-mut); background: transparent; border: 1px solid var(--line-2); padding: 9px 15px; border-radius: var(--r-pill); cursor: pointer; min-height: 40px; }
.rec-triademo__clear:hover { color: var(--ink); }
.rec-triademo__static { display: none; padding: 0 22px 22px; color: var(--txt-soft); font-size: .9rem; line-height: 1.55; }
.rec-triademo__static p { margin: 8px 0; }
.rec-triademo__static strong { color: var(--teal-2); }
html.no-js .rec-triademo__live { display: none; }
html.no-js .rec-triademo__static { display: block; }

/* ==========================================================================
   Responsive de los boxes
   ========================================================================== */
@media (max-width: 820px) {
  .rec-sim__grid { grid-template-columns: 1fr; }
  .rec-sim__readout { justify-content: center; }
  .rec-triademo__head .rec-tag { margin-left: 0; flex-basis: 100%; }
}

/* ==========================================================================
   WAVE 2 — pulido de movimiento (consume --p del motor; estados finales abajo)
   ========================================================================== */

/* #20 · Subrayado teal que se dibuja bajo los kickers (al entrar en viewport) */
.rec-kicker { position: relative; }
.rec-kicker::after {
  content: ""; position: absolute; left: 0; bottom: -7px; height: 2px; width: 34px;
  background: var(--teal-2); transform-origin: left center;
}
.rec-kicker--cream::after { background: #1f7a72; }
html:not(.no-js) .rec-kicker::after { transform: scaleX(0); transition: transform .7s var(--rec-ease-out); }
html:not(.no-js) .rec-kicker.is-drawn::after { transform: scaleX(1); }

/* #19 · Hero: el título entra en 2 tiempos ("Del caos" → "al control") */
html:not(.no-js) .rec-hero__h1 .a,
html:not(.no-js) .rec-hero__h1 .b {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--rec-ease-out), transform .7s var(--rec-ease-out);
}
html:not(.no-js) .rec-hero__copy.is-in .rec-hero__h1 .a { opacity: 1; transform: none; transition-delay: .12s; }
html:not(.no-js) .rec-hero__copy.is-in .rec-hero__h1 .b { opacity: 1; transform: none; transition-delay: .38s; }

/* #13 · M3: las 2 capturas se acomodan al pasar el scroll (consumen --p) */
@media (min-width: 861px) {
  html:not(.no-js) .rec-m3 .rec-duo__a {
    --s: clamp(0, calc((var(--p,0) - .10) * 2.4), 1);
    transform: perspective(2000px) rotateY(calc(16deg - 10deg * var(--s))) translateX(calc(-34px + 34px * var(--s)));
  }
  html:not(.no-js) .rec-m3 .rec-duo__b {
    --s: clamp(0, calc((var(--p,0) - .16) * 2.4), 1);
    opacity: var(--s);
    transform: perspective(1400px) rotateY(calc(-24deg + 14deg * var(--s))) translateX(calc(72px - 72px * var(--s))) translateY(calc(38px - 38px * var(--s)));
  }
}
/* #13 · Línea de pipeline con luz que recorre las 8 etapas (--p de M3) */
.rec-pipeline { position: relative; margin-top: 26px; max-width: 430px; }
.rec-pipeline__label { display: flex; justify-content: space-between; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6c7c93; margin-bottom: 9px; }
.rec-pipeline__rail { position: relative; height: 14px; }
.rec-pipeline__rail::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; transform: translateY(-50%); background: rgba(46,211,198,.22); border-radius: 2px; }
.rec-pipeline__dots { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; }
.rec-pipeline__dots i { width: 7px; height: 7px; border-radius: 50%; background: #34465c; }
.rec-pipeline__bead { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle, #bff6f0, #2ED3C6 60%); box-shadow: 0 0 12px 3px rgba(46,211,198,.55); }
html:not(.no-js) .rec-pipeline__bead { left: calc(var(--p,0) * (100% - 12px)); transition: left .12s linear; }

/* #14 · M6: una luz teal viaja por el flujo (desktop; consume --p de M6) */
.rec-m6 .rec-flow { position: relative; }
.rec-m6 .rec-step, .rec-m6 .rec-flow__arrow { position: relative; z-index: 1; }
@media (min-width: 861px) {
  html:not(.no-js) .rec-m6 .rec-flow::before {
    content: ""; position: absolute; top: -12px; bottom: -12px; width: 180px; z-index: 0;
    left: calc(var(--p,0) * 100%); transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(46,211,198,.17), transparent 72%);
  }
}

/* #16 · long-shots que se auto-recorren (entran con .is-panning vía IO) */
/* Velocidad CONSTANTE (linear) con pausas breves arriba/abajo; baja y sube en un
   solo ciclo (sin alternate, que aceleraba con el ease). Baja ≈ 46% de 108s ≈ 50s. */
@keyframes recPanA {
  0%, 4%   { transform: translateY(0); }
  50%, 54% { transform: translateY(calc(-100% + 532px)); }
  100%     { transform: translateY(0); }
}
@keyframes recPanB { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 372px)); } }
html:not(.no-js) .rec-longshot.is-panning .rec-longshot__pan { transform-origin: top; will-change: transform; animation: recPanA 108s linear infinite; }
html:not(.no-js) .rec-phone__longshot.is-panning .rec-phone__screen img { transform-origin: top; will-change: transform; animation: recPanB 20s ease-in-out infinite alternate; }

/* M4 · marcas de "respuesta seleccionada" sobre el formulario (ilustrativo, aria-hidden).
   Aparecen a medida que su fila baja al viewport (delay --d ∝ top) y luego laten. */
.rec-longshot__pan { position: relative; }
.rec-longshot__marks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.rec-longshot__mark {
  position: absolute; top: var(--t); left: var(--l); transform: translate(-50%,-50%);
  width: 15.5%; aspect-ratio: 2.5; border-radius: 7px;       /* calza la casilla seleccionada */
  background: rgba(46,211,198,.15); border: 2px solid #2ED3C6;
  box-shadow: 0 0 10px 2px rgba(46,211,198,.4), inset 0 0 12px rgba(46,211,198,.18);
}
@keyframes recMarkPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
  60%  { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes recMarkGlow {
  0%, 100% { box-shadow: 0 0 9px 1px rgba(46,211,198,.4),  inset 0 0 12px rgba(46,211,198,.15); }
  50%      { box-shadow: 0 0 16px 3px rgba(46,211,198,.62), inset 0 0 14px rgba(46,211,198,.28); }
}
html:not(.no-js) .rec-longshot.is-panning .rec-longshot__mark {
  animation: recMarkPop .7s var(--rec-ease-out) var(--d, 0s) both,
             recMarkGlow 3s ease-in-out calc(var(--d, 0s) + .7s) infinite;
}

/* ==========================================================================
   WAVE 2 — batch 2 (M2 callouts+franja KPIs, M7a sync, spotlight, hero wipe)
   ========================================================================== */

/* #15 · M2 — callouts CUALITATIVOS (sin cifras, sobre la captura) + franja lateral
   de KPIs ILUSTRATIVOS (al lado, NUNCA encima). Honestidad: las cifras viven en la
   franja con sello; sobre la imagen solo texto cualitativo. */
.rec-callouts { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.rec-callout {
  position: absolute; left: var(--cx); top: var(--cy); transform: translate(-50%,-50%);
  font: 700 .72rem var(--font-sans); letter-spacing: .02em; white-space: nowrap;
  color: #06262a; background: var(--teal-pale);
  border: 1px solid rgba(46,211,198,.5); border-radius: var(--r-pill);
  padding: 5px 11px; box-shadow: 0 8px 22px -10px rgba(0,0,0,.6);
}
.rec-callout::after { content: ""; position: absolute; left: 14px; bottom: -10px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--teal-2); box-shadow: 0 0 10px 2px rgba(46,211,198,.7); }
html:not(.no-js) .rec-callout { opacity: 0; transform: translate(-50%,-50%) translateY(8px) scale(.94);
  transition: opacity .55s var(--rec-ease-out), transform .55s var(--rec-ease-out); transition-delay: calc(var(--i) * .14s); }
html:not(.no-js) .rec-split__media.is-in .rec-callout {
  opacity: 1; transform: translate(-50%,-50%) translateY(calc(-4px * var(--p,0))) scale(1); }
@media (max-width: 860px) { .rec-callouts { display: none; } }
@media (hover: none), (pointer: coarse) { .rec-callouts { display: none; } }

.rec-kpibar { margin-top: 16px; border-radius: 12px; padding: 16px 18px;
  background: linear-gradient(160deg, rgba(46,211,198,.06), rgba(10,15,28,.45)); border: 1px solid var(--line-2); }
.rec-kpibar__head { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82rem; font-weight: 700; color: var(--txt); }
.rec-kpibar__seal { font: 700 .6rem var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  color: #e0b486; background: rgba(224,180,134,.1); border: 1px dashed rgba(224,180,134,.34); padding: 3px 8px; border-radius: 5px; }
.rec-kpibar__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rec-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--petrol-2); border: 1px solid var(--line); }
.rec-kpi__n { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rec-kpi__lab { font-size: .74rem; color: var(--txt-mut); margin-top: 4px; }
.rec-kpi__tag { margin-top: 6px; font: 700 .58rem var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-faint); }
@media (max-width: 560px){ .rec-kpibar__list { grid-template-columns: 1fr; } }

/* #16 (resto) · M7a — pulso de SYNC PC↔móvil (overlay SVG de marca sobre .rec-phones) */
.rec-sync { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rec-sync__wire { opacity: .9; }
.rec-sync__pulse { opacity: 0; stroke-dasharray: 14 100; stroke-dashoffset: 114; filter: drop-shadow(0 0 5px rgba(46,211,198,.7)); }
.rec-sync__node { opacity: .9; }
html:not(.no-js) .rec-phones.is-syncing .rec-sync__pulse { opacity: 1; will-change: stroke-dashoffset; animation: recSyncPulse 3.6s linear infinite; }
html:not(.no-js) .rec-phones.is-syncing .rec-sync__node { animation: recSyncNode 3.6s ease-in-out infinite; }
@keyframes recSyncPulse { 0% { stroke-dashoffset: 114; } 100% { stroke-dashoffset: -14; } }
@keyframes recSyncNode { 0%, 100% { r: 4; opacity: .85; } 50% { r: 5.4; opacity: 1; } }

/* #17 (resto) · cursor-spotlight — overlay fixed único, creado en JS y colgado de
   <body> (no de .rec, que tiene overflow-x:clip). Solo desktop no-táctil. */
/* Caja pequeña centrada en el origen; se mueve con transform:translate (compositor
   puro, sin repintar) en vez de mover el centro de un gradiente a pantalla completa. */
.rec-spotlight {
  position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(46,211,198,.12) 0%, rgba(46,211,198,.05) 40%, transparent 68%);
  transform: translate(var(--mx, 50vw), var(--my, 50vh));
  transition: opacity .45s cubic-bezier(.4,0,.2,1); will-change: transform, opacity;
  mix-blend-mode: screen; contain: layout paint;
}
.rec-spotlight.is-on { opacity: 1; }
.rec-spotlight.is-dim { opacity: 0 !important; }   /* gana sobre .is-on (apagado sobre la crema M5), sin depender del orden */
@media (hover: none), (pointer: coarse) { .rec-spotlight { display: none !important; } }
@media (max-width: 899.98px) { .rec-spotlight { display: none !important; } }

/* #19 (resto) · M1 — WIPE de salida del hero: cortina petróleo que sube (--p>.65)
   + el copy (.rec-hero__copyflow) sube y se difumina (--p>.58). Consume --p del hero. */
.rec-hero::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, var(--petrol-2) 0%, var(--petrol-1) 46%, var(--petrol-0) 100%);
  transform: translateY(100%); opacity: 0; }
html:not(.no-js) .rec-hero::after {
  --wipe: clamp(0, calc((var(--p, 0) - .65) * 3.6), 1);
  transform: translateY(calc(100% - var(--wipe) * 100%)); opacity: var(--wipe); will-change: transform, opacity; }
html:not(.no-js) .rec-hero__copyflow {
  --exit: clamp(0, calc((var(--p, 0) - .58) * 3), 1);
  transform: translateY(calc(var(--exit) * -34px)); opacity: calc(1 - var(--exit) * .9); filter: blur(calc(var(--exit) * 5px)); }

/* ==========================================================================
   prefers-reduced-motion — estados finales (doble defensa; el JS ya fija is-in)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rec [data-reveal], .rec [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .rec-octa__lines line, .rec-octa__poly, .rec-gauge__arc { stroke-dashoffset: 0 !important; }
  .rec-octa__dots circle, .rec-octa__hub { transform: scale(1) !important; opacity: 1 !important; }
  .rec-sheen::before { animation: none !important; opacity: 0 !important; }
  .rec-hero__amb, .rec-hero__stage { transform: none !important; }
  /* Wave 2: estados finales legibles */
  .rec-hero__h1 .a, .rec-hero__h1 .b { opacity: 1 !important; transform: none !important; }
  .rec-kicker::after { transform: scaleX(1) !important; }
  .rec-longshot.is-panning .rec-longshot__pan,
  .rec-phone__longshot.is-panning .rec-phone__screen img { animation: none !important; transform: none !important; }
  .rec-longshot__mark { animation: none !important; opacity: 1 !important; transform: translate(-50%,-50%) !important; }
  /* Wave 2 batch 2: estados finales */
  .rec-callout { opacity: 1 !important; transform: translate(-50%,-50%) !important; }
  .rec-phones.is-syncing .rec-sync__pulse, .rec-phones.is-syncing .rec-sync__node { animation: none !important; }
  .rec-sync__pulse { opacity: 0 !important; }
  .rec-spotlight { opacity: 0 !important; }
  .rec-hero::after { transform: translateY(100%) !important; opacity: 0 !important; }
  .rec-hero__copyflow { transform: none !important; opacity: 1 !important; filter: none !important; }
}