/* Car Studio Store — catálogo.
   Concepto: la portada es la pantalla de una cámara para carro (marco del visor, REC y hora de Bogotá);
   el catálogo es blanco y sobrio para que mande la foto del producto. Negro y dorado, móvil primero. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(fuentes/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(fuentes/barlow-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(fuentes/barlow-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(fuentes/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(fuentes/barlow-condensed-latin-700-normal.woff2) format("woff2"); }

:root {
  --noche: #000000;
  --grafito: #1f2023;
  --oro: #c9a44c;
  --oro-claro: #e7d3a0;
  --papel: #ffffff;
  --niebla: #f3f3f1;
  --tinta: #17181a;
  --gris: #5f6065;
  --linea: #deddd8;
  --linea-oscura: #cfcec8;
  --ok: #1e7a4c;
  --ultimas: #9a5a00;
  --promo: #c4271f;
  --rec: #e5322d;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --texto: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho: 1180px;
  --g: 16px;
  --barra-alto: 60px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--barra-alto) + 60px); }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1rem/1.55 var(--texto); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--oro); color: var(--noche); padding: 8px 12px; z-index: 50; }
.saltar:focus { left: 8px; }
.ico { flex: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px;
  border-radius: 4px; font: 600 1rem/1 var(--texto); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; }
.btn--oro { background: var(--oro); color: var(--noche); }
.btn--oro:hover { background: var(--oro-claro); }
.btn--linea-tinta { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.btn--linea-tinta:hover { background: var(--tinta); color: var(--papel); }
.btn--chico { min-height: 38px; padding: 0 12px; font-size: .92rem; }
.btn--ancho { width: 100%; min-height: 54px; font-size: 1.08rem; }

/* ---------- barra superior ---------- */
.barra { background: var(--noche); color: var(--papel); position: sticky; top: 0; z-index: 30; }
.barra__in { max-width: var(--ancho); height: var(--barra-alto); margin: 0 auto; padding: 0 var(--g); display: flex; align-items: center; gap: 16px; }
.marca img { width: 118px; height: auto; }
.menu { display: none; margin-left: auto; gap: 26px; }
.menu a { text-decoration: none; font-weight: 500; color: #d6d6d6; }
.menu a:hover { color: var(--oro-claro); }
.barra .btn { margin-left: auto; }
@media (min-width: 860px) {
  .menu { display: flex; }
  .barra .btn { margin-left: 8px; }
  .marca img { width: 138px; }
}

/* ---------- visor (portada) ---------- */
.visor { background: var(--noche); color: var(--papel); padding: 12px var(--g) 22px; }
.visor__marco { position: relative; max-width: var(--ancho); margin: 0 auto; padding: 50px 18px 40px; display: grid; gap: 4px;
  background:
    linear-gradient(var(--oro), var(--oro)) top left / 24px 2px,
    linear-gradient(var(--oro), var(--oro)) top left / 2px 24px,
    linear-gradient(var(--oro), var(--oro)) top right / 24px 2px,
    linear-gradient(var(--oro), var(--oro)) top right / 2px 24px,
    linear-gradient(var(--oro), var(--oro)) bottom left / 24px 2px,
    linear-gradient(var(--oro), var(--oro)) bottom left / 2px 24px,
    linear-gradient(var(--oro), var(--oro)) bottom right / 24px 2px,
    linear-gradient(var(--oro), var(--oro)) bottom right / 2px 24px;
  background-repeat: no-repeat; }
.osd { position: absolute; margin: 0; font: 600 .92rem/1 var(--display); letter-spacing: .07em; color: var(--oro-claro);
  font-variant-numeric: tabular-nums; white-space: pre; }
.osd--rec { top: 18px; left: 18px; display: flex; align-items: center; gap: 7px; color: var(--papel); }
.osd__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); animation: rec 1.6s steps(1) infinite; }
.osd--hora { top: 18px; right: 18px; }
.osd--gps { bottom: 14px; right: 18px; color: #8a8a8a; font-size: .82rem; }
@keyframes rec { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .osd__punto { animation: none; } }
.visor__texto { min-width: 0; }
.visor__titulo { font-size: clamp(2.8rem, 13vw, 5.4rem); line-height: .94; letter-spacing: -.01em; max-width: 9ch; }
.visor__lead { color: #cfcfcf; font-size: 1.06rem; line-height: 1.5; max-width: 34ch; margin: 16px 0 22px; }
.visor__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.visor__wa { color: var(--oro-claro); font-weight: 500; text-underline-offset: 3px; }
.visor__wa:hover { color: var(--papel); }
.visor__foto { position: relative; margin: 22px 0 0; display: grid; justify-items: center; }
.visor__foto::before { content: ""; position: absolute; left: 50%; top: 46%; width: 118%; aspect-ratio: 1.6; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, 0)); pointer-events: none; }
.visor__foto a { position: relative; display: block; }
.visor__foto img { width: min(100%, 400px); }
.visor__foto figcaption { position: relative; margin-top: 12px; font-size: .86rem; color: #9b9b9b; text-align: center; max-width: 36ch; }
.visor__foto figcaption a { display: inline; color: #e2e2e2; text-underline-offset: 3px; }
@media (min-width: 960px) {
  .visor { padding: 20px var(--g) 36px; }
  .visor__marco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: 84px 64px 70px; }
  .osd--rec, .osd--hora { top: 26px; }
  .osd--rec { left: 30px; }
  .osd--hora, .osd--gps { right: 30px; }
  .osd--gps { bottom: 22px; }
  .visor__foto { margin: 0; }
  .visor__foto img { width: min(100%, 540px); }
}

/* ---------- encabezados de sección ---------- */
.seccion__cab { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--g); }
.destacadas h2, .selector h2, .familia__cab h2 { font-size: clamp(1.75rem, 6.6vw, 2.5rem); }

