/* ==========================================================================
   FIDECARS — hoja de estilos
   Paleta, tipografía y ritmo tomados del diseño (FIDECARS.dc.html).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --bg: #0a0a0c;
  --surface: #151515;
  --fg: #f5f5f2;
  --muted: #b6b6b6;
  --dim: #6f6f6b;
  --accent: #c7b89a;

  --line: rgba(245, 245, 242, 0.06);
  --line-2: rgba(245, 245, 242, 0.08);
  --line-3: rgba(245, 245, 242, 0.16);
  --accent-line: rgba(199, 184, 154, 0.3);

  /* Un solo radio para todo el sistema. Las jerarquías se distinguen por
     tamaño y contraste, no por radios distintos. Las imágenes van en 0. */
  --r-sm: 3px;
  --r-md: 3px;
  --r-lg: 3px;
  --r-full: 999px; /* sólo chips y avatares */

  --shell: 1500px;
  --gutter: clamp(20px, 4vw, 64px);
  --section-y: clamp(72px, 12vh, 150px);

  /* Una sola familia para todo el sitio, títulos y cuerpo. Antes eran dos
     (General Sans + Inter); quedan las dos variables por si el día de mañana
     se separan de nuevo, pero hoy apuntan a la misma fuente. */
  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --- Reset -------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--bg); }

a { color: var(--fg); text-decoration: none; transition: color 150ms ease; }
a:hover { color: var(--accent); }

img, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; margin: 0; }
p { margin: 0; }
button { font: inherit; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: var(--bg); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Layout ------------------------------------------------------------- */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: 0 var(--section-y); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(36px, 6vh, 64px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
  flex: none;
}

.h2 {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--fg);
  text-wrap: balance;
}

.lede {
  max-width: 38ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* --- Botones ------------------------------------------------------------ */
/* Dos variantes, no más. El hover cambia color, nunca posición. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn--solid { background: var(--accent); color: var(--bg); }
.btn--solid:hover { background: var(--fg); color: var(--bg); }

.btn--ghost { border-color: var(--line-3); color: var(--fg); background: transparent; }
.btn--ghost:hover {
  border-color: rgba(199, 184, 154, 0.55);
  background: rgba(199, 184, 154, 0.06);
  color: var(--fg);
}

.btn--lg { padding: 19px 34px; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--fg);
  border-bottom: 1px solid rgba(199, 184, 154, 0.35);
  padding-bottom: 4px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.link-arrow:hover { color: var(--fg); border-color: rgba(245, 245, 242, 0.5); }

.center { display: flex; justify-content: center; }
.mt-cta { margin-top: clamp(40px, 6vh, 72px); }

/* --- Navegación --------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px var(--gutter);
}
.nav__bg {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.nav.is-scrolled .nav__bg,
.nav.is-open .nav__bg { opacity: 1; }

.nav__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.3s ease;
}
.nav__brand img { display: block; width: auto; height: clamp(36px, 3vw, 44px); }
.nav__brand:hover { opacity: 0.75; }

.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
}
.nav__links a {
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--fg); }

.nav__cta {
  position: relative;
  flex: none;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.25s ease;
}
.nav__cta:hover { background: var(--fg); color: var(--bg); }

.nav__toggle {
  position: relative;
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
}
.nav__toggle span {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 1px;
  background: var(--fg);
  transition: transform 0.3s var(--ease), opacity 0.2s ease;
}
.nav__toggle span:nth-child(1) { top: 17px; }
.nav__toggle span:nth-child(2) { top: 22px; }
.nav__toggle span:nth-child(3) { top: 27px; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__toggle { display: block; }
  .nav__cta { display: none; }
  .nav__links {
    position: fixed;
    inset: 78px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 28px;
    background: rgba(5, 5, 5, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.35s var(--ease), visibility 0.3s;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__links a {
    padding: 18px 2px;
    font-size: 17px;
    border-bottom: 1px solid var(--line);
  }
  .nav__links .nav__cta-mobile {
    display: flex;
    justify-content: center;
    margin-top: 22px;
    padding: 16px 24px;
    border-radius: var(--r-md);
    background: var(--accent);
    color: var(--bg);
    font-size: 15px;
    font-weight: 500;
    border-bottom: 0;
  }
}
@media (min-width: 941px) {
  .nav__links .nav__cta-mobile { display: none; }
}

/* --- Hero --------------------------------------------------------------- */
/* El auto del video entra bajo en el cuadro y el tercio superior es negro
   puro: la tipografía va arriba, así no se cruza con los faros ni con el
   halo de luz del piso, que es la parte más brillante de la toma. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  background: var(--bg);
  overflow: hidden;
}
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* el auto del video está centrado: recortar hacia un lado lo saca de cuadro */
  object-position: center;
}
.hero__media video {
  opacity: 1;
  transition: opacity 0.6s linear;
  pointer-events: none;
}
/* Sombra suave sobre la esquina del texto. El fondo ahí ya es negro, así que
   apenas se percibe: está para los recortes donde el auto sube en el cuadro. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
}

/* remate inferior para empalmar con la sección siguiente, sin apagar los faros */
.hero__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 0) 78%,
    rgba(5, 5, 5, 0.55) 92%,
    var(--bg) 100%
  );
}

