/* Utilidades propias de Del Sol Studio, compartidas por todas las páginas.
   Va enlazado en la MISMA posición del documento donde estaba el <style>
   original (después del script de configuración de Tailwind), para que el orden
   de cascada no cambie. */

html { scroll-padding-top: 88px; }
body { font-family: 'Jost', sans-serif; }

.font-display { letter-spacing: -0.03em; }
.body-copy { line-height: 1.7; }

/* Grano sutil sobre el hero */
.grain::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.hero-bg {
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(1,199,252,0.16), transparent 60%),
    radial-gradient(900px 500px at 95% 10%, rgba(1,29,87,0.10), transparent 55%),
    radial-gradient(700px 420px at 70% 100%, rgba(1,199,252,0.10), transparent 60%),
    #FBFDFE;
}
.navy-bg {
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(1,199,252,0.22), transparent 55%),
    radial-gradient(700px 400px at 5% 110%, rgba(1,199,252,0.12), transparent 55%),
    #011D57;
}

/* .reveal se anima con GSAP; sin JS el contenido queda visible */

/* Máscaras para la entrada del título línea por línea */
.line-mask { display: block; overflow: hidden; }
.line-inner { display: inline-block; will-change: transform; }

/* Trazo dorado de caligrafía (firma de la marca) */
.trazo { display: block; margin-top: 0.6rem; filter: drop-shadow(0 1px 5px rgba(224,169,62,0.45)); }

/* Ticker infinito */
.ticker-track { will-change: transform; }

/* Brillo dorado que recorre las tarjetas en hover */
.card-lift { position: relative; overflow: hidden; }
.card-lift::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(224,169,62,0.16) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .85s ease;
}
.card-lift:hover::before { transform: translateX(130%); }

.link-nav { position: relative; }
.link-nav::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%;
  background: #01C7FC; transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.link-nav:hover::after, .link-nav:focus-visible::after { transform: scaleX(1); }

a:focus-visible, button:focus-visible { outline: 2px solid #01C7FC; outline-offset: 3px; border-radius: 4px; }

/* hover/active de .btn-press lo maneja GSAP (micro-interacciones) */

.card-lift { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.card-lift:hover { transform: translateY(-6px); }

.img-tint { position: relative; }
.img-tint::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(1,18,58,0.55), transparent 55%);
}
.img-tint::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(1,199,252,0.12); mix-blend-mode: multiply;
}

/* la flotación del botón de WhatsApp la maneja GSAP (yoyo) */