/* ==========================================================================
   HUNTINGTON COLLISION
   Sistema visual alineado al de The Car Guys (Car-): negro profundo, acento
   único, glass, cards elevadas, píldoras y gradientes. El acento aquí es el
   azul del logo en vez del dorado.
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root {
  /* Superficie */
  --black:     #050505;
  --ink:       #0a0a0a;
  --graphite:  #111111;
  --graphite-2:#161616;

  /* Acento — muestreado del logo */
  --blue:      #0157F9;
  --blue-soft: #5B9DFF;
  --blue-lift: #7FB2FF;
  --blue-deep: #0142C4;

  --amber:     #FFB020;

  /* Tipografía */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Syne', 'Inter', system-ui, sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Sombras */
  --shadow-soft: 0 30px 60px -20px rgb(0 0 0 / .6);
  --shadow-glow: 0 0 40px rgb(1 87 249 / .25);

  /* Ritmo */
  --pad-x: clamp(1.25rem, 5vw, 2.5rem);
  --maxw: 1440px;
  --maxw-tight: 1180px;
  --gap-s: 1rem;
  --gap-m: 1.75rem;
  --gap-l: 3rem;
  --gap-xl: clamp(3.5rem, 7vw, 5.5rem);

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-micro: 200ms;
  --t-ui: 320ms;
  --t-slow: 600ms;

  /* Z-scale */
  --z-raised: 10;
  --z-nav: 50;
  --z-ticker: 60;
  --z-mobilecta: 70;
  --z-modal: 90;
  --z-loader: 100;

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--black);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgb(1 87 249 / .2);
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; touch-action: manipulation; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
ul, ol { list-style: none; padding: 0; }

*:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--blue); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--blue), var(--blue-deep)); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

:where(h1, h2, h3, section[id], div[id]) { scroll-margin-top: 7rem; }

.skip {
  position: absolute; left: -9999px; top: 0;
  z-index: var(--z-loader);
  background: var(--blue); color: #fff;
  padding: .85rem 1.4rem; border-radius: 999px; font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- UTILIDADES DE MARCA ---------- */
.gradient-text {
  background: linear-gradient(135deg, var(--blue-lift) 0%, var(--blue-soft) 45%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.glass {
  background: rgb(20 20 20 / .5);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgb(255 255 255 / .08);
}

.shine { position: relative; overflow: hidden; }
.shine::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .9s var(--ease);
  pointer-events: none;
}
.shine:hover::before { transform: translateX(100%); }

.card-hover { transition: transform .5s var(--ease), box-shadow .5s ease, border-color .4s ease; }
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft), 0 0 0 1px rgb(1 87 249 / .25);
}

.diagonal-stripes {
  background-image: repeating-linear-gradient(45deg,
    rgb(1 87 249 / .1) 0, rgb(1 87 249 / .1) 1px, transparent 1px, transparent 12px);
}

.noise-bg {
  background-image:
    radial-gradient(1200px 600px at 18% -10%, rgb(1 87 249 / .1), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgb(91 157 255 / .07), transparent 60%),
    linear-gradient(180deg, var(--black) 0%, var(--ink) 100%);
}

/* Blobs de fondo: profundidad sin cargar el DOM */
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none; z-index: 0;
}
.blob-a { top: -18rem; right: -14rem; width: 34rem; height: 34rem; background: rgb(1 87 249 / .12); }
.blob-b { bottom: -16rem; left: -12rem; width: 28rem; height: 28rem; background: rgb(91 157 255 / .08); }

.grid-lines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .04;
  background-image:
    linear-gradient(rgb(255 255 255 / .5) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .5) 1px, transparent 1px);
  background-size: 5rem 5rem;
}

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: var(--z-raised);
  opacity: .05; mix-blend-mode: overlay;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--blue-lift));
  z-index: var(--z-ticker); will-change: transform;
}

/* ---------- INTERACCIONES PREMIUM ---------- */

/* Tilt 3D: el JS escribe --rx/--ry desde la posición del puntero.
   Sin JS la tarjeta queda plana, que es un estado válido. */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt-in {
  transition: transform .45s var(--ease);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
}
.tilt:hover .tilt-in { transition: transform .12s linear; }

