/* ============================================
   SEUWEB — SELLO DE NIEBLA (identidad tono 2)
   Negro, hueso, un acento ácido. El fantasma es el objeto.
   Display y cuerpo: Inter Tight (27-sep; antes Big Shoulders + Jakarta).
   Palabra destacada: Instrument Serif cursiva. Etiquetas: JetBrains Mono.
   Las dos primeras se declaran en `fonts-8831.css`.
   ============================================ */

@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/big-shoulders-display-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/big-shoulders-display-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  /* optional: con swap la mono llega tarde y mueve el hero. */
  font-display: optional;
  src: url("../assets/fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* 27-sep: la 8831 pasa a Inter Tight en todo (era Big Shoulders Display en
     los titulares y Plus Jakarta Sans en el cuerpo). Declaradas en
     `fonts-8831.css`. Big Shoulders es una condensada de cartel y peleaba
     con la referencia que quería Nico —la grotesca neutra y ancha de las
     stories—; Jakarta tenía demasiada personalidad para el cuerpo.
     La serif cursiva NO entra aquí: no es una fuente de sistema, es un
     recurso puntual para la palabra destacada. Va abajo, en `em`. */
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif-acento: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-hero: clamp(3.4rem, 9vw, 7.2rem);
  --text-section: clamp(2.4rem, 5.4vw, 4.6rem);
  --text-card-title: clamp(1.2rem, 2vw, 1.6rem);
  --text-body: 1.05rem;
  --text-small: 0.875rem;
  --text-micro: 0.72rem;
  --leading-tight: 0.88;
  --leading-snug: 1.15;
  --leading-body: 1.65;
  --tracking-display: -0.02em;
  --tracking-label: 0.18em;

  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-premium: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-ui: 180ms;
  --dur-reveal: 480ms;
  --dur-float: 5.2s;

  --space-section: clamp(3.25rem, 6.5vh, 5.5rem);
  --space-block: clamp(1.35rem, 3.2vw, 2.5rem);
  --space-hero-gap: clamp(1rem, 2.4vw, 1.65rem);
  --max-width: 78rem;
  --max-prose: 38rem;
  --nav-height: 4.25rem;
  --header-total: var(--nav-height);

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 9999px;

  --shadow-soft: 0 28px 80px -32px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 0 1px rgba(169, 212, 255, 0.35);
  --shadow-card: 0 18px 50px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--color-border);
  --shadow-glass: inset 0 1px 0 0 rgba(244, 241, 234, 0.06);
  --shadow-ghost: 0 24px 60px -20px rgba(0, 0, 0, 0.85);

  --z-preloader: 999;
  --z-progress: 80;
  --z-nav: 70;
  --z-fab: 60;
  --z-modal: 100;

  --color-transition: 0.35s var(--ease-out-expo);

  color-scheme: dark;

  --color-bg: #070708;
  --color-bg-elevated: #0c0c0e;
  --color-surface: #111114;
  --color-surface-elevated: #17171b;
  --color-surface-glass: rgba(7, 7, 8, 0.86);

  --color-text: #f4f1ea;
  --color-text-muted: #c5ced6;
  --color-text-faint: #b4bec8;

  /* Único acento: ácido #D6FF00. El ámbar #E8B86A queda fuera. */
  --color-accent: #D6FF00;
  --color-accent-light: #E7FF6A;
  --color-accent-hover: #E2FF33;
  --color-accent-contrast: #070708;

  --color-violet: #8e969e;
  --color-violet-light: #b4bec8;
  --color-violet-glow: rgba(214, 255, 0, 0.12);

  --color-gold: #D6FF00;
  --color-gold-light: #E7FF6A;
  --color-gold-glow: rgba(214, 255, 0, 0.18);

  --color-silver: #d9dde3;
  --color-border: rgba(244, 241, 234, 0.1);
  --color-border-strong: rgba(244, 241, 234, 0.2);
  --color-border-accent: rgba(214, 255, 0, 0.5);

  --color-glow: rgba(214, 255, 0, 0.14);
  --color-glow-strong: rgba(214, 255, 0, 0.32);
  --color-shadow: rgba(0, 0, 0, 0.72);

  --color-nav-bg: rgba(7, 7, 8, 0.92);
  --color-overlay: rgba(7, 7, 8, 0.94);
  --color-frame: #101013;
  --color-frame-border: rgba(244, 241, 234, 0.12);
  --color-hover-surface: rgba(169, 212, 255, 0.06);

  --gradient-hero: linear-gradient(180deg, rgba(7, 7, 8, 0.15) 0%, rgba(7, 7, 8, 0.72) 70%, #070708 100%);
  --gradient-vignette: radial-gradient(ellipse at 70% 40%, transparent 20%, rgba(7, 7, 8, 0.55) 70%, #070708 100%);
  --gradient-gold: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
  --gradient-cyan-violet: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
  --gradient-progress: linear-gradient(90deg, var(--color-accent), var(--color-text));
  --color-strike: rgba(180, 190, 200, 0.45);

  --robot-body: var(--color-surface-elevated);
  --robot-shell: var(--color-bg);
  --robot-stroke: var(--color-border-strong);
  --robot-ring: var(--color-accent);
  --robot-eye: var(--color-accent);
  --robot-eye-deep: var(--color-accent);
  --robot-thruster: var(--color-accent);

  --constelacion-dot: 169, 212, 255;
  --constelacion-line: 142, 150, 158;
  --constelacion-opacity: 0;

  --grain-opacity: 0.09;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --color-transition: 0s;
    --ease-out-expo: linear;
    --ease-premium: linear;
    --dur-ui: 0ms;
    --dur-reveal: 0ms;
    --dur-float: 0s;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-text: #ffffff;
    --color-text-muted: #e7edf2;
    --color-border: rgba(255, 255, 255, 0.28);
  }
}

