/* ==========================================================================
   Mudanzas Centenera — hoja de estilos
   Sistema de diseño: azul de marca (conservado) con contraste corregido,
   acento ámbar para acciones, tipografía Archivo + Hanken Grotesk + Kaushan.
   ========================================================================== */

:root {
  /* Diseño solo en tema claro: evita que el navegador fuerce una inversión
     automática de colores cuando el sistema está en modo oscuro. */
  color-scheme: light;

  /* Paleta (OKLCH con fallback hex vía navegador moderno) */
  --bg:            oklch(0.995 0.003 250);
  --surface:       oklch(0.972 0.012 250);
  --surface-2:     oklch(0.945 0.020 250);
  --ink:           oklch(0.26 0.045 258);   /* texto principal */
  --ink-soft:      oklch(0.44 0.035 258);   /* texto secundario, ≥4.5:1 sobre blanco */
  --line:          oklch(0.90 0.015 258);
  --line-strong:   oklch(0.82 0.02 258);

  --brand:         oklch(0.53 0.16 256);    /* azol de marca */
  --brand-600:     oklch(0.47 0.16 256);
  --brand-700:     oklch(0.40 0.14 258);
  --navy:          oklch(0.28 0.075 260);   /* secciones oscuras / footer */
  --navy-900:      oklch(0.22 0.06 260);

  --accent:        oklch(0.78 0.155 66);    /* ámbar CTA */
  --accent-600:    oklch(0.72 0.16 62);
  --accent-ink:    oklch(0.30 0.07 60);     /* texto sobre ámbar */

  --whatsapp:      oklch(0.68 0.17 150);
  --whatsapp-600:  oklch(0.60 0.17 150);

  /* Tipografía */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-script:  "Fjalla One", system-ui, sans-serif;

  /* Escala fluida */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --step-3:  clamp(1.95rem, 1.7rem + 1.25vw, 2.9rem);
  --step-4:  clamp(2.5rem, 2rem + 2.5vw, 4.2rem);

  /* Radios y sombras */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;
  --sh-1: 0 1px 2px oklch(0.4 0.05 258 / .08), 0 2px 8px oklch(0.4 0.05 258 / .06);
  --sh-2: 0 6px 18px oklch(0.4 0.05 258 / .10), 0 2px 6px oklch(0.4 0.05 258 / .06);
  --sh-3: 0 18px 45px oklch(0.35 0.06 258 / .18);

  /* Espaciado de sección */
  --section-y: clamp(2.75rem, 1.9rem + 4vw, 7rem);

  /* Curvas de motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-header: 100; --z-fab: 90; --z-nav: 120;
}

/* ---------- Lenis (scroll suave) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip (a diferencia de hidden) impide también el desplazamiento
     lateral programático: nada puede correr la página de costado */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.visually-hidden, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm);
}

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

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--brand); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
  padding: .7rem 1.25rem; border: 0; border-radius: var(--r-pill);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s;
  box-shadow: var(--sh-1); white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: .5rem 1rem; font-size: var(--step--1); }
.btn-lg { padding: .95rem 1.7rem; font-size: var(--step-0); }
.btn-block { width: 100%; }
.btn-accent { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-600); }
.btn-ghost { --btn-bg: transparent; --btn-fg: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px #fff; }
.btn-ghost-dark { --btn-bg: transparent; --btn-fg: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); }
.btn-ghost-dark:hover { background: var(--surface); }
.btn-whatsapp { --btn-bg: var(--whatsapp); --btn-fg: #fff; }
.btn-whatsapp:hover { background: var(--whatsapp-600); }
.btn svg { width: 1.15em; height: 1.15em; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  transition: background-color .3s var(--ease-out), box-shadow .3s, backdrop-filter .3s;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; transition: color .3s; }
/* Logo sin placa: blanco sobre el hero (transparente/oscuro), azul cuando
   el header ya es sólido y claro al scrollear. */
.brand-mark { position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 44px; height: 44px; }
.brand-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: opacity .3s var(--ease-out); }
.brand-mark-azul { opacity: 0; }
.site-header[data-scrolled] .brand-mark-white { opacity: 0; }
.site-header[data-scrolled] .brand-mark-azul { opacity: 1; }
.brand-name { font-family: var(--font-script); font-size: 1.3rem; line-height: 1; padding-top: .25rem;
  text-transform: uppercase; letter-spacing: .01em; }

