/* ============================================================================
   Finauto International Ltd. — Catálogo público.
   Componentes específicos de pantalla, construidos sobre los tokens y el CSS
   base de app.css (manual-estetica-finauto.md, secciones B.5/B.9). Todo lo
   de aquí sigue B.9.3 (specs sin CSS listo) y las reglas R1-R18 de B.4.
   ============================================================================ */

/* -----------------------------------------------------------------------
   Header (B.9.3 "Header")
   ----------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  height:64px;
  display:flex; align-items:center;
  background:var(--fa-ink-900);
  transition:box-shadow var(--dur-base) var(--ease);
}
@media (min-width:768px){ .site-header{ height:72px; } }
@media (min-width:1024px){ .site-header{ height:var(--header-h); } }
.site-header.is-scrolled{ box-shadow:var(--shadow-overlay); }

/* Home: header flota transparente (10% opacidad) sobre la foto del hero en
   vez de ocupar su propia franja sólida — se vuelve sólida recién al
   scrollear (mismo umbral que header.js ya usa para .is-scrolled). */
.site-header--transparent{
  position:absolute; left:0; right:0; top:0; background:rgba(10,16,23,.1);
  transition:background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.site-header--transparent.is-scrolled{ position:fixed; background:var(--fa-ink-900); }

.site-header__bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  width:100%;
}

.site-header__brand{ display:flex; align-items:center; text-decoration:none; }
.site-header__logo{ height:46px; width:auto; display:block; }
@media (min-width:768px){ .site-header__logo{ height:53px; } }
@media (min-width:1024px){ .site-header__logo{ height:62px; } }

.site-header__nav{ position:relative; display:none; align-items:center; gap:var(--space-10); }
.site-header__nav a{
  font:500 16px/1 var(--font-sans); color:var(--fa-white); text-decoration:none;
  padding-bottom:10px; border-bottom:3px solid transparent;
}
.site-header__nav a.is-active{ font-weight:600; border-color:var(--fa-green-500); }
.site-header__nav-indicator{
  position:absolute; left:0; bottom:0; height:3px; width:0; border-radius:999px;
  background:var(--fa-green-500); pointer-events:none;
  transition:transform 250ms var(--ease), width 250ms var(--ease);
}

.site-header__actions{ display:flex; align-items:center; gap:var(--space-3); }
.site-header__divider{ width:1px; height:24px; background:var(--color-border-on-dark); display:none; }
@media (min-width:1024px){ .site-header__divider{ display:block; } }

/* Buscador del header (§11.10, variante oscura): la lupa se queda fija a la
   derecha del campo; el campo se anima de 0 a su ancho al abrir. */
.site-header__search{ display:flex; align-items:center; }
.site-header__search-input{
  height:40px; width:0; min-width:0; padding:0; margin-right:0; border:0; border-radius:var(--radius-pill);
  background:var(--fa-ink-700); color:var(--fa-white); font:400 14px var(--font-sans);
  opacity:0; pointer-events:none;
  transition:width var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease),
             padding var(--dur-base) var(--ease), margin var(--dur-base) var(--ease);
}
.site-header__search-input::placeholder{ color:var(--fa-ink-200); }
.site-header__search-input:focus{ outline:none; }
.site-header__search.is-open .site-header__search-input{
  width:clamp(84px,26vw,130px); padding:0 14px; margin-right:var(--space-2); opacity:1; pointer-events:auto;
}
@media (min-width:640px){ .site-header__search.is-open .site-header__search-input{ width:200px; padding:0 16px; } }
@media (min-width:1024px){ .site-header__search.is-open .site-header__search-input{ width:240px; } }
.site-header__search-toggle{ flex-shrink:0; }
.site-header__menu-btn{ flex-shrink:0; }
.site-header__brand{ flex-shrink:0; }

/* "Contáctanos" del header cede el espacio al buscador en móvil: el WhatsApp
   destacado ya vive en el panel del menú (btn--primary a ancho completo). */
@media (max-width:767px){ .site-header .btn--header{ display:none; } }
.site-header__menu-btn{
  position:relative; display:inline-grid; place-items:center; width:44px; height:44px;
  background:transparent; border:0; color:var(--fa-white); cursor:pointer;
}
.site-header__menu-icon--close{ display:none; }
.site-header__menu-btn.is-open .site-header__menu-icon--open{ display:none; }
.site-header__menu-btn.is-open .site-header__menu-icon--close{ display:flex; }
@media (min-width:1024px){
  .site-header__nav{ display:flex; }
  .site-header__menu-btn{ display:none; }
}

.site-header__mobile-nav{
  display:none; position:fixed; inset:0 0 0 auto; z-index:60;
  width:min(320px,100%); height:100vh; background:var(--fa-ink-900);
  flex-direction:column; gap:var(--space-6); padding:var(--space-6);
}
.site-header__mobile-nav.is-open{ display:flex; }
.site-header__mobile-nav-head{ display:flex; justify-content:flex-end; }
.site-header__mobile-nav a{
  font:600 20px/1 var(--font-sans); color:var(--fa-white); text-decoration:none;
}
.site-header__mobile-nav a.is-active{ color:var(--fa-green-500); }
.site-header__mobile-links{ display:flex; flex-direction:column; gap:var(--space-6); }
@media (min-width:1024px){ .site-header__mobile-nav{ display:none !important; } }

/* -----------------------------------------------------------------------
   Hero (home) — B.9.3 "Hero"
   ----------------------------------------------------------------------- */
.hero{
  position:relative; min-height:min(82vh,700px); display:flex; align-items:flex-end;
  background:var(--fa-ink-900); color:var(--fa-white); overflow:hidden; isolation:isolate;
}
@media (max-width:767px){ .hero{ min-height:min(62vh,520px); } }
/* Cambio de foto suave: fundido largo con curva simétrica (antes 900ms con
   --ease, que hace casi todo el cambio en los primeros 150ms) y la foto que
   sale queda opaca debajo (.is-leaving, banner-carousel.js) — antes las dos se
   desvanecían a la vez y el fondo oscuro se transparentaba (~25%). Solo
   fundido: sin desplazamiento ni acercamiento (el zoom de entrada se quitó a
   pedido). 1200ms = FADE_MS del JS. */
