/* ============================================================
   AUTOVIP — sistema de estilos
   Tokens tomados del manual de marca (AUTOVIP Marca.dc.html / README de design)
   ============================================================ */

:root {
  /* Colores */
  --negro-salon: #0B0B0C;
  --negro-puro: #000000;
  --carbon: #14161A;
  --carbon-profundo: #0F1114;
  --grafito: #23262B;
  --grafito-claro: #2A2E34;
  --borde-hover: #3E444C;
  --borde-fantasma: #4A5058;
  --rojo: #E01B22;
  --rojo-hover: #FF2A31;
  --rojo-texto: #FF6B70;
  --plata: #C3C9D0;
  --gris: #A7ADB5;
  --gris-medio: #8A9099;
  --gris-apagado: #6E757E;
  --gris-oscuro: #5C636C;
  --blanco-humo: #F2F4F6;
  --blanco: #FFFFFF;

  --sombra-flotante: 0 24px 60px rgba(0,0,0,0.55);
  --max: 1280px;
  --max-inv: 1440px;
  --pad: 48px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--negro-salon);
  color: var(--blanco-humo);
  font-family: 'Barlow', system-ui, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blanco-humo); text-decoration: none; transition: color .18s; }
a:hover { color: var(--rojo); }

img { max-width: 100%; display: block; }

/* Tipografía utilitaria */
.wm {
  font-family: 'Exo 2', system-ui, sans-serif;
  font-weight: 800; font-style: italic;
  letter-spacing: -0.045em; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
}
.lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hd {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; text-transform: uppercase; line-height: 0.98;
}

/* Logo */
.logo { font-size: 24px; }
.logo .a { color: var(--blanco-humo); }
.logo .v { color: var(--rojo); }

/* Botones */
.btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  border-radius: 2px; cursor: pointer; border: 0; display: inline-block;
  text-align: center; transition: background .18s, border-color .18s, color .18s;
}
.btn-rojo { background: var(--rojo); color: #fff; }
.btn-rojo:hover { background: var(--rojo-hover); color: #fff; }
.btn-fantasma { border: 1px solid var(--borde-fantasma); color: var(--blanco-humo); background: transparent; }
.btn-fantasma:hover { border-color: var(--blanco-humo); color: var(--blanco-humo); background: rgba(255,255,255,0.06); }
.btn-blanco { background: var(--blanco-humo); color: var(--negro-salon); }
.btn-blanco:hover { background: #fff; }

/* Inputs */
.field { display: block; }
.field .lbl-input { font-size: 10px; color: var(--gris-apagado); margin-bottom: 7px; display: block; }
input, select, textarea {
  width: 100%; box-sizing: border-box;
  background: var(--carbon-profundo);
  border: 1px solid var(--grafito-claro);
  color: var(--blanco-humo);
  font-family: 'Barlow', sans-serif; font-size: 15px;
  padding: 12px; border-radius: 2px; outline: none;
  transition: border-color .18s;
}
input:focus, select:focus, textarea:focus { border-color: var(--rojo); }
textarea { resize: vertical; }
select { cursor: pointer; }

/* ===== Header ===== */
.header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 18px var(--pad);
  border-bottom: 1px solid #1B1E22;
  background: rgba(11,11,12,0.96);
  backdrop-filter: blur(8px);
}
.header nav { display: flex; gap: 30px; font-size: 13px; }
.header nav a { color: var(--gris); font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.header nav a:hover, .header nav a.active { color: var(--rojo); }
.header .tel { text-align: right; line-height: 1.2; }
.header .tel .k { font-size: 10px; color: var(--gris-oscuro); }
.header .tel .v { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; }
.header .actions { display: flex; align-items: center; gap: 18px; }
.header .wa { font-size: 13px; padding: 12px 20px; }
.burger { display: none; background: transparent; border: 0; color: #fff; cursor: pointer; padding: 6px; }
.burger svg { width: 26px; height: 26px; }

/* ===== Layout ===== */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.wrap-inv { max-width: var(--max-inv); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding-top: 84px; }
.eyebrow { font-size: 12px; color: var(--rojo); margin-bottom: 12px; }
h1, h2, h3 { margin: 0; }

/* ===== Hero (Inicio A) ===== */
.hero { position: relative; height: 660px; overflow: hidden; }
.hero .bg { position: absolute; inset: 0; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.hero .scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,11,12,0.94) 0%, rgba(11,11,12,0.72) 42%, rgba(11,11,12,0.25) 100%); }
.hero .inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad); pointer-events: none; }
.hero .col { max-width: var(--max); margin: 0 auto; width: 100%; }
/* El título usa el ancho del bloque para entrar en 2 renglones: con 15ch caía
   en 4 y dejaba la mitad derecha del hero vacía. El tamaño acompaña al ancho
   de la ventana (clamp) para que sigan siendo 2 renglones sin saltos bruscos. */