/* ---------- más vendidas ---------- */
.destacadas { padding: 36px 0 4px; }
.destacadas h2 { max-width: 18ch; }
@media (min-width: 760px) { .destacadas h2 { max-width: none; } }
.destacadas__lista { list-style: none; max-width: var(--ancho); margin: 20px auto 0; padding: 0 var(--g); display: grid; gap: 18px; }
.destacada { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); grid-template-areas: "foto info" "btn btn";
  gap: 12px 16px; padding-bottom: 20px; border-bottom: 1px solid var(--linea); }
.destacada:last-child { border-bottom: 0; padding-bottom: 0; }
.destacada__foto { grid-area: foto; align-self: start; background: var(--papel); border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; aspect-ratio: 1; }
.destacada__foto img { width: 100%; height: 100%; object-fit: contain; }
.destacada__info { grid-area: info; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.destacada__nombre { font-size: 1.32rem; font-weight: 600; line-height: 1.08; }
.destacada__nombre a { text-decoration: none; }
.destacada__nombre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.destacada__sub { margin: 5px 0 10px; font-size: .9rem; color: var(--gris); line-height: 1.35; }
.destacada__btn { grid-area: btn; }
@media (min-width: 760px) {
  .destacadas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .destacada { grid-template-columns: minmax(0, 1fr); grid-template-areas: "foto" "info" "btn"; grid-template-rows: auto 1fr auto;
    border-bottom: 0; padding-bottom: 0; gap: 14px; }
  .destacada__info { justify-content: flex-start; }
  .destacada__nombre { font-size: 1.5rem; }
}

/* ---------- selector ---------- */
.selector { background: var(--niebla); margin-top: 40px; padding: 38px var(--g) 34px; }
.selector__in { max-width: var(--ancho); margin: 0 auto; }
.selector__lista { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--linea-oscura); }
.selector__lista a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 30px 16px 0;
  text-decoration: none; border-bottom: 1px solid var(--linea-oscura); }
.selector__lista a::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--tinta); border-top: 2px solid var(--tinta); transform: translateY(-50%) rotate(45deg); }
.selector__necesidad { font-size: 1.04rem; }
.selector__lista a:hover .selector__necesidad { text-decoration: underline; text-underline-offset: 3px; }
.selector__respuesta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.selector__nombre { font: 600 1.14rem/1.15 var(--display); }
.selector__precio { font: 600 1.05rem/1.15 var(--display); color: var(--gris); font-variant-numeric: tabular-nums; }
.selector__pie { margin-top: 16px; color: var(--gris); max-width: 62ch; }
.selector__pie a { color: var(--tinta); text-underline-offset: 3px; }
@media (min-width: 640px) {
  .selector__lista a { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
  .selector__respuesta { flex-direction: column; align-items: flex-end; text-align: right; }
}
@media (min-width: 960px) {
  .selector__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; gap: 14px 56px; align-items: start; }
  .selector__lista { margin: 0; grid-column: 2; grid-row: 1 / span 2; }
  .selector__pie { grid-column: 1; grid-row: 2; margin-top: 0; }
}