.hero__slide{
  position:absolute; inset:0; z-index:0; opacity:0;
  transition:opacity 1200ms cubic-bezier(.4, 0, .2, 1);
}
.hero__slide picture{ display:block; width:100%; height:100%; }
.hero__slide.is-active{ z-index:2; opacity:1; }
.hero__slide.is-leaving{ z-index:1; opacity:1; transition:none; }
@media (prefers-reduced-motion: reduce){
  .hero__slide{ transition:opacity 300ms linear; }
}
.hero__slide img{ width:100%; height:100%; object-fit:contain; object-position:center center; background:var(--fa-ink-900); }
/* En móvil la foto es apaisada (2.6:1) y el hero es angosto: "contain" la
   dejaría diminuta con mucho espacio muerto arriba/abajo. Se pasa a "cover"
   (recorte centrado en el vehículo) para que llene el bloque como el resto
   de secciones responsive. */
@media (max-width:767px){
  .hero__slide img{ object-fit:cover; object-position:65% center; }
}
/* Por encima de las fotos (.hero__slide usa z-index 0-2 para el fundido). */
.hero__overlay{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hero__content{
  position:relative; z-index:4; width:100%; padding-block:var(--space-10) var(--space-8);
  padding-left:clamp(16px,6vw,96px); padding-right:var(--gutter);
}
@media (min-width:768px){ .hero__content{ padding-block:var(--space-12) var(--space-10); } }
.hero__text{ max-width:540px; }
.hero__eyebrow{
  font:600 14px/1.4 var(--font-sans); text-transform:uppercase; letter-spacing:var(--ls-eyebrow);
  color:var(--fa-white); margin:0 0 var(--space-3); text-shadow:0 1px 4px rgba(10,16,23,.7);
}
.hero__lead{
  font:400 16px/1.5 var(--font-sans); color:var(--fa-white); max-width:400px; margin:var(--space-4) 0 0;
  text-shadow:0 1px 4px rgba(10,16,23,.7);
}
.t-display{ text-shadow:0 2px 8px rgba(10,16,23,.65); }
.hero__actions{ margin-top:var(--space-6); }
/* Móvil: con el texto encima de la foto, el bloque ocupaba ~60% del hero y
   tapaba el vehículo. Aquí la foto va arriba (bajo el header transparente
   de 64px) y el texto debajo sobre el fondo ink, sin solaparse. Un degradado
   ink funde el borde inferior de la foto con el fondo (overlay de
   legibilidad, único tipo que admite el manual, 4.8). El texto se compacta:
   título 24px, lead 14px, botón de 40px. */
@media (max-width:767px){
  .hero{ --hero-photo-h:calc(64px + 56vw); min-height:0; align-items:stretch; }
  .hero__slide, .hero__overlay{ bottom:auto; height:var(--hero-photo-h); }
  .hero__slide img{ object-position:center center; }
  .hero__overlay{ background:linear-gradient(0deg, var(--fa-ink-900) 0%, rgba(10,16,23,0) 30%); }
  .hero__content{ padding-block:calc(var(--hero-photo-h) + var(--space-2)) var(--space-8); }
  .hero__eyebrow{ font-size:11px; margin-bottom:var(--space-2); text-shadow:none; }
  .hero .t-display{ font-size:1.5rem; line-height:1.15; text-shadow:none; }
  .hero__lead{ font-size:14px; line-height:1.5; margin-top:var(--space-3); max-width:none; text-shadow:none; color:var(--color-text-on-dark-muted, var(--fa-white)); }
  .hero__actions{ margin-top:var(--space-5); }
  .hero__actions .btn{ height:var(--control-h-sm); padding:0 20px; font-size:15px; gap:8px; }
  .hero__actions .btn svg{ width:18px; height:18px; }
}
/* Indicador de imágenes del banner: una barra por imagen, la activa más
   ancha y con relleno verde que avanza mientras la imagen está en pantalla.
   El relleno lo mueve banner-carousel.js cuadro a cuadro (transform, sin
   animación CSS): el mismo reloj decide cuándo cambiar de imagen, así barra
   y cambio nunca se desfasan, ni al pausar. Cada botón es más alto que la
   barra visible para dar un área de toque cómoda. */
.hero-pager{
  position:absolute; z-index:4; right:var(--gutter); bottom:var(--space-6);
  display:flex; align-items:center; gap:4px;
}
/* Móvil: al pie de la foto (ver bloque móvil del hero más arriba). */
@media (max-width:767px){ .hero-pager{ bottom:auto; top:calc(var(--hero-photo-h) - 36px); } }
.hero-pager__item{
  display:flex; align-items:center; width:28px; height:32px; padding:0 3px;
  border:0; background:none; cursor:pointer;
  transition:width 300ms var(--ease);
}
.hero-pager__item[aria-current="true"]{ width:52px; }
.hero-pager__track{
  position:relative; display:block; width:100%; height:3px; overflow:hidden;
  border-radius:999px; background:rgba(255,255,255,.35);
  box-shadow:0 1px 3px rgba(10,16,23,.35);
  transition:background-color 200ms var(--ease);
}
.hero-pager__item:hover .hero-pager__track{ background:rgba(255,255,255,.6); }
.hero-pager__fill{
  position:absolute; inset:0; background:var(--fa-green-500); border-radius:inherit;
  transform:scaleX(0); transform-origin:left center;
}
.hero-pager__item:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; border-radius:4px; }
/* Sin avance automático: la barra activa se muestra llena, solo marca cuál es. */
@media (prefers-reduced-motion: reduce){
  .hero-pager__item{ transition:none; }
  .hero-pager__item[aria-current="true"] .hero-pager__fill{ transform:none; }
}