.hero h1 { font-size: clamp(44px, 6.6vw, 88px); margin: 0 0 22px; max-width: 30ch; text-wrap: balance; }
.hero p { margin: 0 0 34px; max-width: 54ch; font-size: 20px; line-height: 1.6; color: var(--plata); text-wrap: pretty; }
.hero .cta { display: flex; gap: 14px; pointer-events: auto; flex-wrap: wrap; }
.hero .cta .btn { font-size: 14px; padding: 16px 28px; }

/* Barra de búsqueda flotante */
.searchbar-wrap { max-width: var(--max); margin: -46px auto 0; padding: 0 var(--pad); position: relative; z-index: 2; }
.searchbar {
  background: var(--carbon); border: 1px solid var(--grafito-claro); border-radius: 4px;
  padding: 22px 26px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr auto; gap: 18px;
  align-items: end; box-shadow: var(--sombra-flotante);
}
.searchbar .btn { padding: 13px 24px; font-size: 14px; }

/* Franja de confianza */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 64px; }
.trust .item { border-top: 2px solid var(--rojo); padding-top: 18px; }
.trust .item .t { font-size: 26px; margin-bottom: 8px; }
.trust .item .b { color: var(--gris-medio); font-size: 15px; line-height: 1.55; }

/* Header de sección */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.sec-head h2 { font-size: 46px; }
.link-btn { font-size: 13px; padding: 12px 20px; border: 1px solid #3A3F46; background: transparent; color: var(--gris); border-radius: 2px; }
.link-btn:hover { border-color: var(--blanco-humo); color: var(--blanco-humo); }

/* ===== Tarjeta de auto ===== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--carbon); border: 1px solid var(--grafito); border-radius: 4px;
  overflow: hidden; transition: border-color .2s; display: flex; flex-direction: column;
}
.card:hover { border-color: var(--borde-hover); }
.card .photo { position: relative; height: 220px; background: var(--carbon-profundo); }
.card .photo img { width: 100%; height: 100%; object-fit: cover; }
.card .photo .noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gris-oscuro); font-size: 12px; }
.card .badge { position: absolute; left: 12px; top: 12px; font-size: 11px; padding: 5px 9px; pointer-events: none; color: #fff; }
.card .badge.nuevo { background: var(--rojo); }
/* Etiqueta libre (ej. "Tope de gama"): recuadro rojo de la marca, para que resalte. */
.card .badge.otro { background: rgba(11,11,12,0.72); border: 1px solid var(--rojo);
  color: #fff; box-shadow: 0 0 0 1px rgba(224,27,34,.25), 0 6px 18px rgba(0,0,0,.45);
  backdrop-filter: blur(4px); letter-spacing: .18em; }
.card .body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.card .name { font-size: 24px; }
.card .trim { font-size: 11px; color: var(--gris-apagado); margin-top: 6px; }
.card .specs { display: flex; gap: 16px; color: var(--gris-medio); font-size: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--grafito); flex-wrap: wrap; }
/* Ficha técnica corta dentro de la tarjeta: la vidriera quedaba muy vacía. */
.card .card-tec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 16px; }
.card .card-tec .k { font-size: 10px; color: var(--gris-oscuro); margin-bottom: 3px; }
.card .card-tec .v { font-size: 14px; color: var(--plata); line-height: 1.3; }
.card .card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.card .card-chips span { font: 600 10px 'Barlow Condensed', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris-medio); border: 1px solid var(--grafito);
  border-radius: 2px; padding: 4px 8px; }
