/* Integrity Motors - la web: Apple, Linktree y el Liquid Glass de iOS (el diseño «Vidrio», elegido el 2026-11-14).
   - Detrás de todo, la foto del auto desenfocada (la del último que entró, en la entrada; la suya, en
     cada auto), con el verde de la marca. Sobre negro liso el vidrio no se ve: necesita algo detrás.
   - Dos vidrios. El «quieto» (tarjetas, botones de la entrada, grupos de datos) es translúcido con
     brillo en el borde, sin backdrop-filter: lo de atrás ya está desenfocado y así no pesa en celulares
     de gama media. El «vivo» (las barras que flotan sobre fotos nítidas, las flechas de la galería,
     el play) desenfoca de verdad lo que pasa por atrás y, en Chrome y Android, además lo refracta
     en el borde (app.js arma el filtro SVG). En Safari y en el navegador de Instagram en iPhone
     (WebKit) queda en vidrio esmerilado: lo mismo que usa Apple en su propia web.
   - Como Linktree: una columna de botones grandes, redondeados, con su ícono. Como Apple: títulos
     apretados, botones en píldora, los datos en listas agrupadas como los Ajustes del iPhone.
   Ideas tomadas (el código es de acá): kube.io «Liquid Glass in the Browser» (el mapa de
   desplazamiento con feDisplacementMap), el vidrio de apple.com (blur 7 a 20 px), los botones de los
   perfiles de Linktree. La letra: /fuentes/fuentes.css (la SF del sistema en iPhone y Mac; Figtree en el resto). */

/* ---------- Lo básico ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--texto, Arial, sans-serif); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; color: inherit; }
svg { width: 1.2em; height: 1.2em; flex: none; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.sin-js .solo-js { display: none !important; }

/* El nombre de cada dato (Año, Kilómetros…) solo se ve en los casilleros de la página del auto. */
.spec small { display: none; }
.filtros-vidrio { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* De dónde salen los datos del auto (debajo de «Todo sobre este auto») */
.nota-datos { margin-top: 14px; max-width: 62ch; font-size: .82rem; line-height: 1.45; opacity: .68; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* La entrada suave de las tarjetas (solo con JavaScript; app.js la marca .visto al aparecer) */
.revelar { opacity: 0; translate: 0 22px; }
.revelar.visto { opacity: 1; translate: 0 0; }
.grupo.revelar, .detalles.revelar, .video.revelar { transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1); }
/* Las tarjetas de los autos ponen su propia transición (con opacity y translate) en cada diseño. */
.sin-js .revelar { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar { opacity: 1; translate: 0 0; }
}


:root {
  --base: #0b1210;
  --verde: #3a806e;
  --verde-vivo: #4fae94;
  --verde-cla: #8fdcc2;
  --amarillo: #f5c84c;
  --t1: #fff;
  --t2: rgba(255, 255, 255, .74);
  --t3: rgba(255, 255, 255, .52);
  --linea: rgba(255, 255, 255, .12);
  --ancho: 1120px;
  --columna: 580px;
  --lado: 16px;
  /* El vidrio quieto: translúcido, con brillo arriba y una sombra suave */
  --vq-fondo: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .07));
  --vq-borde: rgba(255, 255, 255, .17);
  --vq-sombra: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 14px 34px -18px rgba(0, 0, 0, .65);
  /* El vidrio vivo: desenfoca lo de atrás (la refracción la suma app.js donde se puede) */
  --vv-fondo: rgba(22, 30, 27, .34);   /* un tinte oscuro: el texto blanco se lee sobre una pared blanca, con o sin desenfoque */
  --vv-filtro: blur(16px) saturate(180%);
  color-scheme: dark;
}

