/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg: #F2EBE0;
  --bg-soft: #ECE2D2;
  --ink: #1D1D1D;
  --ink-soft: #45413E;
  --mute: #7C766B;
  --line: rgba(29,29,29,0.12);
  --line-soft: rgba(29,29,29,0.07);

  /* Paleta funcional/Google — NO es la identidad de marca. Alimenta las
     bandas de puntuación del Auditor (.aud-tone-*, rojo/ambar/verde) y los
     mockups que representan literalmente a Google (anillo "Reseña en
     Google", estrellas). Se conserva intacta en FASE 2B.4: cambiarla
     confundiría "marca" con "estado/alerta" y desconectaría los mockups
     de los colores reales de Google que están representando. */
  --brand-blue: #3d7de0;
  --brand-green: #2fa360;
  --brand-yellow: #f0ac00;
  --brand-red: #c93e28;

  /* Identidad Prestigio Local — FASE 2B.4 */
  --accent: #77252D;      /* Borgoña — firma de marca */
  --accent-dim: #5C1D23;  /* Borgoña oscurecido — 10.7:1 sobre Marfil, AA+ */
  --accent-2: #77252D;    /* token no usado actualmente; alineado por coherencia */

  --cream: #F2EBE0;
  --cream-mute: rgba(242,235,224,0.68);
  --ink-line: rgba(242,235,224,0.16);

  --font-display: "Archivo", "Inter", sans-serif;
  --font-serif: "Fraunces", "Archivo", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 84px;
  --radius: 18px;
  --radius-sm: 10px;
  --container-w: 1320px;
}

/* FASE 2B.4 — Borgoña (#77252D) es demasiado oscura para usarse como texto
   sobre fondo Carbón (contraste medido: 1.68:1, no pasa AA). En las
   secciones oscuras del sitio ([data-nav-dark]: Reputación, NFC, Tours,
   CTA build, CTA final, footer) se redefinen --accent/--accent-dim a un
   tono de Borgoña aclarado (4.7:1 sobre Carbón, AA) SOLO dentro de ese
   contexto, vía la cascada normal de custom properties — no se toca
   ningún selector individual ni se cambian los 3 colores base. */
[data-nav-dark] {
  --accent: #C17179;
  --accent-dim: #C17179;
}

@property --mesh-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.02em; font-family: var(--font-display); }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--accent); color: var(--cream); }

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

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--ink); color: var(--cream);
  border-radius: 8px; font-weight: 600; transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { max-width: var(--container-w); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); width: 100%; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kicker {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-dim);
  font-weight: 600;
  margin-bottom: .9rem;
  display: block;
}
.kicker-invert { color: var(--accent); }

.section-title {
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  font-weight: 800;
  max-width: 20ch;
  margin-bottom: 1.1rem;
}
.section-title em { color: var(--accent); font-style: normal; }
.section-text {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--mute);
  max-width: 58ch;
  margin-bottom: 1rem;
}

section { position: relative; }

/* Motif — recurring orbital-rings graphic language */
.motif {
  position: absolute; z-index: 0; pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: .6;
  width: min(70vw, 900px); height: min(70vw, 900px);
  opacity: .5;
  animation: motifSpin 90s linear infinite;
}
@keyframes motifSpin { to { transform: rotate(360deg); } }
.motif-hero { color: var(--ink); opacity: .06; right: -12%; top: 6%; }
.motif-scene, .motif-tours, .motif-cta, .motif-cta-build { color: var(--cream); opacity: .07; left: -18%; bottom: -14%; }
.motif-case { color: var(--ink); opacity: .05; right: -16%; top: -10%; }

/* =============================================================
   4. Buttons & links
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(11,11,12,0.08), 0 1px 3px rgba(11,11,12,0.06);
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background-color .3s, color .3s;
}
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 45px rgba(11,11,12,0.22), 0 10px 20px rgba(119,37,45,0.18); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.cta-final .btn-ghost { color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--ink-line); }
.cta-final .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--cream); }
.btn-lg { padding: 1.1rem 2rem; font-size: 1rem; }
.btn:active { transform: translateY(-1px); transition-duration: .12s; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.text-link {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; font-size: .98rem; padding-bottom: .25rem;
  border-bottom: 1.5px solid var(--line);
  transition: gap .35s var(--ease-out), border-color .3s, color .3s;
}
.text-link::after { content: ""; position: absolute; inset: -12px; }
.text-link svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform .35s var(--ease-soft); }
.text-link:hover { gap: .95rem; border-color: var(--ink); }
.text-link:hover svg { transform: translateX(3px); }

.has-magnetic { display: inline-flex; position: relative; isolation: isolate; }
.magnetic-inner { display: inline-flex; align-items: center; justify-content: center; gap: inherit; will-change: transform; transition: transform .8s var(--ease-soft); }

/* =============================================================
   5. Splash
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--ink);
  display: grid; place-items: center;
  transition: opacity .8s var(--ease-out), clip-path 1s var(--ease-out);
  animation: splashSafety .01s 4.2s forwards;
}
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
/* FASE 2B.7A: la estrella (nunca fue el isotipo aprobado) se sustituye
   por el wordmark real, grande y centrado — la primera impresión debe
   leerse "PRESTIGIO LOCAL", no un icono ambiguo. Solo fundido + leve
   elevación + escala mínima, sin giros ni parpadeos. */
.splash-logo {
  width: min(58vw, 460px); height: auto;
  opacity: 0; transform: translateY(10px) scale(.97);
  animation: splashReveal 1.1s var(--ease-out) forwards;
}
@keyframes splashReveal { to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 560px) {
  .splash-logo { width: min(72vw, 320px); }
}

/* =============================================================
   6. Scroll progress
   ============================================================= */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 999; background: transparent; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--accent); transform-origin: 0 0; transform: scaleX(0); }

/* =============================================================
   7. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  transform: translateY(0);
  transition: transform .4s var(--ease-out);
}
.nav.is-scrolled {
  background: rgb(253, 253, 252);
  box-shadow: 0 1px 0 var(--line);
}
.nav.is-hidden { transform: translateY(-100%); }
/* Section-aware tone: nav echoes the light/dark rhythm of whatever is scrolled beneath it. */
.nav.is-scrolled.is-dark { background: var(--ink); box-shadow: 0 1px 0 var(--ink-line); }
.nav.is-dark .nav-logo-word { color: var(--cream); }
.nav.is-dark .nav-link { color: var(--cream); }
.nav.is-dark .nav-clock-city { color: var(--cream); }
.nav.is-dark .nav-clock-time { color: var(--cream-mute); }
.nav.is-dark .nav-whatsapp svg { fill: var(--cream); }
.nav.is-dark .nav-burger span { background: var(--cream); }
.nav.is-dark .btn-primary.nav-cta { background: var(--cream); color: var(--ink); }
.nav-inner { display: flex; align-items: center; gap: 1.5rem; width: 100%; }

.nav-logo { display: inline-flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.nav-logo-word { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; font-size: 1.05rem; transition: color .35s; }

/* Prestigio Local — logo bicolor (PNG/WEBP con transparencia, "i" borgoña fija en el propio archivo).
   Dos <img> superpuestos con la misma caja (misma relación de aspecto en origen, 2000x500),
   se alternan por CSS reutilizando el mismo .nav.is-dark que ya gestiona el resto del header
   — sin salto de layout ni lógica de scroll nueva. FASE 2B.7A: se retiró la
   estrella que acompañaba al logo (nunca fue el isotipo aprobado) y se
   aumentó el tamaño (antes 26px/104px de alto/ancho) para dar más
   presencia real a la marca en la cabecera. */
.nav-logo-word-img { position: relative; display: inline-flex; align-items: center; height: 36px; }
.nav-logo-word-img img { height: 36px; width: auto; display: block; }
/* El toggle claro/oscuro solo aplica dentro del header (.nav); el footer
   inserta únicamente logo-img-light y no debe verse afectado por esto. */
.nav .nav-logo-word-img .logo-img-light { display: none; }
.nav.is-dark .nav-logo-word-img .logo-img-dark { display: none; }
.nav.is-dark .nav-logo-word-img .logo-img-light { display: inline-block; }
@media (max-width: 480px) {
  .nav-logo-word-img, .nav-logo-word-img img { height: 27px; }
}

.nav-clock {
  display: none;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em;
  color: var(--mute);
  flex-direction: column; line-height: 1.3;
}
.nav-clock-city { font-weight: 600; color: var(--ink-soft); transition: color .35s; }
/* FASE 2B.5 — el breakpoint original (960px) no dejaba sitio real para
   reloj + 5 enlaces + WhatsApp + CTA: el enlace "Comprueba tu negocio"
   partía su texto en dos líneas entre ~960px y ~1260px (comprobado en
   vivo). Se sube a 1280px, el primer ancho donde todo cabe en una sola
   línea con margen, y se sube igual .nav-burger más abajo para que la
   hamburguesa siga cubriendo exactamente ese mismo rango sin hueco. */
@media (min-width: 1280px) { .nav-clock { display: flex; } }

.nav-links { display: none; align-items: center; gap: 1.9rem; margin-inline: auto; }
@media (min-width: 1280px) { .nav-links { display: flex; } }
.nav-link { position: relative; font-size: .92rem; font-weight: 500; padding: .3rem 0; transition: color .35s; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Submenú "Servicios" (desktop) ----------
   Visibilidad 100% CSS (:hover / :focus-within), sin JS de mostrar/ocultar:
   evita cualquier parpadeo o carrera de temporizadores al mover el cursor
   en diagonal desde el trigger al panel. El pseudo-elemento ::before del
   panel rellena el hueco vertical entre trigger y panel (sin margen real
   entre ambos) para que ese movimiento diagonal nunca "salga" del área
   con :hover activo. main.js solo sincroniza aria-expanded (accesibilidad),
   nunca decide si se ve o no. */
.nav-services { position: relative; }
.nav-services-trigger { display: inline-flex; align-items: center; gap: .32rem; }
.nav-services-caret { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.2; fill: none; transition: transform .25s var(--ease-out); }
.nav-services:hover .nav-services-caret,
.nav-services:focus-within .nav-services-caret { transform: rotate(180deg); }

.nav-services-panel {
  position: absolute; top: 100%; left: 0; margin-top: 1.1rem;
  width: min(560px, calc(100vw - 3rem));
  background: var(--bg); border-radius: var(--radius);
  box-shadow: 0 30px 70px -18px rgba(11,11,12,.32), 0 0 0 1px var(--line-soft);
  padding: .85rem; z-index: 5;
  display: grid; grid-template-columns: 1fr 1fr; gap: .05rem .4rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s linear .2s;
}
.nav-services-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -1.1rem; height: 1.1rem; }
.nav-services:hover .nav-services-panel,
.nav-services:focus-within .nav-services-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s;
}

