/* ============================================================
   POLLOCELL — capa visual premium
   Fondo atmosférico, loader cinematográfico, hero, títulos,
   tarjetas y botones. Se apoya en los tokens de style.css.
   ============================================================ */

:root {
  --neon: #ffca00;
  --neon-hot: #ffe066;
  --neon-deep: #b88a00;
  --glow-1: 0 0 18px rgba(255, 202, 0, .35);
  --glow-2: 0 0 42px rgba(255, 202, 0, .22);
  --graphite: #131313;
  --graphite-2: #191919;
}

/* ============================================================
   1. FONDO ATMOSFÉRICO (continuo en toda la página)
   ============================================================ */
.fx-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(255, 202, 0, .10), transparent 58%),
    radial-gradient(90% 60% at 8% 12%, rgba(255, 202, 0, .05), transparent 60%),
    radial-gradient(140% 90% at 50% 115%, rgba(255, 176, 0, .07), transparent 62%),
    #050505;
}

/* rejilla técnica muy tenue */
.fx-grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(80% 60% at 50% 26%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 26%, #000 0%, transparent 78%);
  will-change: transform;
}

/* neblina ambiental */
.fx-haze {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}
.fx-haze--a { width: 46vw; height: 46vw; top: -12vw; right: -8vw; background: radial-gradient(circle, rgba(255, 202, 0, .3), transparent 68%); }
.fx-haze--b { width: 38vw; height: 38vw; bottom: 6vh; left: -12vw; background: radial-gradient(circle, rgba(255, 160, 0, .17), transparent 70%); opacity: .38; }
.fx-haze--c { width: 30vw; height: 30vw; top: 46%; left: 52%; background: radial-gradient(circle, rgba(255, 220, 90, .12), transparent 70%); opacity: .3; }

/* líneas tecnológicas */
.fx-lines {
  position: absolute;
  inset: 0;
  opacity: .5;
  will-change: transform;
}
.fx-lines span {
  position: absolute;
  background: linear-gradient(180deg, transparent, rgba(255, 202, 0, .3), transparent);
  width: 1px;
}
.fx-lines span:nth-child(1) { left: 12%; top: 0; height: 42vh; }
.fx-lines span:nth-child(2) { left: 33%; top: 28vh; height: 34vh; opacity: .5; }
.fx-lines span:nth-child(3) { right: 18%; top: 6vh; height: 52vh; opacity: .7; }
.fx-lines span:nth-child(4) { right: 40%; bottom: 0; height: 30vh; opacity: .4; }

/* canvas de meteoritos y polvo */
.fx-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

/* el contenido va por encima del fondo.
   Solo main y footer: el resto ya está posicionado con su propio z-index
   y cambiarles la posición los devolvería al flujo del documento. */
body > main,
body > footer { position: relative; z-index: 1; }

/* el header queda sobre el menú móvil: si no, la capa del menú cubre
   el botón de hamburguesa y no hay forma de cerrarlo tocándolo */
.header { z-index: 100; }

/* las secciones dejan ver el fondo: sin cortes bruscos entre ellas */
.section { background: transparent !important; }
.section--soft::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0), rgba(9, 9, 9, .72) 22%, rgba(9, 9, 9, .72) 78%, rgba(10, 10, 10, 0));
  pointer-events: none;
  z-index: -1;
}
.footer { background: rgba(3, 3, 3, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* línea luminosa que separa una sección de la siguiente */
.section--soft::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container), 90vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 202, 0, .3), transparent);
  pointer-events: none;
}

/* el mapa se integra con el tono oscuro del sitio */
.map-panel iframe { filter: grayscale(.4) contrast(1.06) brightness(.88); }

.fx-sep {
  position: relative;
  height: 1px;
  margin: 0 auto;
  max-width: var(--container);
  background: linear-gradient(90deg, transparent, rgba(255, 202, 0, .38), transparent);
  opacity: 0;
  transform: scaleX(.3);
  transition: opacity .8s var(--ease), transform 1.1s var(--ease);
}
.fx-sep.fx-in { opacity: 1; transform: scaleX(1); }

/* ============================================================
   2. LOADER CINEMATOGRÁFICO
   ============================================================ */