/* -----------------------------------------------------------------------
   Cabecera de página interna — 13.2 / B.9.3
   ----------------------------------------------------------------------- */
.page-header{ background:var(--fa-ink-900); color:var(--fa-white); padding-block:var(--space-8); }
.page-header__inner{ min-height:132px; display:flex; flex-direction:column; justify-content:center; }
@media (min-width:768px){ .page-header__inner{ min-height:180px; } }
/* Móvil: cabecera más baja para que el contenido aparezca sin hacer scroll. */
@media (max-width:767px){
  .page-header{ padding-block:var(--space-6); }
  .page-header__inner{ min-height:96px; }
}
.breadcrumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font:500 12px/1.3 var(--font-sans); color:var(--color-text-on-dark-muted); margin:0 0 var(--space-3); }
.breadcrumbs a{ color:inherit; text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }
.breadcrumbs span:last-child{ color:var(--fa-white); }

/* -----------------------------------------------------------------------
   Barra de confianza — 11.4
   ----------------------------------------------------------------------- */
@media (max-width:767px){
  .trust__grid{ grid-template-columns:repeat(2,1fr); }
  .trust__item{ gap:var(--space-2); padding:var(--space-3) var(--space-2); font-size:12px; line-height:1.25; }
  .trust__item+.trust__item{ border-left:0; }
  .trust__item svg{ width:22px; height:22px; flex-shrink:0; }
}
@media (min-width:768px) and (max-width:1023px){
  .trust__item+.trust__item{ border-left:1px solid var(--color-border-on-dark); }
}
/* -----------------------------------------------------------------------
   Chips de categoría (home) — sin fotografía real disponible por tag,
   variante en píldora sobre las reglas de forma de §7 (R9)
   ----------------------------------------------------------------------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.chip-link{
  display:inline-flex; align-items:center; height:40px; padding:0 var(--space-5);
  border-radius:var(--radius-pill); border:1px solid var(--color-border-control);
  font:500 14px var(--font-sans); color:var(--color-text); text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chip-link:hover{ border-color:var(--fa-green-500); color:var(--color-text-strong); box-shadow:0 4px 10px rgba(10,16,23,.1); transform:translateY(-1px); }
.chip-link:active{ transform:translateY(1px) scale(.97); }

/* -----------------------------------------------------------------------
   Rejillas — B.8
   ----------------------------------------------------------------------- */
.grid-cat{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--grid-gap); }
@media (min-width:768px){ .grid-cat{ grid-template-columns:repeat(3,1fr); } }

.grid-veh{ display:grid; grid-template-columns:1fr; gap:var(--grid-gap); }
.grid-veh[hidden]{ display:none; } /* .grid-veh{display:grid} le gana en especificidad al [hidden] del UA */
@media (min-width:768px){ .grid-veh{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid-veh.is-home{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1024px){ .grid-veh.is-catalogo{ grid-template-columns:repeat(3,1fr); } }

/* -----------------------------------------------------------------------
   Banda CTA — 11.11
   ----------------------------------------------------------------------- */
.cta-band{ position:relative; background:var(--fa-ink-950); color:var(--fa-white); overflow:hidden; padding-block:var(--space-12); }
@media (min-width:1024px){ .cta-band{ padding-block:80px; } }
.cta-band__media{ position:absolute; inset:0; }
.cta-band__media img{ width:100%; height:100%; object-fit:cover; }
.cta-band__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0A1017 35%,rgba(10,16,23,0) 70%); }
.cta-band__inner{ position:relative; z-index:1; max-width:385px; }
.cta-band__text{ font:400 14px/1.5 var(--font-sans); color:var(--fa-white); margin:var(--space-2) 0 0; }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-6); }

/* -----------------------------------------------------------------------
   Categorías (listado agrupado) — reutiliza .t-h3/.card-cat cuando aplica
   ----------------------------------------------------------------------- */
.category-list{ display:grid; gap:var(--space-6); grid-template-columns:1fr; }
@media (min-width:768px){ .category-list{ grid-template-columns:repeat(2,1fr); } }
.category-group{ border:1px solid var(--color-border); border-radius:var(--radius-card); padding:var(--space-5); }
.category-group__title{ font-size:var(--fs-h3); font-weight:700; margin:0 0 var(--space-3); color:var(--color-text-strong); }
.category-group__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.category-group__list a{
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-2); border-radius:var(--radius-card);
  color:var(--color-text); text-decoration:none; font-size:var(--fs-sm);
}
.category-group__list a:hover{ background:rgba(11,176,74,.04); color:var(--color-text-strong); }
.category-group__count{ background:var(--fa-gray-200); color:var(--color-text-subtle); border-radius:999px; padding:2px 10px; font-size:var(--fs-2xs); font-weight:600; }

/* -----------------------------------------------------------------------
   Marcas
   ----------------------------------------------------------------------- */
/* El logo ocupa todo el ancho de la tarjeta en un área cuadrada (antes una
   caja fija de 140px con 24px de margen): los logos son apaisados y el ancho
   era lo que los limitaba, así se ven ~2 veces más grandes. Nombre y
   contador van debajo, separados por un filete. */
.brand-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-1);
  padding:0 0 var(--space-4); background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-card); overflow:hidden; text-decoration:none; color:inherit; height:100%;
  transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.brand-card:hover{ box-shadow:0 10px 24px rgba(10,16,23,.14); transform:translateY(-3px); }
.brand-card:active{ transform:translateY(0) scale(.99); box-shadow:0 4px 10px rgba(10,16,23,.14); }
.brand-card__logo{
  width:100%; aspect-ratio:1 / 1; padding:var(--space-2); margin-bottom:var(--space-3);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--fa-white); border-bottom:1px solid var(--color-border);
  font:700 56px var(--font-sans); color:var(--color-text-strong);
}
.brand-card__logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.brand-card__name{ font:700 16px/1.2 var(--font-sans); color:var(--color-text-strong); padding-inline:var(--space-3); }
.brand-card__count{ margin:0; padding-inline:var(--space-3); }
/* Una sola columna (móvil en /marcas y sobre nosotros): sin tope, el
   cuadrado mediría todo el ancho de la pantalla. */
