/* ==========================================================================
   Atmosphere · the hero's language carried through the page (D-19, D-20)
   - Every section has its own tone: five dark violets alternate with four warm
     greys (the original neutrals). Stars live only in the violet sections.
   - Violet skies: static nebula on the section, a star layer that drifts very
     slowly, a corner twinkle layer, and an occasional shooting star (fx.js).
     All motion is transform/opacity only and runs only while the section is in view.
   - Cards: gradient hairline border, cursor spotlight; faint inner dust on violet.
   - Header logo: an occasional glint across the lettering.
   ========================================================================== */

/* ── Section tones ─────────────────────────────────────────────────────── */
.site-main > :is(.work, .services, .why, .quality, .final-cta, .positioning, .deliverables, .testimonials, .faq) {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: var(--tone);
}
/* Violets: each a different dark violet, the closing CTA the richest. */
.work        { --tone: #110b18; --nebula: rgba(108, 58, 224, .16); --nebula-x: 86%; --nebula-y: 10%; }
.services    { --tone: #140c22; --nebula: rgba(124, 74, 240, .15); --nebula-x: 80%; --nebula-y: 18%; }
.why         { --tone: #170b1d; --nebula: rgba(150, 64, 210, .14); --nebula-x: 88%; --nebula-y: 28%; }
.quality     { --tone: #0e0c1d; --nebula: rgba(86, 72, 230, .16);  --nebula-x: 22%; --nebula-y: 40%; }
.final-cta   { --tone: #1a0e26; --nebula: rgba(130, 76, 245, .22); --nebula-x: 50%; --nebula-y: 46%; }
/* Greys: the warm neutrals the site used before, each slightly different. */
.positioning, .deliverables, .testimonials, .faq {
  --color-text-muted: #bcb5ac;
  --color-border: #3b3430;
  --color-border-strong: #70665e;
  --color-bg-elevated: #1c1817;
  --color-surface-soft: #2a2523;
}
.positioning  { --tone: #0f0d0c; }
.deliverables { --tone: #151211; }
.testimonials { --tone: #121010; }
.faq          { --tone: #171413; }

:is(.work, .services, .why, .quality, .final-cta) {
  background-image:
    radial-gradient(ellipse 42rem 28rem at var(--nebula-x) var(--nebula-y), var(--nebula), transparent 70%),
    radial-gradient(ellipse 30rem 22rem at calc(100% - var(--nebula-x)) 94%, rgba(76, 38, 140, .12), transparent 72%);
}
:is(.positioning, .deliverables, .testimonials, .faq) {
  background-image: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 244, 230, .025), transparent 70%);
}

/* ── Violet skies: drifting stars + corner twinkle ─────────────────────── */
:is(.work, .services, .why, .quality, .final-cta)::before,
:is(.work, .services, .why, .quality, .final-cta)::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
/* Star layer is larger than the section so a slow drift never shows an edge. */
:is(.work, .services, .why, .quality, .final-cta)::before {
  inset: -60px;
  background:
    url('../img/fx/stars.svg') var(--sky-x, 0px) var(--sky-y, 0px) / 880px 880px,
    url('../img/fx/dust.svg') calc(var(--sky-x, 0px) * -1) calc(var(--sky-y, 0px) + 140px) / 560px 560px;
  -webkit-mask-image: radial-gradient(ellipse 80% 95% at var(--nebula-x) var(--nebula-y), #000 20%, rgba(0, 0, 0, .42) 62%, rgba(0, 0, 0, .16) 100%);
  mask-image: radial-gradient(ellipse 80% 95% at var(--nebula-x) var(--nebula-y), #000 20%, rgba(0, 0, 0, .42) 62%, rgba(0, 0, 0, .16) 100%);
  animation: fx-drift var(--drift-duration, 40s) ease-in-out var(--drift-delay, 0s) infinite alternate;
  animation-play-state: paused;
}
:is(.work, .services, .why, .quality, .final-cta)::after {
  top: 0;
  width: min(48%, 760px);
  height: min(100%, 640px);
  left: var(--twinkle-left, auto);
  right: var(--twinkle-right, 0);
  background: url('../img/fx/twinkle.svg') var(--sky-y, 0px) var(--sky-x, 0px) / 1100px 1100px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
  mask-image: radial-gradient(closest-side, #000, transparent);
  opacity: .3;
  animation: fx-twinkle var(--twinkle-duration, 7s) ease-in-out var(--twinkle-delay, 0s) infinite alternate;
  animation-play-state: paused;
}
:is(.work, .services, .why, .quality, .final-cta)[data-sky='on']::before,
:is(.work, .services, .why, .quality, .final-cta)[data-sky='on']::after { animation-play-state: running; }

.work      { --sky-x: 120px; --sky-y: 40px;  --drift-duration: 38s; --twinkle-duration: 7.4s; }
.services  { --sky-x: 260px; --sky-y: 520px; --drift-duration: 42s; --drift-delay: -10s; --twinkle-duration: 6.8s; --twinkle-delay: -1.5s; }
.why       { --sky-x: 40px;  --sky-y: 380px; --drift-duration: 34s; --drift-delay: -18s; --twinkle-duration: 7.9s; --twinkle-delay: -2.2s; }
.quality   { --sky-x: 520px; --sky-y: 300px; --drift-duration: 40s; --drift-delay: -6s; --twinkle-left: 0; --twinkle-right: auto; --twinkle-duration: 7.2s; --twinkle-delay: -4s; }
.final-cta { --sky-x: 700px; --sky-y: 470px; --drift-duration: 46s; --drift-delay: -24s; --twinkle-left: 26%; --twinkle-right: auto; --twinkle-duration: 8.4s; --twinkle-delay: -2.8s; }

@keyframes fx-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-54px, -36px, 0); } /* within the -60px bleed of the layer */
}
@keyframes fx-twinkle {
  0%   { opacity: .16; }
  45%  { opacity: .7; }
  60%  { opacity: .48; }
  100% { opacity: .85; }
}

/* Shooting star (span added by fx.js in a few violet sections). */
.fx-shoot {
  position: absolute;
  z-index: -1;
  top: var(--shoot-top, 18%);
  left: var(--shoot-left, 58%);
  width: 140px;
  height: 1.5px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(214, 198, 255, 0), rgba(236, 228, 255, .85) 85%, #fff);
  opacity: 0;
  transform: rotate(var(--shoot-angle, 18deg));
  transform-origin: left center;
  animation: fx-shoot var(--shoot-every, 14s) cubic-bezier(.45, 0, .25, 1) var(--shoot-delay, 3s) infinite;
  animation-play-state: paused;
}
:is(.work, .services, .why, .quality, .final-cta)[data-sky='on'] .fx-shoot { animation-play-state: running; }
@keyframes fx-shoot {
  0%, 90% { opacity: 0; transform: rotate(var(--shoot-angle, 18deg)) translateX(0) scaleX(.4); }
  92%     { opacity: .9; }
  100%    { opacity: 0; transform: rotate(var(--shoot-angle, 18deg)) translateX(260px) scaleX(1); }
}

/* ── Dividers: fade at the edges, faint violet at the centre ───────────── */
.work, .positioning, .deliverables, .why, .faq, .final-cta, .site-footer {
  border-image: linear-gradient(90deg, transparent 2%, rgba(196, 176, 255, .2) 30%, rgba(167, 139, 250, .34) 50%, rgba(196, 176, 255, .2) 70%, transparent 98%) 1;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.service-tile,
.community {
  border: 1px solid transparent;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(143, 99, 245, .11), transparent 55%) padding-box,
    url('../img/fx/dust-faint.svg') var(--card-dust, 0 0) / 420px 420px padding-box,
    linear-gradient(rgba(255, 255, 255, .018), rgba(255, 255, 255, .018)) padding-box,
    linear-gradient(var(--tone, var(--color-bg-elevated)), var(--tone, var(--color-bg-elevated))) padding-box,
    linear-gradient(155deg, rgba(214, 198, 255, .32), rgba(214, 198, 255, .07) 38%, rgba(214, 198, 255, .03) 66%, rgba(143, 99, 245, .3)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 26px 60px -38px rgba(0, 0, 0, .95);
}
.service-tile:nth-child(2) { --card-dust: 210px 130px; }

/* Grey section grid: warm surfaces, violet hairline frame, no stars. */
.deliverables__list {
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(214, 198, 255, .09), rgba(214, 198, 255, .09)) padding-box,
    linear-gradient(155deg, rgba(214, 198, 255, .28), rgba(214, 198, 255, .06) 45%, rgba(143, 99, 245, .24)) border-box;
}
.deliverable { background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 45%), var(--color-bg-elevated); }

/* Cursor spotlight (fx.js sets --mx/--my on hover; fine pointers only). */
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(var(--spot-size, 320px) circle at var(--mx, 50%) var(--my, 0%), rgba(143, 99, 245, var(--spot-a, .16)), rgba(143, 99, 245, calc(var(--spot-a, .16) / 3)) 40%, transparent 70%);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
[data-spot]:hover::after { opacity: 1; }
.service-tile > *, .deliverable > *, .community > * { position: relative; }

/* ── Header logo glint: a light band crosses the lettering now and then ── */
.site-header__brand { position: relative; display: inline-flex; }
.site-header__logo { filter: drop-shadow(0 0 10px rgba(143, 99, 245, .22)); }
.site-header__brand::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-mask: url('../img/brand/contundente-logo-160.webp') center / contain no-repeat;
  mask: url('../img/brand/contundente-logo-160.webp') center / contain no-repeat;
  mix-blend-mode: screen;
  animation: fx-logo-glint 9s cubic-bezier(.45, 0, .2, 1) 2.6s infinite;
}
.site-header__brand:hover::after,
.site-header__brand:focus-visible::after { animation: fx-logo-glint-once 1.1s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes fx-logo-glint {
  0%, 84% { background-position: 130% 0; }
  100%    { background-position: -30% 0; }
}
@keyframes fx-logo-glint-once {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* ── Reduced motion: keep the atmosphere, drop the movement ────────────── */
@media (prefers-reduced-motion: reduce) {
  :is(.work, .services, .why, .quality, .final-cta)::before, :is(.work, .services, .why, .quality, .final-cta)::after { animation: none; }
  :is(.work, .services, .why, .quality, .final-cta)::after { opacity: .5; }
  .fx-shoot { display: none; }
  .site-header__brand::after, .site-header__brand:hover::after { animation: none; background-position: 130% 0; }
  [data-spot]::after { transition: none; }
}
/* Narrow screens: no drift (saves GPU memory), smaller twinkle regions. */
@media (max-width: 767px) {
  :is(.work, .services, .why, .quality, .final-cta)::before { inset: 0; animation: none; opacity: .85; }
  :is(.work, .services, .why, .quality, .final-cta)::after { width: 90%; height: min(100%, 480px); }
}

/* ══ MOBILE POLISH v2 · 2026-10-04 ═════════════════════════════════════
   fx.css es la última hoja que se carga: estas reglas ganan en la cascada.
   Objetivo: un solo eje de lectura y menos espacio muerto en móvil.
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* 1. Secciones: 160px de vacío entre bloques bajaban a 128px. */
  .section { padding-block: 4rem; }

  /* 2. Hero: el enlace secundario se alinea con el texto, no al centro. */
  .nx-hero__inner { padding-block: 2rem 0; }
  .nx-hero__actions { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .nx-cta { width: 100%; justify-content: center; }
  .nx-link { width: auto; margin-inline: 0; justify-content: flex-start; min-height: 44px; }
  .nx-link__label { text-align: left; }

  /* 3. Footer compacto y con ritmo uniforme. */
  .site-footer { padding-top: 2.5rem; }
  .site-footer__grid { gap: 2rem; padding-bottom: 2.5rem; }
  .site-footer__logo { width: clamp(128px, 32vw, 150px); height: auto; }
  .site-footer__tagline, .site-footer__contact { margin-top: 1rem; }
  .site-footer__heading { margin-bottom: .5rem; }
  .site-footer__col a { min-height: 40px; font-size: .875rem; }
  .site-footer__base { padding-block: 1.25rem; }

  /* 4. WhatsApp más discreto y con espacio reservado al final del FAQ. */
  .whatsapp-float { width: 2.75rem; height: 2.75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); }
  .whatsapp-float::after { animation: none; }
  .faq { padding-bottom: 5rem; }
}