/* Columna completa: el bloque de texto arranca arriba y la nota de cierre
   queda apoyada abajo, en la otra esquina negra del cuadro. El auto queda
   suelto en el medio. */
.hero__copy {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(116px, 16vh, 180px) var(--gutter) clamp(40px, 6vh, 76px);
  pointer-events: none;
}
.hero__copy > * { max-width: min(540px, 44%); }
/* selector de dos clases a propósito: así la medida del título no queda
   pisada por los `.hero__copy > *` de los breakpoints */
.hero__copy .hero__title {
  max-width: min(11em, 90%);
  font-size: clamp(2.4rem, 5vw, 5.1rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--fg);
  text-wrap: balance;
  /* invisible sobre el negro; sostiene el contraste si el auto sube */
  text-shadow: 0 2px 30px rgba(5, 5, 5, 0.55);
}
.hero__sub {
  margin-top: clamp(20px, 2.6vh, 30px);
  max-width: 44ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: var(--muted);
  text-shadow: 0 1px 20px rgba(5, 5, 5, 0.6);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3.4vh, 40px);
  max-width: none;
  pointer-events: auto;
}
/* cierre del bloque: apoyado al pie, con una línea corta y no un
   travesaño de lado a lado */
.hero__note {
  margin-top: auto;
  padding-top: 18px;
  max-width: min(360px, 34%);
  border-top: 1px solid rgba(245, 245, 242, 0.12);
}
.hero__note p {
  max-width: 34ch;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  text-shadow: 0 1px 16px rgba(5, 5, 5, 0.6);
}

/* Cascada de entrada. Arranca cuando el video terminó y quedó congelado
   en su último cuadro: la maneja `hero-lit`, que agrega el JS. */
