/* ══════════════════════════════════════════════════════════════════════
   ESFERIZE — UI COMPONENTS
   Componentes cross-site idénticos extraídos de inline.
   Carga: <link rel="stylesheet" href="/css/ui-components.css?v=YYYYMMDDHHMM">
   antes del primer <style> inline para permitir overrides page-specific.
   Última actualización: 2026-05-26
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   NAV CUE — Transition cue reutilizable (label + línea con pulso)
   Uso:
     <div class="nav-cue" aria-hidden="true">
       <span class="nav-cue__label">Explorar capacidades</span>
       <span class="nav-cue__line"></span>
     </div>
   Variante para fondos claros: añadir clase `nav-cue--light`.
   Variante para colocar al inicio (label a la derecha): `nav-cue--reverse`.
   ───────────────────────────────────────────────────────────── */
.nav-cue {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  opacity: 0.92;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .3s ease, gap .4s cubic-bezier(.16,1,.3,1);
}
.nav-cue:hover { opacity: 1; gap: 18px; }
.nav-cue__label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  transition: color .3s ease, letter-spacing .4s cubic-bezier(.16,1,.3,1);
}
.nav-cue:hover .nav-cue__label {
  color: rgba(255,255,255,0.96);
  letter-spacing: 0.255em;
}
.nav-cue__line {
  position: relative;
  width: 48px;
  height: 1px;
  background: rgba(255,255,255,0.28);
  overflow: hidden;
  flex-shrink: 0;
  transition: width .4s cubic-bezier(.16,1,.3,1), background-color .3s ease;
}
.nav-cue:hover .nav-cue__line {
  width: 64px;
  background: rgba(255,255,255,0.50);
}
/* Pulso travelling turquesa — solo en hover, evoca señal viajera coherente con la red del hero */
.nav-cue__line::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent 0%, rgba(120,255,239,0.95) 50%, transparent 100%);
  transform: translateX(-100%);
  opacity: 0;
}
.nav-cue:hover .nav-cue__line::before {
  animation: navCuePulse 1.1s cubic-bezier(.45,0,.55,1);
}
.nav-cue__line::after { content: none; }
/* Chevron de afordance — solo en CTAs reales (a/button), no en spans decorativos */
a.nav-cue::after, button.nav-cue::after {
  content: '';
  width: 5px; height: 5px;
  border-top: 1.2px solid rgba(255,255,255,0.55);
  border-right: 1.2px solid rgba(255,255,255,0.55);
  transform: rotate(45deg);
  margin-left: -4px;
  flex-shrink: 0;
  transition: border-color .3s ease, margin-left .4s cubic-bezier(.16,1,.3,1);
}
a.nav-cue:hover::after, button.nav-cue:hover::after {
  border-color: rgba(255,255,255,0.96);
  margin-left: 0;
}
/* Variante light — sobre fondo claro */
.nav-cue--light .nav-cue__label { color: rgba(30,30,30,0.62); }
.nav-cue--light:hover .nav-cue__label { color: rgba(30,30,30,0.95); }
.nav-cue--light .nav-cue__line  { background: rgba(30,30,30,0.28); }
.nav-cue--light:hover .nav-cue__line { background: rgba(30,30,30,0.50); }
a.nav-cue--light::after, button.nav-cue--light::after { border-color: rgba(30,30,30,0.55); }
a.nav-cue--light:hover::after, button.nav-cue--light:hover::after { border-color: rgba(30,30,30,0.95); }
/* Variante reverse — línea primero, label después */
.nav-cue--reverse { flex-direction: row-reverse; }

@keyframes navCuePulse {
  0%   { transform: translateX(-100%); opacity: 0; }
  35%  { opacity: 1; }
  65%  { opacity: 1; }
  100% { transform: translateX(200%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-cue__line::after { animation: none; opacity: 0.55; transform: translateX(20%); }
}

/* ─────────────────────────────────────────────────────────────
   CTA SOFT — "Enlace láser" (CTA blando estándar entre páginas)
   ─────────────────────────────────────────────────────────────
   Dos sistemas de CTA en todo el sitio:
     · DURO (conversión)         -> .btn-primary  (botón rojo --rojo-cta)
     · BLANDO (enlace de página) -> .cta-link     (este componente)
   En REPOSO ya se lee como enlace: subrayado en color de marca (2px) + flecha ›.
   En HOVER: un láser brillante recorre el subrayado (con glow) y la flecha avanza.
   Uso:
     <a class="cta-link" href="…">Ver casos de éxito</a>          (fondo OSCURO)
     <a class="cta-link cta-link--light" href="…">Ver más</a>     (fondo CLARO)
   La flecha › se añade por CSS; escribe solo el texto.
   ───────────────────────────────────────────────────────────── */
.cta-link {
  --cta-ink:     rgba(255,255,255,0.95);   /* texto */
  --cta-ink-hov: #ffffff;                   /* texto en hover */
  --cta-accent:  #2BA8B2;                   /* subrayado SIEMPRE visible (turquesa) */
  --cta-laser:   #9BFFF2;                   /* barrido láser (hover) */
  --cta-glow:    rgba(120,255,239,0.55);    /* glow del láser (hover) */
  position: relative;
  display: inline-block;
  align-self: flex-start;   /* en contenedores flex-column no estira: la raya = ancho del texto */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.012em;
  color: var(--cta-ink);
  text-decoration: none;
  padding-bottom: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .3s ease;
}
/* Subrayado: base de marca (visible en reposo) + láser que lo recorre en hover */
.cta-link::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background-image:
    linear-gradient(90deg, transparent 0%, var(--cta-laser) 50%, transparent 100%),
    linear-gradient(var(--cta-accent), var(--cta-accent));
  background-repeat: no-repeat, no-repeat;
  background-size: 55% 100%, 100% 100%;
  background-position: -65% 0, 0 0;
  transition: box-shadow .3s ease;
  pointer-events: none;
}
/* Flecha de afordance */
.cta-link::after {
  content: '\203a';            /* › */
  margin-left: 0.4em;
  font-weight: 700;
  display: inline-block;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.cta-link:hover,
.cta-link:focus-visible { color: var(--cta-ink-hov); }
.cta-link:hover::before,
.cta-link:focus-visible::before {
  box-shadow: 0 0 9px 0 var(--cta-glow);
  animation: ctaLaserSweep .9s cubic-bezier(.4,0,.2,1);
}
.cta-link:hover::after,
.cta-link:focus-visible::after { transform: translateX(4px); }
.cta-link:focus-visible {
  outline: 2px solid var(--focus-ring, #005FCC);
  outline-offset: 4px;
  border-radius: 2px;
}
@keyframes ctaLaserSweep {
  from { background-position: -65% 0, 0 0; }
  to   { background-position: 165% 0, 0 0; }
}
/* Variante fondo CLARO — acento aguamarina (AA sobre claro), láser turquesa, sin glow */
.cta-link--light {
  --cta-ink:     rgba(20,20,20,0.92);
  --cta-ink-hov: #0c0c0c;
  --cta-accent:  #006B75;
  --cta-laser:   #2BA8B2;
}
.cta-link--light:hover::before,
.cta-link--light:focus-visible::before { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .cta-link { transition: none; }
  .cta-link::before { animation: none; }
  .cta-link::after  { transition: none; }
}