.nav-services-item { display: block; padding: .6rem .7rem; border-radius: 10px; text-decoration: none; }
.nav-services-item:hover, .nav-services-item:focus-visible { background: var(--line-soft); }
.nav-services-item-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: var(--ink); margin-bottom: .2rem; }
.nav-services-item-desc { display: block; font-family: var(--font-body); font-size: .73rem; line-height: 1.35; color: var(--mute); }
.nav-services-viewall { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .7rem; }
.nav-services-viewall .nav-services-item-title {
  font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-dim); margin-bottom: 0;
}

.nav-actions { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.nav-whatsapp {
  display: none; width: 40px; height: 40px; border-radius: 50%;
  align-items: center; justify-content: center; background: var(--bg-soft);
  transition: background .3s, transform .3s var(--ease-soft);
}
.nav-whatsapp svg { width: 19px; height: 19px; fill: var(--ink-soft); transition: fill .35s; }
.nav-whatsapp:hover { background: var(--accent); transform: translateY(-2px); }
@media (min-width: 720px) { .nav-whatsapp { display: inline-flex; } }
.nav-cta { display: none; }
@media (min-width: 620px) { .nav-cta { display: inline-flex; } }

.nav-burger {
  width: 42px; height: 42px; display: grid; place-items: center; gap: 4px;
  border-radius: 50%;
}
@media (min-width: 1280px) { .nav-burger { display: none; } }
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .35s var(--ease-out), opacity .35s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 490;
  background: var(--ink); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 1.8rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s var(--ease-soft);
  /* PROMPT 7N-cierre — a alturas de viewport muy reducidas (p.ej. zoom
     real 200%), el contenido centrado puede superar la altura de la
     caja. overflow-y por si solo no basta: un flex centrado que
     desborda recorta por igual arriba y abajo, y scrollTop no puede
     bajar de 0, así que el recorte superior queda inalcanzable.
     "safe center" (Box Alignment L3) hace que, si no cabe, se alinee
     desde el principio en vez de centrarse — nada queda inaccesible.
     En el caso normal (cabe de sobra) se sigue viendo centrado. */
  overflow-y: auto;
}
.nav-mobile[data-open="true"] { clip-path: inset(0); }
/* AJUSTE FINO — menú móvil más compacto y uniforme: los enlaces de
   nivel 1 pasaron de 2rem/700 (tamaño de titular) a un tamaño de menú
   normal; gap general de 1.6rem a .7rem para que quepa todo con menos
   scroll al desplegar Servicios. */