.hero-in {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-in[data-step="1"] { transition-delay: 0.13s; }
.hero-in[data-step="2"] { transition-delay: 0.28s; }
.hero-in[data-step="3"] { transition-delay: 0.43s; }
.hero-in[data-step="4"] { transition-delay: 0.58s; }
.hero-lit .hero-in { opacity: 1; transform: translateX(0); }

@media (max-width: 1100px) {
  .hero__copy > * { max-width: 440px; }
  .hero__title { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
  .hero__note { max-width: 360px; }
}
@media (max-width: 900px) {
  .hero__copy > *, .hero__note { max-width: 100%; }
  .hero__title { font-size: clamp(2.4rem, 6.4vw, 3.4rem); }
  /* el recorte vertical deja el frente del auto ocupando toda la pantalla:
     se oscurece arriba, donde va el texto, y se libera abajo para los faros */
  .hero__scrim { background: rgba(6, 6, 8, 0.45); }

}
@media (max-width: 640px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  /* en pantalla angosta el salto manual corta mal: que fluya el texto.
     En el HTML los <br> de los títulos van rodeados de espacio, así que
     al ocultarlos las palabras no se pegan. */
  .hero__title br, .h2 br, .h3-xl br, .svc-hero h1 br { display: none; }
  /* en el celular el título usa todo el ancho y baja un punto de tamaño,
     para que entre en tres líneas y no en cuatro */
  .hero__copy .hero__title {
    max-width: 100%;
    font-size: clamp(1.9rem, 8.4vw, 2.6rem);
  }
  /* deja libre la esquina del botón flotante de WhatsApp */
  .hero__note { padding-right: 120px; }
}

/* --- Qué hacemos (pilares) ----------------------------------------------
   Sigue el wireframe `Seccion Dos Tarjetas.dc.html`: encabezado centrado con
   etiqueta arriba, y dos tarjetas de foto a ancho completo con el número en
   la esquina y el texto apoyado abajo. Colores, botones y radios son los del
   sistema, no los del wireframe. */
.center-text { text-align: center; margin-bottom: clamp(36px, 6vh, 64px); }
.center-text--narrow { max-width: 640px; margin-inline: auto; }
.eyebrow--center { justify-content: center; }

/* auto-fit: las dos tarjetas se apilan solas por debajo de ~620px, sin
   media query */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

/* el alto lo da `min-height`, no la proporción: así las dos quedan iguales
   aunque un texto sea más largo que el otro */
.pillar {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: clamp(360px, 34vw, 460px);
  border: 1px solid var(--line-2);
  border-radius: 0;
  overflow: hidden;
  background: var(--surface);
  color: inherit;
  transition: border-color 0.35s ease;
}
.pillar:hover,
.pillar:focus-visible { color: inherit; border-color: var(--accent-line); }
.pillar__img { position: absolute; inset: 0; }
.pillar__img img { width: 100%; height: 100%; object-fit: cover; }

.pillar__grad,
.pillar__veil { position: absolute; inset: 0; pointer-events: none; }
/* más peso abajo que en las tarjetas de servicios: acá el texto es más
   largo y ocupa la mitad inferior de la foto */
.pillar__grad {
  background: linear-gradient(
    to top,
    rgba(6, 6, 8, 0.92) 0%,
    rgba(6, 6, 8, 0.7) 38%,
    rgba(6, 6, 8, 0.22) 72%,
    rgba(6, 6, 8, 0.3) 100%
  );
}
.pillar__veil {
  opacity: 0;
  transition: opacity 0.45s ease;
  background: rgba(245, 245, 242, 0.08);
}
.pillar:hover .pillar__veil,
.pillar:focus-visible .pillar__veil { opacity: 1; }

.pillar__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
  padding: 30px;
  pointer-events: none;
}
/* en la esquina de arriba, como en el wireframe: no compite con el título */
.pillar__num {
  position: absolute;
  top: 30px;
  left: 30px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.pillar__title {
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.pillar__desc {
  margin-top: 12px;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.pillar__more {
  margin-top: 18px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}

@media (max-width: 680px) {
  .pillar { min-height: 340px; }
  .pillar__body { padding: 24px; }
  .pillar__num { top: 24px; left: 24px; }
}

/* --- Servicios ---------------------------------------------------------- */
.svc-grid { display: flex; gap: 16px; align-items: flex-start; }
.svc-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
}

.svc {
  position: relative;
  display: block;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface);
  color: inherit;
}
.svc:hover,
.svc:focus-visible { color: inherit; }
.svc__img { position: absolute; inset: 0; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; }

/* Capa plana para que se lea el texto encima, no un degradado decorativo. */
.svc__grad,
.svc__veil { position: absolute; inset: 0; pointer-events: none; }
.svc__grad { background: rgba(6, 6, 8, 0.42); }
.svc__veil {
  opacity: 0;
  transition: opacity 0.45s ease;
  background: rgba(6, 6, 8, 0.55);
}
.svc:hover .svc__veil,
.svc:focus-visible .svc__veil { opacity: 1; }

.svc__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 26px;
  pointer-events: none;
}
.svc__desc {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease);
}
.svc:hover .svc__desc,
.svc:focus-visible .svc__desc { opacity: 1; transform: translateY(0); }
.svc__desc p:not(.svc__price) {
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.svc__price {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}
.svc__title {
  margin-top: 14px;
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.svc__more {
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.svc:hover .svc__more,
.svc:focus-visible .svc__more { opacity: 1; }

/* proporciones por tarjeta, según el diseño */
.ar-078 { aspect-ratio: 1 / 0.78; }
.ar-147 { aspect-ratio: 1 / 1.47; }
.ar-100 { aspect-ratio: 1 / 1; }
.ar-140 { aspect-ratio: 1 / 1.4; }
.ar-085 { aspect-ratio: 1 / 0.85; }
.ar-075 { aspect-ratio: 1 / 0.75; }
.ar-150 { aspect-ratio: 1 / 1.5; }

@media (max-width: 1000px) {
  .svc-grid { display: block; column-count: 2; column-gap: 16px; }
  .svc-col { display: contents; }
  .svc {
    display: inline-block;
    width: 100%;
    margin-bottom: 16px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
  /* sin hover en táctil: la descripción queda siempre visible */
  .svc__desc, .svc__veil, .svc__more { opacity: 1; transform: none; }
}
@media (max-width: 680px) { .svc-grid { column-count: 1; } }

/* --- Proceso ------------------------------------------------------------
   Lista de pasos a la izquierda, foto fija a la derecha. El paso que entra
   en foco se abre y arrastra la foto y la barra de avance. Sin JS quedan
   los cinco pasos abiertos y legibles. */
/* Modo fijado: la pista da el largo de scroll y el escenario se queda quieto
   adentro mientras los pasos avanzan. La clase la pone el JS, y sólo si es
   escritorio y el bloque entra entero en la pantalla; si no, la sección se
   lee de corrido como cualquier otra. */
.proc-track { position: relative; }
.proc-track.is-pinned { height: var(--proc-track-h); }
.proc-track.is-pinned .proc-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(72px, 9vh, 96px);
}
/* con el escenario fijo, la foto ya no necesita pegarse por su cuenta */
.proc-track.is-pinned .proc { align-items: center; }
.proc-track.is-pinned .proc__frame { position: static; max-height: 56vh; }
/* todo el espaciado del modo fijado va en vh, para que el bloque entre en
   pantalla también en notebooks bajas */
.proc-track.is-pinned .proc__step { padding-bottom: clamp(16px, 2.6vh, 34px); }
.proc-track.is-pinned .proc__desc { font-size: 14px; line-height: 1.7; }

.proc {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.proc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.proc__step {
  position: relative;
  padding: 0 0 clamp(56px, 10vh, 120px) clamp(22px, 2.4vw, 32px);
  border-left: 1px solid var(--line-2);
}
.proc__step:last-child { padding-bottom: 0; border-left-color: transparent; }

/* el punto de la línea de tiempo */
.proc__dot {
  position: absolute;
  left: -4.5px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(245, 245, 242, 0.32);
  background: var(--bg);
  transition: background 0.45s ease, border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.proc__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}
.proc__label {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.45s ease;
}
.proc__time {
  flex: none;
  font-size: 12px;
  color: var(--dim);
  transition: color 0.45s ease;
}

.proc__title {
  max-width: 22ch;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--fg);
  transition: color 0.45s ease;
}
.proc__desc {
  max-width: 46ch;
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
}

/* La foto de cada paso: sólo en celular. En escritorio manda la columna
   fija de la derecha y ésta no existe. */
.proc__shot { display: none; }

/* Estado atenuado: sólo cuando el JS tomó el control. Así, sin JS o con
   `prefers-reduced-motion`, la sección se lee entera. */
[data-proc].is-live .proc__step { transition: opacity 0.5s ease; }
[data-proc].is-live .proc__step:not(.is-active) { opacity: 0.42; }
[data-proc].is-live .proc__step:not(.is-active) .proc__title { color: var(--muted); }
[data-proc].is-live .proc__desc {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transition: grid-template-rows 0.5s var(--ease), opacity 0.4s ease,
    margin-top 0.5s var(--ease);
}
/* El hijo va con min-height 0: si no, su mínimo automático expande la fila
   de grilla aunque valga 0fr, y el colapso no cierra. */
[data-proc].is-live .proc__desc > span {
  overflow: hidden;
  display: block;
  min-height: 0;
}
/* La altura se reserva sólo en el paso abierto, con la medida de la
   descripción más larga —la calcula el JS—. Así la lista mide siempre lo
   mismo y el bloque no salta al cambiar de paso, que con la sección fijada
   se notaría muchísimo. */
[data-proc].is-live .is-active .proc__desc { min-height: var(--proc-desc-h, 0); }
[data-proc].is-live .is-active .proc__desc {
  grid-template-rows: 1fr;
  margin-top: 12px;
  opacity: 1;
}

[data-proc].is-live .is-active { opacity: 1; }
[data-proc].is-live .is-active .proc__dot {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}
[data-proc].is-live .is-active .proc__label { color: var(--accent); }
[data-proc].is-live .is-active .proc__time { color: var(--muted); }
[data-proc].is-live .is-active { border-left-color: rgba(199, 184, 154, 0.45); }

/* --- Foto fija --------------------------------------------------------- */
.proc__media { position: relative; align-self: stretch; }
.proc__frame {
  position: sticky;
  top: 108px;
  aspect-ratio: 4 / 5;
  max-height: 64vh;
  border-radius: 0;
  background: var(--surface);
  overflow: hidden;
}
.proc__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.proc__frame img.is-shown { opacity: 1; }
/* capa plana para el epígrafe, no un degradado decorativo */
.proc__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(6, 6, 8, 0.42);
}

.proc__caption {
  position: absolute;
  left: clamp(18px, 2vw, 26px);
  right: clamp(18px, 2vw, 26px);
  bottom: 40px;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* barra de avance: un segmento por paso */
.proc__bar {
  position: absolute;
  left: clamp(18px, 2vw, 26px);
  right: clamp(18px, 2vw, 26px);
  bottom: clamp(18px, 2vw, 24px);
  z-index: 2;
  display: flex;
  gap: 6px;
}
.proc__bar span {
  flex: 1;
  height: 3px;
  border-radius: 0;
  background: rgba(245, 245, 242, 0.18);
  transition: background 0.45s ease;
}
.proc__bar span.is-on { background: var(--accent); }

@media (max-width: 900px) {
  /* En celular la columna fija no sirve: no hay dónde pegarse (en una sola
     columna la foto es su propia fila) y, apilada arriba, se va de pantalla
     apenas empieza a leerse la lista. Se cambia por una foto adentro de cada
     paso, que es lo que la hace responsive de verdad: la imagen siempre está
     al lado del texto que describe. */
  .proc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .proc__media { display: none; }

  /* En tablet la columna es ancha y un recorte apaisado alcanza. */
  .proc__shot {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin-bottom: 18px;
    background: var(--surface);
  }

  /* El aire entre pasos estaba en `vh` para darle recorrido a la foto fija.
     Sin foto fija esa reserva es aire muerto —84px por paso en un teléfono
     de 844px—, así que pasa a una medida fija y chica. */
  .proc__step { padding-bottom: 44px; }
  /* el punto de la línea de tiempo se alinea con la esquina de la foto */
  .proc__dot { top: 0; }

  /* la medida corta del título es para la columna angosta del escritorio;
     acá sobra ancho y deja cortes raros a media frase */
  .proc__title { max-width: none; }
  .proc__desc { max-width: none; }

  /* el tiempo pegado al borde derecho queda desconectado de su etiqueta
     cuando la columna pasa a ser todo el ancho */
  .proc__meta { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* la lista va entera y sin atenuar: no hay nada que enfocar */
  [data-proc].is-live .proc__step:not(.is-active) { opacity: 1; }
  [data-proc].is-live .proc__step:not(.is-active) .proc__title { color: var(--fg); }
  [data-proc].is-live .proc__desc {
    grid-template-rows: 1fr;
    margin-top: 12px;
    opacity: 1;
  }
  /* El paso en foco sigue marcándose con el punto y la etiqueta en acento:
     ahora que cada paso trae su foto, esa marca coincide con lo que se está
     leyendo. Lo que sí se saca es la altura reservada para la descripción
     más larga —sirve para que no salte el bloque fijado del escritorio, acá
     sólo agrega un hueco debajo del paso activo. */
  [data-proc].is-live .is-active .proc__desc { min-height: 0; }
}
/* Entre 561 y 900 la columna es todo el ancho de la pantalla: a línea
   completa la descripción pasa de 100 caracteres y se vuelve incómoda de
   leer. En celular no hace falta —la columna ya es más angosta que estos
   topes—, por eso va en su propio rango. */
@media (min-width: 561px) and (max-width: 900px) {
  .proc__title { max-width: 26ch; }
  .proc__desc { max-width: 62ch; }
}
@media (max-width: 560px) {
  .proc__step { padding-left: 18px; padding-bottom: 38px; }
  /* Las fotos del proceso son verticales de celular (9:16). En una columna
     angosta, un recorte apaisado se queda con la franja del medio y tira el
     motivo afuera: se pasa a 4:5, la misma proporción que usa la columna
     fija del escritorio. El tope en `vh` es para pantallas bajas y para el
     celular acostado, donde 4:5 taparía todo. */
  .proc__shot {
    aspect-ratio: 4 / 5;
    max-height: 58vh;
    margin-bottom: 16px;
  }
}

/* --- Por qué Fidecars ---------------------------------------------------- */
/* Bento de seis columnas: dos bloques de 3 arriba y tres de 2 abajo. Los
   títulos van arriba y el texto abajo (space-between), así las tarjetas de
   distinto alto mantienen la misma línea de base visual. */
.why-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(160px, auto);
  gap: 16px;
}
.why {
  grid-column: span 2;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 2.4vw, 34px) clamp(24px, 2.2vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.why h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.why p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

/* Los dos primeros ocupan media fila y pueden respirar más. */
.why--lg { grid-column: span 3; gap: 20px; }
.why--lg h3 { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.15; letter-spacing: -0.025em; }
.why--lg p { font-size: 15px; line-height: 1.7; max-width: 36ch; }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why, .why--lg { grid-column: span 1; }
}
@media (max-width: 620px) {
  .why-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .why, .why--lg { grid-column: span 1; }
}

/* --- Trabajos ------------------------------------------------------------ */
/* Carrusel horizontal con scroll-snap: se ven dos cards y media, la media
   avisa que hay más. Sumar autos no agranda la sección, sólo alarga el
   track. Scroll nativo (touch, trackpad, teclado) + flechas en JS. */
.work-track {
  display: flex;
  gap: clamp(12px, 1.2vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  outline: none;
}
.work-track::-webkit-scrollbar { display: none; }
.work-track > .work-tile {
  flex: 0 0 clamp(300px, 38vw, 580px);
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
}

.work-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(20px, 2.2vw, 32px);
}
.work-count {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.work-bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--line-3);
  overflow: hidden;
}
.work-bar span {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0.2);
  transition: transform 0.3s var(--ease);
}
.work-arrows { display: flex; gap: 10px; }
.work-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.work-arrow:hover:not(:disabled),
.work-arrow:focus-visible { border-color: var(--accent); color: var(--accent); }
.work-arrow:disabled { opacity: 0.3; cursor: default; }
.work-nav[hidden] { display: none; }

.work-tile {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-lg);
  outline: none;
  isolation: isolate;
}
/* Marco fino por encima de la foto: con reposo casi invisible, en hover
   toma el tono del acento. Va en ::after para no mover el layout. */
