/* Click Estratega · capa de interfaz: tipografía local, movimiento y detalles.
   Se carga después del CSS base de cada página y solo añade; no redefine tokens. */

/* ---------- Tipografía autoalojada (antes: Google Fonts, 2 conexiones externas) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Accesibilidad ---------- */
.saltar { position: absolute; left: -999px; top: 10px; z-index: 100; background: var(--azul); color: #fff; padding: 10px 16px; border-radius: 8px; font-family: var(--display); font-weight: 700; text-decoration: none; }
.saltar:focus { left: 12px; outline: 3px solid #fff; outline-offset: 2px; }
[id] { scroll-margin-top: 84px; }
.btn:focus-visible, .wa-flotante:focus-visible, .btn-menu:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

/* ---------- Entrada al hacer scroll ---------- */
@keyframes ui-subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rv { opacity: 0; transform: translateY(20px); transition: opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1); transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; }
.rv.in { opacity: 1; transform: none; will-change: auto; }

/* Hero de subpáginas: mismo ritmo de entrada que la home */
.hero-sub .contenedor > * { animation: ui-subir .7s cubic-bezier(.2,.7,.3,1) both; }
.hero-sub .contenedor > :nth-child(2) { animation-delay: .12s; }
.hero-sub .contenedor > :nth-child(3) { animation-delay: .24s; }
.hero-sub .contenedor > :nth-child(n+4) { animation-delay: .36s; }

/* Luz ambiental muy lenta en los fondos oscuros (solo compositor, sin coste de layout) */
.hero, .hero-sub, .cta-final, .auditoria { position: relative; overflow: hidden; isolation: isolate; }
.hero::before, .hero-sub::before, .cta-final::before, .auditoria::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 360px at 68% 32%, rgba(109,150,255,.16), transparent 62%);
  animation: ui-flotar 16s ease-in-out infinite alternate;
}
.auditoria::before { background: radial-gradient(520px 360px at 30% 60%, rgba(74,222,156,.14), transparent 62%); }
@keyframes ui-flotar { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.12); } }

/* ---------- Cabecera: se compacta al desplazar, enlace activo ---------- */
header { transition: box-shadow .3s; }
header.compacto { box-shadow: 0 8px 28px rgba(14,20,31,.09); }
.barra { transition: padding .25s; }
header.compacto .barra { padding: 8px 0; }
nav a.activo { color: var(--azul); }
nav a.activo::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Botones: respuesta al pulsar y flecha que avanza ---------- */
.btn { position: relative; overflow: hidden; }
.btn:active { transform: translateY(0) scale(.98); }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s ease; pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }
.ver-detalle, .caso-cuerpo .ver { transition: letter-spacing .2s, color .2s; }
.ver-detalle:hover, .caso-card:hover .caso-cuerpo .ver { letter-spacing: .02em; }

/* ---------- Tarjetas: imagen que respira, borde que se enciende ---------- */
.modelo-shot { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.modelo-card:hover .modelo-shot, .modelo-card:focus-visible .modelo-shot { transform: scale(1.05); }
.modelo-card, .plan, .caso-card, .paso, .ing-carta, .metrica { transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s; }
.metrica:hover, .paso:hover, .ing-carta:hover { transform: translateY(-3px); border-color: rgba(29,93,242,.35); }
.plan:hover, .caso-card:hover { border-color: rgba(29,93,242,.45); }
.modelos-nota { display: block; color: var(--gris); font-size: .86rem; margin-top: 8px; max-width: 58ch; margin-left: auto; margin-right: auto; }

/* ---------- Cifras que cuentan ---------- */
.metrica .dato { font-variant-numeric: tabular-nums; }
.metrica .dato.contando { color: var(--azul-hondo); }

/* ---------- FAQ: el "+" gira a "×" y la respuesta entra suave ---------- */
summary::after { transition: transform .25s cubic-bezier(.2,.7,.3,1), color .2s; }
details[open] summary::after { content: "+"; transform: translateY(-50%) rotate(45deg); }
details[open] p { animation: ui-subir .35s cubic-bezier(.2,.7,.3,1) both; }
summary:hover { color: var(--azul); }

/* ---------- WhatsApp flotante: latido y etiqueta ---------- */
.wa-flotante { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s; }
.wa-flotante::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(37,211,102,.6); animation: ui-latido 2.6s ease-out infinite; pointer-events: none; }
@keyframes ui-latido { 0% { transform: scale(.9); opacity: .9; } 70% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } }
.wa-flotante::after { content: "¿Hablamos?"; position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px); background: var(--noche); color: #fff; font-family: var(--display); font-weight: 700; font-size: .84rem; padding: 8px 12px; border-radius: 9px; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.wa-flotante.con-etiqueta::after, .wa-flotante:hover::after, .wa-flotante:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 920px) { .wa-flotante::after { display: none; } }

/* ---------- Menú móvil: los enlaces entran en cascada ---------- */
@media (max-width: 920px) {
  nav.abierto a { animation: ui-subir .35s cubic-bezier(.2,.7,.3,1) both; }
  nav.abierto a:nth-child(2) { animation-delay: .04s; }
  nav.abierto a:nth-child(3) { animation-delay: .08s; }
  nav.abierto a:nth-child(4) { animation-delay: .12s; }
  nav.abierto a:nth-child(5) { animation-delay: .16s; }
  nav.abierto a:nth-child(6) { animation-delay: .2s; }
}

/* ---------- Panel del hero: barras que se rellenan también al volver a mirar ---------- */
.panel-resultados .resultado { transition: transform .2s; }
.panel-resultados:hover .resultado { transform: translateX(2px); }

/* ---------- Movimiento reducido: todo visible y quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero::before, .hero-sub::before, .cta-final::before, .auditoria::before, .wa-flotante::before { animation: none; }
  .hero-sub .contenedor > *, details[open] p, nav.abierto a { animation: none; }
  .btn::after { display: none; }
}