.nav-mobile nav { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.nav-mobile-link { font-family: var(--font-display); font-size: clamp(1.2rem, 5.5vw, 1.4rem); font-weight: 700; padding: .4rem 0; }

/* ---------- Submenú "Servicios" (móvil, acordeón dentro del propio overlay) ----------
   Nivel 2: mismo font-display que el nivel 1 (misma familia, para que no
   parezca "otro menú"), pero más pequeño, peso medio y color cream-mute
   (marfil suave) en vez de blanco — así la jerarquía 1/2 se nota por
   tamaño y tono, no por un color llamativo distinto. */
.nav-mobile-group { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.nav-mobile-services-trigger { display: inline-flex; align-items: center; gap: .4rem; background: none; border: none; font: inherit; color: inherit; cursor: pointer; }
.nav-mobile-caret { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.2; fill: none; transition: transform .25s var(--ease-out); }
.nav-mobile-services-trigger[aria-expanded="true"] .nav-mobile-caret { transform: rotate(180deg); }
.nav-mobile-services { display: flex; flex-direction: column; align-items: center; }
.nav-mobile-services[hidden] { display: none; }
.nav-mobile-sublink {
  font-family: var(--font-display); font-size: .92rem; font-weight: 500;
  color: var(--cream-mute); padding: .28rem 1rem; min-height: 44px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.nav-mobile-sublink:hover, .nav-mobile-sublink:focus-visible { color: var(--cream); }

.nav-mobile-foot { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.nav-mobile-wa { font-family: var(--font-mono); color: var(--cream-mute); font-size: .85rem; }

/* =============================================================
   8. HERO — editorial composition
   ============================================================= */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 1rem);
  padding-bottom: 4rem;
  overflow: clip;
  background: var(--bg);
}

.hero-obj { position: absolute; z-index: 1; pointer-events: none; }
.hero-obj-card { top: 25%; right: 2%; transform: rotate(3deg); display: none; }
@media (min-width: 1180px) { .hero-obj-card { display: block; } }

/* FASE 2B.7A: marca de agua editorial — el wordmark real, muy grande y
   casi imperceptible, a la derecha del Hero. Puramente atmosférico: no
   debe competir con el H1 ni con la tarjeta mock. */
.hero-watermark {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; right: -10%;
  width: min(62vw, 1300px); height: auto;
  transform: translateY(-50%);
  opacity: .045;
}
@media (max-width: 900px) {
  .hero-watermark { width: 130vw; right: -35%; opacity: .04; }
}

.mock-card {
  width: min(260px, 60vw);
  background: var(--bg); border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  box-shadow: 0 30px 70px -20px rgba(11,11,12,.28), 0 0 0 1px var(--line-soft);
}
.mock-card-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.mock-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800;
}
.mock-avatar svg { width: 16px; height: 16px; fill: currentColor; }
.mock-avatar-mute { background: rgba(245,239,225,.14); color: var(--cream-mute); }
.mock-card-lines { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.mock-line { display: block; height: 8px; border-radius: 4px; background: var(--line); }
.mock-line-w60 { width: 62%; }
.mock-line-w40 { width: 38%; background: var(--line-soft); }
.mock-stars { display: flex; align-items: center; gap: 3px; margin-bottom: .55rem; }
.mock-stars svg { width: 15px; height: 15px; fill: var(--brand-yellow); }
.mock-rating { font-family: var(--font-mono); font-weight: 700; margin-left: .4rem; font-size: .85rem; color: var(--ink-soft); }
.mock-reviews { font-size: .78rem; color: var(--mute); font-family: var(--font-mono); }
.mock-concept-label { display: block; font-family: var(--font-body); font-weight: 600; font-size: .85rem; color: var(--ink-soft); margin-bottom: .15rem; }
.mock-card-eyebrow { margin-bottom: .7rem; }
/* Tira de miniaturas: sugiere que hay una galería/ficha viva detrás del
   texto, sin pretender ser fotos reales de un negocio que no existe —
   por eso son manchas de color, no iconos ni fotos ajenas reutilizadas. */
.mock-photos { display: flex; gap: .32rem; margin-top: .75rem; }
.mock-photos span { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.mock-photos span:nth-child(1) { background: linear-gradient(150deg, #D8B79A 0%, #77252D 130%); }
.mock-photos span:nth-child(2) { background: linear-gradient(150deg, #C9CDB0 0%, #5C6B4F 130%); }
.mock-photos span:nth-child(3) { background: linear-gradient(150deg, #EAD9B8 0%, #C17179 130%); }
.mock-photos span:nth-child(4) { background: var(--line); }

/* Real product recreation — the physical RESEÑALO NFC review card */
.gr-card {
  position: relative; width: 128px; padding: 14px 12px 12px;
  background: #fff; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 0 25px 50px -15px rgba(11,11,12,.35), 0 0 0 1px rgba(11,11,12,.06);
}
.gr-card-ring { width: 46px; height: 46px; }
.gr-card-label { font-family: var(--font-body); font-weight: 600; font-size: .68rem; color: var(--ink-soft); text-align: center; line-height: 1.2; }
.gr-card-stars { display: flex; gap: 1px; }
.gr-card-stars svg { width: 11px; height: 11px; fill: var(--brand-yellow); }
.gr-card-wave {
  position: absolute; inset: 0; border-radius: 16px;
  border: 1.5px solid var(--brand-blue); opacity: 0;
  animation: nfcWave 2.6s var(--ease-out) infinite;
}
.gr-card-wave:nth-child(2) { animation-delay: .5s; border-color: var(--brand-red); }
.gr-card-wave:nth-child(3) { animation-delay: 1s; border-color: var(--brand-yellow); }
@keyframes nfcWave { 0% { transform: scale(.85); opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } }

.hero-inner { position: relative; z-index: 2; width: 100%; min-width: 0; }
.hero-kicker { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; color: var(--accent-dim); font-weight: 600; margin-bottom: 1.6rem; }

.hero-title { margin-bottom: 1.4rem; max-width: 93%; }
.hl-mask { display: block; overflow: hidden; padding-right: .1em; margin-right: -.1em; }
.hl-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 6.4vw, 5.6rem);
  line-height: .96;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transform: translateY(105%);
  will-change: transform;
}
/* FASE 2B.7 — la línea "REPUTACIÓN." es la que debe llevarse el
   protagonismo visual del H1 (pedido explícito de Dirección): en vez
   del patrón anterior (línea de acento más pequeña que el resto), aquí
   es la más grande de las tres, además de llevar el tratamiento serif
   cursivo en Borgoña — tamaño, color y tipografía trabajando juntos en
   la misma dirección en vez de compensarse. */
.hl-line.hl-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  color: var(--accent);
  font-size: clamp(2.6rem, 7.6vw, 6.8rem);
}
.is-ready .hl-line, .no-gsap .hl-line { transform: translateY(0); transition: transform 1s var(--ease-out); }

/* Segunda idea principal del Hero ("Nosotros hacemos que trabaje a tu
   favor.") — tratamiento editorial propio, intermedio entre el H1 y el
   texto de apoyo, para que lea como una frase con peso propio y no
   como una continuación del párrafo explicativo de abajo. */
.hero-lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.25; color: var(--ink);
  max-width: 30ch; margin-bottom: 1.1rem;
}

.hero-sub { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--mute); max-width: 44ch; margin-bottom: 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.8rem clamp(1.6rem, 4vw, 3.2rem); }
.hero-actions-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.hero-trust { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--mute); margin-top: 1.2rem; }

/* FASE 2B.7B: sello circular — corrección sobre 2B.7A. Dirección lo veía
   "vacío" (104px, texto de anillo ilegible a ese tamaño, centro con solo
   una flecha) y "abajo" (perdido al final de la fila de acciones, que en
   un Hero centrado verticalmente cae ya muy bajo — ~80% del viewport).
   Fix en dos partes:
   1) Mucho más grande y con mensaje real y legible en el centro (el
      anillo pasa a ser refuerzo decorativo, no el único portador del
      copy).
   2) En tablet/móvil (<1024px) sigue en flujo normal dentro de
      .hero-actions — cero riesgo de solape, heredado del wrap del flex.
      En desktop (≥1024px) se saca del flujo y se ancla en position:
      absolute directamente a .hero (que ya es position:relative vía la
      regla base "section"), a media altura real del viewport y no al
      final de la columna de texto — igual que .hero-obj-card, con el
      que comparte referencia. Verificado sin solape con H1/mock en
      1366/1440/1536/1600 (H1 termina ~424px de 900 a 1440px; el sello
      arranca ~445px). */
.hero-seal {
  position: relative; flex-shrink: 0;
  width: 140px; height: 140px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 32%, #8c2e37 0%, var(--accent) 62%, #641c22 100%);
  color: var(--cream);
  text-decoration: none;
  box-shadow: 0 22px 50px -16px rgba(119, 37, 45, .55), inset 0 0 0 1px rgba(242, 235, 224, .14);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.hero-seal:hover, .hero-seal:focus-visible { transform: scale(1.05); box-shadow: 0 26px 56px -14px rgba(119, 37, 45, .65), inset 0 0 0 1px rgba(242, 235, 224, .2); }
.hero-seal:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
@media (min-width: 640px) { .hero-seal { width: 166px; height: 166px; } }
@media (min-width: 1024px) {
  .hero-seal {
    width: 196px; height: 196px;
    position: absolute; z-index: 2; top: clamp(460px, 74%, calc(100% - 120px)); right: 4%; left: auto;
    transform: translateY(-50%);
  }
  .hero-seal:hover, .hero-seal:focus-visible { transform: translateY(-50%) scale(1.05); }
}
.hero-seal-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: heroSealSpin 28s linear infinite;
}
.hero-seal-ring-text { font-family: var(--font-mono); font-size: 9.8px; font-weight: 600; letter-spacing: .06em; fill: rgba(242,235,224,.78); text-transform: uppercase; }
@keyframes heroSealSpin { to { transform: rotate(360deg); } }
.hero-seal-center {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .16rem; width: 82%; text-align: center;
}
/* FASE — jerarquía de 3 niveles: "PULSA AQUÍ" (llamada directa, la más
   fuerte) > "ANALIZA GRATIS TU NEGOCIO" (qué obtienes) > "RESULTADO EN
   SEGUNDOS" (apoyo, remite al mismo texto que ya usa .hero-trust). */
.hero-seal-center-main {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1rem, 1.85vw, 1.4rem); letter-spacing: .01em; line-height: 1.02;
  white-space: nowrap;
}
.hero-seal-center-sub {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(.58rem, 1.05vw, .74rem); letter-spacing: .02em; line-height: 1.22;
  color: var(--cream);
  margin-top: .05rem;
}
.hero-seal-center-micro {
  font-family: var(--font-mono); text-transform: uppercase;
  font-size: clamp(.44rem, .78vw, .54rem); letter-spacing: .05em; line-height: 1.2;
  color: rgba(242,235,224,.8);
  margin-top: .32rem;
}
@media (max-width: 639px) {
  .hero-seal-ring-text { font-size: 8.6px; }
  .hero-seal-center-sub br { display: none; }
}

/* Nav: mismo lenguaje "premium" en dorado a escala de nav-link — se
   mantiene junto al sello porque es sutil (borde fino, sin relleno
   solido) y no compite con el, solo refuerza el mismo mensaje arriba. */
.nav-link-audit {
  padding: .35rem .9rem; border: 1px solid rgba(119,37,45,.4); border-radius: 999px;
  transition: background .3s, border-color .3s;
}
.nav-link-audit::after { display: none; }
.nav-link-audit:hover { background: rgba(119,37,45,.1); border-color: var(--accent); }

/* Nav: mismo lenguaje de "ticket" dorado, a escala de nav-link, para que
   destaque frente a Servicios/Proceso/Casos de éxito/Contacto. */
.nav-link-audit {
  padding: .35rem .9rem; border: 1px solid rgba(119,37,45,.4); border-radius: 999px;
  transition: background .3s, border-color .3s;
}
.nav-link-audit::after { display: none; }
.nav-link-audit:hover { background: rgba(119,37,45,.1); border-color: var(--accent); }

.hero-scroll {
  position: absolute; left: 50%; bottom: 2rem; translate: -50% 0; z-index: 2;
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; color: var(--mute);
}
.hero-scroll svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; animation: scrollBob 2s var(--ease-soft) infinite; }
@keyframes scrollBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* =============================================================
   9. Ticker
   ============================================================= */
.ticker {
  background: var(--ink); color: var(--cream-mute);
  padding-block: .9rem;
  overflow: hidden; position: relative;
}
.ticker-track { display: inline-flex; gap: .9rem; white-space: nowrap; will-change: transform; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; }
.ticker-dot { color: var(--accent); }

/* =============================================================
   10. SCENES — pinned cinematic sections
   ============================================================= */
.scene {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--cream);
  overflow: clip;
  padding-block: 5rem;
  /* Explicit stacking level: every <section> is position:relative (for the motif SVGs),
     so without this, later sections at the default z-index:auto paint over this element
     while it's GSAP-pinned (position:fixed) and the page scrolls underneath it. */
  z-index: 50;
}
.scene-inner { position: relative; z-index: 1; width: 100%; max-width: 1100px; padding-inline: clamp(1.25rem, 5vw, 3rem); text-align: center; }

.scene-ghost-text {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: -1;
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(4rem, 18vw, 15rem); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(245,239,225,0.06);
  pointer-events: none; user-select: none;
}

.scene-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.scene-kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.2px solid currentColor; flex-shrink: 0;
}
.scene-text { display: flex; flex-direction: column; gap: .3rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.scene-line {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 7vw, 5.2rem); line-height: 1.02; letter-spacing: -0.01em;
}
.scene-line-out { font-family: var(--font-serif); font-style: italic; font-weight: 500; text-transform: none; color: var(--accent); font-size: clamp(1.4rem, 3.4vw, 2.4rem); margin-top: 1rem; }

.scene-cards { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(1rem, 3vw, 2.2rem); perspective: 1400px; }
.scene-card {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1.6rem 1.4rem; border-radius: var(--radius);
  background: rgba(245,239,225,.05); border: 1px solid var(--ink-line);
  min-width: 150px;
  will-change: transform, filter;
}
/* Depth of field: A and B sit further back — smaller, blurred, dimmer — C is in sharp focus, foreground. */
.scene-card-a { transform: translateY(0) scale(.88); filter: blur(1.5px); opacity: .8; }
.scene-card-b { transform: translateY(-.6rem) scale(.94); filter: blur(.5px); opacity: .9; }
.scene-card-c {
  background: rgba(119,37,45,.08); border-color: rgba(119,37,45,.4);
  transform: translateY(-1.2rem) scale(1.08); z-index: 2;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
}
.scene-card-name { font-family: var(--font-mono); font-size: .8rem; color: var(--cream-mute); }
.scene-card-rating { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.scene-card-rating em { font-style: normal; color: var(--brand-yellow); font-size: 1rem; }
.scene-card-rating-win { color: var(--accent); }

.scene-nfc-visual { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 4.5rem); }
.scene-stars { display: flex; gap: .5rem; }
.scene-stars svg { width: clamp(28px, 4vw, 44px); height: clamp(28px, 4vw, 44px); fill: var(--brand-yellow); }