.card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; gap: 10px; }
/* Equivalente en la otra moneda, según la cotización del blue. */
.price-equiv { font-size: 12px; color: var(--gris-oscuro); margin-top: 3px; }
.card .price { font-size: 26px; color: var(--blanco-humo); }
/* Precio tomando el auto del cliente en parte de pago (sólo si está cargado) */
.price-permuta { font-size: 11px; color: var(--gris-medio); margin-top: 3px; white-space: nowrap; }
.price-panel .price-permuta { font-size: 13px; margin: 0 0 6px; }
.card .ficha-btn { font-size: 11px; padding: 9px 14px; border: 1px solid #3A3F46; background: transparent; color: var(--gris); border-radius: 2px; white-space: nowrap; }
.card .ficha-btn:hover { border-color: var(--rojo); color: #fff; }

/* Grid inventario (fotos más chicas) */
.grid-inv .card .photo { height: 186px; }
.grid-inv .card .name { font-size: 21px; }
.grid-inv .card .price { font-size: 23px; }

/* ===== Estados comerciales sobre la foto ===== */
.card .photo, .gallery .main { position: relative; overflow: hidden; }
/* Oferta: pestaña/ribbon dorada en la esquina */
.venta-ribbon {
  position: absolute; top: 16px; right: -44px; transform: rotate(45deg); z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, #FFD86B, #E0A21B);
  color: #201500; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 6px 48px; box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
/* Señado / Vendido: banda diagonal cruzando la foto */
.venta-band {
  position: absolute; left: -6%; right: -6%; top: 50%; transform: translateY(-50%) rotate(-7deg); z-index: 4; pointer-events: none;
  text-align: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
  padding: 8px 0; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.venta-band.vendido { background: rgba(224,27,34,0.92); font-size: 22px; letter-spacing: 0.32em; }
.venta-band.senado  { background: rgba(224,162,27,0.94); color: #201500; font-size: 19px; letter-spacing: 0.26em; }
/* Tratamiento de la tarjeta según estado */
.card.v-vendido { opacity: 0.72; }
.card.v-vendido:hover { opacity: 1; }
.card.v-vendido .photo img, .gallery .main.v-vendido img { filter: grayscale(0.55); }
.card.v-senado { border-color: rgba(224,162,27,0.5); }
.gallery .main.v-senado { border-color: rgba(224,162,27,0.5); }

/* ===== Banda consignación ===== */
.consign { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border: 1px solid var(--grafito); border-radius: 4px; overflow: hidden; }
.consign .txt { padding: 56px 52px; background: var(--carbon); }
.consign .txt h2 { font-size: 44px; margin: 0 0 18px; }
.consign .txt p { margin: 0 0 26px; color: var(--gris); font-size: 17px; line-height: 1.65; max-width: 42ch; }
.consign .bullets { display: grid; gap: 12px; margin-bottom: 30px; }
.consign .bullets div { display: flex; gap: 12px; align-items: center; color: var(--plata); font-size: 16px; }
.consign .bullets .d { color: var(--rojo); }
.consign .pic { position: relative; min-height: 420px; overflow: hidden; background: var(--carbon-profundo); }
.consign .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== Reviews ===== */
.review { background: var(--carbon); border: 1px solid var(--grafito); border-radius: 4px; padding: 30px; }
.review .stars { color: var(--rojo); font-size: 15px; letter-spacing: 3px; margin-bottom: 16px; }
.review p { margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: #D8DCE1; text-wrap: pretty; }
.review .who { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--grafito); }
.review .av { width: 38px; height: 38px; border-radius: 50%; background: var(--grafito); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; color: var(--gris); }
.review .who .n { font-weight: 600; font-size: 15px; }
.review .who .m { color: var(--gris-apagado); font-size: 13px; }

/* ===== Footer ===== */
.footer { margin-top: 96px; border-top: 1px solid #1B1E22; background: var(--negro-puro); }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding: 56px var(--pad); max-width: var(--max); margin: 0 auto; }
.footer .cols p { margin: 0; color: var(--gris-apagado); font-size: 15px; line-height: 1.6; max-width: 34ch; }
.footer .cols .k { font-size: 10px; color: var(--gris-oscuro); margin-bottom: 14px; }
.footer .cols .val { color: var(--gris); font-size: 15px; line-height: 1.7; }
.footer .legal .powered a { color: var(--gris); }
.footer .legal .powered a:hover { color: var(--rojo); }
/* Acceso al panel: discreto, en la barra legal del pie */
.footer .legal .btn-acceso { border: 1px solid #2A2E33; border-radius: 2px; padding: 7px 14px;
  font-size: 11px; color: var(--gris); background: transparent; transition: border-color .2s, color .2s; }
.footer .legal .btn-acceso:hover { border-color: var(--rojo); color: #fff; }
.footer .legal { border-top: 1px solid #1B1E22; padding: 20px var(--pad); display: flex; justify-content: space-between; max-width: var(--max); margin: 0 auto; color: var(--borde-hover); font-size: 13px; gap: 16px; flex-wrap: wrap; }

/* ===== Inventario ===== */
.inv-layout { display: grid; grid-template-columns: 264px 1fr; gap: 28px; padding-bottom: 20px; }
.filters { align-self: start; position: sticky; top: 96px; background: var(--carbon); border: 1px solid var(--grafito); border-radius: 4px; padding: 24px; }
.filters .k { font-size: 11px; color: var(--gris-apagado); margin-bottom: 14px; }
.filters .brands { display: grid; gap: 8px; margin-bottom: 26px; max-height: 320px; overflow-y: auto; }
.filters .brands button { display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; padding: 6px 0; cursor: pointer; font-family: 'Barlow', sans-serif; font-size: 15px; color: var(--gris); }
.filters .brands button:hover { color: #fff; }
.filters .brands button.active { color: #fff; font-weight: 600; }
.filters .brands button .cnt { color: var(--gris-oscuro); font-size: 13px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.chip { font-size: 11px; border: 1px solid var(--grafito-claro); color: var(--gris-medio); padding: 7px 12px; border-radius: 2px; cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; background: transparent; transition: .18s; }
.chip:hover { border-color: var(--borde-hover); color: #fff; }
.chip.active { border-color: var(--rojo); color: #fff; background: rgba(224,27,34,0.14); }
.sort-wrap { display: flex; gap: 10px; align-items: center; }
.sort-wrap select { width: auto; }
.empty { color: var(--gris-medio); padding: 60px 0; text-align: center; grid-column: 1 / -1; }

/* ===== Ficha ===== */
.detail { display: grid; grid-template-columns: 1.55fr 1fr; gap: 32px; }
.breadcrumb { display: flex; gap: 10px; color: var(--gris-oscuro); font-size: 14px; margin-bottom: 22px; }
.breadcrumb a { color: var(--gris-medio); }
.gallery .main { position: relative; height: 460px; border-radius: 4px; overflow: hidden; border: 1px solid var(--grafito); background: var(--carbon-profundo); }
.gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.gallery .main .badge { position: absolute; left: 14px; top: 14px; background: var(--rojo); color: #fff; font-size: 11px; padding: 6px 10px; pointer-events: none; }
.gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.gallery .thumbs .th { height: 96px; border: 1px solid var(--grafito); border-radius: 3px; overflow: hidden; cursor: pointer; background: var(--carbon-profundo); }
.gallery .thumbs .th img { width: 100%; height: 100%; object-fit: cover; }
.gallery .thumbs .th.active { border-color: var(--rojo); }
.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--grafito); border: 1px solid var(--grafito); border-radius: 4px; overflow: hidden; }
.spec-grid .cell { background: var(--carbon); padding: 18px 20px; }
.spec-grid .cell .k { font-size: 10px; color: var(--gris-apagado); margin-bottom: 7px; }
.spec-grid .cell .v { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; text-transform: uppercase; }
.equip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; }
.equip div { display: flex; gap: 12px; align-items: center; color: var(--plata); font-size: 16px; border-bottom: 1px solid #1B1E22; padding-bottom: 10px; }
.equip .d { color: var(--rojo); }
.reference { background: var(--carbon); border: 1px solid var(--grafito); border-radius: 4px; padding: 28px; }
.reference .badge-src { font-size: 10px; color: var(--gris-oscuro); margin-top: 14px; }
.detail-side { align-self: start; position: sticky; top: 96px; display: grid; gap: 16px; }
.price-panel { background: var(--carbon); border: 1px solid var(--grafito-claro); border-radius: 4px; padding: 28px; }
.price-panel h1 { font-size: 34px; }
.price-panel .price { font-size: 44px; margin: 22px 0 6px; color: var(--blanco-humo); }
.price-panel .fin { color: var(--gris-apagado); font-size: 14px; margin-bottom: 22px; }
.price-panel .btn { display: block; width: 100%; padding: 16px; font-size: 14px; margin-bottom: 10px; }
.asesor { background: var(--carbon); border: 1px solid var(--grafito); border-radius: 4px; padding: 24px; display: flex; gap: 14px; align-items: center; }
.asesor .av { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--grafito); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed'; font-weight: 700; color: var(--gris); }

/* ===== Vendé tu auto ===== */
.sell-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 36px; }
.compare .box { background: var(--carbon); border: 1px solid var(--grafito); border-radius: 4px; padding: 26px; }
.compare .box.destacada { border-color: rgba(224,27,34,0.5); }
.compare .box h3 { font-size: 24px; margin-bottom: 10px; }
.compare .box p { margin: 0 0 16px; color: var(--gris-medio); font-size: 15px; line-height: 1.55; }
.compare .box .adv { display: grid; gap: 7px; color: var(--plata); font-size: 14px; }
.sell-steps { display: grid; gap: 20px; }
.sell-steps .step { display: flex; gap: 20px; align-items: flex-start; border-top: 1px solid #1B1E22; padding-top: 20px; }
.sell-steps .step .n { font-size: 26px; color: var(--rojo); min-width: 38px; }
.sell-steps .step h3 { font-size: 22px; }
.sell-steps .step p { margin: 6px 0 0; color: var(--gris-medio); font-size: 16px; line-height: 1.55; }
.form-panel { background: var(--carbon); border: 1px solid var(--grafito-claro); border-radius: 4px; padding: 36px; }
.form-panel h2 { font-size: 30px; margin: 0 0 6px; }
.form-panel .sub { margin: 0 0 26px; color: var(--gris-medio); font-size: 15px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mt14 { margin-top: 14px; }
.intent-chips { display: flex; gap: 10px; }
.intent-chips .chip { flex: 1; text-align: center; }
.fin-row { display: flex; gap: 10px; align-items: end; }
.fin-row .field:first-child { flex: 1; }
.fin-pct { width: 110px; }
.dropzone { border: 1px dashed var(--grafito-claro); border-radius: 3px; padding: 22px; text-align: center; color: var(--gris-medio); font-size: 14px; cursor: pointer; transition: border-color .18s, background .18s; background: var(--carbon-profundo); }
.dropzone:hover, .dropzone.drag { border-color: var(--rojo); background: rgba(224,27,34,0.06); }
.preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.preview-grid .pv { position: relative; height: 70px; border-radius: 3px; overflow: hidden; border: 1px solid var(--grafito); }
.preview-grid .pv img { width: 100%; height: 100%; object-fit: cover; }
.preview-grid .pv .x { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.7); color: #fff; border: 0; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; cursor: pointer; line-height: 1; }
.note { margin: 14px 0 0; color: var(--gris-oscuro); font-size: 13px; line-height: 1.5; text-align: center; }
.form-msg { margin-top: 14px; padding: 12px; border-radius: 2px; font-size: 14px; display: none; }
.form-msg.ok { display: block; background: rgba(224,27,34,0.10); border: 1px solid rgba(224,27,34,0.4); color: var(--blanco-humo); }

/* ===== Nosotros / Contacto ===== */
.mosaic { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }
.mosaic .big { height: 400px; border-radius: 4px; overflow: hidden; border: 1px solid var(--grafito); background: var(--carbon-profundo); }
.mosaic .stack { display: grid; gap: 16px; }
.mosaic .stack > div { border-radius: 4px; overflow: hidden; border: 1px solid var(--grafito); background: var(--carbon-profundo); min-height: 192px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 44px 0; border-bottom: 1px solid #1B1E22; }
.stats .n { font-size: 46px; color: var(--blanco-humo); }
.stats .l { font-size: 11px; color: var(--gris-apagado); margin-top: 8px; }
.team-card { background: var(--carbon); border: 1px solid var(--grafito); border-radius: 4px; padding: 26px; display: flex; gap: 18px; align-items: center; }
.team-card .av { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--grafito); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed'; font-weight: 700; color: var(--gris); }
.team-card .role { font-size: 10px; color: var(--rojo); margin-top: 6px; }
.team-card .note { color: var(--gris-medio); font-size: 14px; margin-top: 8px; line-height: 1.5; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.info-card { background: var(--carbon); border: 1px solid var(--grafito); border-radius: 4px; padding: 30px; }
.info-card .k { font-size: 10px; color: var(--gris-apagado); margin-bottom: 10px; }
.info-card .addr { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; text-transform: uppercase; line-height: 1.1; }
.hours .row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--grafito); padding-bottom: 10px; margin-bottom: 10px; }
.hours .row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.hours .row span:first-child { color: var(--plata); font-size: 16px; }
.hours .row span:last-child { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; }
.map-embed { height: 300px; border: 1px solid var(--grafito); border-radius: 4px; overflow: hidden; }
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) invert(0.92) hue-rotate(180deg); }

/* Barra fija móvil */
.mobilebar { display: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .detail { grid-template-columns: 1fr; }
  .detail-side { position: static; }
  .sell-layout { grid-template-columns: 1fr; gap: 36px; }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --pad: 24px; }
  .header nav, .header .tel { display: none; }
  .burger { display: block; }
  .header .mobile-open { display: flex; }
  .searchbar { grid-template-columns: 1fr 1fr; }
  .searchbar .btn { grid-column: 1 / -1; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .consign { grid-template-columns: 1fr; }
  .consign .pic { min-height: 260px; }
  .inv-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .mosaic { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { height: 520px; }
  .hero h1 { max-width: none; }   /* en el celular manda el ancho de pantalla */
  .hero p { font-size: 17px; }
  .searchbar { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-inv .card .photo, .card .photo { height: 200px; }
  .trust { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; gap: 28px; }
  .footer .legal { flex-direction: column; }
  h1.big, .sec-head h2 { font-size: 34px !important; }
  .gallery .main { height: 300px; }
  /* Barra fija inferior con WhatsApp + Llamar */
  .mobilebar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    border-top: 1px solid var(--grafito); background: var(--negro-puro); }
  .mobilebar a { flex: 1; text-align: center; padding: 16px; font-size: 13px; }
  .mobilebar a.wa { background: var(--rojo); color: #fff; }
  body { padding-bottom: 56px; }
}

/* Menú móvil desplegable */
.mobile-menu { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(11,11,12,0.98); flex-direction: column; padding: 24px; }
.mobile-menu.open { display: flex; }
.mobile-menu .close { align-self: flex-end; background: transparent; border: 0; color: #fff; font-size: 28px; cursor: pointer; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.mobile-menu nav a { color: var(--blanco-humo); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; text-transform: uppercase; padding: 10px 0; border-bottom: 1px solid var(--grafito); }

/* ===== Páginas creadas desde el panel ===== */
.pag-bullets { list-style: none; padding: 0; margin: 0 0 22px; max-width: 70ch; }
.pag-bullets li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--gris);
  font-size: 17px; line-height: 1.65; }
.pag-bullets li::before { content: ''; position: absolute; left: 0; top: 11px; width: 12px; height: 2px; background: var(--rojo); }
.pag-faq { max-width: 70ch; margin-bottom: 22px; }
.pag-faq details { border-top: 1px solid var(--grafito); padding: 16px 0; }
.pag-faq details:last-child { border-bottom: 1px solid var(--grafito); }
.pag-faq summary { cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 19px; text-transform: uppercase; letter-spacing: .04em; list-style: none; }
.pag-faq summary::-webkit-details-marker { display: none; }
.pag-faq summary::after { content: '+'; float: right; color: var(--rojo); font-size: 22px; line-height: 1; }
.pag-faq details[open] summary::after { content: '−'; }
.pag-faq p { color: var(--gris); font-size: 17px; line-height: 1.7; margin: 12px 0 0; white-space: pre-wrap; }
.pag-cta { background: var(--carbon); border: 1px solid var(--grafito-claro); border-radius: 4px;
  padding: 30px; margin: 30px 0; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.pag-cta p { margin: 0; font-size: 19px; color: var(--blanco-humo); max-width: 52ch; }
.pag-cta .btn { padding: 15px 30px; font-size: 14px; }

/* ===== Confirmación de envío (reemplaza al formulario) ===== */
.enviado-ok { background: var(--carbon); border: 1px solid rgba(46,160,67,.45); border-radius: 4px;
  padding: 34px 30px; text-align: center; }
.enviado-ok .check { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  background: rgba(46,160,67,.14); border: 1px solid rgba(46,160,67,.5); color: #8ef0b0;
  display: flex; align-items: center; justify-content: center; }
.enviado-ok .check svg { width: 28px; height: 28px; }
.enviado-ok h3 { font-size: 30px; margin-bottom: 10px; color: var(--blanco-humo); }
.enviado-ok p { color: var(--gris); font-size: 17px; line-height: 1.6; margin: 0 auto 22px; max-width: 40ch; }
.enviado-ok .btn { padding: 13px 26px; font-size: 13px; }

/* ---------- Documento legal (política de privacidad) ---------- */
.footer .legal .legal-link { color: var(--borde-hover); text-decoration: underline; text-underline-offset: 3px; }
.footer .legal .legal-link:hover { color: var(--rojo); }

.legal-fecha { color: var(--gris-oscuro); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; margin: 0 0 40px; }
.legal-doc { max-width: 72ch; padding-bottom: 90px; }
.legal-doc .legal-intro { font-size: 19px; line-height: 1.7; color: var(--gris);
  border-left: 2px solid var(--rojo); padding-left: 20px; margin: 0 0 46px; }
.legal-doc h2 { font: 700 25px 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: .04em; color: var(--blanco-humo); margin: 44px 0 14px; }
.legal-doc p { color: var(--gris); font-size: 16px; line-height: 1.75; margin: 0 0 16px; }
.legal-doc ul { margin: 0 0 16px; padding-left: 22px; }
.legal-doc li { color: var(--gris); font-size: 16px; line-height: 1.75; margin-bottom: 9px; }
.legal-doc strong { color: var(--blanco-humo); font-weight: 600; }
.legal-doc a { color: var(--rojo); text-decoration: underline; text-underline-offset: 3px; }
/* Los dos párrafos que reproducen el texto de la Ley 25.326: se marcan como cita. */
.legal-doc .legal-nota { font-size: 14px; line-height: 1.7; color: var(--gris-oscuro);
  border-left: 2px solid var(--grafito, #23262B); padding: 4px 0 4px 18px; margin-bottom: 14px; }
.legal-cierre { margin-top: 54px; padding: 26px 28px; border: 1px solid var(--grafito, #23262B);
  border-radius: 4px; background: var(--carbon, #14171A); }
@media (max-width: 700px) {
  .legal-doc h2 { font-size: 22px; margin-top: 36px; }
  .legal-doc .legal-intro { font-size: 17px; padding-left: 16px; }
}

/* ---------- Banner de bienvenida (portada) ---------- */
/* Se muestra 3 s y se va hacia abajo desvaneciéndose. El markup lo crea el
   script en línea de index.html; acá sólo vive la presentación. */
html.con-intro, html.con-intro body { overflow: hidden; }
.intro-banner { position: fixed; inset: 0; z-index: 9999; background: var(--negro-salon);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 24px; cursor: pointer; will-change: transform, opacity;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .7s ease; }
.intro-banner img { max-width: min(100%, 920px); max-height: 78vh; object-fit: contain;
  animation: intro-entra .6s cubic-bezier(.2, .7, .3, 1) both; }
.intro-banner .saltar { font-size: 11px; color: var(--gris-oscuro); letter-spacing: .18em; }
.intro-banner.salir { transform: translateY(100%); opacity: 0; }
@keyframes intro-entra { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .intro-banner { transition: none; }
  .intro-banner img { animation: none; }
}

/* ============================================================
   Blog: listado de notas y nota individual
   Usa los mismos tokens que el resto del sitio (Barlow Condensed para
   títulos, Barlow para el texto, rojo de marca en los acentos), así una
   nota se lee como parte de AUTOVIP y no como algo pegado aparte.
   ============================================================ */
.blog-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; padding-bottom: 90px; }
.nota-card { display: flex; flex-direction: column; background: var(--carbon);
  border: 1px solid var(--grafito); border-radius: 4px; overflow: hidden; transition: border-color .2s; }
.nota-card:hover { border-color: var(--borde-hover); color: inherit; }
.nota-card .foto { height: 240px; background: var(--carbon-profundo); overflow: hidden; }
.nota-card .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.nota-card:hover .foto img { transform: scale(1.03); }
.nota-card .foto .noimg { width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; color: var(--grafito-claro); font: 800 italic 34px 'Exo 2', sans-serif; }
.nota-card .cuerpo { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.nota-card .meta { font-size: 10px; color: var(--rojo); margin-bottom: 10px; }
.nota-card h2 { font-size: 27px; line-height: 1.1; margin-bottom: 12px; }
.nota-card p { color: var(--gris-medio); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.nota-card .leer { font-size: 11px; color: var(--gris); margin-top: auto; }
.nota-card:hover .leer { color: var(--rojo); }
.blog-vacio { color: var(--gris-oscuro); padding: 40px 0 100px; font-size: 17px; }

/* --- Nota --- */
.nota-wrap { max-width: 820px; padding-top: 52px; padding-bottom: 90px; }
.nota-cab .volver { display: inline-block; font-size: 11px; color: var(--gris-oscuro); margin-bottom: 22px; }
.nota-cab .volver:hover { color: var(--rojo); }
.nota-cab h1 { font-size: 52px; line-height: 1.02; margin-bottom: 16px; text-wrap: balance; }
.nota-meta { font-size: 11px; color: var(--rojo); }
.nota-copete { color: var(--plata); font-size: 20px; line-height: 1.6; margin: 20px 0 0;
  padding-left: 20px; border-left: 2px solid var(--rojo); text-wrap: pretty; }
.nota-portada { margin: 38px 0 8px; border-radius: 4px; overflow: hidden; border: 1px solid var(--grafito); }
.nota-portada img { width: 100%; display: block; }

/* Cuerpo de la nota. Estas reglas las comparte el editor del panel, para que
   quien escribe vea exactamente cómo va a quedar publicado. */
.nota-cuerpo { font-size: 18px; line-height: 1.75; color: var(--gris); padding-top: 32px; }
.nota-cuerpo > *:first-child { margin-top: 0; }
.nota-cuerpo p { margin: 0 0 22px; text-wrap: pretty; }
.nota-cuerpo h2 { font: 700 34px 'Barlow Condensed', sans-serif; text-transform: uppercase;
  line-height: 1.05; color: var(--blanco-humo); margin: 46px 0 16px; }
.nota-cuerpo h3 { font: 700 25px 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: .02em; color: var(--blanco-humo); margin: 36px 0 12px; }
.nota-cuerpo h4 { font: 600 19px 'Barlow', sans-serif; color: var(--plata); margin: 28px 0 10px; }
.nota-cuerpo strong, .nota-cuerpo b { color: var(--blanco-humo); font-weight: 600; }
.nota-cuerpo a { color: var(--rojo); text-decoration: underline; text-underline-offset: 3px; }
.nota-cuerpo a:hover { color: var(--rojo-hover); }
.nota-cuerpo ul, .nota-cuerpo ol { margin: 0 0 22px; padding-left: 24px; }
.nota-cuerpo li { margin-bottom: 10px; }
.nota-cuerpo ul li::marker { color: var(--rojo); }
.nota-cuerpo ol li::marker { color: var(--rojo); font-family: 'Barlow Condensed'; font-weight: 700; }
.nota-cuerpo blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--rojo);
  font-size: 22px; line-height: 1.5; color: var(--blanco-humo); font-style: normal; }
.nota-cuerpo hr { border: 0; border-top: 1px solid var(--grafito); margin: 40px 0; }
.nota-cuerpo figure { margin: 34px 0; }
.nota-cuerpo img { width: 100%; border-radius: 4px; border: 1px solid var(--grafito); display: block; }
.nota-cuerpo figcaption { font-size: 13px; color: var(--gris-oscuro); margin-top: 10px; text-align: center; }

.nota-cierre { margin-top: 56px; padding: 32px; border: 1px solid var(--grafito);
  border-radius: 4px; background: var(--carbon); }
.nota-cierre .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.nota-cierre .btn { padding: 14px 24px; font-size: 13px; }
.nota-404 { padding: 60px 0 100px; }

@media (max-width: 900px) { .blog-lista { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .nota-cab h1 { font-size: 36px; }
  .nota-copete { font-size: 17px; }
  .nota-cuerpo { font-size: 17px; }
  .nota-cuerpo h2 { font-size: 28px; }
}

/* ---------- Video de la unidad ---------- */
.video-auto { border: 1px solid var(--grafito); border-radius: 4px; overflow: hidden; background: #000; }
.video-auto video { width: 100%; max-height: 70vh; display: block; background: #000; }
/* Aviso en la tarjeta: el video es un motivo para entrar a la ficha */
.card .tiene-video { position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(11,11,12,.82); border: 1px solid var(--rojo); color: #fff;
  font-size: 10px; padding: 5px 9px; border-radius: 2px; pointer-events: none; }

/* Fotos del mosaico de Nosotros (se cargan desde el panel) */
.mosaic .big img, .mosaic .stack > div img { width: 100%; height: 100%; object-fit: cover; }

/* Aviso de vista previa (nota en borrador, sólo la ve quien tiene sesión) */
.nota-previa-aviso { background: rgba(224,162,27,.14); border: 1px solid rgba(224,162,27,.5);
  color: #f2d16b; font: 600 12px 'Barlow Condensed', sans-serif; letter-spacing: .12em;
  text-transform: uppercase; padding: 10px 14px; border-radius: 3px; margin-bottom: 24px; }

/* ---------- Revisión de 120 puntos (ficha del auto) ---------- */
.rev-sello { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start;
  border: 1px solid var(--grafito); border-radius: 4px; background: var(--carbon); padding: 26px 28px; }
.rev-sello-num { text-align: center; border-right: 1px solid var(--grafito); padding-right: 26px; }
.rev-sello-num .n { font-size: 52px; color: var(--rojo); line-height: 1; }
.rev-sello-num .l { font-size: 10px; color: var(--gris-oscuro); margin-top: 6px; }
.rev-sello-txt p { color: var(--gris); font-size: 16px; line-height: 1.6; margin: 0 0 14px; max-width: 60ch; }
.rev-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rev-chips span { font: 600 10px 'Barlow Condensed', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; padding: 6px 10px; border-radius: 2px; border: 1px solid; }
.rev-chips .ok  { color: #8ef0b0; border-color: rgba(46,160,67,.5);  background: rgba(46,160,67,.12); }
.rev-chips .obs { color: #f2d16b; border-color: rgba(224,162,27,.5); background: rgba(224,162,27,.12); }
.rev-chips .rep { color: #a9c9ff; border-color: rgba(58,130,247,.5); background: rgba(58,130,247,.12); }
.rev-chips .na  { color: var(--gris-medio); border-color: var(--grafito-claro); }
.rev-nota-gral { margin-top: 14px !important; color: var(--plata) !important; font-style: italic; }

.rev-obs { margin-top: 18px; border: 1px solid rgba(224,162,27,.4); border-radius: 4px;
  background: rgba(224,162,27,.06); padding: 20px 24px; }
.rev-obs .k { color: #f2d16b; font-size: 11px; margin-bottom: 12px; }
.rev-obs ul { margin: 0; padding-left: 20px; }
.rev-obs li { color: var(--plata); font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
.rev-obs li span { display: block; color: var(--gris-medio); font-size: 14px; margin-top: 2px; }
.rev-obs .hint { margin-top: 12px; }

.rev-detalle { margin-top: 16px; }
.rev-detalle > summary { cursor: pointer; font: 600 12px 'Barlow Condensed', sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gris); padding: 12px 0; }
.rev-detalle > summary:hover { color: var(--rojo); }
.rev-grupo { margin-bottom: 26px; }
.rev-grupo .k { color: var(--rojo); font-size: 11px; margin-bottom: 10px; }
.rev-grupo ul { list-style: none; margin: 0; padding: 0; }
.rev-grupo li { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
  padding: 9px 0; border-bottom: 1px solid #1b1e22; font-size: 15px; color: var(--gris); }
.rev-grupo li .v { font: 600 10px 'Barlow Condensed', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; }
.rev-grupo li.e-ok .v       { color: #8ef0b0; }
.rev-grupo li.e-atencion .v { color: #f2d16b; }
.rev-grupo li.e-reparado .v { color: #a9c9ff; }
.rev-grupo li.e-na .v       { color: var(--gris-oscuro); }
.rev-grupo li .n { grid-column: 1 / -1; color: var(--gris-medio); font-size: 14px; }
@media (max-width: 700px) {
  .rev-sello { grid-template-columns: 1fr; gap: 18px; }
  .rev-sello-num { border-right: 0; border-bottom: 1px solid var(--grafito);
    padding: 0 0 16px; text-align: left; display: flex; align-items: baseline; gap: 10px; }
}

/* Foto de cada persona del equipo. Ya viene recortada cuadrada desde el panel,
   con el encuadre que se eligió ahí: acá sólo se la mete en el círculo. */
.team-card .av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }