/* ============================================================
   fletesguayaquil.com — capa de tipografía + interactividad (HOME)
   Cargado SOLO en index.html (no en las otras 8 páginas todavía).
   No modifica assets/css/site.css. Reglas escritas a mano, solo con
   transform y opacity (aceleradas por GPU) para no afectar la
   velocidad de carga ni el CLS.
   ============================================================ */

:root{
  --gy-ease: cubic-bezier(.16,1,.3,1);
  --gy-ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* Titulares con más carácter (Plus Jakarta Sans); el texto de cuerpo
   se queda en Inter, ya cargado, sin costo extra de rendimiento. */
h1, h2, h3, .gy-font-display{
  font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: -0.015em;
}

/* Si el sistema operativo pide menos movimiento, se respeta:
   el contenido se muestra igual, solo sin animación. */
@media (prefers-reduced-motion: reduce){
  .gy-reveal, .gy-card, .gy-btn, header.sticky, #nav-toggle svg, .gy-pulse::after{
    transition: none !important;
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   Aparición al hacer scroll (mejora progresiva).
   Sin JS (o sin soporte de IntersectionObserver) el contenido
   queda 100% visible desde el inicio: nunca se oculta a
   buscadores ni a quien navega sin JavaScript.
   ------------------------------------------------------------ */
.js .gy-reveal{
  --gy-reveal-y: 18px;
  opacity: 0;
  transition: opacity .6s var(--gy-ease), transform .6s var(--gy-ease);
}
.js .gy-reveal.gy-in{
  --gy-reveal-y: 0px;
  opacity: 1;
}
/* Elemento revelado que NO es tarjeta (checklist, formulario, FAQ):
   solo aplica el desplazamiento de aparición. */
.js .gy-reveal:not(.gy-card){
  transform: translateY(var(--gy-reveal-y));
}
/* Elemento revelado que TAMBIÉN es tarjeta: el desplazamiento de
   aparición y el de hover/tap se combinan en un solo transform con
   calc(), para que nunca se pisen entre sí (ambos usan --gy-y, y
   sin esto la regla de "aparición" ganaba siempre por tener más
   clases en el selector y el hover/tap dejaba de notarse). */
.js .gy-reveal.gy-card{
  transform: translateY(calc(var(--gy-reveal-y) + var(--gy-y, 0px))) scale(var(--gy-scale, 1));
}

/* ------------------------------------------------------------
   Tarjetas: se levantan al pasar el mouse, se hunden un poco al
   tocar. Usan las mismas variables --gy-y/--gy-scale que consume
   la regla de aparición de arriba.
   ------------------------------------------------------------ */
.gy-card{
  --gy-y: 0px;
  --gy-scale: 1;
  transform: translateY(var(--gy-y)) scale(var(--gy-scale));
  transition: transform .25s var(--gy-ease), box-shadow .25s ease, border-color .25s ease;
}
.gy-card:hover{
  --gy-y: -4px;
  box-shadow: 0 16px 32px -14px rgba(15,23,42,.22);
}
.gy-card:active{
  --gy-y: -1px;
  --gy-scale: .985;
}

/* ------------------------------------------------------------
   Botones: feedback táctil real al tocar en el celular.
   (Antes, el "active" de .btn-cta dependía del scale que solo se
   activaba junto con :hover, así que en pantallas táctiles no se
   notaba nada al tocar — por eso el sitio se sentía "estático".)
   No comparten clase con .gy-reveal, así que no necesitan la
   composición con calc() de arriba.
   ------------------------------------------------------------ */
.gy-btn{
  transition: transform .18s var(--gy-ease-spring), box-shadow .18s ease;
}
.gy-btn:hover{
  transform: translateY(-2px);
}
.gy-btn:active{
  transform: scale(.94);
}

/* --- Header: sombra sutil al hacer scroll, sensación de profundidad --- */
header.sticky{
  transition: box-shadow .3s ease;
}
header.sticky.gy-scrolled{
  box-shadow: 0 8px 24px -14px rgba(0,0,0,.35);
}

/* --- Menú móvil: el ícono de hamburguesa gira al abrir
   (usa el aria-expanded que ya pone site.js, sin JS adicional) --- */
#nav-toggle svg{
  transition: transform .3s var(--gy-ease-spring);
}
#nav-toggle[aria-expanded="true"] svg{
  transform: rotate(90deg);
}

/* --- Barra flotante de WhatsApp: anillo que respira suavemente,
   para que se sienta "viva" sin ser invasivo. Solo transform+opacity,
   nunca box-shadow animado, para que sea barato de renderizar. --- */
.gy-pulse{ position: relative; }
.gy-pulse::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.55);
  opacity: 0;
  transform: scale(1);
  animation: gy-pulse-ring 2.8s var(--gy-ease) infinite;
  pointer-events: none;
}
@keyframes gy-pulse-ring{
  0%   { transform: scale(1);     opacity: .55; }
  70%  { transform: scale(1.06);  opacity: 0; }
  100% { transform: scale(1.06);  opacity: 0; }
}