/* ICUSA — animaciones de entrada y microinteracciones.
   ─────────────────────────────────────────────────────────────────────
   REGLA DE ORO (viene de un golpe real): el contenido NUNCA nace escondido.
   Todo lo de aquí cuelga de `html.js`, y esa clase la pone un script chiquito
   en el <head>. Si el JS no corre, este archivo entero no aplica y el sitio
   se ve completo.

   Va en archivo aparte a propósito: si a ICUSA no le gusta el movimiento, se
   quita de un enqueue sin tocar el diseño.

   OJO: aquí NO se meten reglas de layout. Los @media de app.css van ordenados
   1299 → 1024 → 767 y este archivo carga después; una regla de ancho aquí
   pisaría las de celular. Solo opacidad, transform y transition.
   ───────────────────────────────────────────────────────────────────── */

/* ══════════ 1. Entrada al hacer scroll ══════════ */

.js .ic-anim {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .85s cubic-bezier(.16, 1, .3, 1),
    transform .85s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

.js .ic-anim.ic-anim--visible {
  opacity: 1;
  transform: none;
}

/* Ya que entró, se suelta el will-change: dejarlo puesto se come memoria de
   video en celular con 40 elementos animados. */
.js .ic-anim.ic-anim--listo {
  will-change: auto;
  transition: none;
}

/* Las fotos grandes entran con un acercamiento apenas perceptible, que es de
   donde sale la sensación "de Apple": el bloque sube y la foto se asienta. */
.js .ic-anim--foto {
  transform: translateY(24px) scale(1.03);
}

.js .ic-anim--foto.ic-anim--visible {
  transform: none;
}

/* ══════════ 2. Microinteracciones ══════════ */

/* Botones: suben al pasar el mouse y se hunden al hacer clic. */
.ic-btn,
.ic-btn-chico {
  transition:
    transform .28s cubic-bezier(.16, 1, .3, 1),
    box-shadow .28s cubic-bezier(.16, 1, .3, 1),
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease;
}

.ic-btn:hover,
.ic-btn-chico:hover {
  /* --tx/--ty los pone anim.js en los botones principales (efecto magnético). */
  transform: translate(var(--tx, 0), var(--ty, -2px));
  box-shadow: 0 10px 22px rgba(16, 24, 32, .16);
}

.ic-btn:active,
.ic-btn-chico:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 2px 8px rgba(16, 24, 32, .12);
  transition-duration: .08s;
}

/* Tarjetas: se levantan un poco y la sombra se abre. */
.ic-unidad,
.ic-producto,
.ic-paso__tarjeta,
.ic-tarjeta-post,
.ic-vacante,
.ic-ficha,
.ic-tarjeta-distrib,
.ic-sello {
  transition:
    transform .4s cubic-bezier(.16, 1, .3, 1),
    box-shadow .4s cubic-bezier(.16, 1, .3, 1),
    border-color .3s ease;
}

.ic-unidad:hover,
.ic-producto:hover,
.ic-paso__tarjeta:hover,
.ic-tarjeta-post:hover,
.ic-vacante:hover,
.ic-ficha:hover,
.ic-tarjeta-distrib:hover,
.ic-sello:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 38px rgba(16, 24, 32, .13);
}

/* La foto de la tarjeta se acerca mientras la tarjeta está bajo el mouse.
   Todas estas tarjetas ya traen overflow:hidden, así que no se desborda. */