.scene-nfc-visual { perspective: 1300px; }

/* Short viewports (common laptop window heights): tighten the vertical rhythm so the
   scene's kicker, lines and visual all fit without being clipped by `.scene { overflow: clip }`. */
@media (max-height: 760px) {
  .scene-kicker { margin-bottom: clamp(1rem, 3vw, 1.6rem); }
  .scene-text { gap: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
  .scene-line { font-size: clamp(1.6rem, 5.5vw, 3.6rem); }
  .scene-line-out { font-size: clamp(1.1rem, 2.6vw, 1.7rem); margin-top: .5rem; }
}
.nfc-demo-card { position: relative; }
.nfc-demo-card .gr-card {
  transform: rotateY(-9deg) rotateX(4deg);
  box-shadow: 28px 38px 70px -22px rgba(11,11,12,.55), 0 0 0 1px rgba(11,11,12,.06), 0 0 70px -14px rgba(119,37,45,.3);
}
.gr-card-photo {
  width: 148px; aspect-ratio: 315 / 528; padding: 0;
  background-size: cover; background-position: center;
}
.scene-cross-ring {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: -1;
  width: min(90vw, 640px); height: min(90vw, 640px);
  fill: none; stroke: var(--accent); stroke-width: .5; opacity: 0;
  pointer-events: none;
}
.nfc-card-frame-ring {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 210px; height: 210px; z-index: -1;
  fill: none; stroke: var(--accent-dim); stroke-width: .6; opacity: .45;
  animation: motifSpin 70s linear infinite;
}
/* Se probó una segunda pieza (adhesivo circular) asomando detrás de la
   tarjeta; en la composición real, con el tilt 3D de .gr-card y las
   sombras, quedaba mal integrada — se retiró. Solo tarjeta + móvil. */
.gr-card-photo-tag {
  position: absolute; left: 50%; bottom: -1.7rem; translate: -50% 0;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cream-mute); white-space: nowrap; pointer-events: none;
}
.nfc-demo-card::before {
  content: ""; position: absolute; inset: -45% -35%; z-index: -1;
  background: radial-gradient(circle, rgba(119,37,45,.18), transparent 65%);
  filter: blur(24px); pointer-events: none;
}

.nfc-demo-phone { width: 100px; height: 196px; border-radius: 24px; background: rgba(245,239,225,.06); border: 1px solid var(--ink-line); padding: 9px; position: relative; z-index: 1; }
.nfc-demo-notch { width: 34px; height: 5px; border-radius: 3px; background: rgba(245,239,225,.25); margin-inline: auto; margin-bottom: 7px; }
.nfc-demo-screen {
  height: calc(100% - 16px); border-radius: 16px; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  padding: .7rem;
}
.nfc-compose { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.nfc-compose-stars { color: var(--brand-yellow); font-size: .9rem; letter-spacing: 1px; }
.nfc-compose-line { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--line); }
.nfc-compose-line-short { width: 65%; }
.nfc-compose-btn {
  margin-top: .3rem; align-self: stretch; text-align: center; font-size: .62rem; font-weight: 700;
  color: #fff; background: var(--brand-blue); border-radius: 999px; padding: .4rem .5rem;
}

/* =============================================================
   10b. AUDITOR BRIDGE — puerta de entrada gratuita (PROMPT 7I-B)
   Sección clara, no pineada, entre Reputación y NFC. Reutiliza .motif,
   .kicker, .section-title y .btn-primary — solo se declara aquí el
   layout imprescindible que no existe ya en el sistema.
   ============================================================= */
.auditor-bridge { position: relative; background: var(--bg); padding-block: clamp(4.5rem, 10vw, 7.5rem); overflow: clip; }
.motif-auditor-bridge { color: var(--ink); opacity: .06; right: -14%; top: -10%; }
.auditor-bridge-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; }
@media (min-width: 860px) { .auditor-bridge-grid { grid-template-columns: 1.15fr 0.85fr; } }
.auditor-bridge-body { max-width: 52ch; }
.auditor-bridge-title { font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 16ch; }
.auditor-bridge-line {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  color: var(--accent); font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin-bottom: 1.3rem;
}
.auditor-bridge-desc { font-size: 1rem; color: var(--mute); max-width: 48ch; margin-bottom: 1.8rem; }
.auditor-bridge-actions { margin-bottom: 1.1rem; }
.auditor-bridge-micro { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--mute); }

/* =============================================================
   11. FLOW — editorial rows (replaces card grids)
   ============================================================= */
.flow-section { background: var(--bg); padding-block: clamp(4.5rem, 9vw, 7rem); }
.flow-list { display: flex; flex-direction: column; margin-top: 1rem; }
.flow-list-tight { margin-top: clamp(3rem, 6vw, 4.5rem); }
.flow-item {
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem;
  padding-block: 1.8rem; border-top: 1px solid var(--line);
  align-items: baseline;
  transition: padding-left .4s var(--ease-out);
}
.flow-item:last-child { border-bottom: 1px solid var(--line); }
.flow-item:hover { padding-left: .6rem; }
.flow-num { font-family: var(--font-mono); font-size: .85rem; color: var(--accent-dim); font-weight: 700; }
.flow-item h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); margin-bottom: .4rem; }
.flow-item p { color: var(--mute); max-width: 60ch; font-size: .95rem; }
@media (min-width: 720px) { .flow-item { grid-template-columns: 90px 1fr; } }

.flow-extra { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 780px) { .flow-extra { grid-template-columns: repeat(2, 1fr); } }
.flow-extra-col h4 { font-size: 1.15rem; margin-bottom: .5rem; }
.flow-extra-col p { color: var(--mute); font-size: .95rem; max-width: 46ch; }
.flow-extra-col strong { color: var(--ink); }

/* =============================================================
   11b. SERVICIOS — arquitectura general de la marca (FASE 2B.7A)
   Fondo Carbón (misma familia visual que las escenas oscuras),
   marca de agua gigante muy tenue y cuatro filas editoriales
   (número · título · descripción · flecha), reutilizando el
   lenguaje ya establecido en FLOW (.flow-item) pero como enlaces
   completos a cada sección real.
   ============================================================= */
.services-section {
  position: relative; overflow: clip; background: var(--ink); color: var(--cream);
  scroll-margin-top: var(--nav-h);
  padding-top: clamp(1.25rem, 3vw, 2rem); padding-bottom: clamp(5rem, 10vw, 8rem);
}
.services-section .section-text { color: var(--cream-mute); }
.services-watermark {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: -16%; transform: translateY(-50%);
  width: min(72vw, 1500px); height: auto; opacity: .05;
}
.services-inner { position: relative; z-index: 1; }

.services-list { display: flex; flex-direction: column; margin-top: clamp(2.5rem, 5vw, 4rem); }
.services-row {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.5rem, 4vw, 2.2rem);
  border-top: 1px solid var(--ink-line);
  text-decoration: none; color: inherit;
  transition: padding-left .4s var(--ease-out), background .4s var(--ease-out);
}
.services-list .services-row:last-child { border-bottom: 1px solid var(--ink-line); }
.services-row:hover, .services-row:focus-visible { padding-left: .8rem; background: rgba(245,239,225,.03); }
.services-row-num { font-family: var(--font-mono); font-size: .85rem; color: var(--accent-dim); font-weight: 700; }
.services-row-body { display: flex; flex-direction: column; min-width: 0; }
.services-row-title { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.6rem); text-transform: uppercase; margin-bottom: .35rem; }
.services-row-desc { display: block; color: var(--cream-mute); font-size: .95rem; max-width: 56ch; }
.services-row-arrow {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--ink-line); display: grid; place-items: center;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out);
}
.services-row-arrow svg { width: 16px; height: 16px; stroke: var(--cream); stroke-width: 1.6; fill: none; transition: transform .35s var(--ease-out); }
.services-row:hover .services-row-arrow, .services-row:focus-visible .services-row-arrow { background: var(--accent); border-color: var(--accent); }
.services-row:hover .services-row-arrow svg, .services-row:focus-visible .services-row-arrow svg { transform: translate(2px, -2px); }
@media (max-width: 640px) {
  .services-row { grid-template-columns: auto 1fr; }
  .services-row-arrow { display: none; }
}

/* =============================================================
   12. STATS BREATH — huge typographic numbers, generous space
   ============================================================= */
.stats-breath { background: var(--bg); padding-block: clamp(5rem, 11vw, 9rem); }
.breath-intro {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.15; max-width: 20ch;
  margin-bottom: clamp(3.5rem, 8vw, 6rem);
}
.breath-intro-invert { color: var(--cream); }

.breath-stat {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.2rem 2rem;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.breath-stat:last-of-type { border-bottom: 1px solid var(--line); }
.breath-stat-r { justify-content: flex-end; text-align: right; }
.breath-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.6rem, 11vw, 8.2rem); line-height: .9; color: var(--ink); }
.breath-word { font-size: clamp(2.1rem, 6.4vw, 4.4rem); text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; }
.flow-item p a, .case-desc a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); transition: color .3s; }
.flow-item p a:hover, .case-desc a:hover { color: var(--accent-dim); }
.breath-label { font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--mute); max-width: 30ch; }
.breath-note { font-family: var(--font-mono); font-size: .78rem; color: var(--mute); margin-top: clamp(1.5rem, 3vw, 2.2rem); max-width: 56ch; }