@media (max-width:639px){ .grid-cat > .brand-card .brand-card__logo{ aspect-ratio:auto; height:240px; } }

.brand-row{
  display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5);
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card);
  text-decoration:none; color:inherit; height:100%;
}
.brand-row .brand-card__logo{ width:64px; height:64px; flex-shrink:0; }

/* -----------------------------------------------------------------------
   Catálogo: búsqueda, filtros, paginación — 13.3
   ----------------------------------------------------------------------- */
.catalog-toolbar{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; justify-content:space-between; margin-bottom:var(--space-6); }
.catalog-layout{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:start; }
.catalog-layout > *{ min-width:0; }
@media (min-width:1024px){ .catalog-layout{ grid-template-columns:280px 1fr; } }

.filters{ display:flex; flex-direction:column; gap:var(--space-6); }
.filters__group{ padding-bottom:var(--space-6); border-bottom:1px solid var(--color-border); }
.filters__group:last-of-type{ border-bottom:0; }
.filters__title{ font:600 14px/1.3 var(--font-sans); color:var(--color-text-strong); margin:0 0 var(--space-3); }
.filters input[type="text"]{
  width:100%; height:var(--control-h); padding:0 20px; border-radius:var(--radius-pill);
  border:1px solid var(--color-border-control); font:400 16px var(--font-sans); color:var(--color-text-strong); background:var(--fa-white);
}
.catalog-count{ font:500 13px/1.3 var(--font-sans); color:var(--color-text); margin:0; }
/* Móvil/tablet (filtros encima del listado): buscador y filtros ocupaban una
   pantalla entera antes del primer vehículo. Buscador a todo el ancho, orden
   y botón en una fila, y los cuatro filtros en rejilla de 2 columnas sin
   separadores. Controles de 16px de texto: menos, iOS hace zoom al enfocar. */
@media (max-width:1023px){
  .catalog-toolbar{ gap:var(--space-3); margin-bottom:var(--space-4); }
  /* !important: la vista trae flex/min-width en style inline. */
  .catalog-toolbar > .field{ flex:1 1 100% !important; min-width:0 !important; }
  .catalog-toolbar > .select{ flex:1; min-width:0; }
  .catalog-toolbar > .btn{ padding:0 20px; }
  .catalog-layout{ margin-top:var(--space-4) !important; gap:var(--space-6); }
  .filters form{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-3); }
  .filters form > input[type="hidden"]{ display:none; }
  .filters__group{ padding-bottom:0; border-bottom:0; min-width:0; }
  .filters__title{ font-size:12px; margin-bottom:var(--space-1); }
  .filters .select{ width:100%; height:var(--control-h-sm); padding-left:14px; }
  .filters form > :not(.filters__group):not(input){ grid-column:1 / -1; }
}


.empty-state{
  text-align:center; max-width:400px; margin-inline:auto; padding:var(--space-12) var(--space-4);
  color:var(--color-text);
}
.empty-state svg{ color:var(--fa-gray-500); margin-bottom:var(--space-3); }
.empty-state h3{ margin:0 0 var(--space-2); }

/* -----------------------------------------------------------------------
   Ficha de vehículo — 13.4
   ----------------------------------------------------------------------- */
.vehicle-layout{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:start; }
.vehicle-layout > *{ min-width:0; }
@media (min-width:1024px){ .vehicle-layout{ grid-template-columns:2fr 1fr; } }

.gallery__main-wrap{ position:relative; }
.gallery__main{
  /* height:auto: con los atributos width/height del <img> (anti-CLS, Fase 4) el
     navegador usaba el alto del atributo (1280px) e ignoraba aspect-ratio:
     la foto salía alta, ampliada y recortada. */
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-card); background:var(--fa-gray-200);
  transform:translateX(0);
}
/* Deslizamiento al cambiar de foto (vehicle-gallery.js). La portada vive dentro
   de .skel-shimmer (skeleton, Fase 5): `.skel-shimmer img` (transition: solo
   opacity) y `.skel-shimmer.is-loaded img` (opacity:1) tienen más
   especificidad que .gallery__main y le pisaban la transición y la opacidad de
   salida — la foto saltaba en vez de deslizarse. Por eso estas reglas llevan un
   nivel más (.gallery__zoom-trigger). La opacidad inicial la sigue manejando el
   skeleton (0 hasta que carga, luego 1). Duración = DURATION del JS. */
.gallery__zoom-trigger .gallery__main{ transition:transform 200ms var(--ease), opacity 200ms var(--ease); }
.gallery__zoom-trigger .gallery__main.is-out-left{ transform:translateX(-32px); opacity:0; }
.gallery__zoom-trigger .gallery__main.is-out-right{ transform:translateX(32px); opacity:0; }
.gallery__zoom-trigger .gallery__main.is-in-left{ transform:translateX(-32px); opacity:0; transition:none; }
.gallery__zoom-trigger .gallery__main.is-in-right{ transform:translateX(32px); opacity:0; transition:none; }
.gallery__zoom-trigger{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; position:relative;
  border-radius:var(--radius-card); overflow:hidden;
}
.gallery__zoom-hint{
  position:absolute; right:12px; bottom:12px; width:36px; height:36px; border-radius:50%;
  background:rgba(10,16,23,.55); color:var(--fa-white); display:inline-grid; place-items:center;
  transition:background var(--dur-fast) var(--ease);
}
.gallery__zoom-trigger:hover .gallery__zoom-hint{ background:rgba(10,16,23,.8); }
.gallery__thumbs{ display:flex; gap:var(--space-2); margin-top:var(--space-3); overflow-x:auto; }
.gallery__thumbs button{
  padding:0; border:2px solid transparent; border-radius:var(--radius-card); overflow:hidden;
  width:96px; aspect-ratio:4/3; flex-shrink:0; cursor:pointer; background:none; opacity:.7;
}
.gallery__thumbs button img{ width:100%; height:100%; object-fit:cover; }
.gallery__thumbs button.is-active{ border-color:var(--fa-green-500); opacity:1; }

