/* =========================================================================
   SOLISEL — sistema de movimiento e interacción (se carga después de main.css)

   1. Entradas al desplazarse (scroll reveal)      → assets/js/motion.js
   2. Respuesta al pasar el cursor y foco
   3. Fondos tecnológicos en secciones estratégicas → assets/js/hero-fx.js
   4. Pulsos de datos en las líneas de "pasos"
   5. Transición suave entre páginas (View Transitions, nativa del navegador)
   6. Movimiento reducido y versión impresa

   Principios: solo transform y opacity; cada entrada ocurre una vez; si el
   JavaScript no carga, todo el contenido queda visible; nada depende del hover.
   Para desactivar todo el sistema: no cargar este archivo ni motion.js.
   ========================================================================= */

:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --motion-dur: .65s;
}

/* ---------- 1. Entradas al desplazarse ----------
   La clase .js-motion la pone un script en <head> solo si el navegador lo soporta
   y el usuario no pidió reducir el movimiento. Sin ella, nada se oculta. */
.js-motion :where(.section-head, .cards > li, .steps > li, .split__copy, .split__media,
  .feature-list > li, .factor-list > li, .faq__item, .stats__item, .post-card,
  .link-list > li, .brands__list > li) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--motion-dur) var(--ease-out), transform var(--motion-dur) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
/* La imagen de "texto + imagen" entra con un desplazamiento lateral corto */
.js-motion .split__media { transform: translate3d(0, 0, 0) scale(.97); }
/* Red de seguridad: si motion.js no llega a ejecutarse, el contenido aparece solo a los 3 s */
.js-motion:not(.motion-ready) :where(.section-head, .cards > li, .steps > li, .split__copy, .split__media,
  .feature-list > li, .factor-list > li, .faq__item, .stats__item, .post-card,
  .link-list > li, .brands__list > li) {
  animation: motion-failsafe .4s ease 3s forwards;
}
.js-motion .is-in { opacity: 1; transform: none; }
/* Terminada la entrada, la pieza recupera sus transiciones rápidas de hover (sin retraso) */
.js-motion .is-in.is-done { transition: transform .3s var(--ease-out), box-shadow .3s, border-color .2s, background-color .2s; transition-delay: 0s; }
@keyframes motion-failsafe { to { opacity: 1; transform: none; } }

/* Contador de cifras reales (+10 años): números de ancho fijo para que no "bailen" */
.stats__value { font-variant-numeric: tabular-nums; }

/* ---------- 2. Respuesta al cursor y al foco ---------- */
.btn { transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease-out), box-shadow .2s; }
@media (hover: hover) {
  .btn--wa:hover, .btn--primary:hover, .btn--light:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 12, 36, .18); }
  .btn--ghost-light:hover { transform: translateY(-2px); }
}
.btn:active { transform: translateY(0); box-shadow: none; }

/* Tarjetas tipo catálogo: una línea cian crece en la base */
.card--link::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.card--link:hover::before, .card--link:focus-within::before { transform: scaleX(1); }
.card .hex-badge { transition: transform .3s var(--ease-out), background-color .2s, color .2s; }
.card__chev { transition: transform .25s var(--ease-out); }
@media (hover: hover) {
  .card--link:hover .hex-badge { transform: translateY(-3px); }
  .card--link:hover .card__chev { transform: rotate(-90deg) translateY(3px); }
}
/* Fichas sobre fondo gris: elevación discreta */
.theme-soft .card { transition: transform .3s var(--ease-out), box-shadow .3s, border-color .2s; }
.theme-soft .card--link::before { left: 24px; right: 24px; bottom: 0; border-radius: 2px; }
@media (hover: hover) {
  .theme-soft .card--link:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 12, 36, .09); }
}

/* Artículos del blog: elevación y acercamiento leve de la imagen */
.post-card { transition: transform .3s var(--ease-out), box-shadow .3s, border-color .2s; }
.post-card__media .media { transition: transform .6s var(--ease-out); }
@media (hover: hover) {
  .post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 12, 36, .09); }
  .post-card:hover .post-card__media .media { transform: scale(1.04); }
}