.site-header[data-scrolled] {
  background: oklch(0.995 0.003 250 / .88);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 var(--line), var(--sh-1);
}
.site-header[data-scrolled] .brand { color: var(--ink); }
.site-header[data-scrolled] .nav-menu a { color: var(--ink); }
.site-header[data-scrolled] .nav-toggle-bar,
.site-header[data-scrolled] .nav-toggle-bar::before,
.site-header[data-scrolled] .nav-toggle-bar::after { background: var(--ink); }

.nav { display: flex; align-items: center; }
.nav-menu { list-style: none; display: flex; align-items: center; gap: 1.6rem; padding: 0; }
.nav-menu a { color: #fff; font-weight: 600; font-size: var(--step--1); transition: opacity .2s; }
.nav-menu > li > a:not(.btn):hover { opacity: .7; }
.nav-cta .btn { color: var(--accent-ink); }

/* Evita la marca duplicada: sobre el hero (que ya muestra el logo grande),
   el nombre de texto del header se oculta y reaparece al scrollear */
.site-header:not([data-scrolled]) .brand-name { opacity: 0; }
.brand-name { transition: opacity .3s var(--ease-out); }

/* Tap-to-call: solo visible en mobile */
.header-call { display: none; width: 44px; height: 44px; border-radius: 12px;
  place-items: center; color: #fff; transition: color .3s, background-color .2s; }
.header-call svg { width: 21px; height: 21px; }
.site-header[data-scrolled] .header-call { color: var(--ink); }
.header-call:active { background: rgba(255,255,255,.15); }

.nav-toggle { display: none; width: 44px; height: 44px; background: transparent; border: 0; position: relative; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  content: ""; position: absolute; left: 11px; width: 22px; height: 2.5px; border-radius: 2px;
  background: #fff; transition: transform .25s var(--ease-out), opacity .2s;
}
.nav-toggle-bar { top: 21px; }
.nav-toggle-bar::before { top: -7px; } .nav-toggle-bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); background: var(--ink); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); background: var(--ink); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: clamp(100px, 16vh, 150px) 0 clamp(2.5rem, 6vw, 5.5rem);
  color: #fff; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(170deg, var(--brand) 0%, var(--brand-700) 60%, var(--navy-900) 100%); }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 70% 0%, transparent 40%, oklch(0.20 0.05 260 / .55) 100%);
}
.hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.sky-buildings rect { fill: oklch(0.34 0.08 260); }
.sky-windows rect { fill: oklch(0.62 0.12 250 / .5); }
.ground { fill: oklch(0.24 0.06 260); }
.hero-truck { filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.hero-box { fill: var(--accent); opacity: .92; }
.hero-box svg, .hero-box use { width: 34px; height: 34px; }
.hero-box--1 { transform: translate(880px, 350px) scale(1.4); }
.hero-box--2 { transform: translate(950px, 300px) scale(1); }
.hero-box--3 { transform: translate(1020px, 380px) scale(1.15); }

.hero-content { position: relative; max-width: 640px; }
/* Logo blanco (variante sin placa): sobre el degradé azul del hero ya
   contrasta solo, sin necesidad del respaldo circular que usan header/footer. */
.hero-logo { display: block;
  width: clamp(72px, 6vw + 50px, 104px); margin-bottom: .9rem;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.hero-logo img { width: 100%; height: auto; object-fit: contain; display: block; }
.hero-brand-name { display: block; font-family: var(--font-script); color: #fff;
  font-size: clamp(1.5rem, 1vw + 1.3rem, 1.9rem); line-height: 1; margin-bottom: 1.1rem;
  text-transform: uppercase; letter-spacing: .02em; }
.stars { display: flex; gap: .2rem; margin-bottom: 1rem; }
.stars svg { width: 20px; height: 20px; fill: var(--accent); filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.hero h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.035em; margin-bottom: .8rem; color: #fff; }
.hero h1 .hl { color: var(--accent); }
.hero-sub { font-size: var(--step-1); max-width: 34ch; color: oklch(0.97 0.01 250 / .92); margin-bottom: 1.6rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; }
.hero-note { font-size: var(--step--1); color: oklch(0.97 0.01 250 / .8); font-weight: 500; }

/* ==========================================================================
   SECCIONES GENÉRICAS
   ========================================================================== */
.section-head { text-align: center; max-width: 42ch; margin: 0 auto clamp(2.2rem, 4vw, 3.5rem); }
.section-head h2 { font-size: var(--step-3); font-weight: 800; }
.section-lead { color: var(--ink-soft); font-size: var(--step-1); margin-top: .7rem; }

/* ---------- Beneficios ---------- */
.benefits { padding: var(--section-y) 0; }
.benefit-grid { list-style: none; padding: 0; display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.benefit { padding: 1.6rem 1.5rem; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); transition: transform .25s var(--ease-out), box-shadow .25s; }
.benefit:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.benefit-ico { display: inline-flex; width: 52px; height: 52px; border-radius: 14px;
  align-items: center; justify-content: center; background: linear-gradient(150deg, var(--brand), var(--brand-700));
  color: #fff; margin-bottom: 1rem; }
.benefit-ico svg { width: 26px; height: 26px; }
.benefit h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.benefit p { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }

/* ---------- FAQ ---------- */
.faq { padding: var(--section-y) 0; }
.faq-list { max-width: 760px; margin-inline: auto; display: grid; gap: .8rem; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1rem 1.3rem; }
.faq-item summary {
  cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0); color: var(--ink); display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex-shrink: 0; font-size: 1.4rem; line-height: 1; color: var(--brand-600);
  transition: transform .2s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; margin-top: .8rem; }

/* ==========================================================================
   SERVICIOS / SELECTOR DE PRESUPUESTO
   ========================================================================== */
.services { padding: var(--section-y) 0; background: var(--surface); position: relative; }
.vehicle-set { border: 0; margin: 0; padding: clamp(1.25rem, 3vw, 1.9rem);
  background: var(--bg); border-bottom: 1px solid var(--line); }
.vehicle-legend { display: block; width: 100%; padding: 0; font-family: var(--font-display);
  font-weight: 700; font-size: var(--step-0); color: var(--ink); margin-bottom: 1rem; }
.vehicle-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.vehicle-swipe-hint { display: none; }

.vehicle { position: relative; }
.vehicle input { position: absolute; opacity: 0; pointer-events: none; }
.vehicle label {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-lg);
  padding: 1.1rem 1.1rem 1.2rem; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-out);
}
.vehicle label:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--sh-1); }
.vehicle input:checked + label { border-color: var(--brand); box-shadow: 0 0 0 4px oklch(0.53 0.16 256 / .16), var(--sh-2); }
.vehicle input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 3px; }