/* Sello de niebla — capa de identidad. Cargada la última.
   Uso de la mascota: mínimo 24px, aire de 1/4 del ancho, solo sobre negro o casi negro. */

.page-grain {
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.constelacion,
.hero__constelacion,
#hero-canvas,
.hero__godrays,
.hero__atmosphere,
.hero__fog-1,
.hero__fog-2,
.hero__fog-3 {
  display: none !important;
}

.hero__photo {
  background-image: none !important;
  display: none !important;
}

.hero.hero--cinematic {
  background: #070708;
  min-height: 100svh;
}

.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  position: relative;
  z-index: 2;
}

.hero__mascot {
  margin: 0;
  justify-self: end;
  width: min(34rem, 100%);
  filter: drop-shadow(var(--shadow-ghost));
}

.hero__mascot img {
  display: block;
  width: 100%;
  height: auto;
}

.nav__mascot {
  width: 36px;
  height: 36px;
  display: block;
  flex: 0 0 auto;
  /* El sello ya no es cuadrado (28-sep: fuera placa y bordes), así que
     `cover` recortaría al fantasma. `contain` lo encaja entero. */
  object-fit: contain;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.mascota {
  position: relative;
}

.mascota--saluda img {
  animation: mascota-float var(--dur-float) var(--ease-in-out) infinite;
}

.mascota--senala {
  transition: transform var(--dur-ui) var(--ease-out-expo);
}

.nav__brand:hover .mascota--senala,
.nav__brand:focus-visible .mascota--senala {
  transform: rotate(-10deg) translateX(2px);
}

.mascota--lupa {
  outline: 1px solid var(--color-accent);
  outline-offset: 3px;
}

.mascota--desaparece {
  opacity: 0.15;
  transform: translateY(-18px) scale(0.96);
}

.mascota--perdido {
  width: min(12rem, 46vw);
  margin: 0 auto 1.25rem;
  transform: rotate(-8deg);
  filter: grayscale(0.2);
}

.mascota--exito {
  display: none;
  width: 4.5rem;
  height: auto;
  margin: 0 0 0.8rem;
}

html.mascota-exito .mascota--exito {
  display: block;
}

.mascota__shine {
  position: absolute;
  left: 28%;
  width: 34%;
  top: 31%;
  height: 14%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(243, 215, 168, 0.0) 40%, rgba(255, 248, 230, 0.9) 50%, transparent 62%);
  opacity: 0;
  mix-blend-mode: screen;
}

.mascota:hover .mascota__shine,
.mascota:focus-within .mascota__shine {
  opacity: 1;
  animation: glasses-shine 900ms var(--ease-out-expo);
}

@keyframes mascota-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes glasses-shine {
  from { transform: translateX(-30%); opacity: 0; }
  40% { opacity: 1; }
  to { transform: translateX(40%); opacity: 0; }
}