body { background: var(--base); color: var(--t1); }
::selection { background: var(--verde-vivo); color: #fff; }
:focus-visible { outline: 3px solid var(--verde-cla); outline-offset: 3px; }

/* La letra de los títulos */
.marca, .seccion-titulo h2, .auto .nombre, .auto .precio, .tarjeta-info h1, .tarjeta-info .precio, .bloque h2,
.pie-marca span, .simple h1, .barra-precio {
  font-family: var(--display, Arial, sans-serif); font-weight: var(--display-peso, 700); letter-spacing: var(--display-espacio, -.02em);
}

/* ---------- El fondo: la foto del auto, desenfocada, con el verde de la marca ---------- */
.fondo { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--base); }
.fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(46px) saturate(1.7) brightness(.8); transform: scale(1.3); transition: opacity 1.1s ease; }
/* En la entrada, el fondo cambia con el auto del medio del carrusel: una foto aparece mientras la otra se va. */
.fondo img.saliendo { opacity: 0; }
.fondo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 55% at 0% 0%, rgba(58, 128, 110, .55), transparent 70%),
    radial-gradient(70% 50% at 100% 100%, rgba(58, 128, 110, .45), transparent 70%),
    linear-gradient(180deg, rgba(6, 12, 10, .35), rgba(6, 12, 10, .72));
}