/* =============================================================
   13. TOURS PORTFOLIO — one project per viewport
   ============================================================= */
.tours-portfolio {
  background: var(--ink); color: var(--cream); overflow: clip;
  scroll-margin-top: var(--nav-h);
  padding-top: clamp(1.25rem, 3vw, 2rem); padding-bottom: 0;
}
.tours-intro { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); position: relative; z-index: 1; }
/* FASE 2B.7B: en el aterrizaje directo por ancla, el margin-bottom
   heredado de .breath-intro (pensado para el respiro de #por-que)
   empujaba la primera tarjeta de proyecto por debajo del pliegue.
   Se acorta solo aquí — #por-que no se toca. */
.tours-intro .breath-intro { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.tour-project { min-height: 92vh; display: flex; align-items: center; padding-block: clamp(3rem, 7vw, 5rem); position: relative; z-index: 1; border-top: 1px solid var(--ink-line); }
.tour-project-grid { display: grid; gap: clamp(2rem, 6vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .tour-project-grid { grid-template-columns: 1.1fr 0.9fr; } }
.tour-project-alt .tour-project-grid { direction: rtl; }
.tour-project-alt .tour-project-grid > * { direction: ltr; }

.tour-project-visual {
  position: relative; aspect-ratio: 4/5; border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(155deg, #1b160f 0%, #241d13 55%, #0b0b0c 100%);
  display: grid; place-items: center;
  will-change: transform;
}
.tour-project-letter { font-family: var(--font-display); font-weight: 900; font-size: 11rem; color: rgba(245,239,225,0.05); line-height: 1; user-select: none; }
.tour-project-orbit {
  position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%;
  border: 1px dashed rgba(245,239,225,0.18);
  animation: tourOrbitSpin 24s linear infinite;
}
.tour-project-orbit::before {
  content: ""; position: absolute; top: -3px; left: 50%; translate: -50% 0;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px 2px var(--accent);
}
@keyframes tourOrbitSpin { to { transform: rotate(360deg); } }
.tour-project-ring {
  position: absolute; width: 42%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(119,37,45,.22), transparent 70%);
  filter: blur(6px);
}
.tour-project-pin { position: absolute; bottom: 20%; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; }
.tour-project-pin svg { width: 36px; height: 36px; fill: var(--accent); }

.tour-project-visual-photo {
  background-color: #1b160f; /* fallback if the hotlinked photo ever fails */
  background-size: cover; background-position: center;
}
.tour-project-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,11,12,.15) 0%, rgba(11,11,12,.1) 45%, rgba(11,11,12,.85) 100%);
}
.tour-project-visual-photo .tour-project-orbit { border-color: rgba(245,239,225,0.35); z-index: 1; }
.tour-project-photo-tag {
  position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 2;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em; color: var(--cream-mute);
}

/* Blanca reuses the same real-photo system as Hache Ungles but reads as its own moment,
   not a duplicated template: portrait-native crop, ring anchored bottom-right, background-position varied. */
.tour-project-visual-blanca { background-position: center 25%; }
.tour-project-visual-blanca .tour-project-orbit {
  width: 46%; top: auto; bottom: 8%; left: auto; right: 6%; translate: 0 0;
}

.tour-project-body { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.tour-project-badge {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}
.tour-project-name { font-size: clamp(2.6rem, 6.2vw, 5.4rem); font-weight: 900; text-transform: uppercase; line-height: .96; margin-bottom: 1.2rem; max-width: 94%; }
.tour-project-meta { font-family: var(--font-mono); font-size: .85rem; color: var(--cream-mute); margin-bottom: 2rem; }
.tour-project-btn {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; font-size: 1rem; color: var(--cream);
  padding-bottom: .25rem; border-bottom: 1.5px solid var(--ink-line);
  transition: gap .35s var(--ease-out), color .3s, border-color .3s;
}
.tour-project-btn::after { content: ""; position: absolute; inset: -12px; } /* expands tap target to ~44px without affecting visible layout */
.tour-project-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform .35s var(--ease-soft); }
.tour-project-btn:hover { gap: .95rem; color: var(--accent); border-color: var(--accent); }
.tour-project-btn:hover svg { transform: translate(2px, -2px); }

.tours-showcase-note { text-align: center; color: var(--cream-mute); font-size: .88rem; padding-block: 2.5rem; font-family: var(--font-mono); position: relative; z-index: 1; }

.stat-row { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 4rem); justify-content: center; padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--ink-line); position: relative; z-index: 1; }
.stat-row-item { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.4rem); text-align: center; }
.stat-row-item-word { font-size: clamp(1.5rem, 3vw, 2rem); max-width: 22ch; }
.stat-row-item small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .7rem; letter-spacing: .04em; color: var(--cream-mute); text-transform: none; max-width: 20ch; margin-top: .6rem; }

/* =============================================================
   13b. PORTFOLIO PAUSE — brief editorial bridge, no scroll-jacking
   ============================================================= */
.portfolio-pause { background: var(--ink); color: var(--cream); padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center; }
.portfolio-pause-inner { display: flex; flex-direction: column; align-items: center; }
.portfolio-pause-line {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.7rem, 4.6vw, 2.9rem); line-height: 1.08;
}
.portfolio-pause-line-accent {
  font-family: var(--font-serif); font-style: italic; font-weight: 500; text-transform: none;
  color: var(--accent); font-size: clamp(1.5rem, 3.8vw, 2.5rem); margin-top: .3rem; margin-bottom: 2.2rem;
}

/* =============================================================
   13c. GOOGLE BUSINESS (FASE 2B.7A)
   Fondo Marfil, composición editorial inspirada en una ficha de
   negocio (NO clona la interfaz real de Google): avatar, líneas,
   estrellas de reseña (amarillo de marca), fotos y una lista de
   comprobación. Sin afirmaciones de posicionamiento garantizado.
   ============================================================= */
.gbiz-section {
  position: relative; overflow: clip; background: var(--bg);
  scroll-margin-top: var(--nav-h);
  padding-top: clamp(1.25rem, 3vw, 2rem); padding-bottom: clamp(5rem, 10vw, 8rem);
}
.motif-gbiz { color: var(--ink); opacity: .05; left: -14%; top: -8%; }
.gbiz-grid { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 6vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .gbiz-grid { grid-template-columns: 1.1fr .9fr; } }

.gbiz-points { display: flex; flex-direction: column; gap: .7rem; margin: 1.6rem 0 2rem; padding: 0; list-style: none; }
.gbiz-points li { display: flex; align-items: baseline; gap: .8rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; }
.gbiz-point-num { font-family: var(--font-mono); font-size: .78rem; color: var(--accent-dim); font-weight: 700; }

.gbiz-visual { display: flex; justify-content: center; }
/* FASE 2B.7B: la ficha se sentía "vacía" (avatar liso, líneas genéricas,
   sin nombre ni estado) — se enriquece con un negocio de ejemplo (Aura,
   el mismo universo ficticio que el showcase de Webs) sin copiar la UI
   real de Google: nombre, categoría, nota+reseñas, estado "abierto
   ahora" y una miniatura "+N fotos". */
.gbiz-card {
  width: min(340px, 100%); background: var(--bg); border-radius: var(--radius);
  padding: 1.6rem 1.5rem; box-shadow: 0 30px 70px -20px rgba(11,11,12,.22), 0 0 0 1px var(--line-soft);
}
.gbiz-card-eyebrow { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 1rem; }
.gbiz-card-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.gbiz-card-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--cream); flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: .95rem;
}
.gbiz-card-id { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.gbiz-card-name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink); }
.gbiz-card-cat { font-family: var(--font-mono); font-size: .68rem; color: var(--mute); }
.gbiz-card-rating { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.gbiz-card-stars { display: flex; gap: 3px; }
.gbiz-card-stars svg { width: 15px; height: 15px; fill: var(--brand-yellow); }
.gbiz-card-rating-value { font-family: var(--font-display); font-weight: 800; font-size: .85rem; color: var(--ink); }
.gbiz-card-rating-count { font-family: var(--font-mono); font-size: .68rem; color: var(--mute); }
.gbiz-card-status {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; color: var(--accent-dim);
  margin-bottom: 1.2rem;
}
.gbiz-card-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green); flex-shrink: 0; }
.gbiz-card-photos { display: flex; gap: .5rem; margin-bottom: 1.2rem; }
.gbiz-card-photos span { flex: 1; aspect-ratio: 1; border-radius: 10px; background: var(--line-soft); }
/* Ficha Google Business: miniaturas con aspecto de foto real, no iconos.
   Reutilizan aura-showcase-salon.webp (la misma foto real del salón que
   ya aparece en "Tu web también forma parte de tu reputación", más
   arriba en esta misma página) con tres recortes (object-position)
   distintos: interior general, zona de trabajo y el arco con luz cálida
   al fondo — misma foto, tres encuadres reconocibles. Un filtro cálido
   las acerca a la paleta de marca sin editar el archivo original. */
