/* ==========================================================================
   LUMÉA — Sistema de diseño
   Estética: lujo editorial oscuro. Oro sobre negro cálido, mucho aire,
   jerarquía agresiva. Un único acento: el oro.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Base — negros cálidos, nunca #000 puro */
  --bg:            #0B0A08;
  --bg-deep:       #060504;
  --surface:       #14120E;
  --surface-2:     #1E1B15;
  --line:          #2A261D;

  /* Texto — casi-blancos cálidos, nunca #fff puro */
  --text:          #F2EDE3;
  --text-muted:    #9A9384;   /* 6.5:1 sobre --bg ✔ AA */
  --text-faint:    #8A8474;   /* 4.6:1 sobre --bg ✔ AA — subido desde #6B6558 (3.4:1, fallaba) */

  /* Acento único: oro */
  --gold:          #C9A227;
  --gold-light:    #F0D27A;
  --gold-deep:     #8C6B12;
  --gold-grad:     linear-gradient(135deg, #8C6B12 0%, #C9A227 28%, #F5E1A0 52%, #C9A227 74%, #8C6B12 100%);

  /* Semánticos */
  --ok:            #7FB069;
  --warn:          #D98E32;
  --err:           #C4574B;

  /* Tipografía */
  --font-display:  'Fraunces', 'Georgia', serif;
  --font-body:     'Hanken Grotesk', 'Segoe UI', sans-serif;

  /* Escala de espaciado */
  --space-1: 0.5rem;   --space-2: 1rem;    --space-3: 1.75rem;
  --space-4: 3rem;     --space-5: 5rem;    --space-6: 8rem;

  /* Formas */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 24px;

  /* Sombras direccionales, no grises planas */
  --shadow:    0 24px 70px -24px rgb(0 0 0 / 0.75);
  --shadow-gold: 0 18px 50px -22px rgb(201 162 39 / 0.45);

  /* Contenedor */
  --wrap: 1180px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Lenis toma el control del scroll; desactivamos el nativo cuando está activo */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: url("/assets/cursor-brocha.svg") 6 27, auto;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: url("/assets/cursor-brocha.svg") 6 27, pointer; }
a { color: inherit; text-decoration: none; cursor: url("/assets/cursor-brocha.svg") 6 27, pointer; }
ul, ol { list-style: none; padding: 0; }
input, textarea, [contenteditable] { cursor: text; }

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

/* ---------- 3. ATMÓSFERA (fondo nunca plano) ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 78% -8%, rgb(201 162 39 / 0.10), transparent 62%),
    radial-gradient(700px 500px at 8% 42%, rgb(201 162 39 / 0.05), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 22%, var(--bg) 100%);
}

/* Grano SVG — cero peso de imagen */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 2; }

/* Estela de pintura que sigue al ratón — la dibuja/desvanece el canvas de JS.
   mix-blend-mode: screen SOLO añade luz, nunca oscurece: no compromete el
   contraste del texto que tenga debajo. Escritorio únicamente (ver main.js). */
.paint-trail {
  position: fixed;
  top: 0; left: 0;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .paint-trail { display: none; }
}

/* ---------- 4. TIPOGRAFÍA ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.9rem, 8.5vw, 6.4rem); font-weight: 700; }
h2 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }

p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before {
  content: '';
  width: 38px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

.lead {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  color: var(--text-muted);
  max-width: 56ch;
}

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.italic-accent {
  font-style: italic;
  font-variation-settings: 'SOFT' 40;
  color: var(--gold-light);
}

/* ---------- 5. LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.section {
  padding-block: clamp(4.5rem, 11vw, var(--space-6));
  position: relative;
}

.section--line { border-top: 1px solid var(--line); }

.grid { display: grid; gap: var(--space-3); }
@media (min-width: 860px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 6. BOTONES ---------- */
.btn {
  --btn-bg: var(--gold-grad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.9em;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  position: relative;
  isolation: isolate;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  will-change: transform;
}

.btn--primary {
  background: var(--btn-bg);
  color: #12100B;
  box-shadow: var(--shadow-gold);
  overflow: hidden;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 26px 60px -22px rgb(201 162 39 / 0.65); }

/* Barrido de brillo al pasar el ratón — un detalle, no un espectáculo */
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgb(255 255 255 / 0.55) 50%, transparent 68%);
  transform: translateX(-130%);
  pointer-events: none;
}
.btn--primary:hover::after { animation: btnShine 1.05s var(--ease-out); }
@keyframes btnShine { to { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .btn--primary::after { display: none; } }

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgb(255 255 255 / 0.015);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); }

.btn:active { transform: translateY(0) scale(0.985); }

/* Botón magnético: el JS mueve --mx/--my */
.magnetic { transform: translate(var(--mx, 0px), var(--my, 0px)); }

/* ---------- 7. HEADER ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  padding-block: var(--space-2);
  transition: background 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out), padding 0.4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgb(11 10 8 / 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  padding-block: 0.6rem;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand img { width: 42px; height: 42px; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand__name span { color: var(--gold); }

.nav { display: none; gap: var(--space-3); align-items: center; }
@media (min-width: 900px) { .nav { display: flex; } }
.nav a {
  font-size: 0.92rem;
  color: var(--text-muted);
  position: relative;
  padding-block: 0.3rem;
  transition: color 0.3s var(--ease-out);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle { display: grid; gap: 5px; padding: 0.5rem; }
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-toggle span { width: 24px; height: 2px; background: var(--text); transition: 0.3s var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgb(6 5 4 / 0.97);
  backdrop-filter: blur(20px);
  display: grid;
  place-content: center;
  gap: var(--space-3);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav a { font-family: var(--font-display); font-size: 2rem; }

/* ---------- 8. HERO ---------- */
.hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: 8rem 4rem;
  position: relative;
}
.hero__inner { display: grid; gap: var(--space-3); max-width: 62rem; }
.hero h1 { margin-block: 0.2em 0.1em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* Rompe la rejilla: el marcador de scroll sangra al borde */
.hero__scroll {
  position: absolute;
  bottom: var(--space-3);
  right: clamp(1.25rem, 5vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero__scroll i {
  display: block;
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: drip 2.6s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes drip {
  0%, 100% { transform: scaleY(0.25); opacity: 0.35; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.stat__num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gold-light);
}
.stat__label { font-size: 0.8rem; color: var(--text-faint); letter-spacing: 0.06em; }

/* ---------- 8b. MARQUESINA ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
  background: var(--bg-deep);
  /* difumina los bordes en vez de cortar el texto en seco */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: max-content;
  white-space: nowrap;
  animation: marqueeScroll 34s linear infinite;
}
.marquee__track span:not(.dot) {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-faint);
  letter-spacing: 0.01em;
}
.marquee__track .dot { color: var(--gold); opacity: 0.7; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* el track tiene el contenido duplicado */
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- 9. TARJETAS / SERVICIOS ---------- */
.card {
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  position: relative;
  overflow: hidden;
  transition: border-color 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  will-change: transform;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--px, 50%) var(--py, 0%), rgb(201 162 39 / 0.10), transparent 45%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}
.card:hover { border-color: rgb(201 162 39 / 0.4); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }

/* Inclinación 3D real: el JS fija --rx/--ry y escribe el transform inline
   (gana a esta regla por especificidad), así que aquí solo dejamos la
   transición y la perspectiva de reposo. */
.card.tilt {
  transition: transform 0.15s ease-out, border-color 0.45s var(--ease-out);
  transform-style: preserve-3d;
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .card.tilt { transition: border-color 0.45s var(--ease-out); }
}

.card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid rgb(201 162 39 / 0.28);
  background: rgb(201 162 39 / 0.07);
  color: var(--gold-light);
  margin-bottom: var(--space-2);
}
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--text-muted); font-size: 0.96rem; }