.ic-producto__foto,
.ic-tarjeta-post__foto,
.ic-paso__foto,
.ic-unidad__foto,
.ic-historia__imagen,
.ic-enfoque__imagen,
.ic-infra__imagen {
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

.ic-producto:hover .ic-producto__foto,
.ic-tarjeta-post:hover .ic-tarjeta-post__foto,
.ic-paso__tarjeta:hover .ic-paso__foto,
.ic-unidad:hover .ic-unidad__foto {
  transform: scale(1.05);
}

.ic-historia__figura:hover .ic-historia__imagen,
.ic-enfoque__figura:hover .ic-enfoque__imagen,
.ic-infra__figura:hover .ic-infra__imagen {
  transform: scale(1.04);
}

/* "Leer Más" y demás enlaces con flecha: la flecha se adelanta. */
.ic-tarjeta-post__enlace svg,
.ic-producto__enlace svg {
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.ic-tarjeta-post:hover .ic-tarjeta-post__enlace svg,
.ic-tarjeta-post__enlace:hover svg,
.ic-producto__enlace:hover svg {
  transform: translateX(4px);
}

/* Menú: subrayado que crece desde el centro. */
.ic-menu__enlace {
  position: relative;
}

.ic-menu__enlace::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--ic-acento, #74CC34);
  opacity: 0; /* sin esto quedaba un puntito verde de 0.02 px bajo cada enlace */
  transition: left .28s cubic-bezier(.16, 1, .3, 1), right .28s cubic-bezier(.16, 1, .3, 1), opacity .12s;
}

.ic-menu__enlace:hover::after,
.ic-menu__item--actual > .ic-menu__enlace::after {
  left: 0;
  right: 0;
  opacity: 1;
}

/* En el panel de celular el subrayado estorba: ahí los enlaces son bloques. */
@media (max-width: 1024px) {
  .ic-menu__enlace::after { display: none; }
}

/* Enlaces del pie: se recorren al pasar el mouse. */
.ic-pie__lista a {
  display: inline-block;
  transition: color .22s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
}

.ic-pie__lista a:hover {
  transform: translateX(3px);
}

/* Iconos sociales. */
.ic-barra-superior__redes a,
.ic-contacto__redes a {
  display: inline-flex;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}

.ic-barra-superior__redes a:hover,
.ic-contacto__redes a:hover {
  transform: translateY(-2px);
}

/* Botón flotante de WhatsApp: ya escalaba; ahora con la misma curva. */
.ic-wa-flotante {
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}

.ic-wa-flotante:hover {
  box-shadow: 0 12px 30px rgba(37, 211, 102, .38);
}

/* Campos del formulario y filtros. */
.ic-campo input,
.ic-campo select,
.ic-campo textarea {
  transition: border-color .22s ease, box-shadow .22s ease;
}

.ic-campo input:focus,
.ic-campo select:focus,
.ic-campo textarea:focus {
  box-shadow: 0 0 0 3px rgba(116, 204, 52, .18);
}

/* Foco de teclado visible en todo lo que se puede navegar con tabulador. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ic-acento, #74CC34);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Pastillas del mapa. */
.ic-pastilla {
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s cubic-bezier(.16, 1, .3, 1);
}

.ic-pastilla:hover {
  transform: translateY(-2px);
}

/* Flechas del carrusel de proceso. */
.ic-proceso__flecha {
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), opacity .25s ease;
}

.ic-proceso__flecha:hover:not(:disabled) {
  transform: scale(1.12);
}

/* ══════════ 2b. Ronda 4: microinteracciones avanzadas ══════════ */

/* Brillo que sigue al mouse en las tarjetas (anim.js pone --mx/--my).
   Va como capa encima, sin tapar clics, y solo existe con mouse. */
.ic-brillo { position: relative; isolation: isolate; }
.ic-brillo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 42%);
  opacity: 0;
  transition: opacity .35s ease;
}
.ic-brillo:hover::after { opacity: 1; }

/* Cabecera flotante. */
.ic-nav { transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, min-height .3s ease; }
.ic-nav__logo img { transition: width .3s cubic-bezier(.16, 1, .3, 1); }

/* Botón de WhatsApp: la píldora se abre al pasar el mouse y el botón late
   una sola vez a los 4 s para avisar que existe. */