.gbiz-card-photos .gbiz-card-photo { display: grid; place-items: center; overflow: hidden; }
.gbiz-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.35) saturate(1.2) brightness(.97) contrast(1.03); }
.gbiz-card-photos .gbiz-card-photo-a { background: linear-gradient(150deg, #D8B79A 0%, #77252D 130%); }
.gbiz-card-photos .gbiz-card-photo-b { background: linear-gradient(150deg, #C9CDB0 0%, #5C6B4F 130%); }
.gbiz-card-photos .gbiz-card-photo-c { background: linear-gradient(150deg, #EAD9B8 0%, #C17179 130%); }
.gbiz-card-photo svg { width: 44%; height: 44%; stroke: rgba(242,235,224,.8); stroke-width: 1.6; fill: none; stroke-linejoin: round; }
.gbiz-card-photo circle { fill: rgba(242,235,224,.8); stroke: none; }
.gbiz-card-photos-more { display: grid; place-items: center; background: var(--line) !important; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.gbiz-card-row { display: flex; justify-content: space-between; align-items: center; padding-block: .55rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-soft); }
.gbiz-card-check { font-family: var(--font-mono); font-size: .72rem; color: var(--accent-dim); font-weight: 600; }

/* =============================================================
   13d. WEBS Y PRESENCIA DIGITAL (FASE 2B.7A)
   Fondo Carbón, cierre visualmente fuerte antes del caso de éxito.
   Mock de navegador con una web ficticia (AURA, salón de belleza
   de ejemplo) — demostración visual, no constructor funcional.
   Colores del mock en hex fijo a propósito: representa el sitio
   de OTRO negocio, no debe heredar el override de --accent de
   [data-nav-dark] de esta página.
   ============================================================= */
.webs-section {
  position: relative; overflow: clip; background: var(--ink); color: var(--cream);
  scroll-margin-top: var(--nav-h);
  padding-top: clamp(1.25rem, 3vw, 2rem); padding-bottom: clamp(5rem, 10vw, 8rem);
}
.webs-section .section-text { color: var(--cream-mute); }
.webs-watermark {
  position: absolute; z-index: 0; pointer-events: none;
  bottom: -20%; right: -12%;
  width: min(64vw, 1300px); height: auto; opacity: .045;
}
.webs-grid { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 6vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .webs-grid { grid-template-columns: .85fr 1.15fr; } }

.webs-micro { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; list-style: none; margin: 1.6rem 0 2rem; padding: 0; font-family: var(--font-mono); font-size: .8rem; color: var(--cream-mute); }
.webs-micro li { position: relative; padding-left: 1rem; }
.webs-micro li::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-dim); }

/* .btn-primary está pensado para fondo Marfil (fondo Carbón + texto
   Marfil); en esta sección oscura ese mismo fondo Carbón se funde con
   el fondo de la sección. Se sobrescribe a Borgoña fija (NO var(--accent),
   que aquí vale el Borgoña aclarado de [data-nav-dark]) — mismo par
   Borgoña/Marfil ya validado (8.50:1) que usa el sello del Hero. */
.webs-section .btn-primary { background: #77252D; color: var(--cream); }
.webs-section .btn-primary:hover { box-shadow: 0 22px 45px rgba(0,0,0,.35), 0 10px 20px rgba(119,37,45,.35); }

.webs-showcase { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.webs-showcase-note { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .03em; color: var(--cream-mute); text-align: center; }

/* FASE 2B.7B: showcase más "wow" — resplandor Borgoña difuminado detrás,
   una segunda tarjeta fantasma apilada (profundidad tipo Awwwards) y una
   insignia de valoración flotando sobre la esquina del navegador. Sigue
   siendo CSS+HTML puro, sin librerías nuevas. */
.webshow-stage { position: relative; width: min(440px, 100%); padding: 2.2rem 1.6rem 2.6rem; }
.webshow-glow {
  position: absolute; z-index: 0; pointer-events: none;
  inset: -10% -6%;
  background: radial-gradient(closest-side, rgba(119,37,45,.55), rgba(119,37,45,0) 72%);
  filter: blur(38px);
  opacity: .55;
}
.webshow-browser-ghost {
  position: absolute; z-index: 1; inset: 2.2rem 1.6rem 2.6rem;
  border-radius: 16px; background: rgba(242,235,224,.08);
  box-shadow: 0 0 0 1px var(--ink-line);
  transform: rotate(4deg) translate(10px, 10px);
}

.webshow-browser {
  position: relative; z-index: 2;
  width: 100%; border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: 0 45px 100px -20px rgba(0,0,0,.55), 0 0 0 1px var(--ink-line);
  transform: rotate(-1.2deg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.webshow-browser:hover { transform: rotate(0deg) scale(1.02); box-shadow: 0 55px 120px -20px rgba(0,0,0,.6), 0 0 0 1px var(--ink-line); }
.webshow-chrome { display: flex; align-items: center; gap: 6px; padding: .6rem .8rem; background: #ECE7DE; border-bottom: 1px solid rgba(11,11,12,.08); }
.webshow-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(11,11,12,.18); }
.webshow-url { margin-left: .6rem; font-family: var(--font-mono); font-size: .68rem; color: rgba(11,11,12,.45); }

/* Insignia de reseña flotando sobre la esquina — misma sensación de
   "producto ya validado" que las estrellas del mock del Hero. */
.webshow-badge {
  position: absolute; z-index: 3; left: -6px; bottom: 6px;
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  background: var(--bg); color: var(--ink); border-radius: 12px;
  padding: .6rem .8rem;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.4), 0 0 0 1px var(--line-soft);
}
.webshow-badge-stars { color: var(--brand-yellow); font-size: .75rem; letter-spacing: 1px; }
.webshow-badge-score { font-family: var(--font-display); font-weight: 800; font-size: .95rem; }
.webshow-badge-count { font-family: var(--font-mono); font-size: .6rem; color: var(--mute); }

.webshow-nav { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; }
.webshow-nav-logo { font-family: var(--font-display); font-weight: 800; font-size: .82rem; letter-spacing: .04em; color: #1D1D1D; }
.webshow-nav-links { display: flex; gap: .4rem; }
.webshow-nav-links span { width: 16px; height: 2px; border-radius: 1px; background: rgba(11,11,12,.18); }
.webshow-nav-cta { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; padding: .35rem .7rem; border-radius: 999px; background: #77252D; color: #F2EBE0; }

.webshow-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: .8rem; padding: 1.2rem 1.1rem 1.4rem; align-items: center; }
.webshow-hero-text { display: flex; flex-direction: column; gap: .5rem; }
.webshow-hero-kicker { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(11,11,12,.45); }
.webshow-hero-title { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.15rem; line-height: 1.15; color: #1D1D1D; }
.webshow-hero-cta { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .04em; color: #77252D; font-weight: 700; margin-top: .3rem; }
.webshow-hero-cta svg { width: 11px; height: 11px; stroke: #77252D; stroke-width: 2; fill: none; }
.webshow-hero-visual {
  position: relative; overflow: hidden;
  aspect-ratio: 1; border-radius: 12px;
  background:
    radial-gradient(120% 90% at 25% 15%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, #77252D, #C17179);
}
/* FASE 06 — coherencia visual: foto real del showcase AURA (mismo archivo
   que en /diseno-web-negocios-locales/, reutilizado sin duplicar). Sustituye
   el círculo decorativo cuando el mock lleva la fotografía en vez del SVG. */
.webshow-hero-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.webshow-hero-visual-blob {
  position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%;
  right: -18%; bottom: -22%;
  background: radial-gradient(circle, rgba(29,29,29,.28), rgba(29,29,29,0) 70%);
}
/* FASE 2B.7C: el cuadrado de gradiente liso no evocaba "centro de
   belleza" con suficiente claridad. Se añade un motivo de espejo de
   tocador (círculo + bombillas alrededor) — icono universal del sector
   beauty, coherente con la paleta, sin fotografía ni librerías nuevas. */
.webshow-mirror { position: absolute; inset: 0; width: 100%; height: 100%; }
.webshow-mirror-ring { fill: none; stroke: rgba(242,235,224,.6); stroke-width: 1.1; }
.webshow-mirror-bulb { fill: #F2EBE0; filter: drop-shadow(0 0 3px rgba(242,235,224,.55)); }

.webshow-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: 0 1.1rem 1.1rem; }
.webshow-service { background: #F2EBE0; border-radius: 10px; padding: .6rem .5rem; text-align: center; font-family: var(--font-mono); font-size: .58rem; color: #1D1D1D; }
.webshow-service-num { display: block; font-weight: 700; color: #77252D; margin-bottom: .25rem; }

.webshow-booking { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.1rem; border-top: 1px solid rgba(11,11,12,.08); }
.webshow-booking-label { font-family: var(--font-mono); font-size: .58rem; color: rgba(11,11,12,.45); }
.webshow-booking-slot { font-family: var(--font-mono); font-size: .64rem; font-weight: 700; color: #1D1D1D; }

@media (max-width: 480px) {
  .webshow-hero { grid-template-columns: 1fr; }
  .webshow-hero-visual { aspect-ratio: 16/7; }
  .webshow-stage { padding: 1.6rem 1.1rem 2rem; }
  .webshow-browser-ghost { inset: 1.6rem 1.1rem 2rem; }
  .webshow-badge { left: -4px; bottom: 0; padding: .5rem .65rem; }
  .webshow-badge-score { font-size: .85rem; }
}

/* =============================================================
   13e. AUTOMATIZACIONES Y AGENTES IA (ROADMAP — PUNTO 1)
   Fondo Marfil (como Google Business) para alternar con el Carbón de
   Webs; el mock de chat lleva su propio fondo Carbón, invirtiendo el
   contraste — misma lógica que el navegador blanco de Webs sobre fondo
   oscuro, pero al revés. Sin azul/neón: burbujas en Marfil (cliente) y
   Borgoña (agente), la paleta de marca ya existente.
   ============================================================= */
.ia-section {
  position: relative; overflow: clip; background: var(--bg);
  scroll-margin-top: var(--nav-h);
  padding-top: clamp(1.25rem, 3vw, 2rem); padding-bottom: clamp(5rem, 10vw, 8rem);
}
.motif-ia { color: var(--ink); opacity: .05; right: -16%; top: -6%; }

.ia-grid { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 6vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .ia-grid { grid-template-columns: 1.05fr .95fr; } }

.ia-personalized {
  margin: 1.6rem 0 2rem; padding: 1.1rem 1.3rem; border-radius: var(--radius-sm);
  background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line);
}
.ia-personalized-label {
  display: inline-block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-dim); font-weight: 700; margin-bottom: .4rem;
}
.ia-personalized p { margin: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.6; }

.ia-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.ia-visual { display: flex; justify-content: center; }
.ia-chat {
  width: min(380px, 100%); background: var(--ink); color: var(--cream); border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.4rem; box-shadow: 0 40px 90px -20px rgba(11,11,12,.35), 0 0 0 1px var(--line-soft);
}
.ia-chat-eyebrow { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cream-mute); margin-bottom: 1.1rem; }

.ia-chat-thread { display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1.3rem; }
.ia-bubble {
  max-width: 84%; padding: .65rem .9rem; border-radius: 14px; font-size: .88rem; line-height: 1.45;
}
.ia-bubble-client { align-self: flex-start; background: var(--ink-line); color: var(--cream); border-bottom-left-radius: 4px; }
.ia-bubble-agent { align-self: flex-end; background: var(--accent); color: var(--cream); border-bottom-right-radius: 4px; }
.ia-bubble-tag {
  display: block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cream-mute); margin-bottom: .3rem;
}

.ia-chat-flow {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding-top: 1.1rem; border-top: 1px solid var(--ink-line);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cream-mute);
}
.ia-chat-flow svg { width: 13px; height: 13px; stroke: var(--cream-mute); stroke-width: 1.8; fill: none; flex-shrink: 0; }

.ia-cases { position: relative; z-index: 1; margin-top: clamp(4rem, 8vw, 6rem); }
.ia-cases-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; text-transform: uppercase; margin: .5rem 0 2.2rem; max-width: 24ch; }
.ia-cases-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem 2rem; }
@media (min-width: 680px) { .ia-cases-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .ia-cases-grid { grid-template-columns: 1fr 1fr 1fr; } }

.ia-case { padding-top: 1.2rem; border-top: 1px solid var(--line); }
.ia-case-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: .8rem;
  background: var(--ink); color: var(--cream); font-family: var(--font-mono); font-weight: 700; font-size: .82rem;
}
.ia-case h4 { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; margin-bottom: .5rem; }
.ia-case p { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

.ia-connection {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line);
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.5;
  color: var(--ink-soft); max-width: 62ch;
}
.ia-connection strong { color: var(--ink); font-style: normal; }

@media (max-width: 640px) {
  .ia-actions { flex-direction: column; align-items: stretch; }
  .ia-actions .btn { text-align: center; justify-content: center; }
}

/* =============================================================
   14. CASE EDITORIAL
   ============================================================= */
.case-editorial { background: var(--bg); padding-block: clamp(5rem, 10vw, 8rem); overflow: clip; }
.case-title { font-size: clamp(3.2rem, 12vw, 9.5rem); font-weight: 900; text-transform: uppercase; line-height: .88; margin-bottom: 0; max-width: 96%; }

.case-editorial-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); grid-template-columns: 1fr; margin-top: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 860px) {
  .case-editorial-grid { grid-template-columns: 0.95fr 1.05fr; align-items: start; }
  .case-editorial-visual { margin-right: calc(-1 * clamp(1.25rem, 4vw, 3rem)); }
}

.case-editorial-visual { position: relative; z-index: 1; }
.case-visual-photo {
  position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
  background-size: cover; background-position: center;
  box-shadow: 0 30px 60px -20px rgba(11,11,12,0.35);
}
.case-visual-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,0) 42%, rgba(11,11,12,0.68) 100%); }
.case-visual-ring {
  position: absolute; top: -12%; right: -16%; width: 58%; aspect-ratio: 1;
  border: 1px solid rgba(11,11,12,0.22); border-radius: 50%; pointer-events: none; z-index: -1;
}
.case-visual-ring::before {
  content: ""; position: absolute; inset: 17%; border: 1px solid rgba(11,11,12,0.12); border-radius: 50%;
}
.case-visual-reprise {
  position: absolute; left: 1.3rem; bottom: 3.3rem; z-index: 1; max-width: 70%;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 2.1rem); line-height: 1; color: var(--cream);
}
.case-visual-tag {
  position: absolute; left: 1.3rem; bottom: 1.1rem; z-index: 1;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(245,239,225,0.75);
}

.case-spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: clamp(1.5rem, 3vw, 2rem); }
.case-spec div { padding: .7rem 0; border-top: 1px solid var(--line); }
.case-spec dt { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: .2rem; }
.case-spec dd { font-family: var(--font-display); font-weight: 700; font-size: .95rem; margin: 0; }