.work-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid var(--line-2);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.4s ease;
}
.work-tile:hover::after,
.work-tile:focus-visible::after { border-color: var(--accent-line); }
.work-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.92);
  transition: transform 0.9s var(--ease), filter 0.5s ease;
}
.work-tile:hover img,
.work-tile:focus img { transform: scale(1.05); filter: saturate(1) brightness(1); }

/* El nombre del auto queda siempre visible; los trabajos hechos aparecen
   en hover, debajo de una línea de acento que se estira. */
.work-tile__cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: clamp(48px, 5vw, 80px) clamp(16px, 1.6vw, 26px) clamp(16px, 1.5vw, 24px);
  background: linear-gradient(to top, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.55) 45%, rgba(5, 5, 5, 0) 100%);
}
.work-tile__cap h3 {
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--fg);
}
.work-tile__cap h3::after {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  margin-top: 10px;
  background: var(--accent);
  transition: width 0.5s var(--ease);
}
.work-tile:hover .work-tile__cap h3::after,
.work-tile:focus .work-tile__cap h3::after { width: 56px; }
.work-tile__cap p {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  font-size: clamp(12.5px, 0.95vw, 14px);
  line-height: 1.5;
  color: var(--muted);
  transition: max-height 0.5s var(--ease), margin-top 0.4s var(--ease), opacity 0.35s ease;
}
.work-tile:hover .work-tile__cap p,
.work-tile:focus .work-tile__cap p { max-height: 6em; margin-top: 10px; opacity: 1; }
/* sin hover real (touch): el epígrafe queda completo siempre */
@media (hover: none) {
  .work-tile__cap p { max-height: none; margin-top: 10px; opacity: 1; }
  .work-tile img { filter: none; }
}