/* Brillo que sigue al puntero DENTRO de la tarjeta (no en el cursor) */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(340px circle at var(--px, 50%) var(--py, 50%),
              rgb(1 87 249 / .16), transparent 65%);
  opacity: 0; transition: opacity .4s ease;
}
.sheen:hover::after { opacity: 1; }

/* Botón magnético: el JS empuja --mx/--my unos pocos px */
.magnetic { transition: transform .45s var(--ease); }
.magnetic:hover { transform: translate(var(--mx, 0px), var(--my, 0px)); }

/* Borde con degradado que gira. Se activa en hover para no gastar GPU. */
.edge-glow { position: relative; isolation: isolate; }
.edge-glow::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--spin, 0deg),
    transparent 0deg, var(--blue) 70deg, var(--blue-lift) 130deg, transparent 200deg, transparent 360deg);
  opacity: 0; transition: opacity .45s ease;
}
.edge-glow:hover::before { opacity: .85; animation: spin 3.4s linear infinite; }
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --spin: 360deg; } }

/* Subrayado que barre */
.sweep {
  background-image: linear-gradient(90deg, var(--blue-lift), var(--blue));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .5s var(--ease);
}
.sweep:hover { background-size: 100% 1.5px; }

/* Parallax suave: el JS escribe --par en píxeles */
.parallax { transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }

/* Flotación lenta para acentos */
.float { animation: floaty 7s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Revelado de titular palabra por palabra */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word > i { display: inline-block; font-style: inherit; }
html.anim .word > i { transform: translateY(105%); transition: transform .8s var(--ease); }
html.anim .is-in .word > i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tilt-in { transform: none !important; }
  .edge-glow:hover::before { animation: none; }
  .float { animation: none; }
  .parallax { transform: none !important; }
  html.anim .word > i { transform: none; }
}

/* ---------- TIPOGRAFÍA ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .95;
  text-wrap: balance;
}
/* La segunda línea del titular: serif itálica con degradado. Es la firma
   visual del sistema, no un adorno suelto. */
.accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.01em;
}

.h-hero { font-size: clamp(1.9rem, min(5.6vw, 7vh), 4.25rem); }
.h-1    { font-size: clamp(1.6rem, 4vw, 3rem); }
.h-2    { font-size: clamp(1.35rem, 3vw, 2.25rem); }
.h-3    { font-size: clamp(1rem, 1.7vw, 1.2rem); }

.kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .625rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgb(255 255 255 / .6);
}
.lede {
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  font-weight: 300; line-height: 1.75;
  color: rgb(255 255 255 / .72);
  max-width: 60ch; text-wrap: pretty;
}
p { text-wrap: pretty; }
.mono {
  font-family: var(--font-mono);
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgb(255 255 255 / .5);
}
.num { font-variant-numeric: tabular-nums; }
.dim  { color: rgb(255 255 255 / .6); }
.blue { color: var(--blue-soft); }

/* ---------- LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.wrap-tight { width: 100%; max-width: var(--maxw-tight); margin-inline: auto; padding-inline: var(--pad-x); }
.section { position: relative; padding-block: var(--gap-xl); overflow: hidden; isolation: isolate; }
.section > .wrap, .section > .wrap-tight { position: relative; z-index: 1; }

/* Encabezado de sección: título 2 líneas + apoyo a la derecha */
.head { display: grid; gap: var(--gap-m); align-items: end; margin-bottom: var(--gap-l); }
@media (min-width: 960px) {
  .head { grid-template-columns: 1.35fr 1fr; gap: var(--gap-l); }
}
.head h2 { margin-bottom: 0; }

/* ---------- LOADER ---------- */
html:not(.loading) .loader { display: none; }
html.loading, html.loading body { overflow: hidden; }