.case-meta { font-family: var(--font-mono); font-size: .85rem; color: var(--mute); margin-bottom: 1.2rem; }
.case-desc { color: var(--mute); margin-bottom: 1.6rem; font-size: 1rem; max-width: 56ch; }
.case-quote {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.3;
  color: var(--ink); margin-bottom: 2rem; max-width: 24ch;
}
.case-stats { display: flex; gap: clamp(2rem, 5vw, 3.5rem); margin-bottom: 2rem; flex-wrap: wrap; }
.case-stat { display: flex; flex-direction: column; gap: .2rem; }
.case-stat-value { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4vw, 2.8rem); }
.case-stat-label { font-size: .78rem; color: var(--mute); font-family: var(--font-mono); }
.case-link { position: relative; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; border-bottom: 1.5px solid var(--ink); padding-bottom: .2rem; transition: gap .35s var(--ease-out), color .3s, border-color .3s; }
.case-link::after { content: ""; position: absolute; inset: -12px; }
.case-link svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform .35s var(--ease-soft); }
.case-link:hover { gap: .8rem; color: var(--accent-dim); border-color: var(--accent-dim); }
.case-link:hover svg { transform: translate(2px, -2px); }

/* =============================================================
   15. PROCESS
   ============================================================= */
/* FASE 2B.7C: #proceso no tenía scroll-margin-top — el salto nativo
   (URL directa, o clic sin pasar por initSmoothAnchors) dejaba el borde
   de la sección justo debajo del header fijo, con el hueco del
   padding-top (hasta 120px) haciendo de "franja" antes del título. */
.process { background: var(--bg-soft); scroll-margin-top: var(--nav-h); padding-top: clamp(1.5rem, 3.5vw, 2.25rem); padding-bottom: clamp(4.5rem, 9vw, 7.5rem); overflow: clip; }

.process-scroll { display: grid; grid-template-columns: 1fr; gap: 1.6rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 860px) { .process-scroll { grid-template-columns: 220px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } }

.process-sticky {
  position: sticky; top: clamp(4.5rem, 11vh, 6.5rem); z-index: 2;
  background: var(--bg-soft); padding-block: .6rem .9rem;
}
@media (max-width: 859px) { .process-sticky { border-bottom: 1px solid var(--line); } }
.process-sticky-inner { display: flex; align-items: baseline; gap: .6rem; }
@media (min-width: 860px) { .process-sticky-inner { flex-direction: column; align-items: flex-start; gap: .9rem; } }
.process-sticky-num {
  font-family: var(--font-display); font-weight: 900; line-height: .88;
  font-size: clamp(3rem, 8vw, 6rem); color: var(--ink);
  font-variant-numeric: tabular-nums; transition: color .3s;
}
.process-sticky-total { font-family: var(--font-mono); font-size: .82rem; color: var(--mute); letter-spacing: .04em; }
.process-progress { width: 3px; height: 84px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: .5rem; }
@media (min-width: 860px) { .process-progress { height: 160px; } }
.process-progress-fill { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(0); }

.process-list { position: relative; display: flex; flex-direction: column; }
.process-item {
  position: relative; display: grid; grid-template-columns: 1fr; gap: .4rem;
  padding: clamp(1.6rem, 4.5vw, 2.6rem) 0 clamp(1.6rem, 4.5vw, 2.6rem) clamp(1.5rem, 5vw, 2rem);
  border-top: 1px solid var(--line);
  transition: padding-left .4s var(--ease-out);
}
.process-item:last-child { border-bottom: 1px solid var(--line); }
.process-item::before {
  content: ""; position: absolute; left: -3px; top: clamp(1.6rem, 4.5vw, 2.6rem);
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-dim);
  transition: background .3s, transform .3s var(--ease-out);
}
.process-item.is-active { padding-left: clamp(2rem, 6vw, 2.8rem); }
.process-item.is-active::before { background: var(--accent); transform: scale(1.5); }
.process-item.is-active h3 { color: var(--accent-dim); }
.process-item > div { position: relative; z-index: 1; max-width: 55ch; }
.process-item h3 { font-size: 1.2rem; margin-bottom: .35rem; transition: color .3s; }
.process-item p { color: var(--mute); max-width: 55ch; font-size: .95rem; }

/* =============================================================
   16. CTA final + contact
   ============================================================= */
.cta-final { background: var(--ink); color: var(--cream); position: relative; overflow: clip; padding-block: clamp(5rem, 10vw, 8rem); }
.cta-final-halo {
  position: absolute; inset: -20% -10% -30% -10%;
  background: radial-gradient(45% 40% at 30% 20%, rgba(119,37,45,.22), transparent 70%),
              radial-gradient(35% 30% at 80% 70%, rgba(31,111,84,.16), transparent 70%);
  filter: blur(90px); pointer-events: none;
}
.cta-final-inner { position: relative; z-index: 1; text-align: center; }

.offer-badge {
  display: inline-block; margin-bottom: 1.6rem; padding: .7rem 1.3rem;
  border-radius: 999px; border: 1px solid var(--ink-line); font-size: .85rem;
  color: var(--cream-mute); max-width: 46ch;
}
.offer-badge strong { color: var(--accent); }

.cta-final-title { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 800; max-width: 18ch; margin-inline: auto; margin-bottom: 1.2rem; }
.cta-final-title em { color: var(--accent); font-style: normal; }
.cta-final-text { color: var(--cream-mute); max-width: 50ch; margin-inline: auto; margin-bottom: 2rem; font-size: 1.05rem; }
.cta-final-actions { margin-bottom: 3.5rem; }
.cta-wa-inline {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono);
  font-size: .88rem; color: var(--cream); border: 1px solid var(--ink-line);
  padding: .8rem 1.4rem; border-radius: 999px; transition: background .3s, border-color .3s;
}
.cta-wa-inline:hover { background: rgba(245,239,225,.08); border-color: var(--accent); }

.contact-grid { display: grid; grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; text-align: left; position: relative; }
@media (min-width: 760px) { .contact-grid { margin-inline: 0; } }
.contact-form { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; counter-reset: field; }
.field { position: relative; min-width: 0; padding-left: 2.1rem; counter-increment: field; }
.field::before {
  content: counter(field, decimal-leading-zero);
  position: absolute; left: 0; top: 1rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em;
  color: var(--cream-mute); opacity: .55;
}
.field input, .field textarea {
  width: 100%; padding: .95rem .1rem .55rem; border-radius: 0;
  background: transparent; border: none; border-bottom: 1px solid var(--ink-line); color: var(--cream);
  font-family: var(--font-body); font-size: 1rem; resize: vertical;
  transition: border-color .3s;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field label {
  position: absolute; left: 2.2rem; top: 1rem; pointer-events: none;
  color: var(--cream-mute); transition: all .25s var(--ease-out); font-size: .95rem;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  top: 0; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.contact-submit { margin-top: .7rem; margin-left: 2.1rem; position: relative; }
@media (max-width: 480px) { .contact-submit { margin-left: 0; } }
.contact-submit .cta-form-spinner { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.contact-form.is-sending .cta-form-label { opacity: 0; }
.contact-form.is-sending .cta-form-spinner { opacity: 1; }
.cta-form-spinner::after {
  content: ""; width: 18px; height: 18px; border: 1.5px solid rgba(245,239,225,.3); border-top-color: var(--cream);
  border-radius: 50%; animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.contact-form { transition: opacity .5s var(--ease-out), transform .5s var(--ease-soft); }
.contact-form.is-sent { opacity: 0; transform: translateY(-10px); pointer-events: none; position: absolute; inset: 0; }
.contact-note { font-size: .78rem; color: var(--cream-mute); text-align: left; margin-left: 2.1rem; }
@media (max-width: 480px) { .contact-note { margin-left: 0; } }

.contact-success {
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: .8rem;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .6s var(--ease-out) .1s, transform .6s var(--ease-soft) .1s;
}
.contact-success.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.contact-success-check {
  width: 46px; height: 46px; border-radius: 50%; padding: 11px;
  background: rgba(47,163,96,.18); stroke: var(--brand-green); stroke-width: 2.4; fill: none;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ease-out) .3s;
}
.contact-success.is-visible .contact-success-check { stroke-dashoffset: 0; }
.contact-success h3 { font-size: 1.3rem; }
.contact-success p { color: var(--cream-mute); max-width: 40ch; font-size: .92rem; }

/* =============================================================
   17. Footer
   ============================================================= */
.footer { background: var(--ink); color: var(--cream-mute); padding-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--ink-line); }
.footer-inner { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: 3rem; }
@media (min-width: 780px) { .footer-inner { grid-template-columns: 1.6fr 1fr 1fr; } }
/* Home añade una columna "Servicios" (las 7 páginas) a las 2 que ya
   tenía (Navegación, Contacto) — 4 columnas en vez de 3. Solo afecta a
   .footer-4col (marcado únicamente en el footer de Home); el footer de
   las 7 páginas de servicio sigue con su .footer-inner de 3 columnas
   de siempre, sin tocar. */
@media (min-width: 780px) { .footer-4col .footer-inner { grid-template-columns: 1.3fr .95fr 1fr .9fr; } }
.footer-brand { display: flex; flex-direction: column; gap: .9rem; max-width: 34ch; }
.footer-brand .nav-logo-word { color: var(--cream); }
.footer-brand .nav-logo-word-img, .footer-brand .nav-logo-word-img img { height: 38px; }
.footer-brand p { font-size: .88rem; color: var(--cream-mute); }
.footer-col { display: flex; flex-direction: column; gap: .8rem; }
.footer-heading { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-mute); margin-bottom: .3rem; }
.footer-col a, .footer-static { font-size: .9rem; color: var(--cream-mute); transition: color .3s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem;
  padding-block: 1.6rem; border-top: 1px solid var(--ink-line);
  font-size: .78rem; color: var(--cream-mute); font-family: var(--font-mono);
}
.footer-bottom a { transition: color .3s; }
.footer-bottom a:hover { color: var(--accent); }

/* =============================================================
   18. Cursor
   ============================================================= */
.cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; display: none; mix-blend-mode: difference; opacity: 0; transition: opacity .25s var(--ease-out); }
.cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; will-change: transform; }
.cursor-dot { width: 5px; height: 5px; margin: -2.5px; background: var(--cream); border-radius: 50%; }
.cursor-ring { width: 32px; height: 32px; margin: -16px; border: 1px solid var(--cream); border-radius: 50%; transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out); }
.cursor.is-interactive .cursor-ring { width: 50px; height: 50px; margin: -25px; }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }

/* =============================================================
   19. Reveal / split-text
   ============================================================= */
[data-reveal], .reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
[data-reveal].is-revealed, .reveal.is-revealed { opacity: 1; transform: none; }

/* Hero entrance: timed to the splash dismissal, never gated by scroll position —
   some of this text sits below the fold on short viewports, so a scroll-triggered
   reveal left it invisible until the visitor scrolled past, reading as a blank gap. */
.hero-in {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
}
.hero-in.is-in { opacity: 1; transform: none; }
.reveal[data-split], [data-reveal][data-split] { opacity: 1; transform: none; }

.split-word, .split-char { display: inline-block; will-change: transform, opacity; }

/* =============================================================
   19b. Floating WhatsApp CTA
   ============================================================= */
.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); z-index: 400;
  display: inline-flex; align-items: center;
  background: var(--ink); color: var(--cream);
  border-radius: 999px; padding: .8rem;
  box-shadow: 0 15px 35px -12px rgba(11,11,12,.45), 0 0 0 1px rgba(245,239,225,.08);
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(.92); pointer-events: none;
  /* PROMPT 7N — visibility se retrasa hasta que termina el fade-out (al
     ocultar) pero cambia al instante al mostrar, para que el botón nunca
     sea focusable por teclado mientras está invisible (WCAG 2.4.7). */
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft), box-shadow .3s, visibility 0s linear .4s;
}
.wa-float.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft), box-shadow .3s, visibility 0s linear 0s; }
.wa-float.is-away { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.92); pointer-events: none; }
.wa-float-icon { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; transition: transform .3s var(--ease-out); }
.wa-float-icon svg { width: 20px; height: 20px; fill: var(--cream); }
.wa-float-text {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  transition: max-width .35s var(--ease-out), margin-left .35s var(--ease-out);
}
.wa-float:hover, .wa-float:focus-visible {
  box-shadow: 0 18px 40px -12px rgba(11,11,12,.55), 0 0 0 1px rgba(119,37,45,.4);
}
.wa-float:hover .wa-float-icon, .wa-float:focus-visible .wa-float-icon { transform: rotate(-8deg) scale(1.08); }
.wa-float:hover .wa-float-text, .wa-float:focus-visible .wa-float-text { max-width: 90px; margin-left: .55rem; }
@media (max-width: 480px) { .wa-float-text { max-width: 0 !important; margin-left: 0 !important; } }

/* =============================================================
   20. Parallax / depth layers
   ============================================================= */
.layer-slow, .layer-mid, .layer-fast, .layer-fast2 { will-change: transform; }

/* =============================================================
   21. Responsive tweaks
   ============================================================= */
@media (max-width: 539px) {
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .cta-final-actions { display: flex; flex-direction: column; align-items: stretch; }
  .btn, .cta-wa-inline { width: 100%; white-space: normal; text-align: center; }
  .breath-stat-r { justify-content: flex-start; text-align: left; }
  .tour-project-alt .tour-project-grid { direction: ltr; }
  .motif { width: 130vw; height: 130vw; }
}

@media (min-width: 1280px) {
  .container { padding-inline: 3.5rem; }
}

/* =============================================================
   22. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .gr-card-wave, .tour-project-orbit, .splash-logo,
  .hero-scroll svg, .motif, .hero-seal-ring { animation: none; }
  .splash-logo { opacity: 1; transform: none; }
  .hl-line { transform: translateY(0) !important; }
  [data-reveal], .reveal { transition: none; transform: none; }
}