@media (max-width: 800px) {
  .work-track > .work-tile { flex-basis: 84%; }
  .work-arrow { width: 42px; height: 42px; }
}

/* --- Compraventa -------------------------------------------------------- */
.cv {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.4vw, 56px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.cv p { max-width: 52ch; font-size: 15.5px; line-height: 1.8; color: var(--muted); }
.cv p + p { margin-top: 16px; }
.cv__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cv__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}
.cv__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cv__list strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin-bottom: 6px;
}
.cv__list span { font-size: 14px; line-height: 1.7; color: var(--muted); }
.cv__list i {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 9px;
}
@media (max-width: 900px) { .cv { grid-template-columns: minmax(0, 1fr); } }

/* --- Reseñas ------------------------------------------------------------ */
.rating { display: flex; align-items: center; gap: 14px; }
.rating__score {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.rating__meta { display: flex; flex-direction: column; gap: 6px; }
.stars { font-size: 14px; letter-spacing: 0.28em; color: var(--fg); }
.rating__meta span:last-child { font-size: 12.5px; color: var(--muted); }

.rev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rev {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rev blockquote {
  margin: 0;
  flex: 1;
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg);
}
.rev__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(245, 245, 242, 0.07);
}
.rev__foot cite { font-style: normal; min-width: 0; }
.rev__name { display: block; font-size: 13.5px; font-weight: 500; color: var(--fg); margin-bottom: 4px; }
.rev__car { display: block; font-size: 12px; line-height: 1.5; color: var(--dim); }
.rev__src {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
@media (max-width: 900px) { .rev-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- FAQ ---------------------------------------------------------------- */
.faq-list { border-top: 1px solid var(--line-2); }
.faq { border-bottom: 1px solid var(--line-2); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: -0.02em;
  color: var(--muted);
  transition: color 0.3s ease;
}
.faq summary:hover .faq__q { color: var(--fg); }
.faq[open] .faq__q { color: var(--fg); }
.faq__ico {
  flex: none;
  font-size: 20px;
  font-weight: 300;
  color: var(--muted);
  transition: transform 0.35s ease;
}
.faq[open] .faq__ico { transform: rotate(45deg); }
.faq p {
  padding-bottom: 28px;
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

/* --- Contacto ----------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card--pad { padding: clamp(24px, 2.4vw, 34px); }
.card--flex { display: flex; flex-direction: column; gap: 26px; }

/* la foto va limpia, sin caja ni radio; los datos van debajo separados
   por una línea de 1px */
.contact__map {
  display: block;
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--surface);
}
.contact__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact__map-link {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: var(--bg);
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.contact__map-link:hover { color: var(--accent); }
.contact__info {
  padding: clamp(24px, 2.4vw, 32px) 0 0;
  border-top: 1px solid var(--line-2);
  display: grid;
  gap: 26px;
}
.label {
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.contact__addr { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--fg); }
.hours { display: grid; gap: 8px; max-width: 340px; }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  color: var(--muted);
}
.hours div span:last-child { color: var(--fg); }
.hours div.is-closed span:last-child { color: var(--dim); }
.contact__note { max-width: 40ch; font-size: 14px; line-height: 1.7; color: var(--muted); }

.divider { display: flex; align-items: center; gap: 16px; }
.divider::before,
.divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.divider span {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

.form { display: grid; gap: 18px; }
.form label { display: grid; gap: 9px; }
.form .label { margin-bottom: 0; letter-spacing: 0.18em; color: var(--muted); }
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(245, 245, 242, 0.1);
  background: rgba(245, 245, 242, 0.02);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.form textarea { resize: vertical; min-height: 108px; }
.form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.form option { background: var(--surface); color: var(--fg); }
.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: rgba(199, 184, 154, 0.6);
  background: rgba(199, 184, 154, 0.05);
}
.form input::placeholder,
.form textarea::placeholder { color: var(--dim); }
.form .btn { margin-top: 4px; }
.form__hint { font-size: 12.5px; line-height: 1.6; color: var(--dim); }

@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- Footer ------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 8vh, 88px) 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(36px, 6vh, 56px);
}
.footer__brand {
  display: inline-block;
  margin-bottom: 22px;
}
.footer__brand img { display: block; width: auto; height: clamp(48px, 4.4vw, 64px); }
.footer p:not(.label), .footer li { font-size: 13.5px; line-height: 1.8; color: var(--muted); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--fg); }
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--dim);
}
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* --- WhatsApp flotante -------------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.25s ease, transform 0.25s ease;
}
.wa-float:hover { background: var(--fg); color: var(--bg); }
.wa-float svg { width: 17px; height: 17px; flex: none; }