.card__num {
  position: absolute;
  top: var(--space-2); right: var(--space-3);
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: rgb(242 237 227 / 0.04);
  pointer-events: none;
}

/* ---------- 9b. COMPARADOR ANTES/DESPUÉS (usado en el ejemplo del simulador) ---------- */
.obra { display: grid; gap: 0.75rem; }
.obra figcaption, .obra .obra-pie {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.obra .obra-pie strong { color: var(--text); font-weight: 600; }

/* ---------- 9c. ZONAS ---------- */
.zonas { display: grid; gap: var(--space-3); }
@media (min-width: 760px) { .zonas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .zonas { grid-template-columns: repeat(3, 1fr); } }
.zona h3 {
  font-size: 1.18rem;
  margin-bottom: 0.6rem;
  color: var(--gold-light);
}
.zona p { font-size: 0.94rem; }

/* ---------- 10. PROCESO ---------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n {
  counter-increment: step;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold);
}
.step__n::before { content: '0' counter(step); }
.step h3 { margin-bottom: 0.35rem; }
.step p { color: var(--text-muted); max-width: 58ch; }

/* ---------- 11. SIMULADOR ---------- */
.sim {
  background: linear-gradient(165deg, var(--surface) 0%, var(--bg-deep) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, var(--space-4));
  box-shadow: var(--shadow);
}

.dropzone {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
  background: rgb(255 255 255 / 0.012);
}
.dropzone:hover, .dropzone.is-drag {
  border-color: var(--gold);
  background: rgb(201 162 39 / 0.05);
}
.dropzone__icon { color: var(--gold); margin: 0 auto var(--space-2); }
.dropzone strong { display: block; margin-bottom: 0.35rem; font-size: 1.05rem; }
.dropzone small { color: var(--text-faint); }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(6 5 4 / 0.8);
  color: var(--text);
  font-size: 15px; line-height: 1;
  backdrop-filter: blur(4px);
  transition: background 0.25s, color 0.25s;
}
.thumb button:hover { background: var(--err); }

.field { display: grid; gap: 0.5rem; margin-top: var(--space-3); }
.field > label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

.input, .textarea, .select {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  color: var(--text);
  width: 100%;
  transition: border-color 0.3s var(--ease-out);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--gold); outline: none; }
.textarea { resize: vertical; min-height: 92px; }

.swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.swatch {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  position: relative;
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.swatch:hover { transform: scale(1.12); }
.swatch[aria-pressed="true"] { border-color: var(--gold); transform: scale(1.12); }
.swatch[aria-pressed="true"]::after {
  content: '✓';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #0B0A08;
  font-size: 1rem; font-weight: 700;
  text-shadow: 0 0 6px rgb(255 255 255 / 0.6);
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  padding: 0.55em 1.1em;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: 0.3s var(--ease-out);
}
.chip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-light); background: rgb(201 162 39 / 0.08); }

.consejo-foto {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: var(--space-2);
  padding-left: 0.9rem;
  border-left: 2px solid rgb(201 162 39 / 0.45);
}
.consejo-foto strong { color: var(--gold-light); font-weight: 600; }

/* Consentimiento de imágenes */
.consent-field { margin-top: var(--space-3); }
.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.012);
  transition: border-color 0.3s var(--ease-out);
}
.consent-label:hover { border-color: rgb(201 162 39 / 0.4); }
.consent-label input {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 0.12em;
  accent-color: var(--gold);
  cursor: pointer;
}
.consent-label a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }
.consent-label strong { color: var(--text); }
.consent-label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Estado de carga */
.sim__status {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-deep);
  text-align: center;
}
.sim__status.is-on { display: block; }

.loader {
  width: 46px; height: 46px;
  margin: 0 auto var(--space-2);
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress-track { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: var(--space-2); }
.progress-bar { height: 100%; width: 0%; background: var(--gold-grad); transition: width 0.6s var(--ease-out); }

.sim__msg { font-size: 0.92rem; color: var(--text-muted); min-height: 1.5em; }

/* Resultados: comparador antes/después */
.results { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.compare {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__after { clip-path: inset(0 0 0 var(--split, 50%)); }
.compare__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  background: var(--gold);
  pointer-events: none;
}
.compare__handle::after {
  content: '⟺';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #0B0A08;
  font-size: 0.9rem;
  box-shadow: var(--shadow-gold);
}
.compare__tag {
  position: absolute;
  bottom: 10px;
  padding: 0.3em 0.8em;
  border-radius: 100px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgb(6 5 4 / 0.75);
  backdrop-filter: blur(6px);
}
.compare__tag--a { left: 10px; }

/* Insignia sobre la propia imagen del ejemplo ilustrativo del simulador:
   el texto de abajo puede quedar oculto tras el CTA flotante al hacer scroll,
   así que el aviso de "no es un trabajo real" va también encima de la imagen. */
.obra--ejemplo .compare::before {
  content: 'Ejemplo con IA — no es un trabajo real';
  position: absolute;
  top: 10px; left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 0.35em 0.9em;
  border-radius: 100px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gold);
  color: #0B0A08;
  pointer-events: none;
}
.compare__tag--b { right: 10px; color: var(--gold-light); }

.alert {
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 0.92rem;
  margin-top: var(--space-2);
}
.alert--err { border-color: rgb(196 87 75 / 0.5); background: rgb(196 87 75 / 0.09); color: #E9A79F; }
.alert--ok  { border-color: rgb(127 176 105 / 0.5); background: rgb(127 176 105 / 0.09); color: #B7D8A5; }

.notice {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: var(--space-2);
  line-height: 1.5;
}

/* Tarjeta de estimación orientativa — visualmente DISTINTA de un presupuesto:
   fondo neutro (no dorado), icono de aviso, nunca el estilo de "resultado
   bueno" que usan los .alert--ok. */
.estimate-card {
  margin-top: 0.9rem;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
}
.estimate-card__cabecera {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--warn);
}
.estimate-card__rango {
  margin-top: 0.5rem;
  font-size: 1.05rem;
}
.estimate-card__rango strong {
  font-family: var(--font-display);
  color: var(--gold-light);
  font-size: 1.35rem;
  font-weight: 600;
}
.estimate-card__rango span { color: var(--text-muted); font-size: 0.9rem; }
.estimate-card__detalle {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-faint);
}

/* ---------- 12. FAQ ---------- */
.faq details {
  border-top: 1px solid var(--line);
  padding-block: var(--space-2);
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.12rem;
  transition: color 0.3s var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-light); }
.faq summary::after {
  content: '+';
  color: var(--gold);
  font-size: 1.5rem;
  transition: transform 0.35s var(--ease-out);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-muted); padding-top: var(--space-2); max-width: 68ch; }

/* ---------- 13. CONTACTO ---------- */
.contact-grid {
  display: grid;
  gap: var(--space-4);
  background: linear-gradient(150deg, var(--surface-2), var(--bg-deep));
  border: 1px solid rgb(201 162 39 / 0.22);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 5vw, var(--space-5));
  box-shadow: var(--shadow);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 0.95fr 1.15fr; gap: var(--space-5); }
}

.contact-intro h2 { margin-top: 0.75rem; }
.contact-checklist { display: grid; gap: 0.6rem; margin-top: var(--space-3); }
.contact-checklist li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.94rem;
  color: var(--text-muted);
}
.contact-checklist li::before {
  content: '';
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgb(201 162 39 / 0.12);
  border: 1px solid rgb(201 162 39 / 0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0D27A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

.contact-alt {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.contact-alt p { font-size: 0.9rem; color: var(--text-faint); margin-bottom: 0.8rem; }

.contact-form { display: block; }
.contact-form .field:first-of-type { margin-top: 0; }
.contact-form .notice { margin-top: var(--space-2); }
#cf-status:empty { display: none; }
#cf-status .alert { margin-top: var(--space-2); }

/* ---------- 14. FOOTER ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-4) var(--space-3);
  background: var(--bg-deep);
}
.footer-grid { display: grid; gap: var(--space-3); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.site-footer h4 { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-2); }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: var(--text-muted); font-size: 0.92rem; transition: color 0.3s; }
.site-footer a:hover { color: var(--gold-light); }
.footer-bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-faint);
}

/* ---------- 15. WHATSAPP FLOTANTE ---------- */
.wa-float {
  position: fixed;
  bottom: 22px; left: 22px;
  z-index: 90;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: grid; place-items: center;
  box-shadow: 0 12px 34px -10px rgb(37 211 102 / 0.6);
  transition: transform 0.35s var(--ease-out);
}
.wa-float:hover { transform: scale(1.08) translateY(-2px); }
.wa-float svg { width: 30px; height: 30px; fill: #06301A; }

/* ---------- 15b. CTA RÁPIDA FLOTANTE ---------- */
.quick-cta {
  position: fixed;
  bottom: 22px; left: 22px;
  z-index: 90;
  display: flex; align-items: center; gap: 0.6rem;
  height: 52px;
  padding-inline: 1.15rem;
  border-radius: 100px;
  background: var(--surface-2);
  border: 1px solid rgb(201 162 39 / 0.4);
  color: var(--text);
  font-weight: 600; font-size: 0.9rem;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out),
              visibility 0.4s, border-color 0.3s, background 0.3s;
}
.quick-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.quick-cta:hover { border-color: var(--gold); background: var(--surface); color: var(--gold-light); }
.quick-cta__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgb(201 162 39 / 0.6);
  animation: pulse 2.4s infinite;
  flex: none;
}
@media (max-width: 480px) {
  .quick-cta { font-size: 0.84rem; padding-inline: 0.95rem; height: 48px; }
}

/* ---------- 16. CHAT LUMI ---------- */
.lumi-btn {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 95;
  height: 60px;
  padding: 3px 1.35rem 3px 3px;
  border-radius: 100px;
  background: var(--gold-grad);
  color: #12100B;
  display: flex; align-items: center; gap: 0.7rem;
  font-weight: 600; font-size: 0.94rem;
  box-shadow: var(--shadow-gold);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.lumi-btn:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -20px rgb(201 162 39 / 0.7); }

.lumi-btn__foto {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  border: 2px solid rgb(255 255 255 / 0.55);
  flex: none;
}
.lumi-btn__txt { white-space: nowrap; }

.lumi-btn__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgb(127 176 105 / 0.7);
  animation: pulse 2.4s infinite;
  flex: none;
}
@media (max-width: 480px) {
  .lumi-btn { padding-right: 1rem; }
  .lumi-btn__txt { display: none; }
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgb(127 176 105 / 0.6); }
  70%  { box-shadow: 0 0 0 9px rgb(127 176 105 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(127 176 105 / 0); }
}

.lumi-panel {
  position: fixed;
  /* --cc-h lo mide en vivo cookie-banner.js: 0 si no hay aviso visible.
     Sin esto, el aviso de cookies tapaba el campo de escribir y el botón de
     enviar en móvil (22px de solape medidos), dejando el chat inutilizable. */
  bottom: calc(90px + var(--cc-h, 0px));
  right: 22px;
  z-index: 96;
  width: min(390px, calc(100vw - 32px));
  height: min(560px, calc(100svh - 130px - var(--cc-h, 0px)));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0.35s;
}
.lumi-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.lumi-head {
  padding: var(--space-2);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--surface-2);
}
.lumi-avatar {
  position: relative;
  width: 42px; height: 42px;
  flex: none;
  display: block;
}
.lumi-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  border: 1.5px solid rgb(201 162 39 / 0.55);
}
.lumi-online {
  position: absolute;
  right: 0; bottom: 1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid var(--surface-2);
}
.lumi-head strong { display: block; font-size: 0.98rem; }
.lumi-head small { color: var(--ok); font-size: 0.76rem; }
.lumi-close { margin-left: auto; color: var(--text-muted); font-size: 1.4rem; padding: 0.2rem 0.5rem; }
.lumi-close:hover { color: var(--text); }

.lumi-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.msg {
  max-width: 84%;
  padding: 0.7em 1em;
  border-radius: 16px;
  font-size: 0.93rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg--bot  { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; max-width: 100%; }
.msg--user { background: var(--gold-grad); color: #12100B; border-bottom-right-radius: 5px; align-self: flex-end; font-weight: 500; }

/* Fila con la cara de Lumi + su mensaje */
.msg-fila {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  align-self: flex-start;
  max-width: 92%;
  animation: msgIn 0.4s var(--ease-out) both;
}
.msg-foto {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  flex: none;
  border: 1px solid rgb(201 162 39 / 0.4);
}
.msg--user { animation: msgIn 0.4s var(--ease-out) both; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.lumi-typing { display: flex; gap: 4px; padding: 0.8em 1em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; border-bottom-left-radius: 5px; }
.lumi-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: bob 1.3s infinite; }
.lumi-typing i:nth-child(2) { animation-delay: 0.18s; }
.lumi-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes bob { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }

.lumi-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 var(--space-2) var(--space-2); }
.lumi-quick button {
  font-size: 0.8rem;
  padding: 0.45em 0.9em;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--text-muted);
  transition: 0.3s var(--ease-out);
}
.lumi-quick button:hover { border-color: var(--gold); color: var(--gold-light); }

.lumi-foot {
  padding: var(--space-2);
  border-top: 1px solid var(--line);
  display: flex; gap: 0.5rem;
  background: var(--surface-2);
}
.lumi-foot input {
  flex: 1;
  /* min-width:0 es imprescindible: por defecto un flex item no encoge por
     debajo de su ancho intrínseco, así que con el texto del sistema en grande
     el input empujaba el botón de enviar FUERA de la pantalla. */
  min-width: 0;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.7em 1.1em;
  font-size: 0.92rem;
}
.lumi-foot input:focus { border-color: var(--gold); outline: none; }
.lumi-send {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: var(--gold-grad);
  color: #12100B;
  display: grid; place-items: center;
  transition: transform 0.25s var(--ease-out);
}
.lumi-send:hover { transform: scale(1.08); }
.lumi-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ---------- 17. CURSOR CUSTOM ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
              background 0.3s var(--ease-out), opacity 0.3s;
  mix-blend-mode: difference;
  opacity: 0;
}
.cursor.is-on { opacity: 1; }
.cursor.is-hover { width: 52px; height: 52px; background: rgb(201 162 39 / 0.16); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- 17b. PARALLAX Y TITULARES ---------- */

/* Barra de progreso de lectura */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 101;
  pointer-events: none;
}

/* Titulares partidos por palabras: el overflow oculta la palabra hasta que sube */
.palabra { display: inline-block; overflow: hidden; vertical-align: bottom; }
.palabra > span { display: inline-block; }
.palabra-bloque { display: inline-block; }

/* Sin JS, las palabras se ven igual */
.no-js .palabra > span { transform: none !important; }

/* Capa de atmósfera con parallax en las secciones */
.capa-parallax {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}
.capa-parallax--oro {
  width: min(46vw, 520px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(201 162 39 / 0.16), transparent 68%);
}
.section { overflow: clip; }

/* Pasada de rodillo: una mancha de pintura que "se aplica" al entrar en la
   sección. Arranca en scaleX(0) (sin pintar) y el JS la escala con el scroll. */
.paint-stroke {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: min(420px, 68vw);
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(100deg,
    transparent 2%,
    rgb(201 162 39 / 0.30) 28%,
    rgb(240 210 122 / 0.38) 50%,
    rgb(201 162 39 / 0.24) 72%,
    transparent 98%);
  filter: blur(15px);
  transform: scaleX(0) rotate(-2.5deg);
  transform-origin: left center;
  will-change: transform;
}

@media (max-width: 760px) {
  .capa-parallax { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .palabra { overflow: visible; }
  .palabra > span { transform: none !important; }
  .capa-parallax { display: none; }
  /* Sigue ahí como detalle decorativo, solo que sin animar */
  .paint-stroke { transform: scaleX(1) rotate(-2.5deg); }
}

/* ---------- 18. REVEALS (los anima GSAP; esto es el estado inicial) ----------
   El contenido del HERO NUNCA arranca invisible: es el elemento LCP y no puede
   depender de que un CDN externo cargue. Se anima con un fade CSS propio.
   Solo el contenido por debajo del pliegue espera a GSAP. */
[data-reveal] { opacity: 0; transform: translateY(28px); }
.no-js [data-reveal] { opacity: 1; transform: none; }

.hero [data-reveal],
.hero [data-reveal-chars] {
  opacity: 1;
  transform: none;
  animation: heroIn 0.9s var(--ease-out) both;
}
.hero [data-reveal]:nth-of-type(2) { animation-delay: 0.06s; }
.hero .lead        { animation-delay: 0.12s; }
.hero__cta         { animation-delay: 0.18s; }
.hero__stats       { animation-delay: 0.24s; }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 19. PÁGINAS LEGALES ---------- */
.legal-wrapper {
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(3rem, 9vw, 6rem) clamp(1.25rem, 5vw, 2.5rem) var(--space-5);
  position: relative;
  z-index: 2;
}
.legal-wrapper h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  margin-bottom: var(--space-3);
}
.legal-wrapper h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--gold-light);
}
.legal-wrapper h3 {
  font-size: 1.12rem;
  margin-top: var(--space-3);
  margin-bottom: 0.6rem;
}
.legal-wrapper p { margin-bottom: var(--space-2); color: var(--text-muted); }
.legal-wrapper ul { margin: 0 0 var(--space-2) 1.2rem; }
.legal-wrapper li {
  margin-bottom: 0.55rem;
  color: var(--text-muted);
  list-style: none;
  position: relative;
  padding-left: 1.1rem;
}
.legal-wrapper li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 1px;
  background: var(--gold);
}
.legal-wrapper strong { color: var(--text); font-weight: 600; }
.legal-wrapper a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.legal-wrapper a:hover { color: var(--gold); }
.legal-wrapper code {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.12em 0.4em;
  color: var(--gold-light);
}

.legal-back {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
  color: var(--text-muted) !important;
  text-decoration: none !important;
}
.legal-back:hover { color: var(--gold-light) !important; }

.legal-fecha {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--text-faint) !important;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: 0.9rem;
}

/* Marcador imposible de pasar por alto para datos fiscales pendientes */
.legal-pendiente {
  display: inline-block;
  background: rgb(217 142 50 / 0.16);
  border: 1px dashed var(--warn);
  border-radius: 5px;
  padding: 0.1em 0.5em;
  color: #F0B968;
  font-size: 0.9em;
  font-weight: 600;
}
.legal-pendiente::before { content: '⚠ '; }

.tabla-scroll { overflow-x: auto; margin-bottom: var(--space-2); }
.cookie-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 520px;
}
.cookie-table th, .cookie-table td {
  border: 1px solid var(--line);
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
}
.cookie-table th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cookie-table td { color: var(--text-muted); }

/* Enlaces legales del pie */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.footer-legal a { color: var(--text-faint); }
.footer-legal a:hover { color: var(--gold-light); }
.footer-legal button {
  color: var(--text-faint);
  font-size: 0.85rem;
  padding: 0;
  transition: color 0.3s var(--ease-out);
}
.footer-legal button:hover { color: var(--gold-light); }

/* ---------- 20. ACCESIBILIDAD ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 1rem;
  z-index: 200;
  background: var(--gold); color: #0B0A08;
  padding: 0.6em 1.2em; border-radius: 0 0 8px 8px;
  transition: top 0.25s var(--ease-out);
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .cursor { display: none; }
}