.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: grid; place-items: center;
  background: var(--black);
  transition: opacity 600ms var(--ease), visibility 600ms;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-in { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.loader-logo {
  width: clamp(92px, 17vw, 140px); height: auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 26px rgb(1 87 249 / .45));
  animation: breathe 2.6s ease-in-out infinite;
}
.loader-word {
  font-family: var(--font-mono);
  font-size: .56rem; letter-spacing: .38em; text-transform: uppercase;
  color: rgb(255 255 255 / .45); text-indent: .38em;
}
.loader-bar { width: min(190px, 44vw); height: 2px; background: rgb(255 255 255 / .12); border-radius: 999px; overflow: hidden; }
.loader-bar i {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lift));
  transform: scaleX(0); transform-origin: 0 50%;
  animation: fill 1.3s var(--ease) forwards;
}
@keyframes fill { to { transform: scaleX(1); } }
@keyframes breathe {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* ---------- TICKER SUPERIOR ---------- */
.ticker {
  position: fixed; top: 0; inset-inline: 0; z-index: var(--z-ticker);
  height: 1.75rem; overflow: hidden;
  background: var(--black); border-bottom: 1px solid rgb(255 255 255 / .05);
  display: none;
}
@media (min-width: 768px) { .ticker { display: block; } }
.ticker-track {
  display: flex; width: max-content; align-items: center; height: 100%;
  animation: slide 60s linear infinite;
  font-family: var(--font-mono);
  font-size: .5625rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgb(255 255 255 / .55);
}
.ticker-track > div { display: flex; align-items: center; gap: 3rem; padding-inline: 1.5rem; }
.ticker-track b { color: var(--blue-soft); font-weight: 400; }
/* Sin esto el texto envuelve y la cinta crece a dos líneas */
.ticker-track span, .ticker-track b { white-space: nowrap; flex: 0 0 auto; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-nav);
  transition: top var(--t-ui) var(--ease);
  padding-top: env(safe-area-inset-top);
}
@media (min-width: 768px) { .nav { top: 1.75rem; } }

.nav-shell {
  max-width: var(--maxw); margin-inline: auto;
  /* El descenso va por transform, no por margin: animar margin obliga a
     recalcular layout en cada frame de la transición. */
  transition: transform var(--t-ui) var(--ease);
}
.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-m); height: 4.25rem;
  padding-inline: var(--pad-x);
  transition: background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
              box-shadow var(--t-ui) var(--ease), border-radius var(--t-ui) var(--ease);
  border: 1px solid transparent;
}
/* Al bajar, la barra se despega y se vuelve píldora */
/* El estrechamiento es instantáneo y queda enmascarado por la aparición
   del fondo; solo el descenso se anima. */
.nav.is-stuck .nav-shell { transform: translateY(.75rem); padding-inline: clamp(.75rem, 2vw, 1rem); }
.nav.is-stuck .nav-in {
  background: rgb(5 5 5 / .9);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-color: rgb(255 255 255 / .1);
  border-radius: 999px;
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / .8);
}

.brand { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; position: relative; }
/* El logo es un JPEG con fondo negro. Sobre la foto del hero ese rectángulo
   se nota, así que vive dentro de un chip oscuro propio. */
.brand-mark {
  position: relative;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--black);
  border: 1px solid rgb(255 255 255 / .12);
  overflow: hidden;
  flex-shrink: 0;
}
.brand-mark::before {
  content: ''; position: absolute; inset: -.3rem; border-radius: 50%;
  background: rgb(1 87 249 / .4); filter: blur(14px);
  opacity: 0; transition: opacity var(--t-ui) ease; z-index: -1;
}
.brand:hover .brand-mark::before { opacity: 1; }
.brand-mark img { position: relative; width: 50px; height: 50px; object-fit: contain; }
.brand-txt { line-height: 1.15; display: none; }
@media (min-width: 640px) { .brand-txt { display: block; } }
.brand-txt b {
  display: block; font-family: var(--font-display);
  font-size: .8125rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.brand-txt small {
  display: block; font-family: var(--font-mono);
  font-size: .5rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgb(91 157 255 / .8);
}

.nav-links { display: none; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
@media (min-width: 1025px) { .nav-links { display: flex; } }
.nav-link {
  position: relative; padding: .35rem 0;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgb(255 255 255 / .65);
  transition: color var(--t-micro) ease;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -.15rem;
  height: 1.5px; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--blue-lift));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-ui) var(--ease);
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: #fff; }

.nav-right { display: flex; align-items: center; gap: .75rem; }

.lang {
  display: flex; align-items: center;
  border: 1px solid rgb(255 255 255 / .15);
  border-radius: 999px; overflow: hidden;
}
.lang button {
  font-family: var(--font-mono);
  font-size: .5625rem; letter-spacing: .12em;
  padding: .4rem .6rem; color: rgb(255 255 255 / .5);
  transition: color var(--t-micro) ease, background var(--t-micro) ease;
}
.lang button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.lang button:hover:not([aria-pressed="true"]) { color: #fff; }

/* Con `.nav` delante para ganarle a `.btn`, que se declara más abajo */
.nav .nav-cta { display: none; }
@media (min-width: 1025px) { .nav .nav-cta { display: inline-flex; } }

.burger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: #fff; }
.burger:hover { background: rgb(255 255 255 / .08); }
@media (min-width: 1025px) { .burger { display: none; } }

.nav-panel {
  display: none; flex-direction: column; gap: .2rem;
  margin: .5rem var(--pad-x) 0;
  padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  background: rgb(5 5 5 / .96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-soft);
}
.nav-panel.open { display: flex; }
.nav-panel a {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
  padding: .75rem 0;
  border-bottom: 1px solid rgb(255 255 255 / .07);
  transition: color var(--t-micro) ease;
}
.nav-panel a:last-of-type { border-bottom: 0; }
.nav-panel a:hover, .nav-panel a.active { color: var(--blue-soft); }

/* ---------- BOTONES (píldoras) ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 44px; padding: .8rem 1.6rem;
  border-radius: 999px;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t-micro) ease, color var(--t-micro) ease,
              border-color var(--t-micro) ease, transform var(--t-micro) var(--ease),
              box-shadow var(--t-ui) ease;
}
.btn svg { flex-shrink: 0; transition: transform var(--t-ui) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--blue); color: #fff;
  box-shadow: 0 0 0 1px rgb(1 87 249 / .3), 0 18px 40px -14px rgb(1 87 249 / .55);
}
.btn-primary:hover { background: var(--blue-deep); box-shadow: 0 0 0 1px rgb(1 87 249 / .5), 0 22px 50px -12px rgb(1 87 249 / .7); }

.btn-ghost { border: 1px solid rgb(255 255 255 / .25); color: #fff; }
.btn-ghost:hover { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .4); }

.btn-lg { min-height: 52px; padding: 1rem 2rem; font-size: .75rem; }
.btn-sm { min-height: 38px; padding: .55rem 1.1rem; font-size: .625rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-soft); padding-block: .35rem;
}
.link-arrow svg { transition: transform var(--t-ui) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 800px);
  min-height: min(88svh, 800px); /* fallback arriba: Safari <15.4 no entiende svh */
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; isolation: isolate;
  padding-top: 5rem;
}
.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  animation: slowzoom 24s ease-in-out infinite;
}
@keyframes slowzoom {
  0%, 100% { transform: scale(1.05); }
  50%      { transform: scale(1.12); }
}
/* El velo se concentra a la izquierda, donde va el texto, y suelta el lado
   derecho para que el carro se vea. Antes lo tapaba entero. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to bottom, rgb(5 5 5 / .3) 0%, rgb(5 5 5 / .38) 55%, var(--black) 100%),
    linear-gradient(to right, rgb(5 5 5 / .93) 0%, rgb(5 5 5 / .62) 34%, rgb(5 5 5 / .12) 68%, transparent 100%);
}
.hero-stripes { position: absolute; inset: 0; z-index: -1; opacity: .06; }

.hero-body { position: relative; z-index: 1; display: grid; gap: var(--gap-l); align-items: center; }
@media (min-width: 1100px) { .hero-body { grid-template-columns: minmax(0, 1fr) auto; } }

.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 1.4rem; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.stars { display: inline-flex; gap: .1rem; color: var(--amber); font-size: .7rem; letter-spacing: .05em; }

/* Panel de vídeo vertical (todo el material se grabó en 9:16) */
.hero-reel {
  display: none; position: relative;
  width: clamp(190px, 15vw, 240px); aspect-ratio: 9 / 16; max-height: 44vh;
  border-radius: 1.5rem; overflow: hidden;
  border: 1px solid rgb(255 255 255 / .12);
  background: var(--graphite);
  box-shadow: var(--shadow-soft);
  justify-self: end;
}
@media (min-width: 1100px) { .hero-reel { display: block; } }
.hero-reel video { width: 100%; height: 100%; object-fit: cover; }
.hero-reel-tag {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; align-items: center; gap: .45rem;
  padding: 2.2rem .9rem .85rem;
  background: linear-gradient(to top, rgb(5 5 5 / .92), transparent);
  font-family: var(--font-mono);
  font-size: .5rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgb(255 255 255 / .7);
}
.hero-reel-tag::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgb(1 87 249 / .6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(1 87 249 / .55); }
  50%      { box-shadow: 0 0 0 8px rgb(1 87 249 / 0); }
}

/* Marquee al pie del hero */
.hero-marquee {
  position: absolute; bottom: 0; inset-inline: 0; z-index: 2;
  height: 2.5rem; overflow: hidden;
  border-top: 1px solid rgb(255 255 255 / .1);
  background: rgb(5 5 5 / .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; align-items: center;
}
.hero-marquee .ticker-track { animation-duration: 55s; font-size: .5625rem; letter-spacing: .34em; }

/* ---------- BANDA DE URGENCIA ---------- */
.urgent { position: relative; background: linear-gradient(100deg, var(--blue-deep), var(--blue)); color: #fff; overflow: hidden; }
.urgent-in {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .6rem 1.5rem; padding-block: 1rem; text-align: center;
}
.urgent p { font-size: clamp(.85rem, 1.5vw, 1rem); font-weight: 600; }
.urgent a {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .4rem 1.2rem; border-radius: 999px;
  border: 1.5px solid rgb(255 255 255 / .55);
  font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: background var(--t-micro) ease, color var(--t-micro) ease, border-color var(--t-micro) ease;
}
.urgent a:hover { background: #fff; color: var(--blue); border-color: #fff; }

/* ---------- CARDS ---------- */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card {
  position: relative;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: rgb(255 255 255 / .03);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgb(255 255 255 / .1);
  transition: border-color var(--t-ui) ease, transform .5s var(--ease), box-shadow .5s ease;
}
.card:hover { border-color: rgb(1 87 249 / .4); transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.card-icon {
  width: 2.75rem; height: 2.75rem; border-radius: .85rem;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: rgb(1 87 249 / .15); color: var(--blue-soft);
  transition: background var(--t-slow) ease, color var(--t-slow) ease;
}
.card:hover .card-icon { background: var(--blue); color: #fff; }
.card h3 { margin-bottom: .55rem; }
.card p { font-size: .8125rem; color: rgb(255 255 255 / .6); line-height: 1.65; }

/* Card de servicio con imagen */
.svc-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 1.25rem; overflow: hidden;
  background: var(--graphite);
  border: 1px solid rgb(255 255 255 / .1);
  transition: border-color var(--t-ui) ease, transform .5s var(--ease), box-shadow .5s ease;
}
.svc-card:hover { border-color: rgb(1 87 249 / .4); transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.svc-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.svc-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
  opacity: .85;
  transition: transform .8s var(--ease), opacity .6s ease;
}
.svc-card:hover .svc-media img { transform: scale(1.08); opacity: 1; }
.svc-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(17 17 17 / .95), transparent 60%);
}
.svc-tag {
  position: absolute; top: .85rem; left: .85rem; z-index: 1;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgb(5 5 5 / .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgb(255 255 255 / .12);
  font-family: var(--font-mono);
  font-size: .5rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue-soft);
}
.svc-body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { margin-bottom: .5rem; }
.svc-body p { font-size: .8125rem; color: rgb(255 255 255 / .6); line-height: 1.6; flex: 1; }
.svc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / .1);
}
.svc-price { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }
.svc-time { display: block; font-family: var(--font-mono); font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .45); margin-top: .15rem; }

/* ---------- ASEGURADORAS ---------- */
.carriers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; }
/* Tintadas hacia el azul de marca. En gris neutro se leían como un bloque
   ajeno al resto de la página. */
.carriers div {
  display: grid; place-items: center; text-align: center;
  padding: 1.15rem .75rem; border-radius: .9rem;
  background: linear-gradient(160deg, rgb(1 87 249 / .12), rgb(1 87 249 / .035));
  border: 1px solid rgb(1 87 249 / .28);
  font-family: var(--font-display);
  font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: rgb(255 255 255 / .75);
  transition: color var(--t-ui) ease, border-color var(--t-ui) ease,
              background var(--t-ui) ease, box-shadow var(--t-ui) ease, transform .4s var(--ease);
}
.carriers div:hover {
  color: #fff;
  border-color: rgb(1 87 249 / .65);
  background: linear-gradient(160deg, rgb(1 87 249 / .26), rgb(1 87 249 / .09));
  box-shadow: 0 14px 30px -14px rgb(1 87 249 / .55);
  transform: translateY(-3px);
}
@media (hover: none) { .carriers div:hover { transform: none; } }

/* ---------- TIRA DE REELS ---------- */
.reel-strip {
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; padding-bottom: 1rem;
  margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x);
}
@media (min-width: 1025px) { .reel-strip { margin-inline: 0; padding-inline: 0; } }
.reel {
  position: relative; flex: 0 0 auto;
  width: clamp(158px, 20vw, 246px); aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  border-radius: 1.25rem; overflow: hidden;
  background: var(--graphite); border: 1px solid rgb(255 255 255 / .1);
  transition: border-color var(--t-ui) ease, transform .5s var(--ease);
}
.reel:hover { border-color: rgb(1 87 249 / .4); transform: translateY(-5px); }
.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; }
.reel-tag {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2.2rem .85rem .8rem;
  background: linear-gradient(to top, rgb(5 5 5 / .92), transparent);
  font-family: var(--font-mono);
  font-size: .5rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgb(255 255 255 / .7);
}

/* ---------- GALERÍA ---------- */
.photo-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.tile {
  position: relative; overflow: hidden;
  border-radius: 1.25rem;
  background: var(--graphite); border: 1px solid rgb(255 255 255 / .1);
  transition: border-color var(--t-ui) ease, transform .5s var(--ease), box-shadow .5s ease;
}
.tile:hover { border-color: rgb(1 87 249 / .4); transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.photo-grid .tile { aspect-ratio: 3 / 4; }
.photo-lead { aspect-ratio: 16 / 9; margin-bottom: 1rem; }
@media (max-width: 640px) { .photo-lead { aspect-ratio: 4 / 3; } }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; transition: transform .8s var(--ease); }
.tile:hover img, .tile:hover video { transform: scale(1.06); }
.tile img[src*="shop-"] { object-position: center 45%; }
.tile-cap {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2.5rem 1rem .9rem;
  background: linear-gradient(to top, rgb(5 5 5 / .92), transparent);
  font-family: var(--font-mono);
  font-size: .5rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgb(255 255 255 / .7);
}

/* ---------- PROCESO ---------- */
.steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: step; }
.step {
  position: relative; padding: 1.6rem 1.4rem 1.4rem;
  border-radius: 1.25rem;
  background: rgb(255 255 255 / .03);
  border: 1px solid rgb(255 255 255 / .1);
  transition: border-color var(--t-ui) ease, transform .5s var(--ease);
}
.step:hover { border-color: rgb(1 87 249 / .4); transform: translateY(-5px); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: .9rem;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 800;
  background: linear-gradient(135deg, var(--blue-lift), var(--blue));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.step h3 { margin-bottom: .5rem; }
.step p { font-size: .8125rem; color: rgb(255 255 255 / .6); line-height: 1.65; }

/* ---------- RESEÑAS ---------- */
.quote-lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem); line-height: 1.45;
  color: rgb(255 255 255 / .9); text-wrap: balance;
}
.reviews { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.review {
  padding: 1.5rem; border-radius: 1.25rem;
  background: rgb(255 255 255 / .03);
  border: 1px solid rgb(255 255 255 / .1);
  transition: border-color var(--t-ui) ease, transform .5s var(--ease);
}
.review:hover { border-color: rgb(1 87 249 / .35); transform: translateY(-4px); }
.review p { font-size: .8125rem; color: rgb(255 255 255 / .68); line-height: 1.7; margin-block: .85rem; }
.review-by { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .45); }

/* Métricas en fila */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.stat { padding: 1.4rem 1.2rem; border-radius: 1.25rem; background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .1); text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1; }
.stat span { display: block; margin-top: .5rem; font-family: var(--font-mono); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: rgb(255 255 255 / .45); }