/* --- Página de servicio ------------------------------------------------- */
.svc-hero {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.svc-hero__img { position: absolute; inset: 0; }
.svc-hero__img img { width: 100%; height: 100%; object-fit: cover; }
/* capa plana para que se lea el texto, no un degradado decorativo */
.svc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(6, 6, 8, 0.5);
}
.svc-hero__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 140px var(--gutter) clamp(40px, 6vh, 72px);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(20px, 3vh, 32px);
  font-size: 12px;
  color: var(--muted);
  list-style: none;
  padding: 0;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--fg); }
.crumbs li::after { content: "/"; margin-left: 10px; color: var(--dim); }
.crumbs li:last-child { color: var(--muted); }
.crumbs li:last-child::after { content: none; }
.svc-hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.svc-hero p {
  margin-top: clamp(18px, 2.6vh, 28px);
  max-width: 52ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: var(--muted);
}
.svc-hero .btn { margin-top: clamp(24px, 3.5vh, 40px); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.h3-xl {
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.prose p:not(.eyebrow) { max-width: 52ch; font-size: 15.5px; line-height: 1.8; color: var(--muted); }
.prose p + p { margin-top: 18px; }
.figure {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  overflow: hidden;
}
.figure img { width: 100%; height: 100%; object-fit: cover; }

/* Lista de ítems: se entiende por proximidad, no necesita caja. Queda una
   línea de 1px arriba y aire. */
.panel {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  padding: clamp(28px, 3.4vw, 44px) 0 0;
}
.panel h2 {
  margin-bottom: clamp(24px, 3.4vh, 40px);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
  color: var(--fg);
}
.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vh, 20px) clamp(28px, 4vw, 64px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.checks li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.7; color: var(--muted); }
.checks li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dim);
  margin-top: 9px;
}