.ic-wa-flotante {
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
  animation: ic-wa-latido 1.4s 4s cubic-bezier(.16, 1, .3, 1) 1;
}
.ic-wa-flotante:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(37, 211, 102, .45); }
.ic-wa-flotante__texto { transition: max-width .45s cubic-bezier(.16, 1, .3, 1), margin .45s cubic-bezier(.16, 1, .3, 1), opacity .25s ease; }
@keyframes ic-wa-latido {
  0% { box-shadow: 0 10px 28px rgba(37, 211, 102, .35), 0 0 0 0 rgba(37, 211, 102, .5); }
  70% { box-shadow: 0 10px 28px rgba(37, 211, 102, .35), 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 10px 28px rgba(37, 211, 102, .35), 0 0 0 0 rgba(37, 211, 102, 0); }
}
.ic-wa__globo {
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transform-origin: 90% 100%;
  transition: opacity .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.ic-wa__globo.ic-wa__globo--abierto { opacity: 1; transform: none; }
.ic-wa__punto { animation: ic-latido-punto 2s ease-in-out infinite; }
@keyframes ic-latido-punto { 50% { box-shadow: 0 0 0 6px rgba(37, 211, 102, 0); } }

/* Preguntas frecuentes: se abren con altura animada donde el navegador lo
   permite (Chrome y Safari recientes); en los demás abren al instante. */
.ic-faq__item { interpolate-size: allow-keywords; }
.ic-faq__item::details-content { height: 0; overflow: clip; transition: height .35s cubic-bezier(.16, 1, .3, 1), content-visibility .35s allow-discrete; }
.ic-faq__item[open]::details-content { height: auto; }
.ic-faq__signo { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.ic-faq__item[open] .ic-faq__signo { transform: rotate(45deg); }

/* Tarjetas de producto mencionado en el blog. */
.ic-mencionado { transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease, border-color .3s ease; }
.ic-mencionado:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(16, 24, 32, .12); border-color: transparent; }
.ic-mencionado__foto { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.ic-mencionado:hover .ic-mencionado__foto { transform: scale(1.06); }
.ic-mencionado__ver svg, .ic-lateral-dist__enlace svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.ic-mencionado:hover .ic-mencionado__ver svg, .ic-lateral-dist__enlace:hover svg { transform: translateX(4px); }

/* Índice del artículo: la sección actual se marca con una línea que crece. */
.ic-indice a { transition: color .2s ease, border-color .25s ease, padding .25s cubic-bezier(.16, 1, .3, 1); }
.ic-indice a[aria-current] { padding-left: 14px; }

/* Barra de avance de lectura. */
.ic-avance span { transition: transform .12s linear; }

/* Chips de estado del blog. */
.ic-blog-estados a { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1); }
.ic-blog-estados a:hover { transform: translateY(-2px); }

/* ══════════ 3. Quien pidió menos movimiento, no lo tiene ══════════ */

@media (prefers-reduced-motion: reduce) {
  .ic-wa-flotante, .ic-wa__punto { animation: none; }
  .ic-brillo::after { display: none; }
  .ic-nav, .ic-wa__globo, .ic-mencionado, .ic-mencionado__foto, .ic-faq__item::details-content { transition: none; }
  .js .ic-anim,
  .js .ic-anim--foto {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ic-btn, .ic-btn-chico,
  .ic-unidad, .ic-producto, .ic-paso__tarjeta, .ic-tarjeta-post,
  .ic-vacante, .ic-ficha, .ic-tarjeta-distrib, .ic-sello,
  .ic-producto__foto, .ic-tarjeta-post__foto, .ic-paso__foto,
  .ic-unidad__foto, .ic-historia__imagen, .ic-enfoque__imagen,
  .ic-infra__imagen, .ic-wa-flotante, .ic-menu__enlace::after,
  .ic-pie__lista a, .ic-pastilla, .ic-proceso__flecha {
    transition: none;
  }

  .ic-btn:hover, .ic-btn-chico:hover,
  .ic-unidad:hover, .ic-producto:hover, .ic-paso__tarjeta:hover,
  .ic-tarjeta-post:hover, .ic-vacante:hover, .ic-ficha:hover,
  .ic-tarjeta-distrib:hover, .ic-sello:hover,
  .ic-producto:hover .ic-producto__foto,
  .ic-tarjeta-post:hover .ic-tarjeta-post__foto,
  .ic-paso__tarjeta:hover .ic-paso__foto,
  .ic-unidad:hover .ic-unidad__foto,
  .ic-pastilla:hover,
  .ic-proceso__flecha:hover:not(:disabled),
  .ic-pie__lista a:hover {
    transform: none;
  }
}