/* ---------- FORMULARIO ---------- */
.panel {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: 1.5rem;
  background: rgb(255 255 255 / .03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / .1);
}
.field { display: block; margin-bottom: 1.1rem; }
.field-label {
  display: block; margin-bottom: .45rem;
  font-family: var(--font-mono);
  font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgb(255 255 255 / .5);
}
.input {
  width: 100%; min-height: 48px;
  padding: .8rem 1.05rem;
  border-radius: .85rem;
  background: rgb(255 255 255 / .04);
  border: 1px solid rgb(255 255 255 / .12);
  font-size: .9rem; font-weight: 300; color: #fff;
  transition: border-color var(--t-micro) ease, background var(--t-micro) ease, box-shadow var(--t-micro) ease;
}
.input::placeholder { color: rgb(255 255 255 / .35); }
.input:hover { border-color: rgb(255 255 255 / .2); }
.input:focus { border-color: var(--blue); background: rgb(1 87 249 / .05); box-shadow: 0 0 0 3px rgb(1 87 249 / .15); outline: none; }
.input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
textarea.input { min-height: 110px; resize: vertical; line-height: 1.6; }
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: .75rem; color: rgb(255 255 255 / .45); line-height: 1.6; }
.form-msg {
  margin-top: 1rem; padding: .9rem 1.1rem; border-radius: .85rem;
  background: rgb(1 87 249 / .12); border: 1px solid rgb(1 87 249 / .35);
  font-size: .85rem;
}
.form-msg[hidden] { display: none; }
.err { color: #FF8A80; font-size: .7rem; margin-top: .35rem; }
.err[hidden] { display: none; }
.input[aria-invalid="true"] { border-color: #FF8A80; }

/* ---------- CONTACTO ---------- */
.contact-grid { display: grid; gap: var(--gap-l); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1.1fr .9fr; gap: var(--gap-xl); align-items: start; } }
.info-list { display: grid; gap: 1.4rem; }
.info-item { display: flex; gap: 1rem; align-items: flex-start; }
.info-item .card-icon { width: 2.4rem; height: 2.4rem; margin-bottom: 0; border-radius: .7rem; flex-shrink: 0; }
.info-item b {
  display: block; margin-bottom: .25rem;
  font-family: var(--font-mono); font-size: .5625rem;
  letter-spacing: .22em; text-transform: uppercase; color: rgb(255 255 255 / .45);
}
.info-item span, .info-item a { font-size: .9rem; line-height: 1.55; }
.info-item a:hover { color: var(--blue-soft); }

.map {
  position: relative; aspect-ratio: 21 / 9;
  border-radius: 1.5rem; overflow: hidden;
  border: 1px solid rgb(255 255 255 / .1);
  background: var(--graphite);
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.7);
}
@media (max-width: 700px) { .map { aspect-ratio: 4 / 3; } }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-strip { aspect-ratio: 40 / 9; }
@media (max-width: 900px) { .map-strip { aspect-ratio: 21 / 9; } }
@media (max-width: 560px) { .map-strip { aspect-ratio: 3 / 2; } }
.foot-map-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: .9rem; }

/* ---------- CIERRE ---------- */
.closer { position: relative; overflow: hidden; isolation: isolate; }
.closer-media { position: absolute; inset: 0; z-index: -2; }
.closer-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.closer::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgb(5 5 5 / .82), rgb(5 5 5 / .95));
}

/* ---------- ENCABEZADO INTERIOR ---------- */
.page-head {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(7rem, 16vh, 10rem) clamp(2.5rem, 6vh, 4rem);
}
.page-head-media { position: absolute; inset: 0; z-index: -2; opacity: .35; }
.page-head-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.page-head::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgb(5 5 5 / .75), var(--black) 92%);
}
.crumbs { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; }
.crumbs a { color: rgb(255 255 255 / .5); transition: color var(--t-micro) ease; }
.crumbs a:hover { color: var(--blue-soft); }

/* ---------- FOOTER ---------- */
.foot { position: relative; border-top: 1px solid rgb(255 255 255 / .08); padding-block: var(--gap-l) 2rem; overflow: hidden; }
.foot-grid { display: grid; gap: var(--gap-m); position: relative; z-index: 1; }
@media (min-width: 720px)  { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--gap-l); } }
.foot h3 {
  margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: .5625rem;
  letter-spacing: .24em; text-transform: uppercase; color: rgb(255 255 255 / .45); font-weight: 400;
}
.foot-links { display: flex; flex-direction: column; gap: .6rem; }
.foot-links a, .foot address a { font-size: .8125rem; color: rgb(255 255 255 / .6); transition: color var(--t-micro) ease; }
.foot-links a:hover, .foot address a:hover { color: var(--blue-soft); }
.foot address { font-style: normal; font-size: .8125rem; color: rgb(255 255 255 / .6); line-height: 1.8; }
.foot-logo { width: 52px; height: 52px; object-fit: contain; mix-blend-mode: screen; margin-bottom: 1rem; filter: drop-shadow(0 0 14px rgb(1 87 249 / .3)); }
.foot-base {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  justify-content: space-between; align-items: center;
  margin-top: var(--gap-l); padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / .08);
}