.v-ambientes { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
  color: var(--brand-600); letter-spacing: .01em; }
.v-illus { width: 100%; height: auto; margin: .4rem 0 .7rem; }
.v-name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
  letter-spacing: -0.02em; color: var(--ink); }
.v-meta { margin-top: .4rem; font-size: var(--step--1); color: var(--ink-soft); }
.v-meta strong { color: var(--ink); font-weight: 600; }
.v-check { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6);
  transition: opacity .2s, transform .2s var(--ease-out); }
.v-check svg { width: 14px; height: 14px; }
.vehicle input:checked + label .v-check { opacity: 1; transform: scale(1); }

/* Ilustraciones de vehículos */
.v-shadow { fill: oklch(0.5 0.03 258 / .12); }
.v-body, .v-tarp, .v-box { fill: var(--brand); }
.v-cab { fill: var(--brand-700); }
.v-window { fill: oklch(0.86 0.05 240); }
.v-accent { fill: var(--accent); }
.v-bed { fill: var(--brand-700); }
.v-tarp-lines, .v-box-lines, .v-curtain { stroke: oklch(0.42 0.12 258); stroke-width: 1.5; fill: none; }
.v-wheels circle { fill: oklch(0.24 0.03 258); }
.v-hubs circle { fill: oklch(0.7 0.03 258); }

/* Panel de resumen (barra horizontal) + contacto */
.quote-panel {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  /* clip y NO hidden: al tocar una card, el foco del radio scrollea los
     ancestros con overflow hidden y corria el panel entero de costado */
  overflow: hidden;
  overflow: clip;
  box-shadow: var(--sh-2);
}
.quote-reveal { animation: slide-up .4s var(--ease-out) both; }
.quote-summary {
  background: linear-gradient(120deg, var(--brand), var(--navy-900)); color: #fff;
  padding: 1.25rem 2rem; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 2rem;
}
.quote-head { display: flex; flex-direction: column; gap: .1rem; }
.quote-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 700;
  color: var(--accent); }
.quote-vehicle { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
  letter-spacing: -0.02em; line-height: 1.1; }
.quote-specs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.quote-specs li { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.quote-specs span { color: oklch(0.97 0.01 250 / .7); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; }
.quote-specs strong { font-weight: 700; font-size: var(--step-0); }

.quote-form { padding: 2rem; }
.quote-form h3 { font-size: var(--step-1); margin-bottom: 1.2rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: var(--step--1); margin-bottom: .4rem; }
.field label .opt { color: var(--ink-soft); font-weight: 400; }
.field input {
  width: 100%; font: inherit; font-size: var(--step-0); padding: .7rem .9rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg); color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: oklch(0.6 0.02 258); }
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px oklch(0.53 0.16 256 / .18); }
.field input[aria-invalid="true"] { border-color: oklch(0.55 0.18 25); }
.field-error { color: oklch(0.5 0.18 25); font-size: var(--step--1); margin-top: .35rem; font-weight: 500; }
.quote-legal { font-size: .78rem; color: var(--ink-soft); margin-top: .9rem; text-align: center; }

/* Campo "¿Cuándo te mudás?" (chips de selección única) */
.field-cuando { border: 0; padding: 0; }
.field-cuando legend { display: block; width: 100%; padding: 0; font-weight: 600;
  font-size: var(--step--1); margin-bottom: .5rem; }
