/* CarPro · identidad y maquetación. Las mecánicas de animación viven en forja-motion.css y no se tocan. */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(/fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(/fonts/inter-500.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(/fonts/inter-600.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(/fonts/inter-700.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 700; font-display: swap; src: url(/fonts/montserrat-700.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 800; font-display: swap; src: url(/fonts/montserrat-800.woff2) format("woff2"); }

:root {
  --negro: #0c0b0a;          /* negro cálido del hero, la cabecera y el pie */
  --carbon: #1a1816;
  --papel: #f7f5f1;          /* casi blanco: fondo de lectura */
  --gris: #ece8e1;           /* gris cálido: secciones alternas */
  --blanco: #fff;
  --tinta: #171512;
  --suave: #645e55;
  --linea: #dcd6cc;
  --amarillo: #f6d20a;       /* solo acento */
  --wa: #25d366;
  --wa-tinta: #04260f;
  --bg: var(--papel); --fg: var(--tinta);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Montserrat", "Inter", ui-sans-serif, system-ui, sans-serif;
  --t-xs: .8125rem; --t-sm: .9375rem; --t-md: 1.0625rem;
  --t-lg: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  --t-xl: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  --gutter: clamp(1rem, 4vw, 3rem);
  --sec: clamp(3.5rem, 8vw, 7rem);
  --max: 82rem;
  --r: 16px;
  --cab: 60px;
  --fm-radius: var(--r); --fm-gap: 1rem;
}
@media (min-width: 900px) { :root { --cab: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 1rem); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--t-md)/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 3000; background: var(--amarillo); color: var(--tinta); padding: .7rem 1rem; border-radius: 8px; font-weight: 600; }
.wrap { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.wrap--texto { max-width: 46rem; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--wa { fill: currentColor; stroke: none; }

/* ---------- botones (objetivo táctil mínimo de 48 px; 44 en la variante chica) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: 0 1.4rem; border: 1.5px solid transparent; border-radius: 999px; background: none; font: 600 var(--t-sm)/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .15s; }
.btn:active { transform: scale(.98); }
.btn--tinta { background: var(--tinta); color: var(--papel); }
.btn--tinta:hover { background: #33302b; }
.btn--claro { background: var(--papel); color: var(--tinta); }
.btn--claro:hover { background: var(--blanco); }
.btn--linea { border-color: color-mix(in srgb, currentColor 34%, transparent); }
.btn--linea:hover { border-color: currentColor; }
.btn--wa { background: var(--wa); color: var(--wa-tinta); }
.btn--wa:hover { background: #46e281; }
.btn--texto { padding-inline: .6rem; text-decoration: underline; text-underline-offset: 3px; }
.btn--chico { min-height: 44px; padding: 0 1.05rem; font-size: var(--t-xs); }
.btn--grande { min-height: 56px; padding: 0 1.8rem; font-size: var(--t-md); }
.btn--bloque { width: 100%; }
.icono { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.icono .ico { width: 1.5rem; height: 1.5rem; }
.fila { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.fila--centro { justify-content: center; }
.cuenta { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 999px; background: var(--amarillo); color: var(--tinta); font-size: .75rem; }

/* ---------- cabecera ---------- */
.top { background: var(--negro); color: var(--papel); padding-top: env(safe-area-inset-top, 0px); }
.top__in { display: flex; align-items: center; gap: 1.5rem; height: var(--cab); }
.marca { display: flex; align-items: center; min-height: 44px; }
.marca img { width: auto; height: 22px; }
.top__nav { display: none; margin-left: auto; gap: .25rem; }
.top__nav a, .top__nav button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 0; background: none; border-radius: 999px; font-size: var(--t-sm); font-weight: 500; color: color-mix(in srgb, var(--papel) 72%, transparent); text-decoration: none; cursor: pointer; }
.top__nav a:hover, .top__nav button:hover, .top__nav a[aria-current] { color: var(--papel); }
.top__nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--amarillo); border-radius: 0; }
.top__acc { display: none; }
.top__menu { margin-left: auto; margin-right: -.5rem; }
@media (min-width: 900px) { .marca img { height: 26px; } .top__nav, .top__acc { display: flex; } .top__menu { display: none; } }

/* ---------- hojas: menú, filtros y asistente (dialog nativo) ---------- */
dialog { border: 0; padding: 0; max-width: none; max-height: none; color: var(--tinta); background: var(--papel); }
dialog::backdrop { background: rgb(12 11 10 / .6); }
html:has(dialog[open]) { overflow: hidden; }
.hoja[open] { display: flex; flex-direction: column; }
.hoja__cab { display: flex; align-items: center; justify-content: space-between; padding: .5rem .5rem .5rem 1.25rem; border-bottom: 1px solid var(--linea); }
.hoja__cab b { font: 700 1.05rem/1 var(--display); }
.hoja__pie { padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); }
.hoja--lado { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(88vw, 380px); height: 100dvh; }
.hoja--abajo, .hoja--chat { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-height: 88dvh; border-radius: 20px 20px 0 0; }
.hoja--chat { height: 88dvh; }
@media (min-width: 760px) {
  .hoja--abajo { inset: 0; margin: auto; width: min(92vw, 520px); height: fit-content; border-radius: 20px; }
  .hoja--chat { inset: 0 0 0 auto; width: 420px; height: 100dvh; max-height: none; border-radius: 0; }
}
.menu { flex: 1; overflow-y: auto; padding: .5rem 1.25rem; display: flex; flex-direction: column; }
.menu a, .menu button { display: flex; align-items: center; min-height: 56px; padding: 0; border: 0; border-bottom: 1px solid var(--linea); background: none; font: 600 1.15rem/1.2 var(--display); text-align: left; text-decoration: none; cursor: pointer; }

/* ---------- hero: un auto, un titular, una línea y dos botones ---------- */
.hero { background: var(--negro); color: var(--papel); padding-top: calc(var(--cab) + env(safe-area-inset-top, 0px)); overflow: clip; position: relative; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--papel) 22%, transparent), transparent); }
.hero__in { min-height: calc(100svh - var(--cab) - env(safe-area-inset-top, 0px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(.5rem, 2svh, 1.5rem); padding-block: clamp(1rem, 3svh, 2.5rem) clamp(1.1rem, 3svh, 2.5rem); }
.hero__h1 { font: 600 var(--t-xs)/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--papel) 66%, transparent); display: flex; align-items: center; gap: .7rem; }
.hero__h1::before { content: ""; width: 1.6rem; height: 2px; background: var(--amarillo); flex: none; }
.hero__titular { font: 800 clamp(2.5rem, 11.6vw, 7.2rem)/.96 var(--display); letter-spacing: -.04em; text-wrap: balance; margin-top: .8rem; }
.hero__linea { margin-top: .9rem; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); color: color-mix(in srgb, var(--papel) 78%, transparent); max-width: 26em; }
.hero__auto { position: relative; display: grid; place-items: center; min-height: 0; text-decoration: none; }
.hero__auto::before { content: ""; position: absolute; inset: 8% -10% 0; background: radial-gradient(52% 46% at 50% 62%, #3a352e 0, transparent 72%); pointer-events: none; }
.hero__img { position: relative; width: 100%; height: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.hero__auto:not(.hero__auto--recorte) .hero__img { object-fit: cover; border-radius: var(--r); }
.fm-motion .hero__img { transform: translate3d(0, calc((var(--p, .5) - .5) * -9%), 0); will-change: transform; }
.hero__ficha { position: absolute; left: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: .1rem .7rem; align-items: baseline; font-size: var(--t-xs); color: color-mix(in srgb, var(--papel) 74%, transparent); }
.hero__ficha b { font-weight: 600; color: var(--papel); }
.hero__acc { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: 1fr auto; column-gap: clamp(1rem, 3vw, 3rem); align-items: center; }
  .hero__txt { align-self: end; }
  .hero__in { grid-template-rows: 1.25fr 1fr; }
  .hero__auto { grid-column: 2; grid-row: 1 / span 2; height: 100%; }
  .hero__acc { align-self: start; display: flex; margin-top: 1rem; }
  .hero__acc .btn { min-height: 56px; padding-inline: 1.9rem; font-size: var(--t-md); }
  .hero__titular { font-size: clamp(3.2rem, 5.5vw, 6.6rem); }
  .hero__ficha { left: auto; right: 0; }
}

/* ---------- secciones ---------- */
.sec { padding-block: var(--sec); }
.sec--gris { background: var(--gris); }
.sec--tope { padding-top: calc(var(--cab) + env(safe-area-inset-top, 0px) + 1.5rem); }
.cab { display: grid; gap: .8rem; margin-bottom: clamp(1.5rem, 4vw, 2.75rem); max-width: 44rem; }
.cab h2, .dos h2, .ubic h2 { font-size: var(--t-xl); }
.cab p { color: var(--suave); }
.wrap.cab { max-width: var(--max); }
.wrap.cab > * { max-width: 44rem; }
.sec__pie { margin-top: 2rem; display: flex; justify-content: center; }
.leyenda { margin-top: 1.25rem; font-size: var(--t-xs); line-height: 1.5; color: var(--suave); max-width: 46rem; }
.sec__pie + .leyenda { margin-inline: auto; text-align: center; }
.h-pag { font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3.4rem); margin-top: .6rem; }
.bajada { margin-top: 1rem; font-size: var(--t-lg); line-height: 1.4; color: var(--suave); max-width: 40rem; }
.antet { font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); margin-top: 1rem; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; font-size: var(--t-xs); color: var(--suave); }
.migas a, .migas span { display: inline-flex; align-items: center; min-height: 44px; }
.migas i { font-style: normal; opacity: .5; }
.migas span { color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.interior > .sec:first-child, .interior > article { min-height: 50svh; }
.interior > article { padding-top: calc(var(--cab) + env(safe-area-inset-top, 0px) + .5rem); padding-bottom: var(--sec); }

/* ---------- buscador ---------- */
.buscar { background: var(--papel); padding-block: clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--linea); }
.buscar__t { font-size: var(--t-lg); margin-bottom: 1rem; }
.buscar__form, .filtros { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.buscar__form .btn { grid-column: 1 / -1; }
.campo { display: grid; gap: .3rem; font-size: var(--t-xs); font-weight: 600; color: var(--suave); min-width: 0; }
.campo select { appearance: none; width: 100%; min-height: 50px; padding: 0 2.2rem 0 .9rem; border: 1.5px solid var(--linea); border-radius: 12px; font-size: 1rem; font-weight: 500; color: var(--tinta); background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171512' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center / 1.1rem; text-overflow: ellipsis; }
.campo select:focus-visible { border-color: var(--tinta); }
@media (min-width: 900px) { .buscar__form { grid-template-columns: repeat(4, 1fr) auto; align-items: end; } .buscar__form .btn { grid-column: auto; min-height: 50px; } }
.filtros { padding: 1.25rem; overflow-y: auto; }
.filtros .hoja__pie { grid-column: 1 / -1; margin: .5rem -1.25rem -1.25rem; }
.filtros .hoja__pie .btn { flex: 1; }

/* ---------- tarjeta de auto ---------- */
.rejilla { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .rejilla { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.auto { display: flex; flex-direction: column; height: 100%; background: var(--blanco); border-radius: var(--r); overflow: clip; text-decoration: none; box-shadow: 0 1px 0 var(--linea), 0 14px 30px -24px rgb(23 21 18 / .45); transition: box-shadow .3s, transform .3s; }
.auto:hover { transform: translateY(-3px); box-shadow: 0 1px 0 var(--linea), 0 24px 40px -26px rgb(23 21 18 / .6); }
.auto__foto { display: block; aspect-ratio: 4 / 3; background: var(--gris); }
.auto__foto img { width: 100%; height: 100%; object-fit: cover; }
.auto__foto--recorte { background: radial-gradient(70% 60% at 50% 70%, #fff 0, var(--gris) 75%); padding: 4% 3% 2%; }
.auto__foto--recorte img { object-fit: contain; }
.auto__sinfoto { display: grid; place-items: center; height: 100%; font-size: var(--t-sm); color: var(--suave); }
.auto__cuerpo { display: grid; gap: .3rem; padding: 1rem 1.1rem 1.1rem; flex: 1; align-content: start; }
.auto__nombre { font: 800 1.3rem/1.15 var(--display); letter-spacing: -.02em; }
.auto__nombre small { font: 500 var(--t-sm)/1 var(--font); letter-spacing: 0; color: var(--suave); }
.auto__datos { font-size: var(--t-sm); color: var(--suave); }
.auto__fila { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .5rem; }
.auto__precio { font: 700 1.3rem/1 var(--display); letter-spacing: -.02em; }
.auto__precio small { font: 500 .75rem/1 var(--font); color: var(--suave); }
.auto__precio--pregunta { font-size: 1rem; }
.auto__ver { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; padding-top: .8rem; border-top: 1px solid var(--linea); font-size: var(--t-sm); font-weight: 600; }
.auto__ver .ico { width: 1.1rem; height: 1.1rem; transition: transform .3s; }
.auto:hover .auto__ver .ico { transform: translateX(4px); }
.auto--vendido .auto__foto img { filter: grayscale(1); opacity: .75; }
.auto--vendido .auto__precio { color: var(--suave); text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 600; font-size: 1.05rem; }
.estado { display: inline-flex; align-items: center; min-height: 26px; padding: 0 .7rem; border-radius: 999px; font: 600 .75rem/1 var(--font); letter-spacing: .02em; white-space: nowrap; }
.estado--disponible { background: var(--amarillo); color: var(--tinta); }
.estado--apartado { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.estado--vendido { background: var(--tinta); color: var(--papel); }

/* ---------- carril con swipe ---------- */
.carril { position: relative; }
.carril .fm-carousel__track { padding: .25rem var(--gutter) 1.5rem; scroll-padding-inline: var(--gutter); --fm-slide: min(82vw, 340px); }
@media (min-width: 1400px) { .carril .fm-carousel__track { padding-inline: calc((100vw - var(--max)) / 2); scroll-padding-inline: calc((100vw - var(--max)) / 2); } }
.carril__nav { display: none; }
@media (hover: hover) and (min-width: 900px) {
  .carril__nav { display: flex; gap: .5rem; position: absolute; right: max(var(--gutter), (100vw - var(--max)) / 2); top: -4.25rem; }
  .carril__nav .icono { border: 1.5px solid color-mix(in srgb, var(--tinta) 30%, transparent); }
}

/* ---------- ¿no encontraste?, razones, ubicación, preguntas, cierre ---------- */
.busco { background: var(--blanco); color: var(--tinta); padding-block: clamp(2.5rem, 6vw, 4.5rem); border-block: 1px solid var(--linea); }
.busco h2::before { content: ""; display: block; width: 2.5rem; height: 4px; background: var(--amarillo); margin-bottom: 1.1rem; }
.busco__in { display: grid; gap: 1.5rem; align-items: center; }
.busco h2 { font-size: var(--t-xl); }
.busco p { margin-top: .6rem; font-size: var(--t-lg); line-height: 1.35; color: var(--suave); }
@media (min-width: 800px) { .busco__in { grid-template-columns: 1fr auto; } }
.razones { display: grid; gap: 1rem; }
.razones li { background: var(--blanco); border-radius: var(--r); padding: 1.5rem; box-shadow: 0 1px 0 var(--linea); display: grid; gap: .6rem; align-content: start; }
.razones h3, .razones h2 { font-size: 1.25rem; }
.razones p { color: var(--suave); font-size: var(--t-sm); }
.razones--contacto { margin-block: 2.5rem 2rem; }
.servicios { display: grid; gap: 0 2rem; margin-top: 2.5rem; border-top: 1px solid var(--linea); }
.servicios li { padding: 1.25rem 0; border-bottom: 1px solid var(--linea); display: grid; gap: .35rem; }
.servicios h3 { font: 700 1.05rem/1.25 var(--display); letter-spacing: -.01em; }
.servicios p { color: var(--suave); font-size: var(--t-sm); }
.servicios a, .seo a, .blo a, .prosa a { font-weight: 600; color: var(--tinta); }
@media (min-width: 800px) { .razones { grid-template-columns: repeat(3, 1fr); } .servicios { grid-template-columns: 1fr 1fr; } }
.ubic { background: var(--negro); color: var(--papel); }
.ubic__in { display: grid; gap: 2rem; }
.ubic address { margin-block: 1rem 1.5rem; font-size: var(--t-lg); line-height: 1.35; color: color-mix(in srgb, var(--papel) 82%, transparent); max-width: 22em; }
.horario { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: color-mix(in srgb, var(--papel) 16%, transparent); border-radius: var(--r); overflow: clip; align-self: start; }
.horario div { background: var(--carbon); padding: 1.1rem 1.2rem; }
.horario dt { font-size: var(--t-xs); color: color-mix(in srgb, var(--papel) 60%, transparent); }
.horario dd { font-weight: 600; margin-top: .2rem; font-size: var(--t-sm); }
@media (min-width: 900px) { .ubic__in { grid-template-columns: 1fr 1fr; align-items: center; } }
.dos { display: grid; gap: 3rem; }
@media (min-width: 960px) { .dos { grid-template-columns: 1.1fr .9fr; gap: 4.5rem; } }
.faq { margin-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--tinta) 18%, transparent); }
.fm-faq > summary { min-height: 56px; padding-block: 1rem; }
.fm-faq > summary h3 { font: 600 1.05rem/1.35 var(--font); letter-spacing: 0; }
.fm-faq p { color: var(--suave); max-width: 40rem; }
.seo { display: grid; gap: 1rem; align-content: start; }
.seo p { color: var(--suave); }
.guias-mini { display: grid; gap: .6rem; margin-top: .5rem; }
.guias-mini a { display: grid; gap: .2rem; padding: 1rem 1.1rem; background: var(--blanco); border-radius: 12px; text-decoration: none; }
.guias-mini small, .guias small { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.guias-mini b { font: 700 1rem/1.3 var(--display); letter-spacing: -.01em; }
.cierre { background: var(--negro); color: var(--papel); padding-block: var(--sec); text-align: center; border-bottom: 1px solid color-mix(in srgb, var(--papel) 14%, transparent); }
.cierre h2 { font-size: clamp(2rem, 1.3rem + 4vw, 4.5rem); }
.cierre p { margin: 1rem auto 2rem; font-size: var(--t-lg); color: color-mix(in srgb, var(--papel) 74%, transparent); }

/* ---------- inventario ---------- */
.inv__barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-block: 1.25rem 1.5rem; }
.inv__n { font-weight: 600; margin-right: auto; }
.vacio { background: var(--blanco); border-radius: var(--r); padding: 2rem 1.5rem; display: grid; gap: 1.25rem; }

/* ---------- ficha ---------- */
.detalle { display: grid; gap: 1.5rem; margin-top: .25rem; }
@media (min-width: 960px) { .detalle { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } .compra { position: sticky; top: calc(var(--cab) + 1rem); } }
.gal { min-width: 0; }
.gal__marco { position: relative; border-radius: var(--r); overflow: clip; background: var(--gris); }
@media (max-width: 959px) { .gal__marco { margin-inline: calc(var(--gutter) * -1); border-radius: 0; } }
.gal__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; width: 100%; }
.gal__pista::-webkit-scrollbar { display: none; }
.gal__foto { flex: none; width: 100%; height: 100%; scroll-snap-align: center; display: block; }
.gal__foto img { width: 100%; height: 100%; object-fit: cover; }
.gal__foto--recorte { background: radial-gradient(70% 60% at 50% 70%, #fff 0, var(--gris) 75%); }
.gal__foto--recorte img { object-fit: contain; padding: 3%; }
.gal__nav, .gal__zoom { position: absolute; background: rgb(12 11 10 / .62); color: #fff; }
.gal__nav { top: 50%; translate: 0 -50%; }
.gal__nav--ant { left: .6rem; } .gal__nav--sig { right: .6rem; }
.gal__nav:disabled { opacity: 0; pointer-events: none; }
.gal__zoom { right: .6rem; bottom: .6rem; }
.gal__n { position: absolute; left: .75rem; bottom: .75rem; padding: .35rem .7rem; border-radius: 999px; background: rgb(12 11 10 / .62); color: #fff; font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.gal__sello { position: absolute; left: .75rem; top: .75rem; padding: .5rem .9rem; border-radius: 999px; background: var(--tinta); color: var(--papel); font: 700 .85rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.gal__tira { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-block: .6rem; }
.gal__tira::-webkit-scrollbar { display: none; }
.gal__tira button { flex: none; width: 76px; height: 57px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: clip; background: var(--gris); cursor: pointer; opacity: .6; }
.gal__tira button[aria-current] { border-color: var(--tinta); opacity: 1; }
.gal__tira img { width: 100%; height: 100%; object-fit: cover; }
.gal--vacia { background: var(--gris); border-radius: var(--r); padding: 3rem 1.5rem; text-align: center; color: var(--suave); }
.compra { display: grid; gap: .9rem; justify-items: start; }
.compra h1 { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.8rem); }
.compra h1 span { display: block; margin-top: .45rem; font: 500 var(--t-md)/1.3 var(--font); letter-spacing: 0; color: var(--suave); }
.compra__precio { font: 800 clamp(2rem, 1.6rem + 2vw, 2.7rem)/1 var(--display); letter-spacing: -.03em; }
.compra__precio small { font: 500 .9rem/1 var(--font); color: var(--suave); letter-spacing: 0; }
.compra .leyenda { margin-top: 0; }
.compra__aviso { padding: 1rem 1.1rem; border-radius: 12px; background: var(--gris); font-size: var(--t-sm); width: 100%; }
.compra__aviso b { display: block; font: 700 1.1rem/1.3 var(--display); margin-bottom: .2rem; }
.compra__ref { font-size: var(--t-sm); color: var(--suave); }
.clave { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; width: 100%; background: var(--linea); border-radius: 12px; overflow: clip; margin-top: .4rem; box-shadow: 0 0 0 1px var(--linea); }
.clave div { background: var(--blanco); padding: .8rem .85rem; min-width: 0; }
.clave dt, .specs dt { font-size: .75rem; color: var(--suave); }
.clave dd { font-weight: 600; font-size: var(--t-sm); line-height: 1.3; margin-top: .15rem; overflow-wrap: anywhere; }
.blo { margin-top: clamp(2rem, 5vw, 3.25rem); max-width: 50rem; display: grid; gap: .9rem; }
.blo h2 { font-size: var(--t-lg); }
.blo p { color: var(--suave); }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.specs div { padding: .7rem 0; border-bottom: 1px solid var(--linea); min-width: 0; }
.specs dd { font-weight: 600; font-size: var(--t-sm); overflow-wrap: anywhere; }
@media (min-width: 700px) { .specs { grid-template-columns: repeat(3, 1fr); } }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { padding: .5rem .9rem; border-radius: 999px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); font-size: var(--t-sm); }
.previa { position: relative; z-index: 5; margin-top: calc(var(--cab) + env(safe-area-inset-top, 0px)); padding: .8rem var(--gutter); background: var(--amarillo); font-size: var(--t-sm); }
.previa + article { padding-top: .5rem; }
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; margin: 0; background: #000; color: #fff; }
.lightbox[open] { display: block; }
.lightbox .gal__pista { height: 100%; }
.lightbox .gal__foto { display: grid; place-items: center; }
.lightbox .gal__foto img { object-fit: contain; }
.lightbox .gal__zoom { top: calc(.6rem + env(safe-area-inset-top, 0px)); bottom: auto; }
.lightbox .gal__n { bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }

/* barra de compra en celular: ocupa su propio espacio al pie, no tapa contenido */
.barra { position: fixed; inset: auto 0 0 0; z-index: 800; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--blanco); border-top: 1px solid var(--linea); transition: transform .3s var(--fm-ease); }
.barra.is-fuera { transform: translateY(105%); }
.barra__p { display: grid; min-width: 0; }
.barra__p small { font-size: .75rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra__p b { font: 700 1.1rem/1.2 var(--display); }
.con-barra { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 960px) { .barra { display: none; } .con-barra { padding-bottom: 0; } }

/* ---------- guías ---------- */
.guias { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 700px) { .guias { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .guias { grid-template-columns: repeat(3, 1fr); } }
.guias a { display: grid; gap: .6rem; height: 100%; align-content: start; padding: 1.4rem; background: var(--blanco); border-radius: var(--r); text-decoration: none; box-shadow: 0 1px 0 var(--linea); }
.guias h2 { font-size: 1.2rem; line-height: 1.2; }
.guias p { font-size: var(--t-sm); color: var(--suave); }
.guias span { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-sm); font-weight: 600; margin-top: .3rem; }
.prosa { margin-top: 1.5rem; display: grid; gap: 1.1rem; }
.prosa > p:first-child { font-size: var(--t-lg); line-height: 1.45; color: var(--tinta); padding: 1.2rem 1.3rem; background: var(--blanco); border-left: 4px solid var(--amarillo); border-radius: 0 12px 12px 0; }
.prosa p { color: #3d3933; }
.prosa h2 { font-size: var(--t-lg); margin-top: 1.4rem; }
.prosa h3 { font-size: 1.15rem; }
.article-cta, .article-note { display: grid; gap: .8rem; justify-items: start; padding: 1.5rem; border-radius: var(--r); background: var(--gris); margin-top: 1rem; }
.related-links { display: grid; margin-top: .8rem; border-top: 1px solid var(--linea); }
.related-links a { display: flex; align-items: center; min-height: 52px; padding: .6rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; }

/* ---------- pie ---------- */
.pie { background: var(--negro); color: color-mix(in srgb, var(--papel) 76%, transparent); font-size: var(--t-sm); padding-block: 3rem calc(2rem + env(safe-area-inset-bottom, 0px)); }
.pie__in { display: grid; gap: 2rem; }
@media (min-width: 800px) { .pie__in { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pie__marca img { width: 150px; margin-bottom: 1rem; }
.pie__serv { margin-top: .6rem; font-size: var(--t-xs); opacity: .8; }
.pie__t { font: 600 var(--t-xs)/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--papel); margin-bottom: .8rem; }
.pie a { display: inline-block; padding-block: .35rem; color: var(--papel); text-underline-offset: 3px; }
.pie__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--papel) 14%, transparent); font-size: var(--t-xs); display: grid; gap: .6rem; opacity: .85; }

/* ---------- asistente ---------- */
.chat__log { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .6rem; overscroll-behavior: contain; }
.chat__msg { max-width: 88%; padding: .7rem .95rem; border-radius: 16px; font-size: var(--t-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__msg--bot { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat__msg--yo { background: var(--tinta); color: var(--papel); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat__msg--espera { color: var(--suave); }
.chat__autos { display: grid; gap: .5rem; }
.chat__auto { display: grid; grid-template-columns: 92px 1fr; gap: .75rem; align-items: center; padding: .5rem; background: var(--blanco); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--linea); text-decoration: none; min-height: 72px; }
.chat__auto img { width: 92px; height: 66px; object-fit: contain; border-radius: 8px; background: var(--gris); }
.chat__auto b { display: block; font-size: var(--t-sm); line-height: 1.25; }
.chat__auto span { font-size: var(--t-xs); color: var(--suave); }
.chat__acc { display: flex; flex-wrap: wrap; gap: .5rem; }
.chat__acc .btn { min-height: 44px; padding-inline: 1rem; font-size: var(--t-xs); white-space: normal; text-align: left; }
.chat__form { display: flex; gap: .5rem; padding: .75rem 1.1rem; border-top: 1px solid var(--linea); }
.chat__form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 1rem; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--blanco); font-size: 1rem; }
.chat__form .btn { background: var(--tinta); color: var(--papel); min-height: 48px; }
.chat__nota { padding: 0 1.1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); font-size: .75rem; line-height: 1.4; color: var(--suave); }
/* el recorte de estudio termina en un reflejo: se desvanece para que no corte en seco */
.hero__auto--recorte .hero__img { -webkit-mask-image: linear-gradient(#000 78%, transparent 97%); mask-image: linear-gradient(#000 78%, transparent 97%); }
@media (max-width: 520px) { .clave { grid-template-columns: 1fr 1fr; } .clave div:nth-child(3):last-child { grid-column: 1 / -1; } }
.clave dd, .specs dd { overflow-wrap: break-word; }