/* ---------- Los dos vidrios ---------- */
.boton, .chip-lugar, .red, .auto, .tarjeta-info, .grupo, .detalles, .pie-in, .aviso-estado,
.spec, .contador-pill, .filtros {
  background: var(--vq-fondo); border: 1px solid var(--vq-borde); box-shadow: var(--vq-sombra);
}
.vivo, .barra .boton-volver, .barra .red, .barra-marca, .flecha, .contador, .diapo-txt, .herramientas,
.barra-wa, .play, .duracion {
  background: var(--vv-fondo); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: var(--vv-filtro); backdrop-filter: var(--vv-filtro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 10px 26px -12px rgba(0, 0, 0, .55);
}
/* Con refracción (Chrome y Android): menos desenfoque, para que se vea cómo se dobla el borde */
.refraccion .barra .boton-volver, .refraccion .barra-marca, .refraccion .flecha,
.refraccion .diapo-txt, .refraccion .play { background: rgba(22, 30, 27, .24); }
/* Las barras que flotan sobre las tarjetas llevan un tinte oscuro y más desenfoque: se leen sobre una foto blanca */
.herramientas, .barra-wa { background: rgba(14, 22, 19, .58); --desenfoque: 12px; }

/* ---------- Botones: píldoras grandes, con el ícono en un círculo a la izquierda (como Linktree) ---------- */
.boton {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 999px; cursor: pointer; color: var(--t1);
  font-weight: 600; font-size: 1rem; line-height: 1.15; text-align: center;
  transition: transform .18s cubic-bezier(.3, .7, .3, 1), background-color .2s ease, border-color .2s ease;
}
.boton:hover { border-color: rgba(255, 255, 255, .34); }
.boton:active { transform: scale(.97); }
.boton svg { width: 20px; height: 20px; }
.boton.grande, .botones-portales .boton, .chip-lugar { min-height: 60px; padding: 0 22px 0 60px; font-size: 1.0625rem; width: 100%; }
.botones-portales .boton { padding-right: 44px; }
.botones-portales .boton > img {
  position: absolute; left: 8px; top: 50%; margin-top: -22px; width: 44px; height: 44px; padding: 8px; border-radius: 50%;
  background: #fff; object-fit: contain;
}
/* El ícono de los botones grandes, en su círculo: el círculo es un elemento propio y el ícono va centrado
   adentro (sin depender del relleno del SVG, que no todos los navegadores dibujan igual). */
.boton.grande > .icono, .chip-lugar > .icono {
  position: absolute; left: 8px; top: 50%; margin-top: -22px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .16);
}
.boton.grande > .icono svg, .chip-lugar > .icono svg { width: 22px; height: 22px; }
.botones-portales .boton > svg { position: absolute; right: 20px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--t3); }
.boton-wa {
  background: linear-gradient(180deg, rgba(86, 186, 158, .78), rgba(46, 116, 97, .82)); border-color: rgba(190, 255, 232, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 16px 34px -16px rgba(30, 110, 88, .9);
}
.boton-wa:hover { border-color: rgba(220, 255, 243, .6); }
.boton-wa.grande > .icono { background: #fff; color: #1fa855; }
.boton-wa.grande > .icono svg { width: 26px; height: 26px; }
.boton-claro, .boton-oscuro { background: rgba(255, 255, 255, .92); color: #0b1210; border-color: transparent; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6); }
.boton-claro:hover, .boton-oscuro:hover { background: #fff; }
.boton-claro.grande { padding: 0 22px; }
.boton-claro > svg:last-child { display: none; }
.boton-oscuro { width: auto; }
.boton-oscuro svg { display: none; }
.pulso::after { display: none; }

/* Las redes: círculos de vidrio con el logo en blanco */
.redes { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.red { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: transform .18s ease, border-color .2s ease; }
.red:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .4); }
.red:active { transform: scale(.94); }
.red svg { width: 22px; height: 22px; }
.red.chica { width: 34px; height: 34px; }
.red.chica svg { width: 16px; height: 16px; }

.chip-lugar { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 600; text-align: center; }
.chip-lugar > .icono { color: var(--verde-cla); }

/* ---------- La entrada: el carrusel de los autos en venta ---------- */
/* El del medio, grande; los de los costados, más chicos y asomando. app.js pone a cada uno su lugar
   (--d: 0 el del medio, -1 y 1 los de al lado) y lo mueve; el arrastre con el dedo va en --arrastre. */
.portada { position: relative; }
.carrusel {
  --ancho-diapo: 72vw; --alto-diapo: calc(var(--ancho-diapo) * .66); --paso: 69vw;
  /* Abajo, lugar de sobra para que la sombra de las tarjetas se desvanezca entera (si la tira la recorta,
     queda una línea); lo de abajo sube para que la separación se vea igual. */
  position: relative; height: calc(var(--alto-diapo) + 88px); margin-top: env(safe-area-inset-top);
  overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.diapos { position: absolute; inset: 0; }
.diapo {
  --d: 0; position: absolute; left: 50%; top: 18px; width: var(--ancho-diapo); height: var(--alto-diapo);
  border-radius: 26px; overflow: hidden; background: rgba(0, 0, 0, .35); -webkit-tap-highlight-color: transparent;
  translate: calc(-50% + var(--d) * var(--paso) + var(--arrastre, 0px)) 0; scale: .84; opacity: .72;
  box-shadow: 0 24px 44px -24px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: translate .55s cubic-bezier(.2, .8, .2, 1), scale .55s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
}
.diapo.centro { scale: 1; opacity: 1; z-index: 2; }
.diapo.lejos { opacity: 0; pointer-events: none; transition: none; }
.carrusel.arrastrando .diapo { transition: none; }
.diapo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.diapo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6, 12, 10, .5)); pointer-events: none; }
.diapo-txt {
  position: absolute; z-index: 1; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 4px;
  max-width: calc(100% - 24px); padding: 9px 10px 9px 16px; border-radius: 999px; font-size: .9rem; font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity .35s ease;
}
.diapo.centro .diapo-txt { opacity: 1; }
.diapo-txt span { overflow: hidden; text-overflow: ellipsis; }
.diapo-txt svg { width: 18px; height: 18px; }
.carrusel > .flecha { display: none; top: calc(18px + var(--alto-diapo) / 2); z-index: 3; }
/* Sin JavaScript: una tira que se desliza con el dedo */
.sin-js .carrusel { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sin-js .diapos { position: static; display: flex; gap: 12px; padding: 18px var(--lado); width: max-content; }
.sin-js .diapo { position: relative; left: auto; top: auto; translate: none; scale: 1; opacity: 1; flex: none; scroll-snap-align: center; }
.sin-js .diapo-txt { opacity: 1; }

.carrusel + .portada-in { margin-top: -52px; }
.portada-in {
  position: relative; max-width: var(--columna); margin: 0 auto; padding: 6px var(--lado) 10px;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px; text-align: center;
}
.marca-fila { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.emblema {
  width: 88px; height: 88px; padding: 18px 12px; border-radius: 26px; object-fit: contain; background: #000;
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 40px -14px rgba(0, 0, 0, .8);
}
.marca { font-size: 1.9rem; line-height: 1.05; }
.bajada { color: var(--t2); font-size: 1.05rem; line-height: 1.4; max-width: 32ch; margin: -4px auto 0; }
.acciones-portada { display: grid; gap: 12px; margin-top: 4px; }
.botones-portales { display: grid; gap: 12px; }

/* ---------- Secciones ---------- */
/* Arriba, 24 px desde la dirección hasta «En stock»: lo mismo que del carrusel al logo. */
.seccion { padding: 14px 0 40px; }
.seccion-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); }
.seccion-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.seccion-titulo h2 { font-size: 2.1rem; line-height: 1.05; }
.contador-pill { padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; white-space: nowrap; color: var(--t2); }

/* Filtros y orden: una cápsula de vidrio que queda arriba al bajar */
.herramientas {
  position: sticky; top: calc(10px + env(safe-area-inset-top)); z-index: 6; margin-bottom: 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px; border-radius: 30px;
}
.tipos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-radius: 24px; }
.tipos::-webkit-scrollbar { display: none; }
.tipo {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 999px;
  border: 0; background: transparent; color: var(--t1); font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.tipo img { display: block; width: 34px; height: 34px; margin-left: -10px; border-radius: 50%; object-fit: cover; }
.tipo:hover { background: rgba(255, 255, 255, .1); }
.tipo.activo { background: #fff; color: #0b1210; }
.fila-herr { display: flex; gap: 6px; }
.campo.orden span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left; }
.campo span { font-size: .85rem; color: var(--t2); font-weight: 600; }
select {
  width: 100%; height: 46px; padding: 0 38px 0 14px; border-radius: 999px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-color: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: var(--t1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
select option { color: #000; }
/* El orden, como un botón redondo con el ícono de ordenar */
.campo.orden select {
  width: 46px; padding: 0; color: transparent; text-indent: -999px; background-position: center; background-size: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3.5 16.5 7 20l3.5-3.5M17 20V4M13.5 7.5 17 4l3.5 3.5'/%3E%3C/svg%3E");
}
.boton-filtros { width: 46px; min-height: 46px; padding: 0; background: rgba(255, 255, 255, .1); box-shadow: none; border-color: rgba(255, 255, 255, .18); }
.boton-filtros span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.boton-filtros[aria-expanded="true"] { background: #fff; color: #0b1210; }
.n-filtros { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--verde-vivo); color: #fff; font-size: .75rem; display: grid; place-items: center; }
.filtros { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border-radius: 24px; background: rgba(0, 0, 0, .18); box-shadow: none; }
.limpiar { grid-column: 1 / -1; justify-self: start; background: none; border: 0; padding: 6px 2px; cursor: pointer; color: var(--verde-cla); font-weight: 600; }
.vacio { padding: 30px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; font-size: 1.05rem; color: var(--t2); }

/* ---------- Las tarjetas de los autos ---------- */
.grilla { display: grid; grid-template-columns: 1fr; gap: 16px; }
.auto {
  display: flex; flex-direction: column; padding: 8px; border-radius: 28px; color: var(--t1);
  transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease;
}
.auto:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .32); }
.auto .foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 21px; background: rgba(0, 0, 0, .3); }
.auto .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
/* Un vendido se distingue de un vistazo: la foto un poco apagada y con un velo muy leve, sin perder el auto. */
.auto.es-vendido .foto img { filter: saturate(.72) brightness(.9); }
.auto.es-vendido .foto::after { content: ""; position: absolute; inset: 0; background: rgba(12, 22, 18, .14); pointer-events: none; }
.auto:hover .foto img { transform: scale(1.05); }
.auto .sin-foto { display: grid; place-items: center; height: 100%; }
.auto .sin-foto img { width: 34%; }
.auto .cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 14px 10px 8px; flex: 1; }
.auto .nombre { font-size: 1.3rem; line-height: 1.15; }
.auto .precio { font-size: 1.55rem; line-height: 1.1; }
.specs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; }
.spec { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px; box-shadow: none; color: var(--t2); font-weight: 500; }
.spec svg { width: 16px; height: 16px; color: var(--verde-cla); }
.auto .ver {
  margin-top: 6px; align-self: flex-start; display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px;
  background: #fff; color: #0b1210; font-weight: 600; font-size: .95rem; transition: background-color .2s ease;
}
.auto .ver svg { display: none; }