.chip-group { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip-input { position: absolute; opacity: 0; pointer-events: none; }
.chip { display: inline-flex; align-items: center; padding: .55rem 1.05rem;
  border-radius: var(--r-pill); border: 1.5px solid var(--line-strong);
  font-weight: 600; font-size: var(--step--1); color: var(--ink-soft); cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s; }
.chip:hover { border-color: var(--brand); color: var(--ink); }
.chip-input:checked + .chip { border-color: var(--brand); background: var(--brand); color: #fff; }
.chip-input:focus-visible + .chip { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Campo de zona con mapa */
.zona-input { display: flex; gap: .5rem; align-items: stretch; }
.zona-input input { flex: 1; }
.zona-input .btn { flex-shrink: 0; }
.map-embed { position: relative; aspect-ratio: 16 / 9; margin-top: .7rem;
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-strong);
  background: var(--surface-2); box-shadow: var(--sh-1); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-placeholder { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5rem; border: 0; cursor: pointer;
  background: var(--surface-2); color: var(--ink-soft); font: inherit; font-weight: 600;
  font-size: var(--step--1); transition: background-color .2s, color .2s; }
.map-placeholder:hover { background: var(--surface); color: var(--brand-600); }
.map-placeholder svg { width: 30px; height: 30px; }
/* El display de las reglas de arriba le ganaría al atributo hidden: forzamos */
.map-embed iframe[hidden], .map-placeholder[hidden] { display: none; }
.zona-hint { font-size: .78rem; color: var(--ink-soft); margin-top: .4rem; }
@media (max-width: 480px) {
  .zona-input { flex-direction: column; }
}

/* Éxito */
.quote-success { text-align: center; max-width: 560px; margin-inline: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem); box-shadow: var(--sh-2); animation: slide-up .4s var(--ease-out) both; }
.success-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: oklch(0.68 0.17 150 / .14); color: var(--whatsapp-600); margin-bottom: 1.2rem; }
.success-ico svg { width: 30px; height: 30px; }
.quote-success h3 { font-size: var(--step-2); margin-bottom: .6rem; }
.quote-success > p { color: var(--ink-soft); }
.success-summary { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  padding: 1rem 1.2rem; margin: 1.4rem 0; text-align: left; font-size: var(--step--1); line-height: 1.7; }
.success-summary strong { color: var(--ink); }
.success-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ==========================================================================
   COBERTURA
   ========================================================================== */
.coverage { padding: var(--section-y) 0; }
.coverage-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.coverage-copy h2 { font-size: var(--step-3); font-weight: 800; margin-bottom: 1rem; }
.coverage-copy > p { color: var(--ink-soft); font-size: var(--step-1); max-width: 46ch; margin-bottom: 1.8rem; }
.coverage-copy strong { color: var(--ink); }
.coverage-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.8rem; }
.coverage-groups h3 { font-size: var(--step-0); color: var(--brand-600); margin-bottom: .25rem; }
.coverage-groups p { font-size: var(--step--1); color: var(--ink-soft); }
.coverage-cta { margin-top: 2rem; }

.map-svg { width: 100%; max-width: 380px; margin-inline: auto; }
.map-ring { fill: none; stroke: var(--brand); }
.map-ring--1 { fill: oklch(0.53 0.16 256 / .10); stroke-width: 2; }
.map-ring--2 { stroke: oklch(0.53 0.16 256 / .5); stroke-width: 1.5; stroke-dasharray: 3 6; }
.map-ring--3 { stroke: oklch(0.53 0.16 256 / .3); stroke-width: 1.5; stroke-dasharray: 3 6; }
.map-dot circle { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.map-label { font-family: var(--font-display); font-weight: 700; font-size: 13px; fill: var(--ink-soft); text-anchor: middle; }
.map-label--center { fill: var(--ink); font-size: 15px; }

/* ==========================================================================
   NOSOTROS / TESTIMONIOS
   ========================================================================== */
.about { padding: var(--section-y) 0; background: var(--surface); }
.stat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.stat strong { display: block; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.6rem); color: var(--brand-600); letter-spacing: -0.03em; line-height: 1; }
.stat span { color: var(--ink-soft); font-size: var(--step--1); }