/* ---------- CTA MÓVIL ---------- */
.mobile-cta {
  position: fixed; inset-inline: .75rem; bottom: .75rem;
  z-index: var(--z-mobilecta);
  display: none; gap: .5rem;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-cta a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 52px; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: var(--shadow-soft);
}
.mobile-cta a:first-child {
  background: rgb(17 17 17 / .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / .14); color: #fff;
}
.mobile-cta a:last-child { background: var(--blue); color: #fff; }
@media (max-width: 1024px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 5rem; }
}

/* ---------- MODAL ---------- */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: 1rem;
  background: rgb(0 0 0 / .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-ui) ease;
  overscroll-behavior: contain;
}
.modal.open { opacity: 1; pointer-events: auto; }
.modal-card {
  width: min(560px, 100%);
  max-height: min(88vh, 780px);
  max-height: min(88svh, 780px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border-radius: 1.5rem;
  background: var(--graphite);
  border: 1px solid rgb(255 255 255 / .12);
  box-shadow: var(--shadow-soft);
  transform: translateY(16px) scale(.98);
  transition: transform var(--t-ui) var(--ease);
}
.modal.open .modal-card { transform: none; }
.modal-close {
  position: absolute; top: .5rem; right: .5rem;
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; color: rgb(255 255 255 / .5);
  transition: color var(--t-micro) ease, background var(--t-micro) ease;
}
.modal-close:hover { color: #fff; background: rgb(255 255 255 / .08); }
.modal-head { position: relative; margin-bottom: 1.6rem; padding-right: 3.5rem; }

/* ---------- MOTION ---------- */
.rise { opacity: 1; }
html.anim .rise {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
html.anim .rise.is-in { opacity: 1; transform: none; }

html.anim .rise-kids > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
html.anim .rise-kids.is-in > * { opacity: 1; transform: none; }
html.anim .rise-kids.is-in > *:nth-child(1) { transition-delay: 0ms; }
html.anim .rise-kids.is-in > *:nth-child(2) { transition-delay: 70ms; }
html.anim .rise-kids.is-in > *:nth-child(3) { transition-delay: 140ms; }
html.anim .rise-kids.is-in > *:nth-child(4) { transition-delay: 210ms; }
html.anim .rise-kids.is-in > *:nth-child(5) { transition-delay: 280ms; }
html.anim .rise-kids.is-in > *:nth-child(n+6) { transition-delay: 340ms; }

/* Máscara del titular: line-height 1 mínimo o recorta los glifos */
.mask { display: block; overflow: hidden; padding-bottom: .1em; }
.mask > span { display: block; line-height: 1; }
html.anim .hero .mask > span { transform: translateY(110%); transition: transform .9s var(--ease); }
html.anim .hero.is-in .mask > span { transform: none; }
html.anim .hero .mask:nth-of-type(2) > span { transition-delay: 130ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.anim .rise, html.anim .rise-kids > * { opacity: 1; transform: none; }
  html.anim .hero .mask > span { transform: none; }
  .hero-media img, .ticker-track, .hero-reel-tag::before, .loader-logo { animation: none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
  .hero { min-height: min(90vh, 700px); min-height: min(90svh, 700px); padding-top: 4.5rem; }
  .hero-cta .btn-ghost { display: none; }
  .hero-marquee { display: none; }
}

@media (hover: none) {
  .card:hover, .svc-card:hover, .tile:hover, .step:hover, .review:hover, .reel:hover { transform: none; }
}

@media (min-width: 1441px) {
  :root { --maxw: 1560px; --maxw-tight: 1280px; }
}

@media print {
  .nav, .ticker, .mobile-cta, .modal, .grain, .progress, .hero-marquee { display: none !important; }
  body { background: #fff; color: #000; }
}