/* Listas de enlaces (cobertura, 404…) */
.link-list a { transition: border-color .2s, background-color .2s, transform .25s var(--ease-out); }
.link-list .icon { transition: transform .25s var(--ease-out); }
@media (hover: hover) {
  .link-list a:hover { background: var(--mist); }
  .link-list a:hover .icon { transform: translateX(3px); }
}

/* Enlaces del menú: subrayado cian que crece (solo escritorio) */
@media (min-width: 1200px) {
  .nav__list > .nav__item > .nav__link { position: relative; }
  .nav__list > .nav__item > a.nav__link::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; background: var(--cyan);
    transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
  }
  .nav__list > .nav__item > a.nav__link:hover::after,
  .nav__list > .nav__item.is-active > a.nav__link::after { transform: scaleX(1); }
}

/* Preguntas frecuentes: el título se tiñe al pasar y la apertura es suave */
.faq__item summary { transition: color .2s; }
.faq__item summary:hover { color: var(--cyan-ink); }
.faq__item[open] .faq__a { animation: faq-open .35s var(--ease-out); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }

/* Pie de página */
.site-footer a { transition: color .2s; }

/* ---------- 3. Fondos tecnológicos en secciones oscuras estratégicas ---------- */
section.theme-dark > .hero__fx {
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 40%, transparent 100%);
}
/* El brillo de las cabeceras se desplaza muy lento: gradiente vivo de baja intensidad */
.hero__glow { animation: glow-drift 22s ease-in-out infinite alternate; }
@keyframes glow-drift { to { transform: translate3d(-6%, -4%, 0) scale(1.08); } }

/* ---------- 4. Pulsos de datos en las líneas que unen los pasos ----------
   Solo corren mientras la sección está en pantalla (motion.js añade .is-live). */
.steps.is-live .step::before {
  background: linear-gradient(180deg, var(--line) 0 35%, var(--cyan) 50%, var(--line) 65% 100%);
  background-size: 100% 260%;
  animation: step-pulse-v 2.8s linear infinite;
}
@keyframes step-pulse-v { from { background-position: 0 100%; } to { background-position: 0 0; } }
@media (min-width: 900px) {
  .steps.is-live .step::before {
    background: linear-gradient(90deg, var(--line) 0 35%, var(--cyan) 50%, var(--line) 65% 100%);
    background-size: 260% 100%;
    animation-name: step-pulse-h;
  }
  @keyframes step-pulse-h { from { background-position: 100% 0; } to { background-position: 0 0; } }
}
.steps.is-live .step:nth-child(2)::before { animation-delay: .4s; }
.steps.is-live .step:nth-child(3)::before { animation-delay: .8s; }
.steps.is-live .step:nth-child(4)::before { animation-delay: 1.2s; }
.steps.is-live .step:nth-child(5)::before { animation-delay: 1.6s; }
/* Los hexágonos numerados se iluminan al entrar */
.step__num { transition: box-shadow .5s; }
.js-motion .steps > li.is-in .step__num { animation: num-glow 1.2s var(--ease-out) var(--d, 0ms) 1; }
@keyframes num-glow { 40% { background: var(--cyan); color: var(--navy); } }

/* ---------- 5. Transición entre páginas (navegadores compatibles) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
  .site-header { view-transition-name: site-header; }
}

/* ---------- 6. Movimiento reducido e impresión ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-motion :where(.section-head, .cards > li, .steps > li, .split__copy, .split__media,
    .feature-list > li, .factor-list > li, .faq__item, .stats__item, .post-card,
    .link-list > li, .brands__list > li) { opacity: 1 !important; transform: none !important; transition: none; animation: none; }
  .hero__glow, .steps.is-live .step::before, .faq__item[open] .faq__a, .step__num { animation: none !important; }
  .btn, .card, .post-card, .post-card__media .media, .link-list a, .link-list .icon, .card .hex-badge { transform: none !important; }
}
@media print {
  .js-motion * { opacity: 1 !important; transform: none !important; }
  .hero__fx { display: none; }
}