.price-table { background: transparent; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.price-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 36px);
  border-bottom: 1px solid rgba(245, 245, 242, 0.07);
}
.price-row:last-child { border-bottom: 0; }
.price-row__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 6px;
}
.price-row__sub { font-size: 13.5px; color: var(--dim); }
.price-row__dur { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.price-row__val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: -0.03em;
  color: var(--accent);
  white-space: nowrap;
}
.price-foot { margin-top: 18px; max-width: 78ch; font-size: 12.5px; line-height: 1.7; color: var(--dim); }

/* CTA justo después del precio: es el momento de mayor intención de compra
   de toda la página, y antes no había ningún botón acá — sólo la nota legal.
   La nota va primero y el botón al lado; en una columna angosta se apilan. */
.price-cta {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}
.price-cta .price-foot { margin-top: 0; flex: 1 1 320px; }
.price-cta .btn { flex: none; }

/* Tabla de dos columnas: nombre a la izquierda, valor a la derecha.
   Con 4 filas queda una grilla 2×2 en lugar de una lista larga. */
.price-table--pairs { display: grid; grid-template-columns: 1fr 1fr; }
.price-table--pairs .price-row {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 28px);
  border-bottom: 1px solid rgba(245, 245, 242, 0.07);
}
.price-table--pairs .price-row:nth-child(odd) {
  border-right: 1px solid rgba(245, 245, 242, 0.07);
}
.price-table--pairs .price-row:nth-last-child(-n + 2) { border-bottom: 0; }
.price-table--pairs .price-row:only-child { grid-column: 1 / -1; border-right: 0; }
.price-table--pairs .price-row__val { font-size: clamp(1.25rem, 1.9vw, 1.65rem); }