.sello {
  position: absolute; top: 12px; left: 12px; z-index: 1; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 16px rgba(0, 0, 0, .3);
}
.sello-reservado { background: rgba(245, 200, 76, .92); color: #1d1600; }
.sello-vendido { background: rgba(58, 128, 110, .92); color: #fff; }
/* Un vendido en la grilla: la misma tarjeta, con la estampa verde arriba a la derecha (vendido es algo bueno)
   y el auto tal cual, sin apagarlo (la idea es de las tarjetas de Motordil). */
.auto .sello-vendido {
  left: auto; right: 12px; top: 12px; padding: 7px 13px; border-radius: 10px; rotate: 4deg;
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 800;
  background: #2f8f72; border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .55);
}

/* ---------- El pie ---------- */
.pie { padding: 0 var(--lado) calc(24px + env(safe-area-inset-bottom)); }
.pie-in { max-width: var(--columna); margin: 0 auto; padding: 24px 18px; border-radius: 32px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.pie-marca { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pie-marca img { width: 54px; height: auto; }
.pie-marca span { font-size: 1.35rem; }
.pie-portales { display: grid; gap: 12px; }
.pie-portales p { color: var(--t3); font-size: .85rem; }

/* ---------- La página de cada auto ---------- */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) var(--lado) 0;
}
.barra > * { pointer-events: auto; }
/* Una sombra suave arriba, para que los botones se lean sobre cualquier cosa */
.barra::before { content: ""; position: absolute; inset: 0 0 -26px; z-index: -1; background: linear-gradient(180deg, rgba(5, 10, 8, .45), transparent); pointer-events: none; }
.barra-marca img { border-radius: 8px; }
.boton-volver { min-height: 46px; padding: 0 18px 0 12px; gap: 6px; font-size: .95rem; }
.boton-volver svg { width: 20px; height: 20px; }
.barra-marca { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 999px; }
.barra-marca img { width: 40px; height: auto; }
.barra-marca span { display: none; font-weight: 700; letter-spacing: -.01em; }
.barra .red { width: 46px; height: 46px; background: linear-gradient(180deg, rgba(86, 186, 158, .7), rgba(46, 116, 97, .75)); }

.pagina { max-width: var(--ancho); margin: 0 auto; }
.marco-galeria { position: relative; overflow: hidden; border-radius: 0 0 32px 32px; background: rgba(0, 0, 0, .3); }
.galeria .fotos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.galeria .fotos::-webkit-scrollbar { display: none; }
.galeria .fotos img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; scroll-snap-align: center; }
.galeria.sin-fotos { display: grid; place-items: center; aspect-ratio: 4 / 3; }
.galeria.sin-fotos img { width: 30%; }
.flecha {
  position: absolute; top: 50%; translate: 0 -50%; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; transition: transform .15s ease;
}
.flecha:active { transform: scale(.92); }
/* Sobre una pared blanca: un poco más de tinte y una sombra en el ícono, para que se vean siempre */
.flecha, .contador { background-color: rgba(22, 30, 27, .46); }
.flecha svg, .barra .boton-volver svg, .diapo-txt svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.flecha.ant { left: 12px; }
.flecha.sig { right: 12px; }
.flecha svg { width: 22px; height: 22px; }
.contador { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 6px 13px; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.miniaturas { display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--lado) 4px; scrollbar-width: none; }
.miniaturas::-webkit-scrollbar { display: none; }
.miniaturas button { flex: none; width: 64px; height: 48px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; opacity: .5; background: rgba(0, 0, 0, .3); transition: opacity .2s ease, box-shadow .2s ease; }
.miniaturas button img { width: 100%; height: 100%; object-fit: cover; }
.miniaturas button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #fff; }

.col-info { padding: 0 var(--lado); }
.tarjeta-info { position: relative; margin-top: 12px; padding: 22px 18px 18px; border-radius: 32px; }
.tarjeta-info .sello { position: static; display: inline-block; margin-bottom: 12px; }
.tarjeta-info h1 { font-size: 1.85rem; line-height: 1.1; }
.tarjeta-info .precio { margin-top: 8px; font-size: 2.2rem; line-height: 1.05; }
.specs.grandes { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.specs.grandes .spec {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 12px 14px; border-radius: 20px; color: var(--t1); font-size: 1rem; font-weight: 600;
}
.specs.grandes .spec svg { grid-row: 1 / span 2; width: 22px; height: 22px; }
.specs.grandes .spec small { display: block; font-size: .75rem; font-weight: 500; color: var(--t3); line-height: 1.2; }
.specs.grandes .spec span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acciones { display: grid; gap: 12px; margin-top: 18px; }
.aviso-estado { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding: 14px 16px; border-radius: 22px; background: rgba(58, 128, 110, .45); }
.aviso-estado svg { margin-top: 2px; color: var(--verde-cla); }

.bloque { margin-top: 34px; padding: 0 var(--lado); }
.bloque h2 { font-size: 1.6rem; line-height: 1.1; margin-bottom: 14px; }

/* Videos */
.carril { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lado); margin: 0 calc(-1 * var(--lado)); padding: 0 var(--lado) 6px; scrollbar-width: none; }
.carril::-webkit-scrollbar { display: none; }
.video { flex: 0 0 64%; max-width: 280px; margin: 0; scroll-snap-align: start; }
.video.horizontal { flex-basis: 90%; max-width: 560px; }
.video .marco { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 26px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.video.horizontal .marco { aspect-ratio: 16 / 9; }
.video .marco > img, .reproducir img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.reproducir { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.reproducir:hover img { transform: scale(1.04); }
.play { position: absolute; left: 50%; top: 50%; z-index: 1; translate: -50% -50%; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: transform .2s ease; }
.reproducir:hover .play { transform: scale(1.08); }
.play svg { width: 28px; height: 28px; margin-left: 4px; }
.duracion { position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.video video, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.video.instagram { flex-basis: 100%; max-width: 400px; }
.video.instagram .marco { aspect-ratio: auto; height: var(--alto-ig, 640px); background: #fff; }
.video figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 4px 0; }
.cuando { color: var(--t3); font-size: .85rem; }
.links { display: flex; gap: 6px; }

/* Todo sobre el auto: listas agrupadas, como los Ajustes del iPhone */
.grupos { display: grid; gap: 14px; }
.grupo, .detalles { padding: 4px 0; border-radius: 26px; }
.grupo h3, .detalles h3 { padding: 14px 18px 6px; font-size: .9rem; font-weight: 600; color: var(--t3); }
.grupo dl { margin: 0; }
.fila { position: relative; display: grid; grid-template-columns: 30px auto 1fr; align-items: center; gap: 12px; padding: 10px 18px; }
.fila + .fila::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; border-top: 1px solid var(--linea); }
.fila svg { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--verde); color: #fff; }
.fila dt { color: var(--t2); }
.fila dd { margin: 0; text-align: right; font-weight: 600; }
.detalles { margin-top: 14px; padding-bottom: 10px; }
.detalles ul { margin: 0; padding: 0 18px; list-style: none; display: grid; }
.detalles li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 9px 0; }
.detalles li + li { border-top: 1px solid var(--linea); }
.detalles li svg { width: 20px; height: 20px; color: var(--verde-cla); margin-top: 2px; }

.parecidos .grilla { margin-bottom: 18px; }

/* El WhatsApp que flota abajo (celular), cuando el botón de arriba ya no se ve */
.barra-wa {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 999px;
  translate: 0 160%; transition: translate .45s cubic-bezier(.2, .8, .2, 1);
}
.barra-wa.visible { translate: 0 0; }
.barra-precio { display: flex; flex-direction: column; min-width: 0; padding-left: 14px; font-size: 1.1rem; line-height: 1.15; white-space: nowrap; }
.barra-precio small { font-family: var(--texto, Arial, sans-serif); font-size: .72rem; font-weight: 500; color: var(--t2); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }
.barra-wa .boton { flex: 1 0 auto; min-height: 50px; padding: 0 18px; width: auto; font-size: 1rem; white-space: nowrap; }
.barra-precio { flex: 0 1 auto; }
@media (max-width: 419px) { .barra-wa .por-wa { display: none; } }
.barra-wa .boton > svg:first-child { position: static; translate: none; width: 22px; height: 22px; padding: 0; background: none; color: #fff; }
/* En la página de un auto, la tarjeta de abajo separada de «Lo que dice el aviso» como las demás, y al final
   un margen del alto de la barra fija del WhatsApp (más el borde del iPhone), así se llega a ver todo. */
.pagina-auto .pie { padding-top: 34px; }
.con-barra .pie { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

/* Página que no existe */
.simple { max-width: var(--ancho); margin: 0 auto; padding: calc(84px + env(safe-area-inset-top)) var(--lado) 40px; display: grid; gap: 16px; }
.simple h1 { font-size: 2rem; line-height: 1.1; }
.simple > p { color: var(--t2); }
.simple .boton { justify-self: start; }

/* La entrada al cargar: lo de arriba aparece de a uno (el único movimiento que no pide nadie) */
.portada-in > * { animation: subir .7s cubic-bezier(.2, .7, .2, 1) both; }
.portada-in > :nth-child(2) { animation-delay: .06s; }
.portada-in > :nth-child(3) { animation-delay: .12s; }
.portada-in > :nth-child(4) { animation-delay: .18s; }
.portada-in > :nth-child(5) { animation-delay: .24s; }
.portada-in > :nth-child(6) { animation-delay: .3s; }
@keyframes subir { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* Menos transparencia si el equipo lo pide (Accesibilidad > Reducir transparencia) */
@media (prefers-reduced-transparency: reduce) {
  :root { --vq-fondo: rgba(28, 40, 36, .96); --vv-fondo: rgba(28, 40, 36, .97); }
}

/* ---------- Celulares bajos (el iPhone SE, 375 x 667) ---------- */
/* La entrada, un poco más compacta (el carrusel apenas más bajo, el logo, los botones y los espacios más chicos),
   para que las primeras tarjetas asomen abajo en la primera carga. En los celulares altos y en la compu, igual. */
@media (max-width: 639px) and (max-height: 700px) {
  .carrusel { --alto-diapo: calc(var(--ancho-diapo) * .58); }
  .portada-in { gap: 10px; }
  .marca-fila { gap: 8px; }
  .emblema { width: 72px; height: 72px; padding: 15px 10px; border-radius: 22px; }
  .acciones-portada { gap: 8px; margin-top: 2px; }
  .boton.grande, .chip-lugar { min-height: 54px; }
  .seccion-titulo { margin-bottom: 10px; }
  .herramientas { margin-bottom: 12px; }
}

/* ---------- Tablet y compu ---------- */
@media (min-width: 640px) {
  .grilla { grid-template-columns: repeat(2, 1fr); }
  .filtros { grid-template-columns: repeat(3, 1fr); }
  .video { flex-basis: 240px; }
  .carrusel { --ancho-diapo: 62vw; --paso: calc(var(--ancho-diapo) * .92 + 18px); }
}
@media (min-width: 900px) {
  :root { --lado: 28px; }
  .carrusel { --ancho-diapo: min(680px, 52vw); --alto-diapo: calc(var(--ancho-diapo) * .6); --paso: calc(var(--ancho-diapo) * .92 + 26px); margin-top: 8px; }
  .diapo { border-radius: 32px; }
  .diapo-txt { left: 18px; bottom: 18px; }
  .carrusel > .flecha { display: grid; }
  .carrusel > .flecha.ant { left: calc(50% - var(--ancho-diapo) / 2 - 64px); }
  .carrusel > .flecha.sig { right: calc(50% - var(--ancho-diapo) / 2 - 64px); }
  .portada-in { gap: 16px; }
  .emblema { width: 108px; height: 108px; padding: 22px 14px; border-radius: 32px; }
  .marca { font-size: 2.6rem; }
  .seccion { padding: 14px 0 56px; }
  .seccion-titulo h2 { font-size: 2.8rem; }
  .herramientas { max-width: 860px; }
  .filtros { grid-template-columns: repeat(5, 1fr) auto; align-items: end; }
  .limpiar { grid-column: auto; }

  .barra-marca span { display: inline; }
  .barra { max-width: var(--ancho); margin: 0 auto; }
  .barra::before { left: calc(50% - 50vw); right: calc(50% - 50vw); }
  .pagina { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-areas: "fotos info" "resto info"; column-gap: 28px; padding: 86px var(--lado) 0; align-items: start; }
  .col-fotos { grid-area: fotos; }
  .col-info { grid-area: info; position: sticky; top: 86px; padding: 0; }
  .col-resto { grid-area: resto; }
  .marco-galeria { border-radius: 32px; }
  .miniaturas { padding: 12px 0 0; }
  .tarjeta-info { margin-top: 0; padding: 26px 22px 22px; }
  .tarjeta-info h1 { font-size: 2.2rem; }
  .bloque { padding: 0; }
  .carril { margin: 0; padding: 0 0 6px; flex-wrap: wrap; overflow: visible; gap: 16px; }
  .video { flex: 0 0 calc((100% - 32px) / 3); max-width: none; }
  .video.horizontal { flex-basis: 100%; }
  .barra-wa { display: none; }
  .con-barra .pie { padding-bottom: 24px; }
  .pie { padding-top: 24px; }
}
@media (min-width: 1100px) {
  .grilla { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}