#loader {
  background: #030303;
  perspective: 1000px;
}
/* style.css le da display:grid, que anula el [hidden] del navegador:
   sin esto la intro seguiría animándose en segundo plano toda la sesión */
#loader[hidden] { display: none !important; }
.loader-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.loader-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* el horizonte de la ciudad arriba, la plaza abajo: dos planos que no se pisan */
.loader-sky {
  opacity: .6;
  transform: scale(1.12);
  animation: loaderPan 18s ease-in-out infinite alternate;
  filter: saturate(.8);
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 66%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 66%);
}
.loader-plaza {
  opacity: .5;
  transform: scale(1.06);
  animation: loaderPan2 22s ease-in-out infinite alternate;
  object-position: center 78%;
  mask-image: linear-gradient(180deg, transparent 44%, #000 72%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 44%, #000 72%, #000 100%);
}
@keyframes loaderPan {
  from { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
  to { transform: scale(1.2) translate3d(1.5%, 1%, 0); }
}
@keyframes loaderPan2 {
  from { transform: scale(1.06) translate3d(1%, 1.5%, 0); }
  to { transform: scale(1.14) translate3d(-1%, -1%, 0); }
}
.loader-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 46% at 50% 44%, rgba(255, 202, 0, .16), transparent 62%),
    radial-gradient(120% 100% at 50% 50%, transparent 18%, rgba(3, 3, 3, .82) 62%, #030303 100%),
    linear-gradient(180deg, rgba(3, 3, 3, .72), rgba(3, 3, 3, .34) 38%, rgba(3, 3, 3, .9));
}
.loader-veil::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(60% 50% at 50% 45%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(60% 50% at 50% 45%, #000, transparent 76%);
}

.loader-inner { position: relative; z-index: 3; }
.loader-halo {
  position: absolute;
  left: 50%;
  top: 34%;
  width: min(560px, 92vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 202, 0, .3) 0%, rgba(255, 202, 0, .1) 34%, transparent 66%);
  filter: blur(18px);
  pointer-events: none;
  animation: haloPulse 3.4s ease-in-out infinite;
}
@keyframes haloPulse {
  0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
}
.loader-logo {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 26px rgba(255, 202, 0, .45));
}
.loader-ring {
  position: absolute;
  left: 50%;
  top: 34%;
  width: min(400px, 74vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 202, 0, .16);
  pointer-events: none;
}
.loader-ring::before,
.loader-ring::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(255, 202, 0, .75);
  animation: ringSpin 3.6s linear infinite;
}
.loader-ring::after {
  inset: 9%;
  border-top-color: transparent;
  border-left-color: rgba(255, 202, 0, .4);
  animation-duration: 5.4s;
  animation-direction: reverse;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* partículas del loader */
.loader-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.loader-dust i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 8px 2px rgba(255, 202, 0, .5);
  opacity: 0;
  animation: dustUp var(--d, 7s) linear infinite;
  animation-delay: var(--dl, 0s);
  will-change: transform, opacity;
}
@keyframes dustUp {
  0% { opacity: 0; transform: translate3d(0, 40px, 0) scale(.6); }
  12% { opacity: .9; }
  80% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(var(--dx, 20px), -180px, 0) scale(1.1); }
}

/* barra de progreso */
.loader-progress {
  position: relative;
  width: min(320px, 74vw);
  height: 2px;
  margin: 0 auto 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.loader-progress i {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--neon-deep), var(--neon) 60%, var(--neon-hot));
  box-shadow: 0 0 14px rgba(255, 202, 0, .6);
  will-change: transform;
}
.loader-progress::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-100%);
  animation: barSheen 1.6s var(--ease) infinite;
  will-change: transform;
}
@keyframes barSheen { to { transform: translateX(320%); } }

.loader-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #cfcfcf;                 /* sobre la fotografía del fondo hace falta más contraste */
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
  margin-bottom: 22px;
}
.loader-meta b { color: var(--neon); font-weight: 600; font-variant-numeric: tabular-nums; }