/* ---------- categorías ---------- */
.chips { position: sticky; top: var(--barra-alto); z-index: 20; background: var(--papel); border-bottom: 1px solid var(--linea); }
.chips__in { display: flex; gap: 8px; overflow-x: auto; max-width: var(--ancho); margin: 0 auto; padding: 10px var(--g); scrollbar-width: none; }
.chips__in::-webkit-scrollbar { display: none; }
.chip { flex: none; text-decoration: none; border: 1px solid var(--linea-oscura); border-radius: 999px; padding: 7px 14px; font-weight: 500; font-size: .93rem; background: var(--papel); }
.chip:hover { border-color: var(--tinta); }
.chip--promo { color: var(--promo); border-color: var(--promo); }

/* ---------- familias y tarjetas ---------- */
.familia { max-width: var(--ancho); margin: 0 auto; padding: 36px var(--g) 4px; }
.familia__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 18px; }
.familia__enlace { font-weight: 600; text-underline-offset: 3px; }
.familia__nota { flex-basis: 100%; color: var(--gris); max-width: 62ch; margin-top: 4px; }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
@media (min-width: 700px) { .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 20px; } }
@media (min-width: 1040px) { .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tarjeta { display: flex; flex-direction: column; min-width: 0; }
.tarjeta__enlace { text-decoration: none; display: block; }
.tarjeta__foto { position: relative; background: var(--papel); border: 1px solid var(--linea); border-radius: 6px; aspect-ratio: 1; overflow: hidden; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta__marca { margin: 10px 0 2px; font-size: .8rem; color: var(--gris); font-weight: 500; }
.tarjeta__nombre { font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.tarjeta__enlace:hover .tarjeta__nombre { text-decoration: underline; text-underline-offset: 3px; }
.tarjeta__sub { margin-top: 4px; font-size: .88rem; color: var(--gris); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta__pie { margin-top: auto; padding-top: 10px; }
.tarjeta__pie .btn { width: 100%; margin-top: 10px; min-height: 42px; padding: 0 8px; font-size: .95rem; }
.tarjeta--agotado .tarjeta__foto img { opacity: .55; filter: grayscale(1); }
.sello { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 5px 8px; border-radius: 3px; font: 600 .78rem/1 var(--texto); background: var(--tinta); color: var(--papel); }
.sello--promo { background: var(--promo); }
.precio { font: 700 1.5rem/1 var(--display); font-variant-numeric: tabular-nums; }
.precio--medio { font-size: 1.8rem; }
.precio--grande { font-size: 2.7rem; }
.estado { margin-top: 6px; font-size: .88rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.estado--disponible { color: var(--ok); }
.estado--ultimas { color: var(--ultimas); }
.estado--agotado { color: var(--gris); }
.estado--promo { color: var(--promo); }

/* ---------- historia ---------- */
.historia { margin-top: 56px; padding: 52px var(--g) 64px; border-top: 1px solid var(--linea); }
.historia__in { max-width: 640px; margin: 0 auto; }
.historia h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); margin-bottom: 16px; }
.historia p { font-size: 1.1rem; line-height: 1.65; margin-bottom: 14px; }
.historia__firma { margin-top: 22px; font: 600 1.15rem/1.2 var(--display); color: var(--gris); }

/* ---------- ficha de producto ---------- */
.migas { max-width: var(--ancho); margin: 0 auto; padding: 14px var(--g) 0; font-size: .9rem; color: var(--gris); }
.migas a { color: var(--gris); text-underline-offset: 3px; }
.ficha { max-width: var(--ancho); margin: 0 auto; padding: 12px var(--g) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ficha > * { min-width: 0; }
.galeria { position: relative; }
@media (min-width: 900px) {
  .ficha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 52px; align-items: start; }
  .galeria { position: sticky; top: calc(var(--barra-alto) + 16px); }
}
.galeria__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border: 1px solid var(--linea); border-radius: 8px; scrollbar-width: none; background: var(--papel); }
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__foto { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 1; }
.galeria__foto img { width: 100%; height: 100%; object-fit: contain; }
.sello--galeria { top: 12px; left: 12px; }
.galeria__minis { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.galeria__mini { flex: none; padding: 0; border: 1px solid var(--linea); border-radius: 4px; background: var(--papel); cursor: pointer; width: 60px; height: 60px; overflow: hidden; }
.galeria__mini img { width: 100%; height: 100%; object-fit: contain; }
.galeria__mini[aria-current="true"] { border: 2px solid var(--tinta); }
.ficha__marca { color: var(--gris); font-weight: 500; margin-bottom: 4px; }
.ficha__nombre { font-size: clamp(2rem, 7.4vw, 2.9rem); }
.ficha__sub { margin-top: 8px; font-size: 1.08rem; color: #3a3b3f; }
.ficha__compra { margin: 22px 0 26px; padding: 20px; background: var(--niebla); border-radius: 8px; }
.ficha__promo { margin-top: 10px; font-size: .93rem; color: var(--promo); font-weight: 500; }
.ficha__condiciones { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 6px; font-size: .95rem; color: #3a3b3f; }
.ficha__condiciones li { position: relative; padding-left: 16px; }
.ficha__condiciones li::before { content: ""; position: absolute; left: 1px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); }
.ficha__ayuda { margin-top: 10px; font-size: .88rem; color: var(--gris); text-align: center; }
.ficha__desc { font-size: 1.06rem; max-width: 62ch; }
.ficha__h2 { font-size: 1.55rem; margin: 26px 0 8px; }
.lista-check { padding: 0; margin: 0; list-style: none; }
.lista-check li { position: relative; padding: 8px 0 8px 26px; border-bottom: 1px solid var(--linea); }
.lista-check li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border-left: 2px solid var(--oro); border-bottom: 2px solid var(--oro); transform: rotate(-45deg); }
.datos { margin: 26px 0 0; }
.datos div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.datos dt { color: var(--gris); }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.familia--relacionados { margin-top: 32px; padding-bottom: 56px; border-top: 1px solid var(--linea); }
.barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--noche); color: var(--papel);
  transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
.barra-compra.visible { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
.barra-compra__texto { min-width: 0; }
.barra-compra__nombre { margin-bottom: 4px; font-size: .82rem; color: #bdbdbd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-compra .precio { color: var(--papel); font-size: 1.35rem; }
@media (min-width: 900px) { .barra-compra { display: none; } }
@media (prefers-reduced-motion: reduce) { .barra-compra { transition: none; } }

/* ---------- páginas de texto ---------- */
.texto { max-width: 720px; margin: 0 auto; padding: 16px var(--g) 0; font-size: 1.05rem; }
.texto h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); margin: 8px 0 16px; }
.texto h2 { font-size: 1.65rem; margin: 32px 0 8px; }
.texto p { margin: 0 0 12px; }
.texto .entradilla { font-size: 1.18rem; color: #3a3b3f; }
.texto li { margin: 6px 0; }
.texto a { text-underline-offset: 3px; }
.tabla-envoltura { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-weight: 600; color: var(--gris); }
.pasos { padding: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; position: relative; padding-left: 52px; margin: 22px 0; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--noche); color: var(--oro);
  font: 700 1.2rem/36px var(--display); text-align: center; }
.pasos h2 { margin: 4px 0 4px; font-size: 1.35rem; }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary { cursor: pointer; padding: 14px 28px 14px 0; font-weight: 600; list-style: none; position: relative; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font: 500 1.5rem/1 var(--texto); color: var(--gris); }
.pregunta[open] summary::after { content: "−"; }
.pregunta p { margin: 0 0 16px; }
.ayuda { background: var(--noche); color: var(--papel); margin-top: 48px; padding: 40px var(--g); }
.ayuda > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.ayuda h2 { font-size: clamp(1.7rem, 6vw, 2.2rem); }
.ayuda p { color: #cfcfcf; margin: 10px auto 18px; }

/* ---------- pie ---------- */
.pie { background: var(--noche); color: #bdbdbd; padding: 44px var(--g) 24px; font-size: .95rem; }
.ayuda + .pie { border-top: 1px solid #2a2a2a; }
.pie__in { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 28px; }
@media (min-width: 760px) { .pie__in { grid-template-columns: 2fr 1fr 1fr; } }
.pie__marca img { width: 124px; margin-bottom: 10px; }
.pie__marca p { margin: 8px 0; max-width: 44ch; }
.pie__col { display: flex; flex-direction: column; gap: 8px; }
.pie__col h2 { font-size: 1.15rem; color: var(--oro-claro); margin-bottom: 4px; }
.pie a { color: #e6e6e6; text-decoration: none; }
.pie a:hover { color: var(--oro-claro); text-decoration: underline; }
.pie__legal { max-width: var(--ancho); margin: 32px auto 0; padding-top: 16px; border-top: 1px solid #2a2a2a; font-size: .82rem; color: #8a8a8a; }
.ficha-pagina .pie { padding-bottom: 96px; }
@media (min-width: 900px) { .ficha-pagina .pie { padding-bottom: 24px; } }