/* ═══════════════════════════════════════════════════════════════
   CONEXIA TELECOM — Capa de animación v2  (cx-anim.css)
   Estética "Emil Kowalski": muelles físicos, micro-interacciones,
   reveals al scroll. Nivel de intensidad ≈ 6,5 / 10.
   - Las cards entran de izquierda a derecha con stagger.
   - El H1 del hero se escribe (typewriter) — el resto: fade + slide.
   - Todo se desactiva con prefers-reduced-motion.
   - Los estados ocultos SOLO se aplican si el JS está activo
     (html.cx-anim). Si el JS falla, el contenido queda visible.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* muelle con overshoot — el "rebote" Emil Kowalski */
  --cx-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* salida suave sin rebote — para opacidades y sombras */
  --cx-ease:   cubic-bezier(.22, .61, .36, 1);
  --cx-anim-dur: .62s;
}

/* ───────────────────────────────────────────────────────────────
   1. REVEALS  ·  estado oculto + estado revelado
   data-cx-r="up"   → sube y aparece (títulos, leads, secciones)
   data-cx-r="card" → entra desde la izquierda (cards en grids)
   data-cx-r="fade" → solo opacidad (visuales, imágenes)
   data-cx-r="zoom" → leve escala + opacidad (mockups, media)
   ─────────────────────────────────────────────────────────────── */
html.cx-anim:not(.cx-reduce) [data-cx-r]{
  opacity: 0;
  will-change: opacity, transform;
}
html.cx-anim:not(.cx-reduce) [data-cx-r="up"]   { transform: translate3d(0, 22px, 0); }
html.cx-anim:not(.cx-reduce) [data-cx-r="card"]   { transform: translate3d(-58px, 14px, 0); }
html.cx-anim:not(.cx-reduce) [data-cx-r="card-r"] { transform: translate3d( 58px, 14px, 0); }
html.cx-anim:not(.cx-reduce) [data-cx-r="fade"] { transform: none; }
html.cx-anim:not(.cx-reduce) [data-cx-r="zoom"] { transform: scale(.965); }

html.cx-anim [data-cx-r].is-in{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  transition:
    opacity   var(--cx-anim-dur) var(--cx-ease),
    transform var(--cx-anim-dur) var(--cx-spring);
  transition-delay: var(--cx-d, 0s);
}

/* una vez dentro, soltamos will-change para no penalizar el render */
html.cx-anim [data-cx-r].cx-done{ will-change: auto; }

/* ───────────────────────────────────────────────────────────────
   2. TYPEWRITER  ·  solo el H1 del hero
   El JS parte el H1 en spans .cx-tw-c (un span por carácter,
   respetando el <em> interior) y los va encendiendo uno a uno.
   ─────────────────────────────────────────────────────────────── */
html.cx-anim h1[data-cx-tw]{
  /* evita el salto de layout: reservamos el alto desde el principio */
  white-space: pre-wrap;
}
html.cx-anim:not(.cx-reduce) h1[data-cx-tw] .cx-tw-c{
  opacity: 0;
}
html.cx-anim h1[data-cx-tw] .cx-tw-c.on{
  opacity: 1;
  transition: opacity .04s linear;
}
/* cursor de escritura */
html.cx-anim h1[data-cx-tw] .cx-tw-caret{
  display: inline-block;
  width: .06em;
  margin-left: .02em;
  background: currentColor;
  border-radius: 1px;
  align-self: stretch;
  animation: cx-caret-blink 1s steps(1) infinite;
  /* el caret hereda altura de la línea */
  height: 1em;
  transform: translateY(.12em);
}
html.cx-anim h1[data-cx-tw].cx-tw-done .cx-tw-caret{
  animation: cx-caret-fade .4s var(--cx-ease) forwards;
}
@keyframes cx-caret-blink{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
@keyframes cx-caret-fade { to{opacity:0; width:0; margin:0} }

/* ───────────────────────────────────────────────────────────────
   3. HOVER / PRESSED  ·  micro-interacciones (siempre activas)
   Reemplazan los hovers planos por muelles con sombra tintada.
   ─────────────────────────────────────────────────────────────── */
.cx-card{
  transition:
    transform   .38s var(--cx-spring),
    box-shadow  .38s var(--cx-ease),
    border-color .38s var(--cx-ease);
}
.cx-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 38px -14px rgba(47,107,255,.30),
              0 6px 14px -8px rgba(156,123,255,.20);
  border-color: rgba(47,107,255,.30);
}

/* botones — muelle al pasar, "click" físico al presionar */
.cx-btn{ transition:
    transform .22s var(--cx-spring),
    box-shadow .26s var(--cx-ease),
    background .2s var(--cx-ease),
    color .2s var(--cx-ease),
    border-color .2s var(--cx-ease); }
.cx-btn:hover{ transform: translateY(-2px); }
.cx-btn:active{ transform: scale(.96); transition-duration: .08s; }
.cx-btn--primary:hover{ box-shadow: 0 10px 26px -4px rgba(47,107,255,.50); }

/* CTA del navbar — mismo lenguaje */
.cx-nav__cta{ transition: transform .22s var(--cx-spring), box-shadow .26s var(--cx-ease); }
.cx-nav__cta:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px -4px rgba(47,107,255,.45); }
.cx-nav__cta:active{ transform: scale(.96); }

/* logos de integraciones / casos — SIEMPRE a color; solo un leve
   zoom-muelle al pasar el ratón (sin escala de grises) */
.cx-integ img,
.cx-logos-grid img{
  transition: transform .38s var(--cx-spring), filter .3s var(--cx-ease);
}
.cx-integ:hover img,
.cx-logos-grid img:hover{
  transform: scale(1.05);
}

/* ───────────────────────────────────────────────────────────────
   4. NAVBAR DINÁMICO  ·  encoge al hacer scroll
   ─────────────────────────────────────────────────────────────── */
.cx-nav{
  transition: height .32s var(--cx-ease),
              background .32s var(--cx-ease),
              box-shadow .32s var(--cx-ease),
              backdrop-filter .32s var(--cx-ease);
}
html.cx-nav-shrink .cx-nav{
  height: 60px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 6px 24px -10px rgba(20,30,80,.18);
}
.cx-nav__logo-img{ transition: height .32s var(--cx-ease); }
html.cx-nav-shrink .cx-nav__logo-img{ height: 22px; }

/* ───────────────────────────────────────────────────────────────
   5. ACCESIBILIDAD  ·  movimiento reducido
   El JS (cx-anim.js) lee prefers-reduced-motion y, si procede,
   añade html.cx-reduce de forma SÍNCRONA antes del primer pintado.
   Con esa clase: nada se oculta, nada se mueve, todo aparece ya.
   El parámetro ?cxmotion=on/off permite forzarlo para QA.
   ─────────────────────────────────────────────────────────────── */
html.cx-reduce [data-cx-r]{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html.cx-reduce h1[data-cx-tw] .cx-tw-c{ opacity: 1 !important; }
html.cx-reduce h1[data-cx-tw] .cx-tw-caret{ display: none !important; }
html.cx-reduce .cx-card,
html.cx-reduce .cx-btn,
html.cx-reduce .cx-nav,
html.cx-reduce .cx-nav__cta,
html.cx-reduce .cx-integ img,
html.cx-reduce .cx-logos-grid img,
html.cx-reduce .cx-nav__logo-img{
  transition: none !important;
}
html.cx-reduce .cx-card:hover{ transform: none; }