/* salida cinematográfica */
#loader.is-leaving {
  animation: loaderOut .82s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes loaderOut {
  0% { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
  35% { filter: blur(2px) brightness(1.22); }
  100% { opacity: 0; filter: blur(16px) brightness(1.5); transform: scale(1.14); visibility: hidden; }
}
#loader.is-loaded .loader-enter { opacity: 1; transform: none; pointer-events: auto; }

/* ============================================================
   3. HERO
   ============================================================ */
.hero::before, .hero::after { display: none; }

.hero-title { position: relative; }
.js .hero-title .w {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
}
.hero-title .w {
  display: inline-block;
  transform: translateY(26px);
  filter: blur(10px);
  transition: opacity .8s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.fx-hero-in .hero-title .w { opacity: 1; transform: none; filter: blur(0); }

/* color plano de base: si el navegador no recorta el fondo al texto,
   el título se sigue leyendo en amarillo en lugar de quedar invisible */
.hero-title .hl {
  color: var(--neon);
  position: relative;
  text-shadow: none;
  filter: drop-shadow(0 0 24px rgba(255, 202, 0, .32));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title .hl {
    background: linear-gradient(96deg, #fff3c4 4%, var(--neon) 34%, var(--neon-hot) 58%, var(--neon) 82%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
/* destello que recorre las palabras amarillas de vez en cuando.
   El alt vacío evita que el lector de pantalla repita el texto */
.hero-title .hl::after {
  content: attr(data-text) / '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .92) 50%, transparent 62%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-size: 260% 100%;
  background-position: 200% 0;
  animation: titleSheen 7.5s ease-in-out 2.2s infinite;
  pointer-events: none;
}
@keyframes titleSheen {
  0%, 62% { background-position: 200% 0; }
  84%, 100% { background-position: -60% 0; }
}

.hero-rule {
  display: block;
  position: relative;
  height: 2px;
  width: 220px;
  max-width: 60%;
  margin: 4px 0 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--neon), rgba(255, 202, 0, .05));
  transform-origin: left;
  transition: transform 1s var(--ease) .5s;
}
.js .hero-rule { transform: scaleX(0); }
.js .fx-hero-in .hero-rule { transform: scaleX(1); }
.hero-rule::after {
  content: '';
  position: absolute;
  right: -3px; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--neon);
  box-shadow: 0 0 12px 3px rgba(255, 202, 0, .55);
}

.js .hero-copy .eyebrow,
.js .hero-lead,
.js .hero-actions,
.js .hero-points {
  opacity: 0;
  transform: translateY(16px);
}
.hero-copy .eyebrow,
.hero-lead,
.hero-actions,
.hero-points {
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.fx-hero-in .hero-copy .eyebrow { transition-delay: .05s; }
.fx-hero-in .hero-lead { transition-delay: .5s; }
.fx-hero-in .hero-actions { transition-delay: .62s; }
.fx-hero-in .hero-points { transition-delay: .74s; }
.fx-hero-in .hero-copy .eyebrow,
.fx-hero-in .hero-lead,
.fx-hero-in .hero-actions,
.fx-hero-in .hero-points { opacity: 1; transform: none; }

/* escena de la imagen */
.hero-scene {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
  opacity: 0;
  animation: sceneIn 1.1s var(--ease) .25s forwards;
}
.fx-hero-in .hero-scene { animation-play-state: running; }
@keyframes sceneIn {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.hero-frame {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 202, 0, .28);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 30px 80px rgba(0, 0, 0, .8),
    0 0 42px rgba(255, 202, 0, .18),
    0 0 120px rgba(255, 202, 0, .1);
  background: #060606;
  animation: floatSlow 7s ease-in-out infinite;
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.01);
}
/* halo amarillo proyectado detrás de la escena */
.hero-scene::before {
  content: '';
  position: absolute;
  inset: 6% 4%;
  border-radius: 40px;
  background: radial-gradient(circle at 50% 55%, rgba(255, 202, 0, .34), transparent 68%);
  filter: blur(48px);
  z-index: -1;
  animation: haloPulse 5.5s ease-in-out infinite;
}
/* contorno luminoso interior */
.hero-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .75), inset 0 0 2px rgba(255, 202, 0, .5);
  pointer-events: none;
}
/* barniz: brillo diagonal que cruza la superficie */
.hero-frame .gloss {
  position: absolute;
  inset: -40%;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .13) 48%, rgba(255, 245, 210, .2) 51%, transparent 60%);
  transform: translateX(-120%) rotate(4deg);
  animation: glossSweep 9s ease-in-out 3s infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform;
}
@keyframes glossSweep {
  0%, 66% { transform: translateX(-120%) rotate(4deg); }
  86%, 100% { transform: translateX(120%) rotate(4deg); }
}