/* -----------------------------------------------------------------------
   Lightbox de zoom — §13.4 ("lightbox a pantalla completa"), variante con
   blur del fondo real en vez de relleno ink-950 sólido, a pedido.
   ----------------------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
}
.lightbox.is-open{ display:flex; }
.lightbox__backdrop{
  position:absolute; inset:0; background:rgba(10,16,23,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.lightbox__stage{
  position:relative; z-index:1; width:90vw; height:85vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; touch-action:none; opacity:1; transform:translateX(0);
  transition:transform 200ms var(--ease), opacity 200ms var(--ease);
}
.lightbox__stage.is-out-left{ transform:translateX(-48px); opacity:0; }
.lightbox__stage.is-out-right{ transform:translateX(48px); opacity:0; }
.lightbox__stage.is-in-left{ transform:translateX(-48px); opacity:0; transition:none; }
.lightbox__stage.is-in-right{ transform:translateX(48px); opacity:0; transition:none; }
.lightbox__img{
  max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; user-select:none;
  transition:transform 200ms var(--ease); transform-origin:center center; border-radius:var(--radius-card);
}
.lightbox__img.is-zoomed{ cursor:grab; }
.lightbox__img.is-dragging{ cursor:grabbing; transition:none; }
.lightbox__close{
  position:absolute; top:var(--space-5); right:var(--space-5); z-index:2; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--fa-white-a80); background:rgba(10,16,23,.5); color:var(--fa-white); display:inline-grid; place-items:center; cursor:pointer;
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--fa-white-a80); background:rgba(10,16,23,.5); color:var(--fa-white); display:inline-grid; place-items:center; cursor:pointer;
}
.lightbox__nav--prev{ left:var(--space-4); }
.lightbox__nav--next{ right:var(--space-4); }
@media (max-width:640px){
  .lightbox__nav{ width:40px; height:40px; }
  .lightbox__nav--prev{ left:var(--space-2); }
  .lightbox__nav--next{ right:var(--space-2); }
  .lightbox__close{ top:var(--space-3); right:var(--space-3); }
}
.lightbox__counter{
  position:absolute; left:50%; bottom:var(--space-5); transform:translateX(-50%); z-index:2;
  padding:4px 14px; border-radius:var(--radius-pill); background:rgba(10,16,23,.6); color:var(--fa-white);
  font:600 12px var(--font-sans);
}

.price-panel{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card); padding:var(--space-6); }
@media (min-width:1024px){ .price-panel{ position:sticky; top:calc(var(--header-h) + var(--space-4)); } }
.price-panel__label{ margin:0; color:var(--color-text-subtle); font-size:var(--fs-sm); }
.price-panel__value{ font:700 26px/1.2 var(--font-sans); color:var(--color-text-strong); margin:var(--space-1) 0 0; }
.price-panel__value small{ font:600 14px var(--font-sans); color:var(--color-text-accent); }
.price-panel__actions{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-6); }

.spec-table-wrap{ overflow-x:auto; }
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table tr{ border-bottom:1px solid var(--color-border); }
.spec-table th{ text-align:left; padding:var(--space-3) var(--space-4) var(--space-3) 0; font:500 14px var(--font-sans); color:var(--color-text); white-space:nowrap; }
.spec-table td{ padding:var(--space-3) 0; font:600 14px var(--font-sans); color:var(--color-text-strong); }
@media (max-width:480px){
  .spec-table th{ white-space:normal; padding-right:var(--space-2); font-size:var(--fs-xs); }
  .spec-table td{ font-size:var(--fs-sm); }
}

.description{ max-width:68ch; font:400 16px/1.5 var(--font-sans); color:var(--color-text); }
.description :is(h2,h3,h4){ color:var(--color-text-strong); margin-top:var(--space-6); margin-bottom:var(--space-2); }
.description p{ margin-bottom:var(--space-4); }
.description :is(ul,ol){ margin:0 0 var(--space-4); padding-left:1.25em; }
.description li{ margin-bottom:var(--space-1); }
.description > :last-child{ margin-bottom:0; }

/* -----------------------------------------------------------------------
   Contacto — 13.5 / B.10
   ----------------------------------------------------------------------- */
.contact-layout{ display:grid; grid-template-columns:1fr; gap:var(--space-8); }
.contact-layout > *{ min-width:0; }
@media (min-width:1024px){ .contact-layout{ grid-template-columns:7fr 5fr; } }
.contact-form-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card); padding:var(--space-8); }
.contact-form-row{ display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:640px){ .contact-form-row{ grid-template-columns:1fr 1fr; } }
.contact-card{ background:var(--fa-ink-900); color:var(--fa-white); border-radius:var(--radius-card); padding:var(--space-8); }
.contact-card__item{ display:flex; align-items:center; gap:var(--space-4); padding-block:var(--space-4); border-bottom:1px solid var(--color-border-on-dark); text-decoration:none; color:inherit; }
a.contact-card__item:hover .contact-card__label{ color:var(--fa-white); }
.contact-card__item:last-child{ border-bottom:0; }
.contact-card__item svg{ flex-shrink:0; color:var(--fa-green-500); }
.contact-card__label{ margin:0; font-size:var(--fs-2xs); color:var(--color-text-on-dark-muted); }
.contact-card__value{ margin:2px 0 0; font-weight:600; }
.contact-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
/* Móvil: la página medía ~2 pantallas con paddings de escritorio. Formulario
   primero con menos aire entre campos, luego los datos de contacto en un
   bloque compacto. */
@media (max-width:767px){
  .contact-layout{ gap:var(--space-4); }
  .contact-card{ padding:var(--space-2) var(--space-5); }
  .contact-card__item{ gap:var(--space-3); padding-block:var(--space-3); }
  .contact-card__item svg{ width:18px; height:18px; }
  .contact-card__value{ font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
  .contact-card .contact-actions{ margin:var(--space-2) 0 var(--space-3) !important; }
  .contact-form-card{ padding:var(--space-5); }
  .contact-form-card .t-h3{ font-size:18px; margin-bottom:var(--space-4) !important; }
  .contact-form-row{ gap:0; }
  .contact-form-card .field{ gap:6px; margin-bottom:var(--space-4); }
  .contact-form-card .field label{ font-size:13px; }
  .contact-form-card .textarea{ height:112px; min-height:0; padding:12px 18px; }
  .contact-form-card .status-note{ font-size:13px; }
  .contact-form-card .contact-actions{ margin-top:var(--space-4); }
  .contact-form-card .contact-actions .btn{ width:100%; }
}

/* -----------------------------------------------------------------------
   Sobre nosotros — 13.2 (página interna: claro / oscuro alternados)
   ----------------------------------------------------------------------- */
.about-intro{ display:grid; grid-template-columns:1fr; gap:var(--space-10); align-items:center; }
.about-intro > *{ min-width:0; }
@media (min-width:1024px){ .about-intro{ grid-template-columns:7fr 5fr; gap:var(--space-16); } }
.about-intro__text .t-h2{ margin-bottom:var(--space-2); }
.about-intro__text p:not(.eyebrow){ margin:var(--space-4) 0 0; line-height:1.6; }
.about-panel{ background:var(--fa-ink-900); color:var(--fa-white); border-radius:var(--radius-card); padding:var(--space-10) var(--space-8); display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-6); }
.about-panel img{ width:200px; height:auto; }
.about-panel__promise{ margin:0; padding-top:var(--space-6); border-top:1px solid var(--color-border-on-dark); font-size:var(--fs-h2); font-weight:700; line-height:1.2; }
.about-values-section{ padding-top:0; }
.about-values{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-6); }
.about-value{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card); padding:var(--space-6); }
.about-value svg{ color:var(--color-text-accent); }
.about-value__title{ margin:var(--space-4) 0 var(--space-2); font-size:var(--fs-body); font-weight:700; line-height:1.3; color:var(--color-text-strong); }
.about-value p{ margin:0; font-size:var(--fs-sm); line-height:1.55; }
.about-process{ background:var(--fa-ink-900); color:var(--fa-white); padding-block:var(--section-py); }
.about-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-8) var(--space-6); counter-reset:about-step; }
.about-step{ counter-increment:about-step; border-top:2px solid var(--fa-green-500); padding-top:var(--space-4); }
.about-step::before{ content:counter(about-step,decimal-leading-zero); display:block; margin-bottom:var(--space-2); font-size:var(--fs-h2); font-weight:700; line-height:1; color:var(--color-accent-on-dark); }
.about-step h3{ margin:0 0 var(--space-2); font-size:var(--fs-body); font-weight:700; color:var(--color-text-on-dark); }
.about-step p{ margin:0; font-size:var(--fs-sm); line-height:1.55; color:var(--color-text-on-dark-muted); }

/* -----------------------------------------------------------------------
   Cómo comprar
   ----------------------------------------------------------------------- */
.buy-intro{ max-width:760px; padding-bottom:0; }
.buy-intro .t-h2{ margin-bottom:var(--space-2); }
.buy-intro p:not(.eyebrow){ margin:var(--space-4) 0 0; line-height:1.6; }
.buy-steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-6); max-width:860px; }
.buy-step{ position:relative; display:grid; grid-template-columns:48px 1fr; gap:var(--space-5); }
.buy-step:not(:last-child)::after{ content:""; position:absolute; left:23px; top:56px; bottom:calc(-1 * var(--space-6)); width:2px; background:var(--color-border); }
.buy-step__marker{ width:48px; height:48px; border-radius:50%; background:var(--color-bg-inverse); color:var(--color-accent-on-dark); display:flex; align-items:center; justify-content:center; }
.buy-step__body{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card); padding:var(--space-5) var(--space-6); min-width:0; }
.buy-step__label{ margin:0; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-price-offer); }
.buy-step__title{ margin:var(--space-1) 0 var(--space-2); font-size:var(--fs-h3); font-weight:700; line-height:1.3; color:var(--color-text-strong); }
.buy-step__body > p:not(.buy-step__label){ margin:0; line-height:1.6; }
.buy-step__body > .buy-step__tip{ display:flex; gap:var(--space-2); margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--color-border); font-size:var(--fs-sm); }
.buy-step__tip svg{ flex-shrink:0; margin-top:3px; color:var(--color-price-offer); }
.buy-step__tip strong{ color:var(--color-text-strong); }
@media (max-width:767px){
  .buy-step{ grid-template-columns:1fr; gap:var(--space-3); }
  .buy-step:not(:last-child)::after{ display:none; }
  .buy-step__marker{ width:40px; height:40px; }
}
.buy-notes-section{ padding-top:0; }

/* -----------------------------------------------------------------------
   Páginas legales (privacidad, términos)
   ----------------------------------------------------------------------- */
.legal{ display:grid; grid-template-columns:1fr; gap:var(--space-10); }
@media (min-width:1024px){ .legal{ grid-template-columns:260px minmax(0,760px); gap:var(--space-16); } }
.legal__toc{ align-self:start; border:1px solid var(--color-border); border-radius:var(--radius-card); padding:var(--space-5); }
@media (min-width:1024px){ .legal__toc{ position:sticky; top:calc(var(--header-h) + var(--space-6)); } }
.legal__toc-title{ margin:0 0 var(--space-3); font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-strong); }
.legal__toc ol{ margin:0; padding-left:var(--space-5); display:grid; gap:var(--space-2); font-size:var(--fs-sm); }
.legal__toc a{ color:var(--color-text); text-decoration:none; }
.legal__toc a:hover{ color:var(--color-price-offer); text-decoration:underline; }
.legal__updated{ margin:0 0 var(--space-4); font-size:var(--fs-sm); color:var(--color-text-subtle); }
.legal__intro{ margin:0 0 var(--space-8); font-size:var(--fs-body); line-height:1.65; color:var(--color-text-strong); }
.legal__section{ padding-block:var(--space-6); border-top:1px solid var(--color-border); scroll-margin-top:calc(var(--header-h) + var(--space-4)); }
/* Apartados enlazables desde "Más información" de las preguntas frecuentes
   (App\Support\FaqLinks): quedan bajo el header fijo al saltar y se marcan
   con un contorno verde que se desvanece, para que el usuario vea a qué
   texto lo llevó el enlace. */
.buy-step, .buy-notes-section .about-value{ scroll-margin-top:calc(var(--header-h) + var(--space-6)); }
.buy-step:target, .about-value:target, .legal__section:target{
  border-radius:var(--radius-card); outline:2px solid transparent; outline-offset:8px;
  animation:info-target 2.4s ease-out;
}
@keyframes info-target{
  0%, 45%{ outline-color:var(--fa-green-500); }
  100%{ outline-color:transparent; }
}
@media (prefers-reduced-motion: reduce){
  .buy-step:target, .about-value:target, .legal__section:target{ animation:none; outline-color:var(--fa-green-500); }
}
.legal__heading{ margin:0 0 var(--space-3); font-size:var(--fs-h3); font-weight:700; line-height:1.3; color:var(--color-text-strong); }
.legal__heading span{ color:var(--color-price-offer); }
.legal__section p{ margin:0; line-height:1.65; }
.legal__section p + p{ margin-top:var(--space-3); }
.legal__contact{ margin-top:var(--space-5); background:var(--color-bg-inverse); color:var(--color-text-on-dark); border-radius:var(--radius-card); padding:var(--space-5) var(--space-6); }
.legal__contact-title{ margin:0 0 var(--space-3) !important; font-weight:700; }
.legal__contact ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); font-size:var(--fs-sm); }
.legal__contact li{ display:flex; align-items:center; gap:var(--space-2); color:var(--color-text-on-dark-muted); overflow-wrap:anywhere; }
.legal__contact svg{ flex-shrink:0; color:var(--color-accent-on-dark); }
.legal__contact a{ color:var(--color-text-on-dark); }

/* -----------------------------------------------------------------------
   Portada: preguntas frecuentes (izquierda) + marcas (derecha)
   Una sola sección a dos columnas desde 1024px (7/5); debajo, apiladas.
   Líneas de apoyo: filete ink de 1px con tramo verde de 3px al inicio
   (.duo-rule bajo cada título y separador entre columnas). Rellenos
   sólidos, no degradados decorativos (manual 4.8): los linear-gradient de
   .duo-rule solo pintan dos franjas de color plano.
   ----------------------------------------------------------------------- */
.home-duo{ --duo-line:rgba(10,16,23,.85); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-12); }
.home-duo__col{ min-width:0; position:relative; }
.duo-rule{
  display:block; height:3px; margin:var(--space-4) 0 var(--space-5);
  background:
    linear-gradient(var(--fa-green-500), var(--fa-green-500)) left center / 48px 3px no-repeat,
    linear-gradient(var(--duo-line), var(--duo-line)) left center / 100% 1px no-repeat;
}
/* Separador entre bloques: horizontal apilado, vertical a dos columnas. */
.home-duo--split .home-brands{ padding-top:var(--space-10); border-top:1px solid var(--duo-line); }
.home-duo--split .home-brands::before{
  content:""; position:absolute; left:0; top:-2px; width:48px; height:3px; background:var(--fa-green-500);
}
@media (min-width:1024px){
  .home-duo--split{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:0; align-items:start; }
  .home-duo--split .faq{ padding-right:var(--space-12); }
  .home-duo--split .home-brands{ padding:0 0 0 var(--space-12); border-top:0; border-left:1px solid var(--duo-line); align-self:stretch; }
  .home-duo--split .home-brands::before{ left:-2px; top:0; width:3px; height:48px; }
}
.home-brands .section-head{ margin-bottom:0; }
.home-brands__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-4); }
.home-duo:not(.home-duo--split) .home-brands__grid{ grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); }
@media (max-width:767px){
  .home-brands__grid{ gap:var(--space-3); }
  .home-brands .brand-card{ padding-bottom:var(--space-3); }
  .home-brands .brand-card__logo{ padding:2px; margin-bottom:var(--space-2); }
  .home-brands .brand-card__name{ font-size:14px; }
}

