/* Vitrina de autos, estilo Deportivo (José, 4-nov): negro y color del logo, letras grandes inclinadas y líneas diagonales.
   Lo que cambia por cliente está en tema.css (colores sacados de su logo). */
/* letras propias (licencia OFL, en fuentes/): la página no le pide nada a Google en cada visita */
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 600; font-display: swap; src: url(/fuentes/kanit-italic-600.woff2) format("woff2"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 700; font-display: swap; src: url(/fuentes/kanit-italic-700.woff2) format("woff2"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 800; font-display: swap; src: url(/fuentes/kanit-italic-800.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fuentes/barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fuentes/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fuentes/barlow-700.woff2) format("woff2"); }
:root {
  --fondo: #0A0A0B; --panel: #151517; --panel-2: #1E1E21; --linea: #2B2B2F;
  --blanco: #F6F6F6; --gris: #A9A9AF; --amarillo: #FFE58A;
  --radio: 0; --ancho: 1280px; --margen: clamp(18px, 4vw, 48px); --inclina: -12deg;
  --titulos: "Kanit", "Arial Black", Arial, sans-serif;
  --texto: "Barlow", -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { font-family: var(--texto); font-size: 17px; line-height: 1.45; color: var(--blanco); background: var(--fondo); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
a { color: inherit; }
button, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--titulos); font-style: italic; text-transform: uppercase; line-height: 1; }
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blanco); outline-offset: 2px; }