.hero-tag {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 202, 0, .16);
}
.hero-tag i { box-shadow: 0 0 10px 2px rgba(255, 202, 0, .6); }

/* ============================================================
   4. TÍTULOS DE SECCIÓN
   ============================================================ */
.eyebrow {
  position: relative;
  padding: 5px 13px 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 202, 0, .24);
  background: rgba(255, 202, 0, .07);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.eyebrow::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(255, 202, 0, .6);
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.75); }
}

.section-head h2 { position: relative; }
.section-head .hl { color: var(--neon); text-shadow: 0 0 30px rgba(255, 202, 0, .28); }
.section-head--center { max-width: 760px; }

.head-rule {
  display: block;
  height: 2px;
  width: 86px;
  margin-top: 18px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--neon), rgba(255, 202, 0, 0));
  transform-origin: left;
  transition: transform .9s var(--ease) .15s;
}
.js .head-rule { transform: scaleX(0); }
.section-head--center .head-rule { margin-inline: auto; background: linear-gradient(90deg, rgba(255, 202, 0, 0), var(--neon), rgba(255, 202, 0, 0)); transform-origin: center; }
.reveal.is-visible .head-rule,
.fx-in .head-rule { transform: scaleX(1); }

/* ============================================================
   5. TARJETAS
   ============================================================ */
/* superficie translúcida sin backdrop-filter: son decenas de tarjetas sobre un
   canvas que repinta, y el desenfoque de fondo costaría más de lo que aporta */
.card,
.product,
.work,
.contact-item,
.faq-item,
.form-card,
.brand-card,
.stat,
.split-visual,
.social-cta,
.map-panel,
.empty-state {
  background-color: rgba(17, 17, 17, .82);
}
.card, .product, .work {
  border-color: rgba(255, 255, 255, .07);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  overflow: hidden;
}
/* brillo diagonal interno al pasar el cursor */
.card::after,
.product::after,
.work::after {
  content: '';
  position: absolute;
  top: -60%;
  left: 0;
  width: 55%;
  height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 202, 0, .1) 45%, rgba(255, 255, 255, .16) 52%, transparent 62%);
  transform: translateX(-140%) rotate(8deg);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.card:hover::after,
.product:hover::after,
.work:hover::after {
  opacity: 1;
  animation: cardSheen .95s var(--ease);
}
/* se mueve con transform: animar «left» forzaría un reflow en cada cuadro */
@keyframes cardSheen {
  from { transform: translateX(-140%) rotate(8deg); }
  to { transform: translateX(280%) rotate(8deg); }
}
.card:hover,
.product:hover,
.work:hover {
  border-color: rgba(255, 202, 0, .38);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 202, 0, .16);
}
.product { position: relative; }
.work { position: relative; }

.icon-box {
  position: relative;
  box-shadow: inset 0 0 18px rgba(255, 202, 0, .07);
}
.icon-box::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 202, 0, .3), transparent 70%);
  opacity: 0;
  filter: blur(8px);
  transition: opacity .3s var(--ease);
}
.card:hover .icon-box::after { opacity: 1; }
.card:hover .icon-box svg { animation: iconNudge .5s var(--ease); }
@keyframes iconNudge {
  0% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(-3px) rotate(-5deg); }
  100% { transform: translateY(0) rotate(0); }
}

.brand-card:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 202, 0, .14);
  text-shadow: 0 0 22px rgba(255, 202, 0, .4);
}

.step-dot { box-shadow: 0 0 0 6px rgba(255, 202, 0, .04), 0 0 22px rgba(255, 202, 0, .12); }

/* ============================================================
   6. BOTONES
   ============================================================ */
.btn {
  box-shadow: 0 10px 26px rgba(255, 202, 0, .18);
  letter-spacing: .01em;
}
.btn:hover { box-shadow: 0 16px 36px rgba(255, 202, 0, .32); }
.btn--ghost {
  background: rgba(8, 8, 8, .55);
  border-color: rgba(255, 202, 0, .38);
  color: var(--text);
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}
.btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 202, 0, .22), rgba(255, 202, 0, .08));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--ease);
  z-index: 0;
}
.btn--ghost:hover { border-color: var(--neon); color: var(--neon-hot); background: rgba(8, 8, 8, .55); }
.btn--ghost:hover::before { transform: scaleX(1); }

.chip { min-height: 44px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(16, 16, 16, .7); }
.f-social a { width: 44px; height: 44px; }
.chip.is-active { box-shadow: 0 0 20px rgba(255, 202, 0, .3); }

/* ============================================================
   7. HEADER
   ============================================================ */
.header.is-stuck {
  background: rgba(5, 5, 5, .74);
  border-bottom-color: rgba(255, 202, 0, .14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}
.header.is-stuck::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 202, 0, .4), transparent);
}
.nav a.is-active::after {
  box-shadow: 0 0 10px 1px rgba(255, 202, 0, .6);
  animation: navLine .4s var(--ease);
}
@keyframes navLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.header-cta { box-shadow: 0 8px 24px rgba(255, 202, 0, .25); }

/* ============================================================
   8. REVELADOS por scroll
   ============================================================ */
[data-fx] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity .75s var(--ease), transform .85s var(--ease), filter .75s var(--ease);
}
/* una vez revelado el elemento ya no necesita capa propia */
[data-fx].fx-in { will-change: auto; }
[data-fx="rise"] { transform: translateY(30px); }
[data-fx="fade"] { transform: none; }
[data-fx="left"] { transform: translateX(-34px); }
[data-fx="right"] { transform: translateX(34px); }
[data-fx="zoom"] { transform: scale(.94); }
[data-fx="mask"] {
  transform: translateY(24px);
  clip-path: inset(0 0 100% 0);
  transition: opacity .7s var(--ease), transform .9s var(--ease), clip-path 1s var(--ease);
}
[data-fx].fx-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* ============================================================
   9. MÓVIL: menos carga visual
   ============================================================ */
@media (max-width: 900px) {
  .fx-haze { filter: blur(60px); opacity: .34; }
  .fx-haze--c, .fx-lines { display: none; }
  .fx-sky { opacity: .7; }
  .hero-frame {
    animation: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .75), 0 0 26px rgba(255, 202, 0, .14);
  }
  .hero-scene::before { filter: blur(34px); }
  .hero-frame .gloss { display: none; }
  .card, .product, .work, .contact-item, .faq-item, .form-card,
  .brand-card, .stat, .split-visual, .social-cta, .map-panel, .empty-state {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(16, 16, 16, .92);
  }
  .loader-halo { filter: blur(12px); }
  .loader-ring { width: min(300px, 82vw); }
}

@media (max-width: 680px) {
  .hero-rule { width: 150px; }
  .loader-dust i:nth-child(n + 9) { display: none; }
}

/* ============================================================
   10. MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fx-sky, .loader-dust, .fx-lines { display: none; }
  .loader-sky, .loader-plaza, .loader-halo, .loader-ring::before, .loader-ring::after,
  .hero-frame, .hero-frame .gloss, .hero-scene::before, .hero-title .hl::after,
  .eyebrow::before, .loader-progress::after {
    animation: none !important;
  }
  .hero-title .w,
  .hero-copy .eyebrow, .hero-lead, .hero-actions, .hero-points,
  [data-fx], .hero-scene {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
  }
  .hero-rule, .head-rule, .fx-sep { transform: none !important; opacity: 1 !important; }
}

/* ============================================================
   11. AJUSTES DE REVISION
   ============================================================ */
/* el foco no se pierde contra los halos amarillos del fondo */
:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(255, 202, 0, .55);
}

/* el boton flotante tambien se aparta del cierre de pagina */
.fab-wa.is-away { opacity: 0; visibility: hidden; }

@media (max-width: 680px) {
  /* la etiqueta larga cabe en una linea */
  .eyebrow { font-size: .68rem; letter-spacing: .12em; padding: 5px 11px; }
}