@media (max-width: 720px) {
  .price-table--pairs { grid-template-columns: minmax(0, 1fr); }
  .price-table--pairs .price-row {
    border-right: 0;
    border-bottom: 1px solid rgba(245, 245, 242, 0.07);
  }
  .price-table--pairs .price-row:last-child { border-bottom: 0; }
}

/* niveles de producto (cerámicos): un bloque por producto */
.tier + .tier { margin-top: clamp(24px, 3.5vh, 40px); }
.tier--destacado .price-table { border-color: rgba(199, 184, 154, 0.28); }
.tier__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-bottom: 12px;
}
.tier__badge {
  flex: none;
  padding: 5px 12px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.tier__name {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  letter-spacing: -0.025em;
  color: var(--fg);
}
.tier__note { font-size: 13px; color: var(--dim); }
.tier__desc {
  margin-bottom: 16px;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* bloque de presupuesto: mismo peso visual que el de tiempo */
.quote {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(30px, 3.6vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.quote__text { max-width: 56ch; font-size: 15.5px; line-height: 1.8; color: var(--muted); }
.quote__big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent);
  white-space: nowrap;
}

.timebox {
  background: transparent;
  border: 1px solid rgba(199, 184, 154, 0.18);
  border-radius: var(--r-lg);
  padding: clamp(30px, 3.6vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.timebox__big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.timebox__text { flex: 1 1 320px; max-width: 56ch; font-size: 15.5px; line-height: 1.8; color: var(--muted); }

.closer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: clamp(64px, 11vh, 130px);
}
.closer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.closer__top h2 {
  max-width: 18ch;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: rgba(245, 245, 242, 0.02);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.4s var(--ease);
}
.rel:hover {
  border-color: rgba(199, 184, 154, 0.4);
  background: rgba(199, 184, 154, 0.05);
  }
.rel span:first-child {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.rel span:last-child { color: var(--muted); }

@media (max-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .checks { grid-template-columns: minmax(0, 1fr); }
  .rel-grid { grid-template-columns: minmax(0, 1fr); }
  .price-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  /* las filas sin subtítulo entran igual en una línea */
  .price-row--pair { grid-template-columns: 1fr auto; align-items: baseline; }
}

/* --- Aparición al hacer scroll ------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.95s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --- Imagen ausente: no rompe la maqueta -------------------------------- */
.is-empty {
  background: linear-gradient(160deg, #141414 0%, #0b0b0b 60%, #050505 100%);
}

/* --- Preferencia de movimiento reducido --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__media { animation: none; }
  .hero-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Impresión ---------------------------------------------------------- */
@media print {
  .nav, .wa-float, .hero__media { display: none !important; }
  body { background: #fff; color: #000; }
}