.section-label {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.section-num {
  font-family: var(--font-mono);
  color: var(--color-accent);
}

.section-num::before { content: "/"; }
.section-num::after { content: "/"; margin-right: 0.6rem; }

.btn {
  border-radius: 0;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.btn--primary,
.btn--primary:hover,
.btn--primary:focus-visible,
.btn--primary:active,
.nav .btn--primary {
  background: #D6FF00 !important;
  color: #070708 !important;
  border-color: transparent !important;
  box-shadow: 0 12px 32px -14px rgba(214, 255, 0, 0.35) !important;
}

.hero__title,
.section-title,
.nav__wordmark,
.footer__brand {
  font-family: var(--font-display);
  /* Inter Tight variable llega hasta 700. Con 800 el navegador engorda el
     glifo por su cuenta y sale sucio. */
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}

.hero .hero__title {
  font-size: clamp(2.15rem, 4.1vw, 4.15rem) !important;
  line-height: 0.9 !important;
  max-width: 100%;
}

.title-line {
  white-space: normal !important;
}

.hero__lead {
  font-size: clamp(1.05rem, 2.1vw, 1.28rem);
  line-height: 1.45;
}

.hero__sublead {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.55;
}

/* Estos 92px reservaban sitio para la barra fija de abajo. La barra se retiró
   el 28-sep (queda solo el FAB redondo, que flota y no ocupa flujo), así que
   el hueco sobraba: dejaba una franja muerta al final de cada página en móvil.
   El FAB sí necesita que el pie no quede justo debajo, pero de eso ya se
   encarga su propio `is-over-foot`. */

@media (max-width: 768px) {
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
}

.title-line--impact {
  background-image: linear-gradient(
    105deg,
    #f4f1ea 0%,
    #f4f1ea 22%,
    #D6FF00 55%,
    #E7FF6A 78%,
    #f4f1ea 100%
  );
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .title-line--impact {
    color: #D6FF00;
    -webkit-text-fill-color: unset;
    background-image: none;
  }
}

.section-title .text-gradient,
.text-gradient {
  background-image: linear-gradient(90deg, #D6FF00, #E7FF6A);
  background-size: 100% 100%;
  animation: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.sticky-cta {
  display: none;
  transform: translateY(102%);
  opacity: 0;
  pointer-events: none;
}

html .sticky-cta.is-visible {
  display: flex;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

html .sticky-cta.is-over-contact,
html.hero-passed .sticky-cta.is-over-contact {
  display: none;
  transform: translateY(102%);
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 821px) {
  html .sticky-cta.is-visible { display: none; }
}

.error-page {
  text-align: center;
}

@media (max-width: 767px) {
  .nav__cta-compact {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media (max-width: 860px) {
  .hero__layout {
    grid-template-columns: 1fr;
  }
  .hero__mascot {
    justify-self: center;
    width: min(18rem, 78vw);
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mascota--saluda img,
  .mascota__shine,
  .mascota--senala {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .hero__mascot {
    opacity: 1 !important;
  }
}

/* ── Scroll fluido en iPhone (Safari) ───────────────────────────────────
   Fuentes de jank eliminadas en táctil:
   1. Barra de progreso: scaleX(--p), no width/layout. Sin --glow dinámico.
   2. background-attachment:fixed → scroll en táctil (sin exigir .has-alive).
   3. Nav fixed + backdrop-filter → fondo sólido, sin blur (repaint caro).
   4. Process fill: scaleY(--process-fill 0–1), no height + transition.
   5. .cases-scroll: sin scroll-snap en móvil (pelea con el scroll vertical).
   6. overflow-x solo en body (html+body juntos meten rarezas en Safari). */
html {
  overflow-x: visible;
}
body {
  overflow-x: hidden;
}

.scroll-progress {
  width: 100% !important;
  transform: scaleX(var(--p, 0)) !important;
  transform-origin: left center;
  transition: none !important;
}

/* Process fill: compositor (scaleY) en vez de animar height */
.process-timeline {
  --process-fill: 0;
}
.process-timeline::after {
  height: var(--process-fill-max, calc(100% - 3.2rem)) !important;
  max-height: none !important;
  transform: scaleY(var(--process-fill, 0));
  transform-origin: top center;
  transition: none !important;
}

@media (hover: none), (pointer: coarse) {
  /* Fondo fijo: iOS repinta toda la página al desplazar */
  body {
    background-attachment: scroll !important;
  }
  /* Nav cristal + blur en touch = jank; fondo sólido opaco */
  .nav,
  .header.is-scrolled .nav {
    background: rgba(7, 7, 8, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Glow de la barra: box-shadow que depende de --glow fuerza paint */
  .scroll-progress {
    box-shadow: none !important;
  }
}

@media (max-width: 768px) {
  .cases-scroll {
    scroll-snap-type: none !important;
  }
}