.ancho { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--blanco); color: var(--fondo); padding: 8px 14px; z-index: 50; }
.saltar:focus { left: 8px; }
.fill { background: var(--amarillo); color: #111; padding: 0 .3em; font-size: .92em; font-style: normal; font-family: var(--texto); text-transform: none; font-weight: 500; }
.franja { position: relative; z-index: 6; background: var(--amarillo); color: #111; font-size: 15px; line-height: 1.3; text-align: center; padding: 6px var(--margen); }

/* botones inclinados: el botón se inclina y su contenido se endereza */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: .55em 1.45em; border: 0; background: var(--marca); color: var(--sobre-marca); font: italic 700 1.15rem/1.1 var(--titulos); text-transform: uppercase; text-decoration: none; cursor: pointer; transform: skewX(var(--inclina)); transition: filter .14s ease, transform .14s ease; }
.btn > * { transform: skewX(12deg); }
.btn:hover { filter: brightness(1.12); transform: skewX(var(--inclina)) translateY(-1px); }
.btn-negro { background: var(--fondo); color: var(--blanco); }
.btn-chico { min-height: 44px; padding: .35em 1em; font-size: .94rem; }
.btn-grande { width: 100%; min-height: 60px; font-size: 1.3rem; }
.ico { width: 1.25em; height: 1.25em; flex: none; }

/* sello con el volante del logo */
.sello { display: inline-flex; align-items: center; gap: .55em; font: 600 1rem/1 var(--texto); letter-spacing: .14em; text-transform: uppercase; }
.sello svg { width: 24px; height: 24px; color: var(--marca-clara); flex: none; }
.sello .volante { width: 24px; height: 24px; color: var(--marca); flex: none; } /* el mismo rojo del logo */
/* volante del logo del cliente: la forma viene de tema.css, el color del texto que lo rodea */
.volante { display: inline-block; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }

/* barra de arriba */
.barra { position: relative; z-index: 5; }
.inicio .barra { position: absolute; left: 0; right: 0; }
.barra-in { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.marca { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; text-decoration: none; }
.marca .logo { height: 36px; width: auto; }
.marca-texto { font: italic 800 1.5rem/1 var(--titulos); text-transform: uppercase; }
.menu { display: flex; gap: 26px; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; font: italic 600 1rem/1 var(--titulos); text-transform: uppercase; letter-spacing: .03em; text-decoration: none; border-bottom: 3px solid transparent; }
.menu a:hover { border-bottom-color: var(--marca); }

/* menú del teléfono */
.menu-movil { display: none; position: relative; }
.menu-movil summary { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; cursor: pointer; list-style: none; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary span { display: block; height: 2px; background: var(--blanco); }
.menu-movil nav { position: absolute; right: 0; top: 50px; z-index: 30; min-width: 220px; background: var(--panel-2); box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .8); }
.menu-movil nav a { display: flex; align-items: center; min-height: 50px; padding: 0 18px; font: italic 600 1.06rem/1 var(--titulos); text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--linea); }

/* portada */
.portada { position: relative; min-height: clamp(560px, 86vh, 720px); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.portada-img { position: absolute; inset: 0 0 0 47%; z-index: -2; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.portada-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.portada-img .portada-logo { position: absolute; z-index: 2; left: 50%; bottom: 8%; transform: translateX(-50%); width: min(62%, 440px); height: auto; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .7)); }
.portada-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, .72), rgba(10, 10, 11, 0) 22%), linear-gradient(90deg, rgba(10, 10, 11, .4), rgba(10, 10, 11, 0) 30%); }
.franjas { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(47% - 26px); width: 150px; background: linear-gradient(var(--marca), var(--marca)) 0 0 / 10px 100% no-repeat, linear-gradient(var(--marca), var(--marca)) 24px 0 / 4px 100% no-repeat; transform-origin: 0 100%; transform: skewX(-13.1deg); }
.fantasma { position: absolute; z-index: -3; left: -140px; bottom: -190px; width: 620px; height: 620px; color: #17171A; }
.portada-txt { width: 100%; padding-top: 72px; }
.portada h1 { font-size: clamp(3.5rem, 7.1vw, 6.4rem); line-height: .94; letter-spacing: -.01em; margin-block: 18px; }
.portada h1 b { color: var(--marca); font-weight: 800; }
.bajada { font-size: 1.25rem; max-width: 24em; color: #D8D8DC; margin-bottom: 24px; }
.buscador { display: none; }
.con-js .buscador { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; width: min(100%, 42%); min-width: 500px; }
.con-js .sin-js-solo { display: none; }
.buscador label { display: grid; gap: 4px; font-size: .9rem; color: #D8D8DC; min-width: 0; }
.buscador select { width: 100%; min-height: 50px; padding: 0 8px; background: var(--panel-2); border: 1px solid var(--linea); color: var(--blanco); font-size: 1rem; }
.cuadros { height: 18px; background: repeating-conic-gradient(#0A0A0B 0 25%, #F6F6F6 0 50%) 0 0 / 18px 18px; }
.portada-txt > * { animation: subir .6s cubic-bezier(.2, .7, .2, 1) both; }
.portada-txt > :nth-child(2) { animation-delay: .07s; }
.portada-txt > :nth-child(3) { animation-delay: .14s; }
.portada-txt > :nth-child(4) { animation-delay: .2s; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* avisos de la portada: pasan en el marco de la foto. En pantalla ancha el texto de la portada queda encima del marco, pero solo sus piezas reciben el toque */
.con-avisos .portada-txt { pointer-events: none; }
.con-avisos .portada-txt > * { pointer-events: auto; }
.portada-img.avisos::after { display: none; }
.avisos-pista { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.avisos-pista::-webkit-scrollbar { display: none; }
.aviso-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.aviso-enlace { position: absolute; inset: 0; color: var(--blanco); text-decoration: none; }
.aviso-media { position: absolute; inset: 0; }
.aviso-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.aviso-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, .72), rgba(10, 10, 11, 0) 22%), linear-gradient(0deg, rgba(10, 10, 11, .94), rgba(10, 10, 11, .6) 36%, rgba(10, 10, 11, 0) 64%); }
.aviso-txt { position: absolute; z-index: 1; left: 21%; right: 7%; bottom: 106px; display: grid; justify-items: start; gap: 8px; }
.aviso-tit { font: italic 800 clamp(1.9rem, 3vw, 2.9rem)/.98 var(--titulos); text-transform: uppercase; text-wrap: balance; }
.aviso-det { font-size: 1.15rem; color: #E4E4E8; }
.aviso-auto { font: italic 700 1.2rem/1.1 var(--titulos); text-transform: uppercase; }
.aviso-ir { margin-top: 6px; background: var(--marca); color: var(--sobre-marca); font: italic 700 .98rem/1 var(--titulos); text-transform: uppercase; padding: 11px 18px; transform: skewX(var(--inclina)); transition: filter .14s ease; }
.aviso-ir span { display: block; transform: skewX(12deg); }
.aviso-enlace:hover .aviso-ir { filter: brightness(1.12); }
.aviso-cond { position: absolute; z-index: 1; left: 21%; right: 7%; bottom: 58px; font-size: .86rem; line-height: 1.3; color: #CFCFD4; }
/* la imagen propia se ve entera, sin recortes ni nada escrito encima */
.aviso-tipo-propia { background: var(--fondo); }
.aviso-tipo-propia .aviso-media { inset: 104px 6% 160px 22%; }
.aviso-tipo-propia .aviso-media img { object-fit: contain; }
.aviso-tipo-propia .aviso-media::after { display: none; }
.aviso-tipo-propia .aviso-txt { bottom: 102px; }
.avisos-ctl { position: absolute; z-index: 2; right: 7%; bottom: 14px; display: flex; align-items: center; gap: 2px; }
.avisos-ctl button { position: relative; width: 36px; height: 36px; background: none; border: 0; cursor: pointer; }
.aviso-punto::before { content: ""; position: absolute; left: 6px; right: 6px; top: 16px; height: 4px; background: rgba(246, 246, 246, .45); transform: skewX(var(--inclina)); }
.aviso-punto[aria-current="true"]::before { background: var(--marca); }
.avisos-pausa::before, .avisos-pausa::after { content: ""; position: absolute; top: 11px; width: 4px; height: 14px; background: var(--blanco); }
.avisos-pausa::before { left: 12px; }
.avisos-pausa::after { left: 20px; }
.avisos-pausa.pausado::before { left: 13px; width: 0; height: 0; background: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--blanco); }
.avisos-pausa.pausado::after { display: none; }
.avisos-ctl { display: none; }
.con-js .avisos-ctl { display: flex; }

/* título de sección con la línea diagonal */
.cabeza { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.cabeza::after { content: ""; flex: 1; min-width: 40px; height: 10px; background: repeating-linear-gradient(-58deg, var(--marca) 0 8px, transparent 8px 18px); }

/* catálogo: fondo claro para que luzcan los autos */
.catalogo { background: #EFEFED; color: #141416; padding-block: clamp(36px, 5vw, 64px) clamp(54px, 7vw, 90px); }
.conteo { color: #55555C; font-size: 1.02rem; white-space: nowrap; order: 2; }
/* cuántos autos hay no se muestra (Andry, 6-nov: con pocos parece poco stock); al filtrar, solo lo oye quien usa lector de pantalla */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.filtros { display: none; }
.con-js .filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 24px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); padding-block: 2px; max-width: 100vw; }
.chips::-webkit-scrollbar { display: none; }
.chip { --fondo-chip: #FFFFFF; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 92px; min-height: 70px; padding: 8px 12px; background: var(--fondo-chip); color: #141416; border: 0; font: italic 600 .92rem/1 var(--titulos); text-transform: uppercase; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .14); transition: background-color .14s, color .14s; }
.chip:hover { background: #E2E2DE; --fondo-chip: #E2E2DE; }
.chip.activo { background: var(--marca); --fondo-chip: var(--marca); color: var(--sobre-marca); }
.silueta { width: 54px; height: 24px; display: block; }
.silueta .rueda { fill: currentColor; stroke: var(--fondo-chip); stroke-width: 2.4; }
.selects { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.selects label { display: inline-flex; align-items: center; gap: 8px; font-size: .98rem; color: #55555C; }
.selects select { min-height: 44px; max-width: 58vw; padding: 0 8px; background: #FFFFFF; border: 1px solid #C9C9C4; color: #141416; font-size: 1rem; }

.grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 22px); }
.auto { background: #FFFFFF; color: #141416; box-shadow: 0 1px 3px rgba(0, 0, 0, .16); transition: transform .18s ease, box-shadow .18s ease; }
.auto:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5); }
.auto > a { display: block; height: 100%; text-decoration: none; }
.auto-foto { position: relative; aspect-ratio: 16 / 11; background: #DEDEDA; overflow: hidden; }
.auto-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.auto:hover .auto-foto img { transform: scale(1.035); }
/* lo que destaca al auto va sobre la foto; el precio, abajo, junto a la versión */
.destacado-tag { position: absolute; left: -6px; top: 14px; background: var(--marca); color: var(--sobre-marca); font: italic 700 1.02rem/1 var(--titulos); text-transform: uppercase; padding: 7px 16px 7px 18px; transform: skewX(var(--inclina)); }
.destacado-tag span { display: block; transform: skewX(12deg); }
.auto-precio { margin-top: 10px; font: italic 800 1.75rem/1 var(--titulos); color: var(--marca-texto); font-variant-numeric: tabular-nums; }
.ficha-destacado { display: inline-block; margin-top: 12px; background: var(--marca); color: var(--sobre-marca); font: italic 700 1rem/1 var(--titulos); text-transform: uppercase; padding: 6px 12px; }
.auto-info { padding: 16px 18px 18px; }
.auto-info h3 { font-size: 1.56rem; line-height: 1.05; }
.auto-version { color: #55555C; margin-top: 3px; }
.auto-condicion { color: #111; font-weight: 600; font-size: .92rem; margin-top: 4px; }
.auto-antes { margin-top: 10px; color: #55555C; font-size: .95rem; }
.auto-antes + .auto-precio { margin-top: 2px; }
.ficha-antes { margin-top: 14px; color: var(--gris); font-size: 1.05rem; }
.ficha-antes + .ficha-precio { margin-top: 4px; }
.auto-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #E2E2DE; }
.auto-datos dt { color: #6A6A70; font-size: .85rem; line-height: 1.2; }
.auto-datos dd { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.vacio { background: #FFFFFF; color: #141416; padding: 40px 20px; text-align: center; }
.vacio .btn { margin-top: 14px; }

/* permiso para las etiquetas de anuncios: aceptar y rechazar del mismo tamaño */
.permiso { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 420px; background: #FFFFFF; color: #141416; padding: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.permiso p { font-size: .95rem; line-height: 1.35; }
.permiso a { color: #141416; font-weight: 600; text-decoration: underline; }
.permiso-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.permiso-btn { width: 100%; }
.permiso-cambiar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* autos ya vendidos: sigue el fondo del catálogo, más chicos y sin precio */
.vendidos-sec { background: #EFEFED; color: #141416; padding-bottom: clamp(54px, 7vw, 90px); }
.vendidos-sec h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.vendidos-nota { color: #55555C; margin: -14px 0 20px; }
.vendidos-nota a { color: #141416; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vendidos-grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.vendido-item .ampliar { position: relative; height: auto; aspect-ratio: 16 / 11; background: #DEDEDA; }
.vendido-item img { filter: saturate(.6); }
.vendido-cartel { position: absolute; left: 0; top: 10px; background: #141416; color: #FFFFFF; font: italic 700 .95rem/1 var(--titulos); letter-spacing: .05em; text-transform: uppercase; padding: 6px 12px; }
.vendido-item p { margin-top: 7px; font-weight: 600; line-height: 1.25; }
.vendidos-mas { margin-top: 20px; }
.vendidos-mas summary { cursor: pointer; list-style: none; }
.vendidos-mas summary::-webkit-details-marker { display: none; }
.vendidos-mas[open] summary { display: none; }

/* clientes con su auto: cada foto entera, en columnas */
.clientes-sec { background: #EFEFED; color: #141416; padding-bottom: clamp(54px, 7vw, 90px); }
.clientes-sec h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.clientes-sec .aviso-fill { margin-bottom: 16px; }
.clientes-muro { columns: 4; column-gap: clamp(12px, 1.4vw, 18px); }
.clientes-muro li { break-inside: avoid; margin-bottom: clamp(12px, 1.4vw, 18px); }
.clientes-muro .ampliar { height: auto; background: #DEDEDA; }
.clientes-muro img { display: block; height: auto; }
.vendidos-mas .clientes-muro { margin-top: 14px; }

/* financieras */
.financieras-sec { padding-bottom: clamp(54px, 7vw, 90px); }
.financieras-nota { margin-bottom: 18px; }
.financieras-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0 12px; }
/* en la portada, en pantalla ancha, todas en una sola fila: así nunca queda una sola abajo */
@media (min-width: 900px) { .financieras-sec .financieras-logos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.financieras-logos li { display: flex; align-items: center; justify-content: center; min-height: 88px; padding: 16px 22px; background: var(--panel); color: var(--blanco); font-weight: 600; text-align: center; border: 1px solid var(--linea); transform: skewX(var(--inclina)); transition: border-color .2s ease; }
.financieras-logos li > * { transform: skewX(calc(-1 * var(--inclina))); }
.financieras-logos li:hover { border-color: var(--marca); }
.financieras-logos img { display: block; width: auto; max-width: 86%; height: auto; max-height: 54px; }
.transferencia-con { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; font-size: .95rem; color: var(--gris); }
.transferencia-con img { display: block; width: auto; height: 30px; }

/* vende tu auto y crédito */
.ofertas-sec { padding-bottom: clamp(54px, 7vw, 90px); }
.aviso-fill { margin-bottom: 14px; }
.ofertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 22px); }
.ofertas-sec { padding-top: clamp(44px, 6vw, 72px); }
.oferta { position: relative; min-height: 350px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: clamp(22px, 2.6vw, 34px); overflow: hidden; isolation: isolate; background: var(--panel); scroll-margin-top: 16px; }
.oferta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2; }
.oferta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(14deg, rgba(10, 10, 11, .94) 26%, rgba(10, 10, 11, .1) 72%); }
.oferta h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.oferta p { color: #E2E2E6; font-size: 1.1rem; margin-block: 8px 18px; max-width: 26em; }

/* cómo comprar */
.pasos-sec { background: var(--panel); padding-block: clamp(44px, 6vw, 72px); }
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(20px, 3vw, 40px); }
.pasos li { display: flex; gap: 16px; align-items: flex-start; }
.paso-n { flex: none; font: italic 800 clamp(3.4rem, 6vw, 5rem)/.85 var(--titulos); color: var(--marca); }
.pasos h3 { font-size: 1.5rem; }
.pasos p { margin-top: 6px; color: var(--gris); }

/* la automotora */
.local { padding-bottom: clamp(48px, 7vw, 84px); }
.local > .ancho { padding-top: clamp(40px, 6vw, 68px); }
.banda-marca { height: clamp(96px, 12vw, 150px); background-repeat: repeat-x; background-position: center; background-size: auto 100%; }
.local-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.poster img { width: 100%; height: auto; }
.foco-arriba img { object-position: 50% 12%; }
.local-txt p + p { margin-top: 10px; }
.valores { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.8vw, 22px); margin-top: 24px; }
.valores > div { background: var(--panel); border-left: 6px solid var(--marca); padding: 18px 20px; }
.valores h3 { font-size: 1.36rem; }
.valores p { margin-top: 8px; color: #D8D8DC; }
.mosaico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 19vw, 248px); gap: clamp(8px, 1vw, 12px); margin-top: 30px; }
.mosaico li { grid-column: span 4; min-width: 0; }
.mosaico li:nth-child(5n + 1) { grid-column: span 7; grid-row: span 2; }
.mosaico li:nth-child(5n + 2), .mosaico li:nth-child(5n + 3) { grid-column: span 5; }
.mosaico li:nth-child(5n + 4), .mosaico li:nth-child(5n + 5) { grid-column: span 6; }
.ampliar { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--panel-2); cursor: zoom-in; overflow: hidden; }
.ampliar img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.mosaico .ampliar:hover img { transform: scale(1.03); }

/* cifras */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(20px, 3vw, 40px); margin-top: 28px; padding-block: 20px; border-block: 1px solid var(--linea); }
.cifra-v { display: block; font: italic 800 clamp(2.2rem, 4.4vw, 3.4rem)/1 var(--titulos); color: var(--blanco); }
.cifra-v .fill { font-size: 1rem; }
.cifra-e { display: block; margin-top: 6px; color: var(--gris); }

/* nuestro equipo */
.equipo-sec { padding-bottom: clamp(54px, 7vw, 90px); }
.equipo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.persona { background: var(--panel); display: flex; flex-direction: column; }
.persona-foto { aspect-ratio: 1; overflow: hidden; background: var(--panel-2); }
.persona-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .25s ease; }
.persona:hover .persona-foto img { filter: none; }
.persona-info { padding: 14px 16px 18px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.persona-info h3 { font-size: 1.32rem; line-height: 1.1; }
.persona-info p { color: var(--gris); margin-top: 4px; margin-bottom: 12px; }
.persona-info .btn { margin-top: auto; }

/* opiniones */
.opiniones-sec { background: var(--panel); padding-block: clamp(44px, 6vw, 72px); }
.opiniones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.opiniones-caja { border: 1px solid var(--linea); background: var(--fondo); padding: clamp(14px, 2vw, 24px); }
.opiniones li { background: var(--panel-2); padding: 18px; display: grid; gap: 10px; align-content: start; }
.opinion-quien { display: flex; align-items: center; gap: 12px; }
.opinion-inicial { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--marca); color: var(--sobre-marca); font: 600 1.1rem/1 var(--texto); }
.opinion-de { font-weight: 600; line-height: 1.25; }
.opinion-de span { display: block; color: var(--gris); font-size: .9rem; font-weight: 400; }
.opinion-estrellas { color: #FBBC04; font-size: 1.1rem; letter-spacing: 2px; line-height: 1; }
.opinion-texto { overflow-wrap: anywhere; }
.opinion-fuente { color: var(--gris); font-size: .9rem; }
.opinion-fuente a { color: var(--gris); text-underline-offset: 3px; }
.opiniones-mas { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
/* opiniones de Google Maps: en su propio recuadro, con «Google Maps» como lo pide Google (letra normal 400, blanca, de 12 a 16 px, en una línea) */
.g-op { margin-top: 22px; border: 1px solid var(--linea); background: var(--fondo); padding: clamp(16px, 2vw, 24px); }
.g-op-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 16px; }
.g-nota { font: italic 800 2rem/1 var(--titulos); }
.g-estrellas { color: #FBBC04; font-size: 1.25rem; letter-spacing: 2px; }
.g-cuantas { color: var(--blanco); text-underline-offset: 3px; text-decoration-color: var(--marca); }
.g-atrib { margin-left: auto; font: normal 400 14px/1.2 var(--texto); letter-spacing: normal; white-space: nowrap; color: #FFFFFF; }
.g-op-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.g-op-item { background: var(--panel-2); padding: 16px; display: grid; gap: 8px; align-content: start; }
.g-quien { display: inline-flex; align-items: center; gap: 10px; color: var(--blanco); text-decoration: none; }
.g-quien b { font-weight: 600; }
a.g-quien:hover b { text-decoration: underline; }
.g-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--panel); }
.g-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--gris); font-size: .9rem; }
.g-estrellas-chicas { color: #FBBC04; letter-spacing: 1px; }
.g-texto { overflow-wrap: anywhere; }
.g-acc { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; }
.g-acc a, .g-op-nota a { color: var(--gris); text-underline-offset: 3px; }
.g-op-nota { margin-top: 14px; color: var(--gris); font-size: .86rem; }
.opiniones-mas a:not(.btn) { display: inline-block; padding-block: 8px; text-decoration-color: var(--marca); text-underline-offset: 3px; }

/* preguntas frecuentes */
.faq-sec { padding-block: clamp(48px, 7vw, 84px); }
.faq { max-width: 56em; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding-block: 12px; font-weight: 600; font-size: 1.14rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 600 1.7rem/1 var(--texto); color: var(--marca-clara); transition: transform .18s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 16px; color: #D8D8DC; }

/* contacto y pie */
.contacto-banda { background: var(--marca); color: var(--sobre-marca); clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%); padding-block: 76px 48px; }
.contacto-banda h2 { font-size: clamp(2rem, 4vw, 3rem); }
.contacto-banda p { font-size: 1.2rem; margin-top: 8px; }
.contacto-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
/* mapa: tapa propia hasta que la persona pide verlo */
.mapa { position: relative; height: clamp(260px, 34vw, 380px); margin-bottom: 44px; background: repeating-linear-gradient(-58deg, transparent 0 22px, rgba(255, 255, 255, .03) 22px 44px) var(--panel); border: 1px solid var(--linea); overflow: hidden; }
.mapa-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mapa-osm { position: absolute; left: 8px; bottom: 6px; font-size: .75rem; color: var(--gris); }
.mapa-tapa { position: relative; background: radial-gradient(ellipse at center, rgba(10, 10, 11, .42), rgba(10, 10, 11, .7)); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.mapa-dir { display: flex; align-items: center; gap: 10px; font: italic 700 clamp(1.2rem, 2.4vw, 1.6rem)/1.15 var(--titulos); text-transform: uppercase; }
.mapa-dir .ico { width: 30px; height: 30px; flex: none; color: var(--marca-clara); }
.mapa-acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; }
.mapa-link { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 6px; color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }
.mapa-aviso { color: var(--gris); font-size: .9rem; max-width: 46ch; }
.mapa-aviso a { color: inherit; text-decoration: underline; }
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.contacto-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; padding-block: 36px; }
.contacto-datos dt { font: 600 .9rem/1.2 var(--texto); text-transform: uppercase; letter-spacing: .12em; color: var(--gris); }
.contacto-datos dd { margin-top: 6px; font-size: 1.08rem; line-height: 1.38; overflow-wrap: anywhere; }
.contacto-datos a { text-decoration-color: var(--marca); text-underline-offset: 3px; display: inline-block; padding-block: 5px; }
.pie { border-top: 1px solid var(--linea); color: var(--gris); font-size: .94rem; padding-block: 16px; }
.pie-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; }

/* WhatsApp siempre a mano */
.wsp-flotante { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 20; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--marca); color: var(--sobre-marca); font-size: 1.5rem; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .7); transition: transform .14s ease; }
.wsp-flotante:hover { transform: scale(1.06); }

/* ficha del auto */
.ficha { padding-block: 0 clamp(40px, 6vw, 72px); }
.volver { display: inline-flex; align-items: center; min-height: 44px; font: italic 600 1rem/1 var(--titulos); text-transform: uppercase; text-decoration: none; color: var(--gris); }
.volver:hover { color: var(--blanco); }
.ficha-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 34px); align-items: start; margin-top: 6px; }
.galeria { min-width: 0; }
.gal-marco { position: relative; overflow: hidden; background: var(--panel-2); }
.gal-marco.apagada img { filter: grayscale(1) brightness(.7); }
.gal-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gal-pista::-webkit-scrollbar { display: none; }
.gal-foto { flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
.gal-foto .ampliar img { object-fit: contain; } /* una foto vertical se ve entera */
.flecha { display: none; position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border: 0; background: rgba(10, 10, 11, .78); color: var(--blanco); font: 600 1.9rem/1 var(--texto); cursor: pointer; align-items: center; justify-content: center; padding-bottom: 5px; transform: skewX(var(--inclina)); transition: background-color .14s; }
.flecha:hover { background: var(--marca); }
.con-js .flecha { display: flex; }
.flecha.ant { left: 12px; }
.flecha.sig { right: 12px; }
.gal-cuenta { position: absolute; right: 12px; bottom: 12px; background: rgba(10, 10, 11, .78); font: 600 .95rem/1 var(--texto); padding: 7px 10px; font-variant-numeric: tabular-nums; }
.gal-minis { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.gal-minis::-webkit-scrollbar { display: none; }
.gal-minis a { flex: none; position: relative; width: 96px; aspect-ratio: 4 / 3; overflow: hidden; opacity: .55; transition: opacity .14s; }
.gal-minis a:hover { opacity: 1; }
.gal-minis a.activa { opacity: 1; }
.gal-minis a.activa::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--marca); }
.gal-minis img { width: 100%; height: 100%; object-fit: cover; }
.ficha-panel { position: sticky; top: 16px; background: var(--panel); padding: clamp(18px, 2vw, 26px); }
.ficha-panel h1 { font-size: clamp(2.1rem, 3.4vw, 2.9rem); margin-top: 14px; }
.ficha-version { color: var(--gris); font-size: 1.08rem; margin-top: 4px; min-height: 1.4em; }
.ficha-precio { font: italic 800 clamp(2.3rem, 3.7vw, 3rem)/1 var(--titulos); color: var(--marca-clara); margin-top: 14px; font-variant-numeric: tabular-nums; }
.ficha-condicion { font-weight: 600; margin-top: 8px; }
.nota-precio { font-size: .96rem; color: var(--gris); margin-block: 8px 18px; }
.ficha-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); }
.ficha-datos dt { color: var(--gris); font-size: .94rem; line-height: 1.2; }
.ficha-datos dd { font-weight: 600; font-size: 1.14rem; line-height: 1.2; margin-top: 2px; }
.ficha-texto { max-width: 44em; margin-top: clamp(28px, 4vw, 44px); }
.ficha-texto h2, .otros h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.ficha-texto p { margin-top: 10px; color: #D8D8DC; }
.otros { margin-top: clamp(36px, 5vw, 60px); }
.otros .grilla { margin-top: 18px; }
/* elegir con qué vendedor hablar: ventana chica, sin depender de scripts */
.elegir > summary { list-style: none; cursor: pointer; }
.elegir > summary::-webkit-details-marker { display: none; }
.ficha-panel:has(.elegir[open]) { z-index: 70; } /* el panel es sticky: sin esto la barra de arriba queda encima */
.elegir[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .72); cursor: default; }
.elegir-caja { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 420px); max-height: 86vh; overflow: auto; background: var(--panel-2); border-top: 4px solid var(--marca); padding: 22px 18px 18px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8); }
.elegir-tit { font: italic 800 1.35rem/1.1 var(--titulos); text-transform: uppercase; margin: 0 34px 14px 0; }
.elegir-cerrar { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: none; color: var(--gris); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.elegir-lista { list-style: none; padding: 0; display: grid; gap: 10px; }
.elegir-lista a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--linea); color: inherit; text-decoration: none; }
.elegir-lista a:hover { border-color: var(--marca); }
.elegir-foto { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; background: var(--panel-2); }
.elegir-foto img { width: 100%; height: 100%; object-fit: cover; }
.elegir-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.elegir-txt small { color: var(--gris); font-size: .9rem; }
.elegir-lista .ico { width: 30px; height: 30px; flex: none; color: #25D366; }
.vendedor { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); }
.vendedor-quien { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vendedor-foto { width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; background: var(--panel-2); }
.vendedor-foto img { width: 100%; height: 100%; object-fit: cover; }
.vendedor-tit { color: var(--gris); font-size: .94rem; line-height: 1.2; }
.vendedor-nom { font-weight: 600; font-size: 1.14rem; line-height: 1.25; }
.vendedor-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-sec { flex: 1 1 120px; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .3em .8em; border: 1px solid var(--gris); color: var(--blanco); font: italic 600 1rem/1.1 var(--titulos); text-transform: uppercase; text-decoration: none; text-align: center; transition: background-color .14s, border-color .14s; }
a.btn-sec:hover { background: var(--panel-2); border-color: var(--blanco); }
.btn-sec-falta { border: 0; padding: 0; }
.vendido { background: var(--panel-2); border-left: 6px solid var(--marca); padding: 16px; margin-top: 16px; }
.vendido-tit { font: italic 700 1.4rem/1.1 var(--titulos); text-transform: uppercase; }
.vendido .btn { margin-top: 12px; }
.cta-fija { display: none; }

/* crédito */
.ficha-credito { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; color: var(--blanco); text-underline-offset: 3px; text-decoration-color: var(--marca); font-weight: 500; }
.credito { padding-block: clamp(20px, 3vw, 40px) clamp(44px, 6vw, 72px); }
.credito-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.credito-txt h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); margin-block: 16px 14px; }
.credito-txt h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-block: 28px 14px; }
.credito-intro { font-size: 1.2rem; color: #D8D8DC; max-width: 30em; }
.credito-pasos { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.credito-pasos .paso-n { font-size: 2.8rem; width: 1.1em; }
.credito-pasos h3 { font-size: 1.24rem; }
.credito-docs { padding-left: 20px; list-style: disc; }
.credito-form { background: var(--panel); padding: clamp(18px, 2.4vw, 30px); display: grid; gap: 14px; }
.credito-form h2 { font-size: 1.6rem; }
.dos-c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.campo-c { display: grid; gap: 5px; min-width: 0; font-weight: 500; }
.campo-c input, .campo-c select, .campo-c textarea { width: 100%; min-height: 50px; padding: 10px 12px; background: var(--fondo); border: 1px solid var(--linea); color: var(--blanco); font: inherit; font-size: 17px; font-weight: 400; }
.campo-c textarea { resize: vertical; }
.campo-c input[name=patente] { text-transform: uppercase; }
.campo-c [aria-invalid=true] { border-color: #FF9C9C; }
.nota-anio { background: var(--fondo); border-left: 3px solid var(--marca); padding: 10px 12px; line-height: 1.4; }
.campo-c input:focus, .campo-c select:focus, .campo-c textarea:focus { border-color: var(--blanco); outline: none; }
.acepto { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 1.35; }
.acepto-opcional span { color: #C9C9CF; }
.acepto input { flex: none; width: 24px; height: 24px; margin-top: 1px; accent-color: var(--marca); }
.error-c { color: #FF9C9C; font-weight: 500; }
.credito-previa { background: var(--fondo); padding: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.previa-tit { font-weight: 600; margin-bottom: 6px; }

.aviso-datos { font-size: .94rem; line-height: 1.4; color: #C9C9CF; }
.aviso-datos a { color: var(--blanco); text-underline-offset: 3px; }

/* cómo tratamos los datos */
.politica { padding-block: clamp(24px, 4vw, 48px) clamp(44px, 6vw, 72px); }
.politica .ancho > * { max-width: 46em; }
.politica h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.politica h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-block: 26px 8px; }
.politica-fecha { color: var(--gris); margin-top: 8px; }
.politica ul { list-style: disc; padding-left: 20px; display: grid; gap: 8px; }
.politica p + p { margin-top: 8px; }
.politica ul + p { margin-top: 10px; }
.politica a { text-underline-offset: 3px; }
.pie a { display: inline-block; padding-block: 8px; text-underline-offset: 3px; }

/* visor de fotos */
.visor { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; background: rgba(6, 6, 7, .97); color: var(--blanco); }
.visor[open] { display: flex; align-items: center; justify-content: center; }
.visor::backdrop { background: rgba(6, 6, 7, .97); }
.visor > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor .flecha { z-index: 2; }
.visor-cerrar { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 2; width: 48px; height: 48px; border: 0; background: rgba(255, 255, 255, .14); color: var(--blanco); font: 500 2rem/1 var(--texto); cursor: pointer; }
.visor-cuenta { position: absolute; bottom: calc(12px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font: 600 1rem/1 var(--texto); }

/* paso a WhatsApp y página no encontrada */
.paso-wsp { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.no-esta { padding-block: clamp(40px, 8vw, 90px); }
.no-esta h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin-top: 18px; }
.no-esta p:not(.sello) { margin-block: 8px 20px; color: #D8D8DC; }

/* iPad y pantallas medianas */
@media (max-width: 1040px) {
  .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vendidos-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clientes-muro { columns: 3; }
  .equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opiniones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .menu { display: none; }
  .menu-movil { display: block; }
  .barra-in { gap: 12px; }
  .bajada { max-width: 40vw; }
  .con-js .buscador { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; width: 42vw; }
  .con-js .buscador .btn { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .ficha-grid, .local-grid, .credito-grid { grid-template-columns: minmax(0, 1fr); }
  .poster { max-width: 460px; }
  .ficha-panel { position: static; }
  .ficha-panel .btn-grande { display: none; }
  .nota-precio { margin-bottom: 0; }
  .con-cta { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .cta-fija { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--panel-2); box-shadow: 0 -1px 0 var(--linea); padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom)); }
  .cta-fija p { font: italic 800 1.45rem/1 var(--titulos); font-variant-numeric: tabular-nums; }
  .cta-fija .btn { flex: none; min-width: 150px; }
  .contacto-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* teléfono */
@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .vendidos-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vendido-cartel { top: 7px; font-size: .78rem; padding: 4px 9px; }
  .clientes-muro { columns: 2; }
  .barra-in { min-height: 66px; gap: 12px; }
  .marca .logo { height: 26px; }
  .barra .btn-chico span { display: none; }
  .barra .btn-chico { padding-inline: .9em; font-size: 1.1rem; }
  .portada { min-height: 0; align-items: flex-end; padding-top: 300px; }
  .portada-img { inset: 0 0 auto 0; height: 340px; clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); }
  .portada-img::after { background: linear-gradient(180deg, rgba(10, 10, 11, .6), rgba(10, 10, 11, 0) 40%); }
  .portada-img .portada-logo { display: none; } /* en el teléfono el logo ya va arriba, y aquí tapaba el auto */
  .franjas, .fantasma { display: none; }
  /* con avisos, la barra va arriba con fondo y cada aviso es cuadrado, como un post: lo primero que se ve al abrir la página */
  .con-avisos .barra { position: relative; background: var(--fondo); }
  .con-avisos .portada { flex-direction: column; align-items: stretch; padding-top: 0; }
  .portada-img.avisos { position: relative; inset: auto; height: auto; clip-path: none; }
  .avisos-pista { position: relative; inset: auto; align-items: stretch; }
  .aviso-slide { height: auto; }
  .aviso-enlace { position: relative; inset: auto; display: grid; grid-template: "m" auto "t" auto "c" 1fr / minmax(0, 1fr); height: 100%; }
  .aviso-media, .aviso-tipo-propia .aviso-media { position: relative; inset: auto; grid-area: m; aspect-ratio: 1; }
  .aviso-media::after { background: linear-gradient(0deg, rgba(10, 10, 11, .94), rgba(10, 10, 11, .55) 40%, rgba(10, 10, 11, 0) 66%); }
  .aviso-txt { position: relative; grid-area: m; align-self: end; left: auto; right: auto; bottom: auto; padding: 0 var(--margen) 18px; }
  .aviso-tipo-propia .aviso-txt { display: none; } /* todo el aviso se toca; así todos miden lo mismo y no queda un hueco bajo los más bajos */
  .aviso-tit { font-size: 2.05rem; }
  .aviso-det { font-size: 1.05rem; }
  .aviso-cond { position: static; grid-area: c; padding: 10px var(--margen) 4px; }
  .avisos-ctl { right: 8px; top: 8px; bottom: auto; background: rgba(10, 10, 11, .62); }
  .con-avisos .portada-txt { padding-top: 18px; }
  .portada h1 { font-size: 15.2vw; }
  .bajada { font-size: 1.12rem; max-width: none; }
  .con-js .buscador { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buscador label:nth-child(3) { grid-column: 1 / -1; }
  .selects label:last-child { grid-column: 1 / -1; }
  .cabeza::after { display: none; }
  .grilla { grid-template-columns: minmax(0, 1fr); }
  .selects { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .selects label { flex-direction: column; align-items: stretch; gap: 3px; font-size: .9rem; min-width: 0; }
  .selects select { width: 100%; max-width: none; }
  .ofertas { grid-template-columns: minmax(0, 1fr); }
  .oferta { min-height: 300px; }
  .opiniones { grid-template-columns: minmax(0, 1fr); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico { grid-auto-rows: 42vw; }
  .mosaico li { grid-column: span 6; }
  .mosaico li:nth-child(5n + 1) { grid-column: span 12; grid-row: span 2; }
  .mosaico li:nth-child(5n + 2), .mosaico li:nth-child(5n + 3) { grid-column: span 6; }
  .contacto-datos { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .gal-marco { margin-inline: calc(var(--margen) * -1); }
  .gal-minis, .gal-marco .flecha { display: none; }
  .wsp-flotante { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 54px; height: 54px; }
  .pie-in { flex-direction: column; }
}

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