.faq{ display:flex; flex-direction:column; }
.faq__intro .t-h2{ margin-bottom:0; }
.faq__hint{ display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-5); font-size:var(--fs-sm); color:var(--color-text-subtle); }
.faq__hint svg{ flex-shrink:0; color:var(--color-price-offer); }
.faq__contact{ margin:var(--space-5) 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); font-size:var(--fs-sm); color:var(--color-text); }
.faq__list{ display:grid; gap:var(--space-3); }
.faq-item{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-card); transition:border-color var(--dur-fast), box-shadow var(--dur-fast); }
.faq-item[open]{ border-color:var(--color-price-offer); box-shadow:0 6px 20px rgba(12,21,27,.06); }
.faq-item__question{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--space-4);
  padding:var(--space-4) var(--space-5); cursor:pointer; list-style:none;
  font-size:var(--fs-body); font-weight:600; line-height:1.4; color:var(--color-text-strong);
  border-radius:var(--radius-card);
}
.faq-item__question::-webkit-details-marker{ display:none; }
.faq-item__question:hover .faq-item__text{ color:var(--color-price-offer); }
.faq-item__question:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; }
.faq-item__icon{ display:flex; color:var(--color-price-offer); }
.faq-item__chevron{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  background:var(--fa-gray-200); color:var(--color-text-strong); transition:transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.faq-item[open] .faq-item__chevron{ transform:rotate(180deg); background:var(--color-price-offer); color:var(--fa-white); }
.faq-item__answer{ padding:0 var(--space-5) var(--space-5) calc(var(--space-5) + 20px + var(--space-4)); }
.faq-item[open] .faq-item__answer{ animation:faq-reveal var(--dur-fast, .2s) ease-out; }
.faq-item__answer p{ margin:0; line-height:1.65; }
.faq-item__link{ display:inline-flex; align-items:center; gap:var(--space-2); margin-top:var(--space-3); font-size:var(--fs-sm); font-weight:600; color:var(--color-price-offer); text-decoration:none; }
.faq-item__link:hover{ text-decoration:underline; }
@keyframes faq-reveal{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (max-width:767px){
  .faq-item__question{ gap:var(--space-3); padding:var(--space-4); }
  .faq-item__answer{ padding:0 var(--space-4) var(--space-4); }
}
@media (prefers-reduced-motion:reduce){
  .faq-item, .faq-item__chevron{ transition:none; }
  .faq-item[open] .faq-item__answer{ animation:none; }
}

.status-note{ border-radius:var(--radius-card); padding:var(--space-3) var(--space-4); font-size:var(--fs-sm); margin-top:var(--space-4); }
.status-note.success{ background:rgba(0,136,56,.08); color:var(--color-price-offer); }
.status-note.warn{ background:var(--color-danger-bg,rgba(181,59,59,.08)); color:var(--color-danger); }

/* -----------------------------------------------------------------------
   404 / 500 — 13.9
   ----------------------------------------------------------------------- */
.error-page{ min-height:60vh; display:flex; align-items:center; justify-content:center; background:var(--fa-ink-900); color:var(--fa-white); text-align:center; }
.error-page__inner{ max-width:480px; padding:var(--space-8) var(--gutter); }
.error-page h1{ font:700 32px/1.1 var(--font-sans); margin:0 0 var(--space-3); }
@media (min-width:768px){ .error-page h1{ font-size:40px; line-height:1.05; } }
.error-page p{ color:var(--color-text-on-dark-muted); margin:0 0 var(--space-6); }

/* -----------------------------------------------------------------------
   Footer — 11.12
   ----------------------------------------------------------------------- */
.site-footer__row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--space-6); padding-block:var(--space-8);
}
.site-footer__brand{ display:flex; align-items:center; flex-shrink:0; }
.site-footer__brand img{ height:46px; width:auto; display:block; }
.site-footer__nav{ display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-8); }
@media (max-width:767px){ .site-footer__nav{ gap:var(--space-3) var(--space-5); } }
.site-footer__nav a{ font:500 12px/1 var(--font-sans); color:var(--fa-white); text-decoration:none; }
.site-footer__nav a:hover{ text-decoration:underline; }
.site-footer__links{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-5) var(--space-10); }
.site-footer__social{ display:flex; align-items:center; gap:var(--space-5); }
.site-footer__social a{ color:var(--fa-white); display:inline-flex; filter:drop-shadow(0 1px 3px rgba(10,16,23,.9)); }
.site-footer__social a:hover{ color:var(--fa-green-500); }
.site-footer__contact{
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-8);
  padding-bottom:var(--space-6); border-top:1px solid var(--color-border-on-dark); padding-top:var(--space-5);
}
.site-footer__contact span,.site-footer__contact a{
  display:inline-flex; align-items:center; gap:8px; font:500 12px var(--font-sans);
  color:var(--color-text-on-dark-muted); text-decoration:none;
}
.site-footer__contact a:hover{ color:var(--fa-white); }
.site-footer__contact svg{ flex-shrink:0; color:var(--fa-green-500); }
.site-footer__bottom{ border-top:1px solid var(--color-border-on-dark); padding-block:var(--space-4); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3) var(--space-6); }
.site-footer__legal{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); }
.site-footer__legal a{ font:500 12px/1 var(--font-sans); color:var(--color-text-on-dark-muted); text-decoration:none; text-shadow:0 1px 4px rgba(10,16,23,.9); }
.site-footer__legal a:hover{ color:var(--fa-white); text-decoration:underline; }
@media (max-width:767px){
  .site-footer__row{ flex-direction:column; align-items:flex-start; }
  .site-footer__contact{ flex-direction:column; gap:var(--space-2); }
}

/* -----------------------------------------------------------------------
   Marca de agua de palmera (opcional, superficies oscuras grandes) — §10
   ----------------------------------------------------------------------- */
.palm-watermark{ position:absolute; right:0; bottom:0; width:220px; opacity:.05; pointer-events:none; }

/* -----------------------------------------------------------------------
   Botón flotante "volver arriba" — presente en todo el público (footer.php)
   ----------------------------------------------------------------------- */
.back-to-top{
  position:fixed; z-index:55;
  right:calc(var(--space-16) + env(safe-area-inset-right, 0px));
  bottom:calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  width:48px; height:48px; border-radius:50%; border:none;
  background:var(--color-action); color:var(--fa-white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-overlay); cursor:pointer;
  transition:background-color .15s ease, transform .15s ease;
}
.back-to-top:hover{ background:var(--color-action-hover); }
.back-to-top:active{ transform:scale(.94); }
.back-to-top[hidden]{ display:none; }
/* Móvil: más pequeño y pegado a la esquina, para no tapar la flecha y el
   precio de las tarjetas de vehículo al hacer scroll. */
@media (max-width:767px){
  .back-to-top{
    width:40px; height:40px;
    right:calc(var(--space-3) + env(safe-area-inset-right, 0px));
    bottom:calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
}