.testimonials { list-style: none; padding: 0; display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.testimonial { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--sh-1); }
.t-stars { display: flex; gap: .15rem; margin-bottom: .8rem; }
.t-stars svg { width: 18px; height: 18px; fill: var(--accent); }
.testimonial p { color: var(--ink); font-size: var(--step-0); line-height: 1.6; margin-bottom: 1rem; }
.testimonial footer { color: var(--ink-soft); font-size: var(--step--1); font-weight: 600; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
/* Gradiente vertical (no diagonal): abajo del todo llega exactamente al
   mismo color que el fondo del footer que sigue, para que el empalme
   entre ambas secciones sea parejo en todo el ancho, no solo en una punta. */
.cta-band { background: linear-gradient(180deg, var(--brand) 0%, var(--navy-900) 100%); color: #fff; }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(2.5rem, 5vw, 4rem) 0; }
.cta-inner h2 { color: #fff; font-size: var(--step-3); font-weight: 800; }
.cta-inner p { color: oklch(0.97 0.01 250 / .85); font-size: var(--step-1); margin-top: .4rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--navy-900); color: oklch(0.9 0.01 250); padding: clamp(3rem, 5vw, 4.5rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.12); }
/* Logo blanco sin placa: el footer es navy, contrasta solo. */
.footer-logo { display: block; width: 68px; margin-bottom: .9rem; }
.footer-logo img { width: 100%; height: auto; object-fit: contain; display: block; }
.footer-tag { font-size: var(--step--1); color: oklch(0.85 0.01 250 / .8); max-width: 34ch; }
.footer-col h3 { color: #fff; font-size: var(--step-0); margin-bottom: 1rem; }
.footer-contact { list-style: none; padding: 0; display: grid; gap: 1rem; }
.footer-contact li { display: flex; align-items: center; gap: .8rem; }
.fc-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.08); color: #fff; flex-shrink: 0; }
.fc-ico svg { width: 18px; height: 18px; }
.footer-contact a { display: flex; flex-direction: column; font-weight: 600; color: #fff; }
.footer-contact em { font-style: normal; font-weight: 400; font-size: .78rem; color: oklch(0.8 0.01 250 / .7); }
.footer-hours { list-style: none; padding: 0; display: grid; gap: .7rem; }
.footer-hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step--1); }
.footer-hours span { color: oklch(0.8 0.01 250 / .8); } .footer-hours strong { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  padding-top: 1.5rem; font-size: .8rem; color: oklch(0.78 0.01 250 / .7); }

/* ==========================================================================
   FLOATING WHATSAPP — calcado de la landing de Dameky (mismo ícono oficial,
   mismo criterio de aparición). Color adaptado al verde real de WhatsApp
   en vez del cian de Dameky. Sin pulso: se oculta también sobre el form,
   igual que sobre el hero, para no taparlo mientras el usuario completa
   sus datos.
   ========================================================================== */
.wa-float {
  position: fixed; bottom: 10vh; right: 1.4rem; z-index: var(--z-fab);
  width: 52px; height: 52px;
  background: var(--whatsapp); border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  opacity: 0; pointer-events: none;
  transform: scale(0.8);
  transition: opacity .4s ease, transform .4s ease, background-color .2s;
}
.wa-float.visible {
  opacity: 1; pointer-events: all;
  transform: scale(1);
}
.wa-float:hover {
  background: var(--whatsapp-600);
  transform: scale(1.12);
  box-shadow: 0 6px 24px rgba(37,211,102,.45);
}
.wa-float svg { width: 27px; height: 27px; flex-shrink: 0; }

/* ==========================================================================
   MOTION / REVEAL
   ========================================================================== */
/* Reveal ligado al scroll (scrubbed), no por umbral on/off:
   script.js calcula en cada frame, según la posición real del elemento en
   pantalla, un progreso 0→1 y lo escribe en --reveal-p. La opacidad y el
   desplazamiento son función directa de ese progreso, así que se mueven
   exactamente al ritmo del scroll (enganchado al mismo loop de Lenis),
   sin transiciones de duración fija que puedan sentirse como un salto.
   El var() con fallback en 1 garantiza que, sin JS, todo se vea normal. */
.reveal {
  opacity: var(--reveal-p, 1);
  transform: translateY(calc((1 - var(--reveal-p, 1)) * 34px));
  /* Sin transition: la inercia (lerp cuadro a cuadro) ya la aplica script.js;
     una transition CSS encima duplicaría el suavizado y generaría lag. */
  will-change: opacity, transform;
}

@keyframes slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Entrada propia del hero al cargar la página (no depende de scroll/observer) */
.js .hero-content { animation: hero-in 1s .1s var(--ease-out) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.js .hero-truck { animation: truck-in 1s var(--ease-out) both; }
@keyframes truck-in { from { opacity: 0; transform: translate(320px, 210px) scale(2.15); } to { opacity: 1; transform: translate(360px, 210px) scale(2.15); } }
.hero-box { animation: float 5s ease-in-out infinite; }
.hero-box--2 { animation-delay: -1.5s; } .hero-box--3 { animation-delay: -3s; }
@keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .quote-panel { grid-template-columns: 1fr; }
  .coverage-inner { grid-template-columns: 1fr; }
  .coverage-map { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .nav-toggle { display: block; z-index: var(--z-nav); }
  .header-call { display: grid; }
  .nav { gap: .2rem; }
  .nav-menu {
    position: fixed; inset: 0 0 0 auto; width: min(300px, 82vw); z-index: var(--z-header);
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--bg); padding: 88px 1.5rem 2rem; box-shadow: var(--sh-3);
    transform: translateX(100%); transition: transform .3s var(--ease-out); visibility: hidden;
  }
  .nav-menu[data-open] { transform: translateX(0); visibility: visible; }
  .nav-menu a:not(.btn) { color: var(--ink) !important; display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: var(--step-1); }
  .nav-cta { margin-top: 1rem; }
  .nav-cta .btn { width: 100%; }
  body[data-nav-open] { overflow: hidden; }
  body[data-nav-open]::after { content: ""; position: fixed; inset: 0; background: rgba(10,20,40,.45); z-index: 99; }
}

@media (max-width: 560px) {
  .coverage-groups { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* ==========================================================================
   MOBILE: carrusel de vehículos, densidad y toques finos
   ========================================================================== */
@media (max-width: 640px) {
  .section-head { margin-bottom: 1.6rem; }
  .section-lead { font-size: var(--step-0); }

  /* La escena del hero (1200x520) recortada en retrato muestra un camión
     gigante deformado: en pantallas chicas queda el gradiente limpio */
  .hero-scene { display: none; }

  /* Vehículos como carrusel deslizable con snap */
  .vehicle-set { padding: 1.1rem .9rem 1.2rem; }
  .vehicle-legend { font-size: var(--step--1); margin-bottom: .3rem; }
  .vehicle-swipe-hint { display: block; font-size: .78rem; color: var(--ink-soft); margin-bottom: .5rem; }
  .vehicle-grid {
    display: flex; gap: .7rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: .5rem .9rem 1rem; margin: 0 -.9rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .vehicle-grid::-webkit-scrollbar { display: none; }
  .vehicle { flex: 0 0 76%; max-width: 250px; scroll-snap-align: center; }
  /* Espaciador final generoso: da el recorrido extra que necesita la
     última card (5 ambientes) para llegar al centro; el snap obligatorio
     evita que el scroll descanse en el vacío */
  .vehicle-grid::after { content: ""; flex: 0 0 90%; }
  .vehicle label { padding: 1rem; }
  .vehicle label:hover { transform: none; }   /* sin lift en táctil */

  /* Resumen + formulario más compactos */
  .quote-summary { padding: 1rem 1.1rem; gap: .7rem 1.2rem; }
  .quote-specs { gap: .55rem 1.2rem; }
  .quote-form { padding: 1.25rem 1.1rem; }
  .quote-form h3 { font-size: var(--step-0); margin-bottom: 1rem; }
  .field { margin-bottom: .9rem; }

  .quote-success { padding: 1.75rem 1.2rem; }
  .success-actions { flex-direction: column; }
  .success-actions .btn { width: 100%; }

  /* Beneficios y testimonios con más aire entre sí */
  .benefit { padding: 1.3rem 1.2rem; }
  .stat-row { gap: 1.5rem 2.5rem; }
}

/* Deslizamiento fluido de anclas sin saltos bruscos en iOS */
@supports (-webkit-touch-callout: none) {
  .map-embed { -webkit-overflow-scrolling: touch; }
}