:root{
  --primary:#1342ff;
  --primary-dark:#0a1e7a;
  --bg-dark:#070b14;
  --bg-dark-2:#0d1526;
  --text-main:#111827;
  --text-muted:#6b7280;
  --border:#e2e4e8;
  /* Fondos tipo piloto Ford: página en blanco puro, secciones alternas en gris claro. */
  --bg-page:#ffffff;
  --bg-alt:#f4f4f4;
  --bg-card:#ffffff;
  --container:1180px;
  --radius:6px;
  --radius-sm:4px;
  --pad-x:clamp(16px,4vw,32px);
  --shadow-card:0 10px 30px rgba(15,23,42,.08);
  /* Tipografía tipo piloto Ford: grotesca neutra, Helvetica/Arial primero. */
  --font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
/* Navegación suave: al hacer clic en el nav, la página "te lleva" a la
   sección en vez de saltar en seco. scroll-padding-top deja libre el
   alto del header fijo para que el título no quede tapado. */
html{ scroll-behavior:smooth; scroll-padding-top:104px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  font-family: var(--font);
  background:var(--bg-page);
  color:var(--text-main);
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* Enlace "saltar al contenido": oculto hasta recibir foco por teclado.
   position:fixed evita que el overflow del body lo recorte. */
.skip-link{
  position:fixed; left:8px; top:8px; z-index:2000;
  transform:translateY(-150%);
  background:var(--primary); color:#fff;
  padding:10px 16px; border-radius:var(--radius);
  font-weight:700; text-decoration:none;
  transition:transform .18s ease;
}
.skip-link:focus{ transform:translateY(0); outline:2px solid #fff; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .skip-link{ transition:none; } }
#contenido:focus{ outline:none; }

.ico{ display:inline-block; width:1em; height:1em; fill:currentColor; vertical-align:-0.125em; flex-shrink:0; }

/* =========================
   HEADER (mismo criterio que Landing/Inventario)
========================= */
.encabezado-sitio{
  position:fixed; top:0; left:0; width:100%; z-index:999;
  background:
    radial-gradient(55% 140% at 50% 50%, rgba(10,30,122,.78) 0%, rgba(10,30,122,0) 75%),
    linear-gradient(90deg, rgba(10,30,122,.96) 0%, rgba(19,66,255,.66) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease, opacity .22s ease, transform .22s ease;
}
.encabezado-sitio.en-tope{
  background:transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color:transparent;
}
.encabezado-sitio.header-oculto{
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
}
.encabezado-sitio .encabezado-inner{
  width:min(var(--container),100%);
  margin:0 auto;
  padding:12px var(--pad-x);
  display:flex; align-items:center; gap:14px;
  transition:padding .3s ease;
}
/* Transparente sobre el hero: un pelín más de aire y con el eslogan visible.
   Azul al hacer scroll: más compacto (slim) y sin eslogan. */
.encabezado-sitio.en-tope .encabezado-inner{ padding:15px var(--pad-x); }
.encabezado-sitio:not(.en-tope) .encabezado-inner{ padding:8px var(--pad-x); }

.bloque-marca{ display:flex; align-items:center; gap:12px; min-width:0; }
.logo-encabezado img{ height:36px; width:auto; }

.texto-marca{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.nombre-marca{ font-weight:800; letter-spacing:.02em; color:#fff; white-space:nowrap; font-size:.9rem; }
.slogan-marca{
  color:rgba(255,255,255,.85); font-size:.78rem; display:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
/* El eslogan se muestra con el header transparente sobre el hero y se oculta
   al hacer scroll (header azul) para dejarlo más slim. */
.encabezado-sitio:not(.en-tope) .slogan-marca{ display:none; }

.nav-sitio{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.nav-sitio a{
  color:rgba(255,255,255,.92); text-decoration:none; font-weight:500; font-size:.78rem;
  letter-spacing:.04em; text-transform:uppercase; padding:10px 6px; border-radius:var(--radius-sm);
  white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
.nav-sitio a:hover{ background:rgba(0,0,0,.10); color:rgba(255,255,255,.95); }
/* Header azul: la letra del nav un pelín más marcada (sin volver al 800). */
.encabezado-sitio:not(.en-tope) .nav-sitio a{ font-weight:600; }

.acciones-encabezado{ display:flex; align-items:center; gap:10px; }
.btn-whatsapp-fijo, .btn-icono{
  width:42px; height:42px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.92);
  text-decoration:none; transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn-whatsapp-fijo:hover, .btn-icono:hover{ transform:translateY(-1px); background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.26); }

.toggle-nav{ display:none; border:none; cursor:pointer; }

@media (min-width:900px){ .slogan-marca{ display:block; } }
@media (max-width:920px){
  .slogan-marca{ display:none; }
  .nav-sitio{ display:none; }
  .toggle-nav{ display:inline-flex; }
  .acciones-encabezado{ margin-left:auto; }
  /* En móvil ya está la burbuja flotante de WhatsApp: el botón del header
     era un segundo WhatsApp compitiendo por atención en poco espacio. */
  .btn-whatsapp-fijo{ display:none; }
}

.nav-movil{
  display:none; background:rgba(9,20,64,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 26px 44px -20px rgba(0,0,0,.65);
}
.nav-movil.open{ display:block; }
/* Con el menú abierto sobre el hero, el header deja de ser transparente para
   que el bloque de marca y los botones no floten sin fondo. */
.encabezado-sitio.en-tope:has(.nav-movil.open){
  background:rgba(9,20,64,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav-movil-inner{ width:min(var(--container),100%); margin:0 auto; padding:10px var(--pad-x) 16px; display:grid; gap:8px; }
.nav-movil a{
  display:flex; justify-content:space-between; align-items:center; padding:15px 14px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); text-decoration:none; color:#fff;
  font-weight:800; text-transform:uppercase; font-size:.8rem; letter-spacing:.02em;
}
.nav-movil a:active{ background:rgba(255,255,255,.16); }

.whatsapp-flotante{
  position:fixed; right:16px; bottom:16px; width:56px; height:56px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; background:#25D366; color:#fff;
  box-shadow:0 18px 35px rgba(0,0,0,.28); text-decoration:none; z-index:80;
  transition: transform .18s ease, filter .18s ease, opacity .25s ease;
}
.whatsapp-flotante:hover{ transform:translateY(-2px); filter:brightness(1.03); }
.whatsapp-flotante.oculto-hero{ opacity:0; pointer-events:none; }
.whatsapp-flotante .ico{ font-size:26px; }

/* =========================
   HERO
========================= */
.hero{ position:relative; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; background:var(--bg-dark); }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,11,20,.55) 0%, rgba(7,11,20,.35) 35%, rgba(7,11,20,.88) 100%),
    linear-gradient(90deg, rgba(7,11,20,.75) 0%, rgba(7,11,20,.15) 55%);
}

/* ---- Scroll-driven parallax (CSS puro, sin JS) -----------------------
   Al bajar por el hero, el video hace un zoom/parallax sutil y el overlay
   se oscurece un poco más, ligados directamente a la posición del scroll
   (animation-timeline: scroll()). Navegadores sin soporte (Safari/Firefox
   actuales) simplemente ven el hero estático, sin ningún efecto raro. */
@supports (animation-timeline: scroll()) {
  .hero-video{
    animation: hero-parallax-zoom linear forwards;
    animation-timeline: scroll(root);
    animation-range: 0 90vh;
  }
  .hero-overlay{
    animation: hero-parallax-darken linear forwards;
    animation-timeline: scroll(root);
    animation-range: 0 90vh;
  }
  @keyframes hero-parallax-zoom{
    to{ transform: scale(1.18) translateY(2%); }
  }
  @keyframes hero-parallax-darken{
    from{ opacity: .72; }
    to{ opacity: 1; }
  }
}
.hero-inner{
  position:relative; z-index:2;
  width:min(var(--container),100%); margin:0 auto;
  padding:min(160px,18vh) var(--pad-x) 64px;
  color:#fff;
}
.hero-kicker{
  display:inline-block; font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.85); margin-bottom:18px;
}
.hero-titulo{
  /* Tracking e interlínea originales; lo que se conserva del ajuste "Ford"
     es solo lo que lo hace ver más limpio: peso 700 (no 900) y el tamaño
     acotado (máx 70px) + max-width amplio, para que quede en 2 renglones. */
  margin:0; font-size:clamp(30px,6vw,70px); font-weight:700; line-height:1.04; letter-spacing:-.01em;
  max-width:880px; text-wrap:balance;
}
.hero-subtitle{
  margin:22px 0 0; font-size:clamp(16px,1.6vw,20px); font-weight:400; color:rgba(255,255,255,.86);
  max-width:560px; line-height:1.55;
}
.hero-acciones{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center; padding:15px 26px;
  border-radius:var(--radius-sm); font-weight:800; font-size:.88rem; letter-spacing:.02em;
  text-decoration:none; cursor:pointer; transition:.18s ease;
}
.btn-solid{
  background:linear-gradient(135deg,#0058ff,#002dd9); color:#fff; box-shadow:0 14px 34px rgba(0,41,255,.32);
}
.btn-solid:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn-outline-hero{
  background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
}
.btn-outline-hero:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }

.hero-strip{ position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.14); background:rgba(7,11,20,.45); backdrop-filter: blur(8px); }
.hero-strip-inner{
  width:min(var(--container),100%); margin:0 auto; padding:16px var(--pad-x);
  display:flex; flex-wrap:wrap; gap:14px 32px; justify-content:space-between;
}
.hero-strip-inner span{
  display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.85);
  font-size:.8rem; font-weight:600; white-space:nowrap;
}
.hero-strip-inner .ico{ color:rgba(255,255,255,.85); font-size:1.05em; }

@media (max-width:700px){
  /* El video es horizontal y no encuadra en vertical: en móvil se usa el
     póster a pantalla completa (con el degradado del overlay encima) en vez
     de dejar un placeholder negro. */
  .hero{
    min-height:100vh; min-height:100dvh;
    background:#05070c url("../assets/hero-poster.webp") center/cover no-repeat;
  }
  .hero-video{ display:none; }
  .hero-inner{ padding-top:116px; display:flex; flex-direction:column; align-items:center; text-align:center; }
  .hero-titulo{ max-width:100%; }
  .hero-subtitle{ margin-left:auto; margin-right:auto; }
  .hero-acciones{ justify-content:center; }
  .hero-strip-inner{ justify-content:center; }
  .hero-strip-inner span.hero-strip-extra{ display:none; }
  .hero-strip-inner span.hero-strip-envios{ display:inline-flex; }
  .hero-strip-inner span.hero-strip-wa{ display:none; }
}

/* =========================
   SECCIONES BASE
========================= */
.seccion{ width:min(var(--container),100%); margin:0 auto; padding:84px var(--pad-x); }
.encabezado-seccion{ max-width:640px; margin-bottom:44px; }
.eyebrow{
  display:inline-block; font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--primary); margin-bottom:12px;
}
h2{ font-size:clamp(26px,3.4vw,40px); font-weight:800; margin:0 0 12px; letter-spacing:-.01em; }
.subtitulo{ margin:0; color:var(--text-muted); font-size:1.02rem; font-weight:400; line-height:1.6; }

.aparecer{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.aparecer.is-visible{ opacity:1; transform:none; }
.unidad-card.aparecer{
  /* Duración corta y stagger mínimo: con varias tarjetas entrando a la vez
     (al hacer scroll hasta la sección) el acumulado de retrasos por tarjeta
     ya no se siente "lento/foggy" antes de que termine de aparecer la última. */
  transition: opacity .3s ease calc(var(--i,0) * .03s), transform .3s ease calc(var(--i,0) * .03s), box-shadow .22s ease, border-color .22s ease;
}

/* ---- Scroll-driven zoom/parallax (CSS puro, sin JS) --------------------
   Exactamente el mismo efecto del hero, repetido igual en cada sección:
   el contenido hace zoom de forma continua mientras la sección pasa por
   pantalla. El hero usa scroll(root) porque siempre está al inicio del
   documento; el resto de las secciones usan animation-timeline: view()
   con rango "cover" (desde que entra hasta que sale) para lograr el mismo
   comportamiento continuo en cualquier punto de la página.
   IMPORTANTE: no se le pone overflow:hidden a .seccion — view() necesita
   encontrar el contenedor de scroll real (la página) subiendo por los
   ancestros; si un ancestro tiene overflow:hidden, el navegador lo toma
   como si fuera el contenedor de scroll y la animación deja de avanzar
   con el scroll real de la página. Navegadores sin soporte ven todo
   estático, sin roturas. */
@supports (animation-timeline: view()) {
  @media (min-width:900px){
    .cta-final-inner{
      animation: section-zoom linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
  @keyframes section-zoom{
    from{ transform: scale(1); }
    to{ transform: scale(1.18); }
  }
}

/* =========================
   UNIDADES DESTACADAS
========================= */
.unidades-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; max-width:none; }
.unidades-header > div:first-child{ max-width:640px; }
.unidades-header-cta .btn{ white-space:nowrap; }

.unidades-slider-wrap{ position:relative; }

/* Navegación del carrusel: un par de chevrons ‹ › pequeños a la izquierda,
   separados del botón "Ver inventario completo". Cada clic desliza una
   "página" de 3; NO hay loop: al llegar a un extremo la flecha se apaga. */
.unidades-header-cta{
  display:flex; flex-direction:row; align-items:stretch; gap:16px;
  justify-content:space-between; min-width:min(100%,360px);
}
.unidades-nav{ display:flex; align-items:stretch; gap:8px; }
.unidades-vermas{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 44px; padding:0;
  background:none; border:1px solid #d0d6de; border-radius:var(--radius-sm);
  cursor:pointer; color:var(--text-main);
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.unidades-vermas .ico{ font-size:.8rem; transition:transform .18s ease; }
.unidades-vermas:not(:disabled):hover{ background:#374151; border-color:#374151; color:#fff; }
.unidades-vermas:not(:disabled):hover .ico{ transform:translateX(2px); }
.unidades-vermas:disabled{ opacity:.3; cursor:default; }

/* Una sola fila que se desliza a la derecha (como el piloto Ford): carrusel
   horizontal con scroll-snap. En escritorio entran 3 tarjetas por vista y el
   enlace de abajo avanza una "página"; en móvil el swipe táctil hace el resto. */
.unidades-grid{
  display:flex; gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  /* El scroller rompe el padding de la sección (margin-inline negativo) y lo
     recompone con su propio padding-inline: así las tarjetas siguen
     alineadas con el encabezado, pero la caja de recorte del overflow
     tiene ~var(--pad-x) de aire a cada lado para que la sombra azul del
     hover no quede cortada — ni en la 1ª ni en la última tarjeta.
     El padding-bottom holgado cubre el alcance vertical (~46px) del glow. */
  margin-inline:calc(var(--pad-x) * -1);
  padding:4px var(--pad-x) 52px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.unidades-grid::-webkit-scrollbar{ display:none; }
@media (prefers-reduced-motion:reduce){
  .unidades-grid{ scroll-behavior:auto; }
}

/* El filtro del inventario oculta tarjetas con el atributo [hidden]; sin esta regla, el
   display:flex de .unidad-card le ganaba y las unidades filtradas seguían a la vista. */
.unidad-card[hidden],
.inventario-vacio[hidden]{ display:none !important; }
.unidad-card{
  flex:0 0 calc((100% - 48px) / 3);
  scroll-snap-align:start;
  display:flex; flex-direction:column; background:var(--bg-card);
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
  box-shadow:none; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@media (hover:hover) and (pointer:fine){
  .unidad-card:hover{
    transform:translateY(-4px);
    /* Glow en azul marino del footer (#0c1f57 / #0a1e7a): sombra en capas
       que se degrada de oscuro a transparente, sin desbordar la fila. */
    box-shadow:
      0 1px 2px rgba(12,31,87,.12),
      0 8px 18px -6px rgba(12,31,87,.30),
      0 20px 40px -14px rgba(10,30,122,.42);
  }
  .unidad-card:hover .unidad-media img{ transform:scale(1.06); }
  .unidad-badge{ opacity:0; transform:translateY(-4px); }
  .unidad-card:hover .unidad-badge{ opacity:1; transform:translateY(0); }
}
.unidad-media{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--bg-dark); text-decoration:none; border-radius:10px 10px 0 0; }
.unidad-media .marca-agua{ position:absolute; right:10px; bottom:10px; width:34%; min-width:70px; max-width:150px; height:auto; opacity:.6; pointer-events:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.unidad-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.unidad-badge{
  position:absolute; top:10px; left:10px; background:#059669; color:#fff;
  font-size:.57rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  padding:6px 13px; border-radius:999px;
  transition:opacity .22s ease, transform .22s ease;
}
/* Banda "Grúas Titán" minimalista (estilo Ford): por defecto solo el texto
   azul, sin fondo. Al hover entra el strip negro diagonal + el texto pasa a
   blanco + el brillo barre (ese "shine" se conserva tal cual). */
.unidad-cat-banner{
  position:relative; overflow:hidden;
  min-height:23px; padding:0 22px; display:flex; align-items:center;
}
.unidad-cat-banner::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 45%);
  opacity:0; transition:opacity .3s ease;
}
.unidad-card:hover .unidad-cat-banner::before{ opacity:1; }
.unidad-cat-banner::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform:translateX(-120%); will-change:transform;
}
.unidad-card:hover .unidad-cat-banner::after{
  transform:translateX(120%);
  transition:transform .7s ease;
}
.unidad-cat-shape{
  position:absolute; top:0; bottom:0; z-index:0;
  background:linear-gradient(135deg,#1a2138 0%, #05070c 100%);
  opacity:0; transition:opacity .3s ease, background-color .3s ease;
}
.unidad-card:hover .unidad-cat-shape{ opacity:1; }
.unidad-cat-shape-accent{
  left:0; right:calc(22% - 4px); background:#d1d5db; z-index:-1;
  clip-path:polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.unidad-card:hover .unidad-cat-shape-accent{ background:linear-gradient(135deg,#0058ff,#002dd9); }
.unidad-cat-shape-main{
  left:0; right:22%;
  clip-path:polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.unidad-cat-banner .unidad-cat{
  position:relative; z-index:1; margin:0;
  color:var(--primary); font-size:.6rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px;
  transition:color .3s ease;
}
.unidad-card:hover .unidad-cat-banner .unidad-cat{ color:#fff; }
.unidad-body{ padding:2px 22px 24px; display:flex; flex-direction:column; flex:1; }
.unidad-cat{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); margin-bottom:4px; }
.unidad-body h3{ margin:0 0 6px; font-size:1.4rem; font-weight:800; letter-spacing:-.02em; color:var(--text-main); }
.unidad-body p{ margin:0; color:var(--text-muted); font-weight:400; font-size:1rem; }
/* Línea de capacidad y año ("56,000 lb / 28 US Ton | Año 2020"): si no cabe en una línea, se parte en dos partes parejas. */
.unidad-body h3 + p{ text-wrap:balance; }

.unidad-price-block{ margin-top:20px; display:flex; flex-direction:column; gap:3px; }
.unidad-price-label{ font-size:.7rem; color:var(--text-muted); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.unidad-price{ margin:0 !important; font-weight:800 !important; font-size:1.2rem; color:var(--text-main) !important; }

.unidad-footer{ display:flex; flex-wrap:nowrap; gap:10px; margin-top:auto; padding-top:24px; }
.unidad-footer .btn-outline-dark,
.unidad-footer .btn-whatsapp-card{
  flex:1; min-width:0; padding:13px 10px; font-size:.85rem; letter-spacing:.01em; gap:7px;
  border-radius:var(--radius-sm);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.unidad-footer .btn-outline-dark{ border-color:#d0d6de; font-weight:600; }
.btn-whatsapp-card{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:var(--radius-sm); background:linear-gradient(135deg,#0058ff,#002dd9); color:#fff; text-decoration:none;
  font-weight:800; cursor:pointer; transition:.18s ease;
}
.btn-whatsapp-card:hover{ filter:brightness(1.06); transform:translateY(-1px); }

.btn-outline-dark{
  display:inline-flex; align-items:center; justify-content:center; padding:14px 26px; border-radius:var(--radius-sm);
  border:1px solid #d0d6de; color:#111827; font-weight:800; font-size:.85rem; letter-spacing:.02em; text-decoration:none;
  transition:.18s ease;
}
.btn-outline-dark:hover{ background:#374151; color:#fff; transform:translateY(-1px); }

/* ---- Carrusel de "Unidades destacadas" en móvil/tablet ----
   El mismo carrusel horizontal, ajustando cuántas tarjetas se ven: 2 en
   tablet, ~1 (con un asomo de la siguiente) en móvil. */
@media (max-width:820px){
  .unidades-grid{ gap:14px; }
  .unidades-grid .unidad-card{
    scroll-snap-stop:always;
    flex:0 0 calc(50% - 7px); max-width:none;
  }
}
@media (max-width:560px){
  .unidades-grid .unidad-card{
    /* deja ~42px visibles de la siguiente para avisar que se desliza */
    flex:0 0 calc(100% - 56px); max-width:360px;
  }
  /* En móvil se navega deslizando: las flechas de "página de 3" no aportan y
     dejan el encabezado apretado. El enlace a inventario queda a la izquierda. */
  .unidades-nav{ display:none; }
  .unidades-header-cta{ min-width:0; justify-content:flex-start; }
}

@media (max-width:760px){
  .unidad-body{ padding:2px 20px 22px; }
  .unidad-price-block{ flex-direction:row; align-items:baseline; gap:6px; margin-top:16px; }
  .unidad-price-label::after{ content:":"; }
  .unidad-footer{ flex-direction:row; justify-content:center; padding-top:16px; }
  /* Un solo botón en móvil: se quita "Ficha técnica" y WhatsApp queda
     centrado (ancho de su contenido, no estirado a flex:1). */
  .unidad-footer .btn-outline-dark{ display:none; }
  .unidad-footer .btn-whatsapp-card{ flex:0 0 auto; width:auto; padding:13px 32px; font-size:.85rem; gap:7px; }
}

/* =========================
   PROCESO (Cómo trabajamos)
   Sección única a sangre: el título de marketing "Tu adquisición paso a
   paso" es el protagonista arriba; debajo, el slideshow manual de pasos
   (imagen de fondo por paso, scrim que se despeja a la derecha, flechas
   de borde y dots rectangulares). Sin autoplay.
========================= */
.proceso-hero{
  position:relative; isolation:isolate;
  width:100%; max-width:none;
  min-height:clamp(448px, 59vh, 620px);
  display:flex; align-items:center;
  color:#fff; overflow:hidden;
}
.ph-fondos{ position:absolute; inset:0; z-index:0; }
.ph-fondo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .3s ease, filter .3s ease, transform .3s ease;
}
.ph-fondo.is-active{ opacity:1; }
.ph-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(97deg, rgba(7,11,20,.97) 0%, rgba(7,11,20,.92) 30%, rgba(7,11,20,.6) 54%, rgba(7,11,20,.16) 80%, transparent 100%),
    linear-gradient(0deg, rgba(7,11,20,.6) 0%, transparent 36%);
}

/* Slide "Recibe tu equipo": la misma foto va de fondo desenfocado y, además,
   como card nítida a la derecha, centrada junto a la info. */
.proceso-hero.ph-mode-card .ph-fondo.is-active{
  filter:blur(18px) brightness(.5);
  transform:scale(1.12);
}
.ph-card{
  position:absolute; z-index:1;
  right:clamp(var(--pad-x), 5.5vw, 84px); top:50%; transform:translateY(-50%);
  margin:0; width:clamp(320px, 40vw, 480px); aspect-ratio:4/3;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 74px -18px rgba(0,0,0,.7);
}
.ph-card img{ width:100%; height:100%; object-fit:cover; display:block; }

.ph-cuerpo{
  position:relative; z-index:2;
  width:min(var(--container),100%); margin:0 auto;
  padding:52px var(--pad-x);
  padding-left:clamp(var(--pad-x), 6.5vw, 92px);
}

.ph-slides{
  list-style:none; margin:0; padding:0;
  /* .ph-card es position:absolute, así que el layout normal no le reserva
     espacio al texto: sin este tope, un título largo en una sola línea
     podía terminar por debajo de la foto (que pinta encima por estar
     posicionada) y se veía "cortado". Se resta exactamente el hueco que
     ocupa la foto (ancho + separación a la derecha) + un margen de aire,
     así nunca se solapan sea cual sea el ancho de pantalla. */
  max-width:min(640px, calc(100% - clamp(320px,40vw,480px) - clamp(var(--pad-x),5.5vw,84px) - 32px));
  /* Alto fijo: todas las diapositivas ocupan el mismo espacio, así los dots
     y el marco no se mueven al navegar. */
  min-height:180px;
}
.ph-slide{ display:none; }
.ph-slide.is-active{ display:block; animation:ph-in .22s ease; }
.ph-slide:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
/* Solo fade: un transform aquí convertiría el <li> en bloque contenedor y
   descolocaría la .ph-card absoluta. */
@keyframes ph-in{ from{ opacity:0; } to{ opacity:1; } }

/* Intro y pasos comparten la MISMA escala: mismo kicker, mismo título,
   mismo texto. La intro no es más grande que los pasos. */
.ph-kicker{
  margin:0 0 12px; padding-bottom:7px;
  font-size:.68rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.88);
  border-bottom:2px solid var(--primary); display:inline-block;
}
.ph-headline,
.ph-titulo{
  margin:0 0 10px; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.25rem, 2.4vw, 1.7rem); line-height:1.12; letter-spacing:-.01em;
}
.ph-headline span,
.ph-titulo span{ color:var(--primary); }
.ph-lead,
.ph-desc{
  margin:0; font-size:clamp(.95rem,1.3vw,1.05rem); line-height:1.6;
  color:rgba(255,255,255,.8); max-width:46ch;
}

.ph-dots{ display:flex; gap:10px; margin-top:26px; }
.ph-dot{
  all:unset; box-sizing:border-box; cursor:pointer;
  width:32px; height:5px; border-radius:2px; background:rgba(255,255,255,.28);
  transition:width .3s ease, background .2s ease;
}
.ph-dot:hover{ background:rgba(255,255,255,.5); }
.ph-dot.is-active{ width:56px; background:var(--primary); }
.ph-dot:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.ph-flecha{
  all:unset; box-sizing:border-box; cursor:pointer;
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:64px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:background .2s ease, border-color .2s ease;
}
.ph-flecha:not(:disabled):hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); }
.ph-flecha:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.ph-flecha:disabled{ opacity:.28; cursor:default; pointer-events:none; }
.ph-flecha svg{ width:22px; height:22px; }
.ph-prev{ left:clamp(8px, 2vw, 26px); }
.ph-next{ right:clamp(8px, 2vw, 26px); }

@media (max-width:900px){
  /* En móvil el carrusel (deslizar + dots finos) no se entendía y las fotos
     quedaban solo como fondo oscuro. Se cambia a una lista vertical: cada
     paso es una tarjeta con su imagen visible, se recorre con el scroll
     normal y aparece al entrar en pantalla. El JS de .proceso-hero detecta
     ≤900px, cablea solo este "reveal" y se salta dots/flechas/swipe. */
  .proceso-hero{
    display:block; min-height:0; overflow:visible;
    background:var(--bg-dark);
  }
  .ph-fondos, .ph-scrim, .ph-flecha, .ph-dots{ display:none; }
  .ph-cuerpo{ padding:40px var(--pad-x) 44px; }
  .ph-slides{ min-height:0; max-width:none; display:grid; gap:40px; }

  .ph-slide{
    display:block !important; animation:none;
    opacity:0; transform:translateY(18px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .ph-slide.is-inview{ opacity:1; transform:none; }

  .ph-lead, .ph-desc{ max-width:none; }

  .ph-card{
    display:block; position:static; transform:none;
    width:100%; margin:16px 0 0;
    aspect-ratio:4 / 3;
    box-shadow:0 20px 44px -22px rgba(0,0,0,.6);
  }
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .ph-slide{ opacity:1; transform:none; transition:none; }
}
@media (prefers-reduced-motion:reduce){
  .ph-fondo{ transition:opacity .3s ease; }
  .ph-slide.is-active{ animation:none; }
}

/* =========================
   NUESTRA HISTORIA · POR QUÉ ELEGIRNOS
   Dos secciones independientes. "Nuestra historia" usa el grid contenido
   del piloto Ford (texto + imagen en caja). "Por qué elegirnos" muestra las
   4 razones siempre a la vista, cada una en su tarjeta con su foto (sin
   botones ni rotación).
========================= */
.seccion-respaldo{
  width:100%; max-width:none;
  padding-left:0; padding-right:0;
  background:var(--bg-alt);
}
.respaldo-cuerpo{ width:min(var(--container),100%); margin-inline:auto; padding-inline:var(--pad-x); }

/* Grid contenido tipo Ford: texto + imagen en caja */
.conf-feature{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.conf-media{
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(15,23,42,.22);
}
.conf-media > img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block; }
/* La foto de "Nuestra historia" es una toma amplia del equipo: 16:9 para no
   recortar a la gente ni las grúas de los extremos. */
.seccion-historia .conf-media > img{ aspect-ratio:16/9; }
.seccion-respaldo > .respaldo-cuerpo > .conf-kicker{ margin-bottom:18px; }

/* Kicker sobre una banda diagonal en el mismo azul del nav (royal, más vivo
   que el marino del footer para que resalte y no se funda con la sección),
   con el destello de luz de la banda "Grúas Titán" de las tarjetas al hover.
   Texto en blanco. */
.conf-kicker.conf-kicker-strip{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-block; padding:8px 24px 9px 16px;
  color:#fff;
  background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.conf-kicker-strip > span{ position:relative; z-index:2; color:#fff; }
.conf-kicker-strip::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform:translateX(-120%); will-change:transform;
  animation:conf-kicker-shine 6s ease-in-out infinite;
}
@keyframes conf-kicker-shine{
  0%{ transform:translateX(-120%); }
  12%, 100%{ transform:translateX(120%); }
}
@media (prefers-reduced-motion: reduce){
  .conf-kicker-strip::after{ animation:none; }
}

.conf-kicker{ margin:0 0 14px; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); }
.conf-text h2{ margin:0 0 16px; }
.conf-text > p{ margin:0 0 14px; color:var(--text-muted); line-height:1.7; }
.conf-text > p:last-child{ margin-bottom:0; }

/* Cuatro razones siempre visibles: foto arriba, icono sobre el borde de la
   foto, título y descripción debajo. 4 columnas en escritorio, 2 en tablet
   y 1 en móvil. */
.respaldo-titulo{ margin:0 0 30px; }
.respaldo-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.respaldo-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-card); border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(15,23,42,.08);
  transition:opacity .45s ease calc(var(--i,0) * .06s), transform .45s ease calc(var(--i,0) * .06s), box-shadow .25s ease;
}
.respaldo-card.is-visible:hover{ box-shadow:0 18px 40px rgba(15,23,42,.14); transform:translateY(-3px); transition-delay:0s; }
.respaldo-foto{ aspect-ratio:4/5; overflow:hidden; background:#e5e7eb; }
.respaldo-foto img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.respaldo-card:hover .respaldo-foto img{ transform:scale(1.04); }
/* Encuadre de cada foto: que se vea lo importante al recortar. */
.respaldo-foto--tecnico img{ object-position:58% 50%; }
.respaldo-foto--documentos img{ object-position:60% 50%; }
.respaldo-card-texto{ padding:0 20px 24px; }
.respaldo-ico{
  display:grid; place-items:center; width:48px; height:48px; margin-top:-24px;
  position:relative; border-radius:50%; border:3px solid var(--bg-card);
  background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color:#fff; box-shadow:0 8px 18px rgba(19,66,255,.35);
}
.respaldo-ico svg{ width:24px; height:24px; display:block; }
.respaldo-card h3{ margin:14px 0 6px; font-size:1.05rem; font-weight:800; letter-spacing:-.01em; line-height:1.25; color:var(--text-main); }
.respaldo-card p{ margin:0; color:var(--text-muted); font-size:.92rem; line-height:1.55; }

@media (max-width:900px){
  .conf-feature{ grid-template-columns:1fr; gap:28px; }
  .respaldo-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .respaldo-grid{ grid-template-columns:1fr; gap:18px; }
  .respaldo-foto{ aspect-ratio:4/3; }
  /* En móvil la foto es más panorámica: se sube el encuadre para no cortar
     la cara ni la carpeta de "Compra documentada". */
  .respaldo-foto--documentos img{ object-position:60% 78%; }
  /* "Respaldo que puedes comprobar" en una sola línea en móvil: se reduce
     solo donde hace falta (el clamp vuelve a 26px en cuanto hay ancho). */
  .seccion-respaldo .respaldo-titulo{ font-size:clamp(19px, 5.3vw, 26px); line-height:1.2; }
}
@media (prefers-reduced-motion: reduce){
  .respaldo-card, .respaldo-foto img{ transition:none; }
}

.seccion-testimonios{ display:block; }
.testimonios-inner{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--bg-dark-2);
  width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  padding:80px var(--pad-x) 92px;
}
.testimonios-inner::before{
  content:""; position:absolute; left:50%; top:20%; width:85vw; height:70vh; max-width:1100px;
  transform:translate(-50%,-50%); border-radius:50%; filter:blur(90px);
  background:radial-gradient(circle, rgba(19,66,255,.58) 0%, rgba(10,30,122,.3) 45%, transparent 72%);
  pointer-events:none; z-index:0;
}
.testimonios-header,
.reviews-bleed{ position:relative; z-index:1; width:min(var(--container),100%); margin-left:auto; margin-right:auto; }
@media (max-width:600px){
  .testimonios-inner{ padding:48px var(--pad-x); }
}

/* =========================
   GALERÍA DE CLIENTES
========================= */
/* La sección rompe el contenedor para que el marquee llegue de orilla a
   orilla (full-bleed). El encabezado vuelve al ancho de columna: texto a la
   izquierda + mapa decorativo de México a la derecha. */
.seccion-galeria{
  width:100%; max-width:none; margin:0;
  padding-left:0; padding-right:0; padding-top:36px;
}
.seccion-galeria .encabezado-seccion{
  width:min(var(--container),100%); max-width:none;
  margin-inline:auto; padding-inline:var(--pad-x);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center;
}
.galeria-head-texto{ min-width:0; }
.seccion-galeria .encabezado-seccion h2{
  max-width:none;
  font-size:clamp(24px,3.2vw,38px);
}
.galeria-acento{ color:var(--primary); }
.galeria-nobr{ white-space:nowrap; }
.seccion-galeria .encabezado-seccion .subtitulo{ max-width:520px; }

/* Eyebrow con línea corta al final (como el mockup). */
.seccion-galeria .eyebrow{ display:inline-flex; align-items:center; gap:14px; }
.seccion-galeria .eyebrow::after{
  content:""; width:44px; height:2px; background:currentColor; opacity:.5;
}

/* Mapa decorativo de México con pin (SVG con colores propios) + badge. */
.galeria-mapa{ position:relative; width:clamp(150px,14vw,180px); }
.galeria-mapa > svg{ display:block; width:100%; height:auto; }
.galeria-mapa-badge{
  position:absolute; top:-8px; right:-8px; max-width:98px;
  background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:6px 10px; line-height:1.3; text-align:center;
  font-size:.52rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-main); box-shadow:0 6px 16px rgba(15,23,42,.08);
}
@media (max-width:820px){
  .seccion-galeria .encabezado-seccion{ grid-template-columns:1fr; gap:20px; }
  .galeria-mapa{ display:none; }
}

/* (El marquee de fotos de clientes se reemplazó por el carrusel de paneles: ver
   css/galeria-slider.css. Se conserva aquí solo el aire superior en celular.) */
@media (max-width:560px){
  .seccion-galeria{ padding-top:24px; }
}

/* =========================
   TESTIMONIOS (fondo oscuro full-bleed)
========================= */
.testimonios-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:28px 40px; flex-wrap:wrap;
  margin-bottom:56px;
}
.testimonios-inner .encabezado-seccion{ margin-bottom:0; max-width:620px; }
/* Línea azul de acento ARRIBA de "Testimonios" (a modo de overline), y la
   frase de apoyo con más peso visual: más grande y casi blanca. */
.testimonios-inner h2{ display:inline-block; color:#fff; position:relative; padding-top:16px; margin-bottom:14px; font-size:clamp(24px,3vw,34px); }
.testimonios-inner h2::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  background:var(--primary); border-radius:999px;
}
.testimonios-inner .subtitulo{
  color:rgba(255,255,255,.9); font-weight:500;
  font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.4; letter-spacing:-.005em; max-width:none;
}

/* La calificación es la métrica clave (estrellas + "5.0 / 5" en grande),
   pero SIN tarjeta: se resuelve con tipografía, alineada a la derecha, en
   el mismo lenguaje que el título — no un panel aparte. */
.testimonials-top{
  display:flex; flex-direction:column; align-items:flex-end; gap:16px; text-align:right;
}

.rating-badge{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.estrellas{ display:inline-flex; gap:3px; color:#f59e0b; font-size:1.1rem; line-height:1; }
.rating-meta{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; line-height:1.15; gap:2px; }
.rating-meta strong{ font-weight:800; color:#fff; font-size:clamp(1.15rem,1.8vw,1.4rem); letter-spacing:-.02em; }
.rating-meta span{ color:rgba(255,255,255,.72); font-size:.8rem; }
.testimonios-inner .btn-secundario{ padding:8px 14px; font-size:.82rem; }

@media (max-width:600px){
  .testimonios-header{ flex-direction:column; align-items:center; text-align:center; }
  .testimonios-inner .encabezado-seccion{ max-width:100%; }
  .testimonios-inner h2::after{ left:50%; transform:translateX(-50%); top:0; bottom:auto; }
  .testimonials-top{ align-items:center; text-align:center; width:100%; gap:12px; }
  .rating-badge{ align-items:center; }
  .rating-meta{ align-items:center; text-align:center; }
}

.reviews-bleed{ position:relative; }
.reviews-slider{
  display:flex; gap:20px; overflow-x:auto; scroll-behavior:auto;
  -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:none;
}
.reviews-slider::-webkit-scrollbar{ display:none; }

.t-card{
  flex:0 0 clamp(262px,24vw,310px); background:linear-gradient(180deg,#ffffff 0%, #fbfbfd 100%);
  border:1px solid rgba(17,24,39,.10); border-radius:14px; padding:18px; box-shadow:0 12px 30px rgba(15,23,42,.08);
  display:flex; flex-direction:column; gap:10px; min-height:170px;
}
.t-persona{ display:flex; align-items:center; gap:10px; }
.t-avatar{ width:38px; height:38px; border-radius:999px; overflow:hidden; background:var(--border); flex:0 0 auto; }
.t-avatar img{ width:100%; height:100%; object-fit:cover; }
.t-avatar-fallback{ display:block; width:100%; height:100%; background:var(--border); }
.t-identidad{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.t-who{ font-weight:700; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t-date{ color:var(--text-muted); font-size:.78rem; }
.stars{ display:flex; gap:2px; color:#f59e0b; font-size:.8rem; }
/* La altura de todas las tarjetas la marcaba la reseña más larga (hasta 395 px,
   con más de la mitad vacía en las cortas): el texto se muestra hasta 7 líneas
   y termina en "…". El texto completo sigue en la página. */
.t-text{
  margin:0; font-size:.9rem; color:var(--text-main); line-height:1.55; flex:1;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; line-clamp:7; overflow:hidden;
}
.t-more{ font-size:.74rem; color:var(--text-muted); font-weight:600; }

.btn-secundario{
  display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:var(--radius-sm);
  background:transparent; border:1px solid rgba(255,255,255,.32);
  color:#fff; font-weight:700; text-decoration:none; transition:.18s ease;
}
.btn-secundario:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); }

/* =========================
   FOOTER CINEMATOGRÁFICO
========================= */
.ultima-seccion{ background:#0c1f57; }

/* Footer en azul marino profundo (transmite confianza, estilo piloto Ford):
   menos negro, más azul. Color SÓLIDO —sin degradado— para no encarecer el
   repintado: el degradado a todo ancho, con la aurora borrosa y el canvas
   animados encima, hacía que el slider de reseñas (rAF) diera stuttering. */
.footer-cine{
  position:relative; overflow:hidden; isolation:isolate; color:#fff; padding-top:0;
  background:#0c1f57;
}

.footer-cine-aurora{
  position:absolute; left:50%; top:34%; width:70vw; height:52vh; max-width:900px;
  transform:translate(-50%,-50%); border-radius:50%; filter:blur(90px);
  background:radial-gradient(circle, rgba(19,66,255,.35) 0%, rgba(10,30,122,.16) 45%, transparent 72%);
  pointer-events:none; z-index:0;
}
.footer-cine-canvas{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%; display:block;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.footer-cine-giant{
  position:absolute; left:50%; bottom:-4vw; z-index:0; pointer-events:none; user-select:none;
  transform:translateX(-50%); opacity:.15;
  font-size:16vw; line-height:.8; font-weight:900; letter-spacing:-.02em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, transparent 65%);
  -webkit-background-clip:text; background-clip:text;
}

.footer-cine-marquee{
  position:relative; z-index:1; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  /* Oculto mientras el footer solo asoma por abajo del viewport (así no
     compite con el carrusel de "Clientes Tru Iron"). El JS añade
     .is-revealed cuando el footer ya ocupa ~50% de la pantalla. */
  opacity:0; transition:opacity .45s ease;
}
.footer-cine-marquee.is-revealed{ opacity:1; }
.footer-cine-marquee-track{
  display:flex; width:max-content;
  animation:footer-cine-marquee 32s linear infinite;
  animation-play-state:paused;
}
.footer-cine-marquee.is-revealed .footer-cine-marquee-track{ animation-play-state:running; }
.footer-cine-marquee-set{ display:flex; align-items:center; flex-shrink:0; padding:14px 0; }
.footer-cine-marquee-set span{ padding:0 20px; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.78); white-space:nowrap; }
.footer-cine-marquee-set span.sep{ color:var(--primary); padding:0; }
@keyframes footer-cine-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .footer-cine-marquee-track{ animation:none; }
  /* Sin listener de scroll: se muestra siempre. */
  .footer-cine-marquee{ opacity:1; }
}

.footer-cine-centro{
  position:relative; z-index:1; width:min(var(--container),100%); margin:0 auto;
  padding:64px var(--pad-x) 48px; text-align:center; display:flex; flex-direction:column; align-items:center;
}
.footer-cine-centro h3{ margin:0 0 12px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:#fff; font-size:clamp(1.4rem,3vw,2.1rem); }
.footer-cine-centro p{ margin:0 0 30px; color:rgba(255,255,255,.72); max-width:480px; }
.footer-cine-btns{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

.footer-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; padding:14px 26px; font-size:.88rem; font-weight:800;
  text-decoration:none; white-space:nowrap; cursor:pointer; color:#fff;
  background:linear-gradient(145deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.10);
  transition:background .3s ease, border-color .3s ease;
}
.footer-pill:hover{ background:linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 100%); border-color:rgba(255,255,255,.26); }
.footer-pill-principal{ background:linear-gradient(135deg,#0058ff,#002dd9); border-color:transparent; box-shadow:0 12px 30px rgba(0,41,255,.30); }
.footer-pill-principal:hover{ background:linear-gradient(135deg,#0058ff,#002dd9); filter:brightness(1.08); }
.footer-pill-magnetica{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease, border-color .3s ease; will-change:transform; }

.footer-cine-info{ position:relative; z-index:1; width:min(var(--container),100%); margin:0 auto; padding:36px var(--pad-x) 0; border-top:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.68); font-size:.86rem; }
.grid-footer{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-bottom:16px; }
.titulo-footer{ font-weight:700; margin-bottom:6px; color:#fff; text-transform:uppercase; letter-spacing:.04em; font-size:.8rem; }
.footer-cine-info a{ color:rgba(255,255,255,.82); text-decoration:none; }
.footer-cine-info a:hover{ text-decoration:underline; }
.footer-social{ margin-top:12px; display:flex; gap:10px; }
.footer-social a{
  width:34px; height:34px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); text-decoration:none;
}
.footer-social a:hover{ transform:translateY(-1px); background:rgba(255,255,255,.14); }

.footer-cine-bottom{
  position:relative; z-index:1; width:min(var(--container),100%); margin:0 auto;
  padding:24px var(--pad-x) 34px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer-bottom{ flex:1; text-align:center; font-size:.78rem; opacity:.5; }
.footer-cine-top{ width:46px; height:46px; padding:0; flex:0 0 auto; }
.footer-cine-top svg{ width:18px; height:18px; transition:transform .3s ease; }
.footer-cine-top:hover svg{ transform:translateY(-2px); }

@media (max-width:768px){
  .grid-footer{ grid-template-columns:1fr; text-align:center; gap:26px; }
  .footer-social{ justify-content:center; }
  .footer-cine-bottom{ flex-direction:column; text-align:center; }
}
@media (max-width:600px){
  .footer-cine-giant{ font-size:22vw; }
}

@media (max-width:600px){
  .seccion{ padding:56px var(--pad-x); }
  .seccion-galeria{ padding-top:24px; }
}

/* Celular: encabezados de sección centrados (el hero, Testimonios y el cierre ya lo estaban;
   el resto se quedaba a la izquierda y se sentía fuera de la cuadrícula). Los textos largos
   (párrafos, tarjetas) siguen a la izquierda para que se lean bien. */
@media (max-width:700px){
  .encabezado-seccion{ margin-inline:auto; text-align:center; }
  .encabezado-seccion .subtitulo,
  .seccion-galeria .encabezado-seccion .subtitulo{ margin-inline:auto; }
  .unidades-header{ justify-content:center; }
  .unidades-header > div:first-child{ margin-inline:auto; }
  .unidades-header-cta{ justify-content:center; width:100%; }

  /* "CLIENTES TRU IRON" lleva una línea a la derecha; en centro se pone otra igual a la izquierda. */
  .seccion-galeria .eyebrow{ justify-content:center; }
  .seccion-galeria .eyebrow::before{ content:""; width:28px; height:2px; background:currentColor; opacity:.5; }
  .seccion-galeria .eyebrow::after{ width:28px; }

  /* Por qué elegirnos */
  .respaldo-cuerpo{ text-align:center; }
  .respaldo-grid{ text-align:left; }
  .respaldo-titulo{ text-align:center; }

  /* Cómo trabajamos: intro y pasos */
  .ph-slide{ text-align:center; }

  /* Nuestra historia (solo kicker y título) */
  .conf-text > .conf-kicker, .conf-text > h2{ text-align:center; }
}

/* Reseñas: el letrero "Desliza..." solo existe en celular, donde las reseñas no se mueven solas. */
.reviews-hint{ display:none; }
@media (max-width:899px){
  .reviews-hint{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin:0 0 14px; padding:0 var(--pad-x);
    font-size:.86rem; font-weight:600; text-align:center; color:rgba(255,255,255,.85);
  }
  .reviews-hint .ico{ width:12px; height:12px; flex:0 0 auto; fill:currentColor; }
  .reviews-slider{
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad-x);
    padding-inline:var(--pad-x); overscroll-behavior-x:contain;
  }
  .reviews-slider .t-card{ flex-basis:min(82vw,320px); scroll-snap-align:start; }
}