/* ================================================================
   TIENDA DE AUTOPARTES — shop.css
   Config rápida de marca: edite las variables de este bloque.
   ================================================================ */
/* ----------------------------------------------------------------
   AIRE DE GOOGLE, COLORES DE LA CASA

   Se tomó de Google la MANERA, no la paleta: fondo blanco, mucho
   aire, bordes de un pelo en vez de sombras, esquinas redondas y
   botones de píldora. Los colores siguen siendo los de la tienda,
   porque un taller que compró una vez tiene que reconocerla la
   siguiente; el azul de Google lo usa medio internet.

   *** LA REGLA DEL NARANJA — no la rompa ***

   El naranja quiere decir COMPRAR: «Agregar al carrito», «Comprar
   ahora», «Proceder al pago», «Pagar». Nada más.

   Antes el naranja estaba también en el botón de buscar, en «Elige
   tu vehículo», en los enlaces del panel, al pasar el ratón por las
   facetas… y cuando cinco cosas son naranjas, ninguna es LA que hay
   que tocar. Todo eso pasó a azul marino. Lo único que conserva el
   calor son las señales de dinero —promoción, reloj de oferta— y en
   tono suave, para que no compitan con el botón.

   Si mañana agrega un botón y duda: ¿se compra algo al tocarlo? Si
   no, no lleva naranja.
   ---------------------------------------------------------------- */
:root {
  --brand:   #12365D;   /* azul taller */
  --brand-2: #0B2542;
  --brand-3: #EAF0F7;   /* azul apenas teñido: fondos y hover */
  /* 27-sep-2026: un tono más oscuro que el #E8681A de antes. Con aquél, el texto
     blanco de «Agregar al carrito» tenía contraste 3.3 y la norma de accesibilidad
     (WCAG AA) pide 4.5: la gente con poca vista no lo leía bien. Éste da 4.7. */
  --accent:  #C2500E;   /* naranja refacción — SÓLO para comprar */
  --accent-2:#A3430B;   /* al pasar el ratón, y el naranja escrito sobre blanco */
  --accent-3:#FDF0E7;   /* naranja de fondo: señales de dinero */
  --bg:      #FFFFFF;
  --surface: #FFFFFF;
  --ink:     #1F2328;
  --muted:   #5F6368;
  --line:    #DADCE0;   /* el pelo de Google: se ve sin pesar */
  --line-2:  #EDEFF2;
  --ok:      #1E7E34;
  --warn:    #8A6D00;
  --bad:     #B42318;
  --radius:  12px;
  --radius-s:8px;
  --pill:    999px;
  --shadow:  0 1px 2px rgba(32,33,36,.08);
  --shadow-2:0 1px 3px rgba(32,33,36,.1), 0 4px 12px rgba(32,33,36,.12);
  --font:    "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Títulos de peso medio y buen tamaño: Google no grita en negritas. */
h1 { font-size: 30px; line-height: 1.22; margin: 0 0 18px; font-weight: 500; letter-spacing: -.2px; }
h2 { font-size: 21px; margin: 0 0 14px; font-weight: 500; }
h3 { font-size: 16px; margin: 18px 0 8px; font-weight: 500; }
img { max-width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 28px; padding-bottom: 72px; min-height: 60vh; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px; z-index: 100; }
.skip:focus { left: 8px; }
small, .fineprint { font-size: .86rem; color: var(--muted); }
.fineprint { margin: .5rem 0; }
.fineprint a { color: inherit; text-decoration: underline; }
code { background: #F1F3F4; padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.table-wrap { overflow-x: auto; }
.hp { position: absolute; left: -9999px; }

/* ---------- Cabecera ---------- */
/* Un pelo abajo en vez de sombra: sobre fondo blanco la sombra ensucia. */
.site-head { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.head-strip { background: var(--brand-2); color: #DCE6F2; font-size: 13px; }
.head-strip .wrap { display: flex; gap: 18px; align-items: center; min-height: 32px; flex-wrap: wrap; }
.head-strip a { color: #fff; font-weight: 600; }
.head-strip .grow { flex: 1; }
.head-main { display: flex; align-items: center; gap: 22px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--brand); }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 34px; line-height: 1; }
.brand-logo { display: block; height: 48px; width: auto; flex: none; }
/* Enlace para programas que copian (véase ANTICOPIA): fuera de la pantalla. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.brand b { display: block; font-size: 20px; letter-spacing: .3px; line-height: 1.1; }
.brand small { display: block; color: var(--muted); font-size: 12px; }
/* ---------- El buscador grande de la portada ----------
   Donde sale éste, se esconde el chico de la cabecera: dos cajas de búsqueda
   compitiendo en la misma pantalla sólo hacen dudar a quien llega. */
.buscon { background: var(--brand-2); padding: 30px 0 26px; }
/* ---------- La mascota, junto al buscador ----------
   Se apoya en el borde derecho de la franja, como se apoyan las mascotas de
   siempre. Tres cosas que parecen detalles y no lo son:

   · La franja se hace MÁS ALTA para que ella quepa entera. Al revés —encogerla
     a ella— se ve pequeña y pegada; recortarla le corta la cabeza.
   · El `padding-right` del formulario es lo que le hace sitio. Sin él, la caja
     de búsqueda le pasa por encima.
   · Por debajo de 1080 px (teléfono y tableta) cambia de lugar: se asoma por
     detrás de la caja de búsqueda y la pregunta es su globo (bloque siguiente).
     Antes desaparecía; el dueño la pidió de vuelta en el teléfono (27-sep-2026). */
.buscon.con-mascota .wrap { position: relative; }
.buscon .mascota { display: none; }
@media (min-width: 1081px) {
  .buscon.con-mascota { overflow: hidden; padding: 26px 0; }
  .buscon.con-mascota .wrap {
    min-height: 176px; display: flex; flex-direction: column; justify-content: center;
  }
  .buscon.con-mascota form { padding-right: 230px; }
  .buscon .mascota {
    /* Más grande, y apoyada más abajo: así se ve de buen tamaño SIN tener que
       estirar la franja. Lo que asoma por debajo se recorta, que es como se
       apoyan las mascotas de siempre. */
    display: block; position: absolute; right: 4px; bottom: -46px;
    width: auto; height: 240px; object-fit: contain; object-position: bottom right;
    pointer-events: none; user-select: none;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.30));
  }
}
/* Teléfono y tableta: ella a la derecha, asomada por encima de la caja de
   búsqueda, y «¿Qué pieza necesita?» como su globo de diálogo. No hace falta
   z-index: el formulario va después en la página, así que la caja blanca le
   tapa la cintura y se ve apoyada detrás. El buscador sigue a todo lo ancho.
   En tableta la franja se ciñe al ancho de la caja (54rem) para que ella no
   quede flotando más allá del borde de la caja. */
@media (max-width: 1080px) {
  /* Medidas: la franja empieza en el globo; ella sube 18 px por encima (su cara
     queda a la altura del globo) y mide 132 px, así que termina a 114 px, dentro de
     la caja, que empieza en 74 (globo de 40 + 34) y mide 53. Con el globo en dos
     renglones la caja baja y la tapa igual. */
  .buscon.con-mascota { padding-top: 30px; }
  .buscon.con-mascota .wrap { max-width: calc(54rem + 32px); }
  .buscon .mascota {
    display: block; position: absolute; right: 26px; top: -18px;
    height: 132px; width: auto; pointer-events: none; user-select: none;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.28));
  }
  .buscon.con-mascota .buscon-tit {
    position: relative; width: fit-content; margin: 0 150px 34px 0;
    padding: 10px 16px; border-radius: 18px; text-align: left; line-height: 1.3;
    color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  }
  /* la colita del globo, apuntando hacia ella */
  .buscon.con-mascota .buscon-tit::after {
    content: ""; position: absolute; right: -10px; top: 50%; margin-top: -9px;
    border: 9px solid transparent; border-right: 0; border-left: 10px solid rgba(255,255,255,.24);
  }
}
.buscon form { position: relative; }
.buscon-tit { display: block; color: #DCE6F2; font-size: 15.5px; font-weight: 600;
  letter-spacing: .01em; margin: 0 0 12px; text-align: center; }
.buscon-caja { position: relative; display: flex; align-items: center;
  background: #fff; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.22);
  width: 100%; max-width: 54rem; margin-left: auto; margin-right: auto; }
.buscon-lupa { flex: 0 0 auto; display: flex; align-items: center;
  padding: 0 6px 0 22px; color: #7A8794; }
.buscon-lupa svg { width: 20px; height: 20px; display: block; }
.buscon-caja input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 18px;
  padding: 18px 12px; border: 0; background: transparent; color: var(--ink);
  margin: 0; max-width: none; }
.buscon-caja input:focus { outline: 0; }
.buscon-caja:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 2px 10px rgba(0,0,0,.22); }
/* Los dos iconos, al estilo de Google: sin línea que los separe, grises, y con
   un círculo suave sólo al pasar el ratón. La superficie que se toca es de 44 px
   aunque el dibujo mida 22: en un teléfono, lo que se falla es el blanco chico. */
.buscon-mic, .buscon-cam { flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; margin: 0 2px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #5F6B78;
  cursor: pointer; transition: background .15s, color .15s; }
.buscon-mic svg, .buscon-cam svg { width: 22px; height: 22px; display: block; }
.buscon-mic:hover, .buscon-cam:hover { background: #F1F3F4; color: var(--brand); }
.buscon-mic:focus-visible, .buscon-cam:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.buscon-mic.oyendo { background: var(--bad); color: #fff;
  animation: buscon-late 1.1s ease-in-out infinite; }
@keyframes buscon-late { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) { .buscon-mic.oyendo { animation: none } }
.buscon-btn { flex: 0 0 auto; font: inherit; font-size: 16px; font-weight: 700;
  border: 0; border-radius: 999px; margin: 6px 6px 6px 8px; padding: 0 32px;
  align-self: stretch; background: var(--brand); color: #fff; cursor: pointer; }
.buscon-btn:hover { background: var(--brand-2); }
.buscon-pie { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: #B9CBE0; }
.buscon-pie a { color: #fff; text-decoration: underline; }
.buscon .suggest { left: 50%; transform: translateX(-50%); top: calc(100% + 6px);
  width: 100%; max-width: 54rem; }
/* La casilla grande manda: la chica de la cabecera se retira. */
body.con-buscon .head-search { display: none; }
@media (max-width: 700px) {
  .buscon { padding: 20px 0 18px; }
  .buscon-caja input { font-size: 16px; padding: 14px 8px; }
  .buscon-lupa { padding-left: 16px; }
  .buscon-mic, .buscon-cam { width: 40px; height: 40px; }
  .buscon-btn { padding: 0 20px; font-size: 15px; margin-left: 4px; }
  .buscon-pie { font-size: 12.5px; }
  .buscon-tit { font-size: 14.5px; }
}

.head-search { flex: 1 1 340px; position: relative; display: flex; }
.head-search input { flex: 1; font: inherit; padding: 11px 18px; border: 1px solid var(--line); border-right: 0; border-radius: var(--pill) 0 0 var(--pill); margin: 0; max-width: none; }
.head-search input:focus { outline: none; border-color: var(--brand); }
/* Buscar NO es comprar: azul. */
.head-search button { font: inherit; font-weight: 500; padding: 0 24px; border: 0; border-radius: 0 var(--pill) var(--pill) 0; background: var(--brand); color: #fff; cursor: pointer; }
.head-search button:hover { background: var(--brand-2); }
.suggest { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-2); z-index: 30; max-height: 380px; overflow: auto; }
.suggest a { display: grid; grid-template-columns: 110px 1fr; gap: 2px 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink); }
.suggest a:hover, .suggest a.activa { background: #F1F3F4; text-decoration: none; }
.suggest a.activa { box-shadow: inset 3px 0 0 var(--brand); }
.suggest .sg-sku { font-weight: 700; color: var(--brand); font-size: 13px; }
.suggest small { grid-column: 2; }
/* ---------- El carrito ----------
   Es donde termina la venta, así que se encuentra por la FORMA antes de leer
   nada: píldora con fondo propio, separada de los enlaces de texto. Vacío va
   discreto; con algo dentro se pone naranja y dice cuántas piezas y cuánto.
   Un carrito siempre encendido se vuelve parte del decorado. */
/* Vacío ya va MACIZO, en azul: aunque no haya nada dentro tiene que ser lo
   único de la barra que se ve como un botón. En contorno blanco se confundía
   con «Entrar» y «Favoritos», que es justo lo que había que evitar. */
/* OJO CON LA ESPECIFICIDAD: `.head-nav a` (una clase + un elemento) le gana a
   `.cart-btn` (una clase), así que el color del texto se lo comía el del menú.
   Con el fondo blanco no se notaba —negro sobre blanco se lee—; al ponerle
   fondo azul quedó texto casi negro sobre azul oscuro, ilegible. Por eso va
   `.head-nav a.cart-btn`, que sí gana. */
.head-nav a.cart-btn, .cart-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px;
  border: 1px solid var(--brand); border-radius: var(--pill); background: var(--brand);
  color: #fff; font-weight: 600; font-size: 14px; line-height: 1;
  min-height: 42px; transition: background .15s, border-color .15s, box-shadow .15s; }
.cart-btn:hover { text-decoration: none; background: var(--brand-2); border-color: var(--brand-2);
  box-shadow: var(--shadow-2); }
.cb-svg { width: 19px; height: 19px; flex: 0 0 auto; }
/* Con piezas dentro: naranja, que aquí sí es dinero. */
.head-nav a.cart-btn.con, .cart-btn.con { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.cart-btn.con:hover { background: var(--accent-2); border-color: var(--accent-2);
  box-shadow: var(--shadow-2); }
.cb-n { display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: var(--pill);
  background: #fff; color: var(--accent-2); font-size: 12.5px; font-weight: 700; }
.cb-imp { font-variant-numeric: tabular-nums; font-weight: 700; }

/* `margin-left:auto` los pega a la derecha. En las páginas normales ya
   quedaban ahí porque el buscador de la cabecera, que crece, los empujaba; en
   la PORTADA ese buscador se esconde —manda el grande— y sin nada que empuje
   se quedaban pegados al nombre de la tienda, con medio renglón vacío al lado. */
.head-nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.head-nav a { color: var(--ink); font-weight: 600; font-size: 14px; }
.head-nav .admin-link { color: var(--brand); }
.pill { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 12px; text-align: center; font-weight: 700; }
/* Un aviso pendiente es urgencia, no una compra: rojo. */
.pill.hot { background: var(--bad); }
.cat-nav { background: var(--brand); color: #fff; }
.cat-nav .wrap { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.cat-links { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.cat-links a { color: #fff; padding: 10px 14px; font-weight: 500; font-size: 14px; border-radius: var(--pill); }
.cat-links a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.menu-btn { display: none; font: inherit; background: none; color: #fff; border: 1px solid rgba(255,255,255,.4); padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.veh-box { display: flex; align-items: center; gap: 4px; }
.my-vehicle { color: #fff; background: rgba(255,255,255,.14); padding: 6px 12px; border-radius: 20px; font-size: 14px; font-weight: 600; }
.my-vehicle.on { background: var(--brand-2); }
.my-vehicle:hover { text-decoration: none; filter: brightness(1.1); }
.veh-clear { color: #fff; padding: 4px 8px; font-size: 13px; opacity: .8; }

.flash { padding: 12px 16px; border-radius: 8px; margin: 0 0 18px; background: #E7F5EA; border: 1px solid #BFE3C6; color: var(--ok); font-weight: 600; }
.flash.err { background: #FDECEA; border-color: #F5C2BC; color: var(--bad); }

/* ---------- Portada ---------- */
.hero { background: linear-gradient(135deg, var(--brand-2), var(--brand) 60%, #1F4F82); color: #fff; border-radius: 14px; padding: 36px 32px; margin-bottom: 30px; }
/* (La mascota se mudó al buscador grande — sus reglas están junto a `.buscon`.) */
.hero h1 { font-size: 32px; margin: 0 0 6px; }
.hero-text p { margin: 0 0 20px; opacity: .9; font-size: 17px; }
.finder { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; background: rgba(255,255,255,.1); padding: 16px; border-radius: 10px; }
.finder label { color: #fff; font-size: 13px; font-weight: 600; margin: 0; }
.finder label span { display: block; margin-bottom: 4px; }
.finder select { width: 100%; max-width: none; font: inherit; padding: 11px 12px; border-radius: 8px; border: 0; margin: 0; background: #fff; color: var(--ink); }
.finder select:disabled { background: #DCE3EA; color: #667085; }
.finder .btn { padding: 12px 26px; }
.hero-alt { margin: 14px 0 0; font-size: 14px; opacity: .9; }
.hero-tools { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }
.hero-tools a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
                border: 1px solid rgba(255,255,255,.55); border-radius: var(--pill); color: #fff; font-weight: 600; }
.hero-tools a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.hero-tools a:focus-visible { outline: 3px solid #FFD9B8; outline-offset: 2px; }
/* Sólo en pantallas angostas, donde los filtros van plegados. */
.solo-movil { display: none; }
@media (max-width: 900px) {
  .solo-movil { display: block; }
  .veh-herramientas { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
  .veh-herramientas .despiece-cta { margin: 0; }
  .veh-herramientas .btn { align-self: flex-start; }
}
.hero-alt a { color: #FFD9B8; text-decoration: underline; }
.home-sec { margin: 34px 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sec-head h2 { font-size: 22px; margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px; color: var(--ink); transition: .15s; }
.tile:hover { border-color: var(--brand); text-decoration: none; box-shadow: var(--shadow-2); }
.tile b { display: block; font-size: 15px; }
.tile small { color: var(--muted); }
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 34px 0; }
.trust div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.trust span { font-size: 28px; display: block; margin-bottom: 6px; }
.trust b { display: block; margin-bottom: 4px; }
.brand-row { display: flex; gap: 10px; flex-wrap: wrap; }
.brand-chip { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 8px 16px; font-weight: 700; color: var(--brand); }
.brand-chip small { font-weight: 400; color: var(--muted); }
.faq-teaser details, .faq-list details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; margin-bottom: 8px; }
.faq-teaser summary, .faq-list summary { cursor: pointer; font-weight: 600; }
.faq-list details div, .faq-teaser details div { padding: 8px 0 4px; color: #333; }
.cta-box { text-align: center; background: var(--surface); border: 1px dashed var(--line); padding: 22px; border-radius: var(--radius); }

/* ---------- Banners de promociones ---------- */
.promo-banners { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 0 0 30px; }
/* Tinte, no bloque macizo. Era un rectángulo naranja a toda página y le
   ganaba al carrito, que es lo que de verdad hay que encontrar. La promoción
   se sigue leyendo —el descuento va grande y en naranja fuerte—, pero deja de
   competir: naranja macizo es para tocar, naranja suave es para enterarse. */
.promo-banner { display: flex; gap: 16px; align-items: center; background: var(--accent-3);
  border: 1px solid #F3D3BC; color: var(--ink); border-radius: var(--radius); padding: 16px 20px; }
.promo-banner:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-2); }
.pb-value { font-size: 34px; font-weight: 800; letter-spacing: -1px; white-space: nowrap; color: var(--accent-2); }
.pb-text b { display: block; font-size: 17px; font-weight: 500; }
.pb-text small { display: block; color: var(--muted); }
.promo-line { color: var(--accent); font-weight: 700; margin: 4px 0; }

/* ---------- Tarjetas de producto ---------- */
/* Tarjetas más anchas y con más aire: la foto es lo que se mira primero en
   una refacción, y a 215 px salía del tamaño de una estampilla. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 5px; color: var(--ink); transition: box-shadow .15s, border-color .15s; position: relative; }
.card:hover { text-decoration: none; box-shadow: var(--shadow-2); border-color: transparent; }
/* Cuadrada y más alta: una pieza alargada —un amortiguador— se veía diminuta
   metida en un 4:3. */
.card-img { position: relative; aspect-ratio: 1/1; background: #F8F9FA; border-radius: var(--radius-s); overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.card-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.noimg { font-size: 42px; color: #B7C0CC; }
.noimg.big { font-size: 96px; }
.badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: var(--pill); background: #F1F3F4; color: var(--ink); text-transform: uppercase; letter-spacing: .3px; }
/* Señal de dinero, no botón: naranja suave para no competir con el de comprar. */
.badge.promo { background: var(--accent-3); color: var(--accent-2); }
.badge.new { background: var(--brand-3); color: var(--brand); }
.badge.sale { background: var(--bad); color: #fff; }
.card .meta, .detail .meta { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.card h3 { font-size: 15px; margin: 0; line-height: 1.35; font-weight: 500; min-height: 2.7em; }
.card .sku { font-size: 12px; color: var(--muted); }
/* Precio abajo a la izquierda y existencia a la derecha, en su propio renglón
   con una línea de separación: son las dos cosas que se miran antes de entrar
   a la ficha, y antes competían con el nombre. */
/* `wrap`: en una tarjeta angosta el precio y la existencia no caben en el
   mismo renglón, y sin esto la existencia empujaba la página de lado. */
.card-foot { display: flex; align-items: baseline; justify-content: space-between;
  gap: 2px 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--line-2); }
.price { color: var(--ink); font-weight: 700; font-size: 19px; letter-spacing: -.2px; }
.price.quote { color: var(--warn); font-size: 14px; font-weight: 500; }
.price.big { font-size: 30px; }
/* La existencia, dicha siempre. Antes sólo se avisaba cuando estaba agotado,
   así que «sí hay» —que es lo que anima a comprar— no se decía nunca. */
.stk { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.stk.ok    { color: var(--ok); }
.stk.low   { color: var(--warn); }
.stk.order { color: var(--muted); }
.stk.quote { color: var(--muted); }
.stk.oos   { color: var(--bad); }
/* «¿Le queda a mi coche?» — la pregunta de siempre, contestada en la tarjeta.
   Verde y con el nombre del coche: un ✔ solo no dice de qué habla. */
/* Bloque, no píldora: el nombre del coche puede ocupar dos renglones y una
   píldora partida se ve rota. */
.fit-si { display: block; background: #E6F4EA; color: #137333; font-size: 11.5px;
  font-weight: 500; line-height: 1.35; padding: 4px 9px; border-radius: var(--radius-s);
  margin-bottom: 2px; }
.card.le-queda { border-color: #C6E7CF; }
.card.le-queda:hover { border-color: transparent; }
.compare { color: var(--muted); font-size: 14px; }
.oos { color: var(--bad); font-size: 12px; font-weight: 700; }
.empty { color: var(--muted); background: var(--surface); border: 1px dashed var(--line); padding: 20px; border-radius: var(--radius); }
.empty ul { margin: 8px 0 0; }
.fav-item { position: relative; }
.fav-item form { position: absolute; top: 8px; right: 8px; }

/* ---------- Catálogo ---------- */
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.cat-layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }
.facets { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.facet-box > summary { cursor: pointer; list-style: none; }
.facet-box > summary::-webkit-details-marker { display: none; }
/* En la computadora no hay nada que plegar: el panel va al lado y sobra sitio. */
@media (min-width: 901px) { .facet-box > summary { cursor: default; pointer-events: none; } }
@media (max-width: 900px) {
  .facets { padding: 10px 14px; }
  .facet-box > summary { display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 6px 0; font-size: 15px; }
  .facet-box > summary::after { content: 'Mostrar'; font-size: 13px; font-weight: 400; color: var(--brand); }
  .facet-box[open] > summary::after { content: 'Ocultar'; }
}
.facet-title { font-size: 15px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 10px; }
.facet { border-top: 1px solid var(--line); padding: 12px 0; }
.facet h3 { margin: 0 0 8px; font-size: 14px; }
.facet ul { list-style: none; margin: 0; padding: 0; }
.facet li a { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; color: var(--ink); }
.facet li a:hover { color: var(--brand); text-decoration: none; }
.facet li small { color: var(--muted); }
.facet li.on a { font-weight: 700; color: var(--brand); }
.chip-x { color: var(--bad); font-size: 12px; }
.veh-on { font-weight: 600; }
.cat-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cat-bar h1 { margin: 0; font-size: 24px; }
.cat-bar h1 small { font-size: 14px; font-weight: 400; color: var(--muted); }
.sort-form label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.sort-form select { margin: 0; width: auto; padding: 7px 10px; }
.parsed { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.parsed .chip { background: #E7F5EA; color: var(--ok); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { background: #E8F0FE; color: var(--brand); border-radius: 16px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.chip.clear { background: transparent; text-decoration: underline; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 26px 0; }
.pager a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 14px; }
.pager a.on { font-weight: 700; border-color: var(--brand); background: var(--brand); color: #fff; }
.pager .gap { padding: 7px 4px; color: var(--muted); }

/* ---------- Acceso al despiece ----------
   Antes era un renglón de letra chica entre otros dos enlaces y no lo veía
   nadie. Es de lo mejor que tiene la tienda, así que se enseña como lo enseñan
   los catálogos de refacciones: un recuadro con el dibujo. Azul, no naranja:
   lleva a mirar, no a comprar. */
.despiece-cta { display: flex; align-items: center; gap: 12px; margin: 12px 0;
  padding: 12px 14px; background: var(--brand-3); border: 1px solid #C7D6E6;
  border-radius: var(--radius); color: var(--ink); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.despiece-cta:hover { text-decoration: none; background: #E1EAF4;
  border-color: var(--brand); box-shadow: var(--shadow-2); }
.dc-svg { flex: 0 0 auto; width: 82px; height: 51px; }
.dc-body { fill: #fff; stroke: var(--brand); stroke-width: 2.4; stroke-linejoin: round; }
.dc-rueda { fill: #fff; stroke: var(--brand); stroke-width: 2.4; }
.dc-eje { fill: var(--brand); stroke: none; }
.dc-guia { stroke: var(--brand); stroke-width: 1.3; stroke-dasharray: 3 3; opacity: .5; fill: none; }
.dc-pieza { fill: #fff; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; }
.dc-muelle { stroke-width: 2; }
.despiece-cta:hover .dc-pieza { fill: #FFF; stroke: var(--brand-2); }
.dc-txt { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.dc-txt b { display: block; font-size: 15px; font-weight: 500; color: var(--brand); }
.dc-txt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.dc-flecha { flex: 0 0 auto; font-size: 20px; color: var(--brand); }
/* En la columna de filtros el recuadro es angosto: el dibujo arriba y el texto
   debajo, en vez de apretarlos en una fila de 200 px. */
.facets .despiece-cta { flex-direction: column; align-items: flex-start; gap: 6px; }
.facets .dc-svg { width: 100%; height: auto; max-width: 140px; }
.facets .dc-flecha { display: none; }
.facets .dc-txt small { font-size: 12px; }

/* ---------- Detalle ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.media-main { aspect-ratio: 4/3; background: #F1F3F6; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media-main img, .media-main video, .media-main iframe { width: 100%; height: 100%; object-fit: contain; border: 0; cursor: zoom-in; }
/* (el acercamiento de antes, .zoom, se sustituyó por el visor a pantalla completa: al final de este archivo) */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumb { padding: 0; border: 2px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; line-height: 0; overflow: hidden; width: 72px; height: 72px; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.on { border-color: var(--brand); }
.thumb.video { display: flex; align-items: center; justify-content: center; background: #1B1F24; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.thumb.video span { position: absolute; inset: auto 0 0 0; background: rgba(0,0,0,.55); padding: 3px; text-align: center; }
.detail h1 { font-size: 26px; margin: 4px 0 8px; }
.sku-line { margin: 0 0 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stars { color: #F5A623; letter-spacing: 1px; }
.fit-check { padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.fit-check.yes { background: #E7F5EA; color: var(--ok); }
.fit-check.no { background: #FDECEA; color: var(--bad); }
.buy-box { border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin: 14px 0; background: #FBFCFD; }
.price-row .price { font-size: 30px; }
.stock { font-weight: 700; margin: 6px 0; }
.stock.ok { color: var(--ok); } .stock.low { color: var(--warn); } .stock.order { color: var(--brand); } .stock.oos { color: var(--bad); } .stock.quote { color: var(--warn); font-weight: 500; }
.add-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.qty { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.qty input { width: 58px; text-align: center; border: 0; margin: 0; padding: 10px 4px; }
.qty-btn { font: inherit; font-size: 18px; background: #F1F3F6; border: 0; width: 38px; cursor: pointer; }
.qty-btn:hover { background: #E3E6EA; }
.side-actions { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; }
.assure { list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; color: #333; }
.assure li { padding: 3px 0; }
.tabs { display: flex; gap: 4px; margin: 26px 0 0; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.tabs button { font: inherit; font-weight: 600; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 12px 16px; cursor: pointer; color: var(--muted); }
.tabs button.on { color: var(--brand); border-color: var(--brand); }
.tab-panel { background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; padding: 22px; }
.desc { white-space: pre-line; margin-bottom: 14px; }
.spec-table { border-collapse: collapse; width: 100%; max-width: 640px; }
.spec-table th, .spec-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec-table th { width: 200px; color: var(--muted); font-weight: 600; }
#fit-filter { max-width: 360px; margin-bottom: 10px; }
.fit-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.fit-table th, .fit-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.fit-table th { background: #F4F6F8; position: sticky; top: 0; }
.fit-table tr.mine td { background: #E7F5EA; font-weight: 600; }
.review { border-bottom: 1px solid var(--line); padding: 12px 0; }
.review p { margin: 6px 0 0; }
.review-form { margin-top: 18px; max-width: 560px; }
.ref, .ref-card { background: #F4F6F8; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.ref-card { display: flex; gap: 14px; align-items: center; }
.ref-card img { width: 80px; height: 60px; object-fit: contain; background: #fff; border-radius: 6px; }

/* ---------- Botones y formularios ---------- */
/* El botón de siempre: azul. Píldora, como los de Google. */
.btn { display: inline-block; font: inherit; font-weight: 500; background: var(--brand); color: #fff; border: 0; border-radius: var(--pill); padding: 11px 26px; cursor: pointer; text-align: center; transition: background .15s, box-shadow .15s; }
.btn:hover { background: var(--brand-2); text-decoration: none; box-shadow: var(--shadow-2); }
.btn.ghost { background: #fff; color: var(--brand); border: 1px solid var(--line); padding: 10px 25px; font-weight: 500; }
.btn.ghost:hover { background: var(--brand-3); border-color: var(--brand); box-shadow: none; }
/* *** EL NARANJA ES ESTO Y NADA MÁS: comprar. ***
   Se pone en «Agregar al carrito», «Comprar ahora», «Proceder al pago» y
   «Pagar». Si en una pantalla hay un solo naranja, no hay dónde equivocarse. */
.btn.comprar { background: var(--accent); font-weight: 700; }
.btn.comprar:hover { background: var(--accent-2); }
.btn.ghost.comprar { background: #fff; color: var(--accent-2); border-color: var(--accent); font-weight: 700; }
.btn.ghost.comprar:hover { background: var(--accent-3); }
.btn.small { padding: 7px 16px; font-size: 14px; }
.btn.wide { display: block; width: 100%; }
.btn:disabled { opacity: .6; cursor: wait; }
.link-btn { background: none; border: 0; cursor: pointer; color: var(--brand); font: inherit; padding: 0; text-decoration: underline; }
.link-btn.danger { color: var(--bad); }
.link-btn.copy { font-size: 13px; }
label { display: block; margin: 0 0 12px; font-weight: 600; font-size: 14px; }
label small { font-weight: 400; }
input, textarea, select { font: inherit; width: 100%; max-width: 480px; display: block; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); margin-top: 5px; background: #fff; }
/* El atributo `hidden` tiene que GANARLE a la regla de arriba.
   `display: block` es más específico que el `display: none` que el navegador le
   da por su cuenta a lo marcado como oculto, así que sin esto un campo
   escondido desde JavaScript se queda a la vista. Se notó en la colonia del
   checkout: se veían a la vez el desplegable y la casilla de texto. */
[hidden] { display: none !important; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18,54,93,.14); }
input[type="number"] { width: 120px; }
input[type="file"] { padding: 8px; }
input[type="checkbox"], input[type="radio"] { width: auto; display: inline; margin: 0 6px 0 0; }
label.check, label.radio { font-weight: 500; display: flex; align-items: center; gap: 6px; }
label.check input, label.radio input { margin-top: 0; }
form .btn { margin-top: 6px; }
form.narrow { max-width: 440px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > label { flex: 1 1 180px; }
.row > label.narrow-f { flex: 0 0 110px; }
.inline { display: flex; gap: 6px; }
.inline input { margin: 0; }
.inline-form { display: inline-block; margin: 0 6px 0 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; }
legend { font-weight: 500; font-size: 14px; padding: 0 6px; }
.ship-choice label { margin: 6px 0; }

/* ---------- Carrito / pago ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.cart-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.cart-table th, .cart-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-table th { font-size: 13px; color: var(--muted); }
.cart-table tfoot td { font-weight: 600; }
.cart-table tr.total td { font-size: 18px; }
.cart-img img { width: 70px; height: 54px; object-fit: contain; background: #F1F3F6; border-radius: 6px; }
.cart-form fieldset { margin-top: 14px; background: var(--surface); }
.totals { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: sticky; top: 12px; }
.totals dl, .totals-list { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 12px 0; }
.totals dd, .totals-list dd { margin: 0; text-align: right; font-weight: 600; }
.totals dt, .totals-list dt { color: var(--muted); }
.totals .total, .totals-list .total { font-size: 20px; color: var(--ink); font-weight: 800; border-top: 1px solid var(--line); padding-top: 8px; }
/* El renglón que devuelve el envío. Verde, como todo lo que baja el total: es
   lo único de la lista que resta y tiene que verse que resta. */
.totals dt.gratis, .totals dd.gratis { color: #1E7B45; font-weight: 600; }
.totals dt.gratis small { display: block; font-weight: 400; opacity: .85; }
.coupon-form label { margin-bottom: 0; }
.steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; counter-reset: s; flex-wrap: wrap; }
.steps li { counter-increment: s; font-size: 13px; color: var(--muted); padding: 6px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.steps li::before { content: counter(s) " · "; font-weight: 700; }
.steps li.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.checkout-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.checkout-cols section, .checkout-cols aside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.summary { list-style: none; margin: 0 0 12px; padding: 0; }
.summary li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.paynote { font-size: 13px; color: var(--muted); }
.bank { background: #FFF8E6; border: 1px solid #F0DCA0; padding: 14px; border-radius: 8px; white-space: pre-wrap; font-family: inherit; font-size: 14px; }
/* La referencia del pago se destaca a propósito: un depósito sin el número de
   pedido llega al banco como dinero de nadie y hay que cazarlo a mano. Es la
   única línea de todo el bloque que le pide algo al cliente. */
.pago-ref { background: #FDF3F2; border-left: 4px solid #C0392B; padding: 10px 12px;
            border-radius: 6px; margin: 0 0 10px; }
.pago-ref b { font-size: 1.05em; }
.pago-ref .fineprint { display: block; margin-top: 4px; }
#paypal-buttons { margin: 14px 0; }
.done-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 30px; max-width: 760px; }
.done-box h1 { color: var(--ok); }

/* ---------- Pedido ---------- */
.timeline { display: flex; list-style: none; padding: 0; margin: 20px 0; gap: 0; counter-reset: t; }
.timeline li { flex: 1; text-align: center; font-size: 13px; position: relative; padding-top: 26px; color: var(--muted); }
.timeline li::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 4px; background: var(--line); }
.timeline li::after { content: ""; position: absolute; top: 2px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--line); }
.timeline li.done { color: var(--ink); font-weight: 600; }
.timeline li.done::before { background: var(--ok); }
.timeline li.done::after { border-color: var(--ok); background: var(--ok); }
.timeline li.now::after { border-color: var(--brand); background: var(--brand); box-shadow: 0 0 0 4px rgba(18,54,93,.18); }
.order-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.order-cols section, .order-cols aside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.order-cols .cart-table { border: 0; }
.log { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.log li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.track { background: #E8F0FE; padding: 10px 12px; border-radius: 8px; }
.status { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 10px; background: #EEF1F4; white-space: nowrap; vertical-align: middle; }
.status.pagado, .status.entregado { background: #E7F5EA; color: var(--ok); }
.status.pendiente_transferencia, .status.pendiente { background: #FFF8E6; color: var(--warn); }
.status.enviado, .status.preparando, .status.listo_recoger { background: #E8F0FE; color: var(--brand); }
.status.cancelado { background: #FDECEA; color: var(--bad); }

/* ---------- Mensajes ---------- */
.thread { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.msg.user { align-self: flex-start; }
.msg.admin { align-self: flex-end; background: #E8F0FE; border-color: #CFE0FA; }
.msg small { color: var(--muted); }
.msg p { margin: 4px 0 0; white-space: pre-line; }
.reply-form { max-width: 720px; }
.reply-form textarea { max-width: none; }
.conv-list { list-style: none; padding: 0; margin: 0; }
.conv-list li a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; color: var(--ink); }
.conv-list li a:hover { border-color: var(--brand); text-decoration: none; }
.conv-list li.unread a { border-left: 4px solid var(--brand); }
.conv-list small { display: block; }

/* ---------- Cuenta / auth ---------- */
.auth-cols { display: flex; gap: 24px; flex-wrap: wrap; }
.auth-cols section { flex: 1 1 320px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }

/* ---------- Admin ---------- */
.admin-tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-tabs a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink); }
.admin-tabs a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.admin-tabs a:hover { text-decoration: none; border-color: var(--brand); }
.admin-tabs.sub a { font-size: 13px; padding: 5px 10px; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.admin-table th, .admin-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { background: #F4F6F8; font-size: 13px; }
/* Un aviso ya atendido se queda a la vista pero deja de pedir atención:
   apagado, no escondido. Lo que se esconde parece que nunca pasó. */
.admin-table tr.atenuado td { opacity: .55; }
.admin-table tr.dim td { opacity: .55; }
.admin-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.admin-form.compact { padding: 14px 18px; margin-bottom: 10px; }
.admin-form h3 { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px; }
.admin-form textarea { max-width: none; }
.admin-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.admin-search input, .admin-search select { margin: 0; width: auto; }
.admin-search input[type="search"] { min-width: 260px; }
.thumb-mini { width: 54px; height: 40px; object-fit: contain; background: #F1F3F6; border-radius: 4px; }
.action-box { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 10px 0; background: #FBFCFD; }
.action-box summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.action-box form { margin-top: 8px; }
fieldset.fiscal { background: #FFFDF6; border-color: #F0DCA0; }
/* El auto del cliente en el checkout: sobrio, para que no compita con los
   datos de entrega, que son los obligatorios. */
fieldset.auto-cliente { background: #F7FAFC; border-color: #D8E2EA; }
/* Los accesos a las consolas, arriba del panel. Cada uno con el color de su
   consola: es la misma marca que ve en el letrero al entrar. */
.consolas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.consolas a { flex: 1 1 12rem; display: block; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--c);
  border-radius: 9px; padding: 9px 14px; line-height: 1.35; }
.consolas a:hover { border-color: var(--c); background: #FAFCFD; }
.consolas a b { display: block; font-size: 15px; }
.consolas a small { color: var(--muted); font-size: 12.5px; }
.quick-edit { display: flex; gap: 4px; align-items: center; }
.quick-edit input { width: 84px; margin: 0; padding: 5px 6px; font-size: 13px; }
.quick-edit button { padding: 5px 8px; font-size: 12px; }
.report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.report-cols section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.report-cols h3 { margin-top: 0; }
.bars td .bar { margin: 0; height: 10px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.kpi b { display: block; font-size: 22px; color: var(--brand); }
.kpi span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.dash-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.gal-admin { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.gal-item { width: 120px; text-align: center; border: 2px solid transparent; border-radius: 8px; padding: 4px; }
.gal-item.main { border-color: var(--brand); }
.gal-item img, .gal-item video { width: 110px; height: 82px; object-fit: cover; border-radius: 6px; display: block; background: #111; }
.gal-item span { display: block; font-size: 11px; word-break: break-all; color: var(--muted); }
.gal-actions { display: flex; justify-content: center; gap: 10px; }
.review.admin { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; }
.page-text { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 30px; max-width: 860px; }
.page-text h2 { margin-top: 22px; }

/* ---------- Importación ---------- */
.import-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.import-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin: 0 0 16px; }
.import-box h2 { font-size: 16px; margin: 18px 0 6px; }
.import-box h2:first-child { margin-top: 0; }
table.mini { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; background: var(--surface); }
table.mini th, table.mini td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.bar { height: 14px; border-radius: 7px; background: #E3E6EA; overflow: hidden; margin: 12px 0 6px; }
.bar-fill { height: 100%; width: 0; background: var(--brand); transition: width .25s; }

/* ---------- Pie ---------- */
.site-foot { background: var(--brand-2); color: #C9D6E5; margin-top: 30px; }
.foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding: 36px 16px 20px; }
.foot-cols h4, .foot-cols h2 { color: #fff; margin: 0 0 10px; font-size: 15px; }
/* Oculto a la vista pero lo lee el lector de pantalla (títulos de sección, avisos). */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.foot-cols a { display: block; color: #C9D6E5; padding: 3px 0; font-size: 14px; }
.foot-cols a:hover { color: #fff; }
.foot-cols p { margin: 0 0 8px; font-size: 14px; }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
/* «by Grupo Bunka» en blanco: es quien responde por la tienda, no letra chica. */
.foot-por { color: #fff; font-weight: 500; }

/* ---------- Atención a clientes ---------- */
.lead { font-size: 17px; color: #333; margin: 0 0 20px; max-width: 70ch; }
.support-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin: 0 0 30px; }
.channel { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; color: var(--ink); transition: .15s; }
.channel:hover { text-decoration: none; border-color: var(--brand); box-shadow: var(--shadow-2); }
.channel .ch-ico { font-size: 26px; line-height: 1.1; }
.channel b { font-size: 15px; }
.channel .ch-main { font-weight: 700; color: var(--brand); font-size: 17px; }
.channel small { color: var(--muted); font-size: 12px; }
.channel.wa { background: #F1FAF3; border-color: #BFE3C6; }
.channel.wa .ch-main { color: #128C7E; }
.ticket-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.folio { font-weight: 800; letter-spacing: .5px; background: var(--brand); color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 14px; }
.tk-cat { font-size: 12px; color: var(--muted); }

/* Botón flotante de WhatsApp */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 56px; height: 56px; border-radius: 50%;
            background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.wa-float:hover { filter: brightness(1.06); text-decoration: none; }
@media (max-width: 640px) { .wa-float { right: 12px; bottom: 12px; width: 50px; height: 50px; } }

.cat-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.gen-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }

/* ---------- Personal y niveles de acceso ---------- */
.rol-chip { margin-left: auto; align-self: center; background: #EEF3F9; border: 1px solid #CFE0FA; color: var(--brand);
            border-radius: 20px; padding: 5px 14px; font-size: 12.5px; font-weight: 700; }
.niveles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 0 0 20px; }
.nivel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.nivel b { display: block; margin-bottom: 6px; color: var(--brand); font-size: 14px; }
.nivel ul { margin: 0; padding-left: 18px; }
.nivel li { font-size: 12.5px; color: var(--muted); padding: 1px 0; }

/* ---------- Segunda capa: confirmar con la contraseña ---------- */
.sudo-box { max-width: 460px; margin: 40px auto; background: var(--surface); border: 1px solid var(--line);
            border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 26px 28px; }
.sudo-box h1 { margin: 0 0 8px; font-size: 22px; }
.sudo-form label { display: block; margin: 16px 0 14px; font-weight: 600; font-size: 13.5px; }
.sudo-form input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font-size: 15px;
                   border: 1px solid var(--line); border-radius: 8px; }
.sudo-chip { align-self: center; background: #FFF6E5; border: 1px solid #F0D9A8; color: #8A6100;
             border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 700; }
.sudo-chip.abierta { background: #E8F6EC; border-color: #B7E0C4; color: #1B6B33; }

/* ---------- Códigos originales (OEM) ---------- */
.oem-line { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.oem-chip { display: inline-block; background: #EEF3F9; border: 1px solid #CFE0FA; color: var(--brand);
            border-radius: 6px; padding: 2px 9px; margin: 0 4px 4px 0; font-weight: 700; font-size: 13px; letter-spacing: .3px; }
.oem-chip:hover { background: var(--brand); color: #fff; text-decoration: none; }
.oem-sm { color: var(--brand) !important; font-weight: 600; }
.ct-oem { font-size: 11px; color: #333; }
.ci-oem { color: var(--brand) !important; font-weight: 600; }

.equivalentes .sec-head small { color: var(--muted); }
.eq-wrap { position: relative; }
.eq-brand { position: absolute; top: 8px; right: 8px; background: var(--brand); color: #fff;
            border-radius: 6px; padding: 2px 9px; font-size: 11px; font-weight: 800; letter-spacing: .4px; }

/* ---------- Despiece por vehículo (diagrama) ---------- */
.dz-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: start;
             background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 26px; }
.dz-diagram { text-align: center; }
.car-svg { width: 100%; max-width: 560px; height: auto; }
.car-svg .body { fill: #F1F4F8; stroke: #C3CCD8; stroke-width: 2.5; }
.car-svg .glass { fill: #DCE6F2; stroke: #B6C4D6; stroke-width: 2; }
.car-svg .engine { fill: #E6EBF2; stroke: #B6C4D6; stroke-width: 2; }
.car-svg .caja { fill: none; stroke: #B6C4D6; stroke-width: 2; stroke-dasharray: 7 5; }
.car-svg .wheel { fill: #2C3542; }
.car-svg .axis { stroke: #94A3B4; stroke-width: 3; stroke-linecap: round; }
.car-svg .det { stroke: #B6C4D6; stroke-width: 1.5; }
.car-svg .panel { fill: #F1F4F8; stroke: #B6C4D6; stroke-width: 2; }
.car-svg .luz { fill: #FFF1CC; stroke: #D8B45A; stroke-width: 2; }
.car-svg .luz.tras { fill: #FADCDC; stroke: #D08C8C; }
/* Pestañas del despiece: mecánica / carrocería y luces */
.dz-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.dz-tabs a { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600;
             color: var(--ink); background: var(--surface); }
.dz-tabs a:hover { text-decoration: none; border-color: var(--brand); }
.dz-tabs a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.dz-tabs a small { opacity: .75; font-weight: 500; margin-left: 4px; }
.dz-tabs a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.car-svg .front { fill: #94A3B4; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-anchor: middle; }
.car-svg .lead { fill: none; stroke: #B6C4D6; stroke-width: 1.5; }
.car-svg .lt { fill: var(--brand); font-size: 15px; font-weight: 700; }
.car-svg .ls { fill: var(--muted); font-size: 11.5px; }
.car-svg .zh { fill: transparent; }
/* El diagrama se queda con el naranja a propósito: marca la zona elegida
   sobre un dibujo gris, es una señal funcional y no un botón, y esa página no
   tiene ninguna compra que pueda taparse. */
.car-svg .zb { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.car-svg .zn { fill: #fff; font-size: 15px; font-weight: 800; text-anchor: middle; }
.car-svg .zona { cursor: pointer; }
.car-svg .zona:focus { outline: none; }
.car-svg .zona:focus .zb, .car-svg .zona:hover .zb, .car-svg .zona.hi .zb { fill: var(--brand); r: 21; }
.car-svg .zona.vacia { cursor: default; }
.car-svg .zona.vacia .zb { fill: #C3CCD8; }
.car-svg .zlbl.hi .lt { fill: var(--accent); }
.car-svg .zlbl.hi .lead { stroke: var(--accent); }
.dz-legend h2 { font-size: 17px; }
.zlist { list-style: none; margin: 0 0 10px; padding: 0; }
.zlist a { display: grid; grid-template-columns: 42px 1fr; gap: 2px 12px; align-items: center;
           padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 7px; color: var(--ink); }
.zlist a:hover, .zlist a.hi { text-decoration: none; border-color: var(--accent); background: #FFF6F0; }
.zlist .zc { grid-row: span 2; background: var(--brand); color: #fff; border-radius: 8px; text-align: center;
             font-weight: 800; padding: 7px 0; font-size: 15px; }
.zlist small { color: var(--muted); font-size: 12px; }

.zona-sec { margin: 0 0 26px; scroll-margin-top: 16px; border-radius: 12px; transition: background .4s; }
.zona-sec.flash-zona, .zona-sec.hi { background: #FFF6F0; box-shadow: 0 0 0 10px #FFF6F0; }
.dz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 12px; }
.dz-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dz-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(18,54,93,.18); }
.dz-link { display: flex; gap: 12px; padding: 11px; color: var(--ink); flex: 1; }
.dz-link:hover { text-decoration: none; background: #FAFBFC; }
.dz-img { width: 84px; height: 68px; flex: none; background: #F1F3F6; border-radius: 7px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dz-img img { width: 100%; height: 100%; object-fit: contain; }
.dz-img .noimg { font-size: 26px; }
.dz-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dz-txt b { font-size: 14px; line-height: 1.3; font-weight: 600; }
.dz-txt small { color: var(--muted); font-size: 11.5px; }
.dz-price .price { font-size: 15px; }
.dz-buy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 11px; border-top: 1px solid var(--line); background: #FBFCFD; }
.dz-check { margin: 0; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.dz-buy .qty input { width: 46px; padding: 6px 2px; }
.dz-buy .qty-btn { width: 30px; font-size: 16px; }
.dz-buy .btn.small { margin-left: auto; }
.dz-bar { position: sticky; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
          background: var(--brand); color: #fff; padding: 12px 18px; border-radius: 12px 12px 0 0; margin-top: 10px;
          box-shadow: 0 -4px 16px rgba(0,0,0,.18); }
.dz-bar span { font-weight: 700; }
.dz-bar .link-btn { color: #DCE6F2; margin-right: auto; }
.how { margin: 0 0 12px; padding-left: 20px; }
.how li { margin-bottom: 5px; }

/* ---------- Catálogo imprimible ---------- */
body.printable { background: #E9ECEF; }
.print-bar { background: var(--brand-2); color: #fff; padding: 10px 0; position: sticky; top: 0; z-index: 10; }
.print-bar .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.print-bar a { color: #DCE6F2; font-size: 14px; font-weight: 600; }
.print-bar a:hover { color: #fff; }
.print-bar .grow { flex: 1; }
/* «Guardar en PDF», el que casi todos buscan: blanco sobre la barra oscura. */
.print-bar .btn.claro { background: #fff; color: var(--brand); }
.print-bar .btn.claro:hover { background: var(--brand-3); }
.print-bar .btn:disabled { opacity: .75; cursor: progress; }
/* El recuadro que explica cómo guardar el PDF (catalogo-pdf.php). */
.pdf-ayuda { border: 0; border-radius: 16px; padding: 24px 26px 20px; width: calc(100% - 32px); max-width: 470px;
             color: var(--ink); background: #fff; box-shadow: var(--shadow-2); }
.pdf-ayuda::backdrop { background: rgba(11, 37, 66, .55); }
.pdf-ayuda h2 { margin: 0 0 8px; font-size: 20px; color: var(--brand); }
.pdf-ayuda p { margin: 0 0 12px; }
.pdf-ayuda ol { margin: 0 0 16px; padding-left: 22px; }
.pdf-ayuda li { margin: 7px 0; }
.pdf-ayuda-nota { font-size: 13.5px; color: var(--muted); }
.pdf-ayuda-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media print { .pdf-ayuda { display: none !important; } }
.sheet { max-width: 1000px; margin: 18px auto 40px; background: #fff; padding: 26px 30px 34px; box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.sheet-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 3px solid var(--brand); padding-bottom: 12px; flex-wrap: wrap; }
.sheet-head h1 { font-size: 24px; margin: 0; color: var(--brand); }
.sh-brand { display: flex; align-items: center; gap: 14px; }
.sh-logo { display: block; height: 62px; width: auto; flex: none; }
.sh-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.sh-contact { font-size: 12.5px; text-align: right; color: #333; line-height: 1.6; }
.sheet-title { margin: 18px 0 14px; }
.sheet-title h2 { font-size: 21px; margin: 0; }
.sheet-title p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.cat-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cat-table th { background: #EEF1F4; text-align: left; padding: 7px 8px; border-bottom: 2px solid var(--line); font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; }
.cat-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cat-table tbody tr:nth-child(even) { background: #FAFBFC; }
.ct-sku { font-weight: 700; white-space: nowrap; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cat-item { display: flex; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; break-inside: avoid; }
.ci-img { width: 76px; height: 62px; flex: none; background: #F1F3F6; border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ci-img img { width: 100%; height: 100%; object-fit: contain; }
.ci-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ci-sku { font-size: 12.5px; color: var(--brand); }
.ci-name { font-size: 12.5px; line-height: 1.3; }
.ci-txt small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.ci-app { color: #444 !important; }
.sheet-foot { margin-top: 22px; padding-top: 14px; border-top: 2px solid var(--line); font-size: 12px;
              display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }   /* la marca arriba, a la altura del QR */
.sf-main { flex: 1 1 380px; min-width: 0; }
.sf-comprar { flex: 1 1 100%; font-size: 15px; line-height: 1.5; margin: 0; text-align: center; }
@media (min-width: 1040px) { .sf-comprar { white-space: nowrap; } }
.sf-marca { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 160px; }
.sf-marca img { display: block; height: 56px; width: auto; }
.sf-marca b { font-size: 18px; color: var(--brand); line-height: 1.2; }
.sf-marca a { font-size: 14px; color: var(--brand); }
.sf-nota { flex: 1 1 100%; margin: 0; text-align: justify; hyphens: auto; }
.sh-note { color: var(--muted); }
.sh-qr { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; }
.sh-qr-img { flex: none; line-height: 0; }
.sh-qr-img svg { width: 120px; height: 120px; display: block; }
.sh-qr-txt { font-size: 13px; line-height: 1.45; }
.sh-qr-txt small { display: block; margin-top: 4px; color: var(--muted); word-break: break-all; }

@media print {
  @page { margin: 12mm 10mm; }
  body.printable { background: #fff; }
  .print-bar, .wa-float { display: none !important; }
  .sheet { max-width: none; margin: 0; padding: 0; box-shadow: none; }
  .sheet-head, .sheet-title { break-after: avoid; }
  .cat-table { font-size: 10.5px; }
  .cat-table thead { display: table-header-group; }
  .cat-table tr { break-inside: avoid; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .cat-item { padding: 5px; }
  .sheet-foot { break-inside: avoid; }
  /* En papel caben ~720 px: un poco más chico para que siga en un renglón. */
  .sf-comprar { font-size: 12px; white-space: nowrap; }
  a { color: #000; text-decoration: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  /* `minmax(0,1fr)` y `min-width:0`, no `1fr` a secas: una columna de rejilla
     no baja de lo que mide su contenido, así que en el teléfono el panel de
     filtros se quedaba en 550 px sobre una pantalla de 375 y empujaba la
     página de lado. Es el desbordamiento clásico de CSS Grid. */
  .cat-layout, .cart-layout, .checkout-cols, .order-cols, .dash-cols, .import-grid, .report-cols, .dz-layout { grid-template-columns: minmax(0, 1fr); }
  .cat-layout > *, .cart-layout > *, .checkout-cols > *, .order-cols > *,
  .dash-cols > *, .import-grid > *, .report-cols > *, .dz-layout > * { min-width: 0; }
  .facets, .totals { position: static; max-height: none; }
  .detail { grid-template-columns: 1fr; padding: 16px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .finder { grid-template-columns: 1fr 1fr; }
  .finder .btn { grid-column: span 2; }
}
@media (max-width: 640px) {
  h1 { font-size: 24px; }
  .head-strip .hours, .head-strip .ship-note { display: none; }
  .head-main { gap: 10px; }
  .brand small { display: none; }
  .brand-logo { height: 38px; }
  .head-nav a { font-size: 13px; }
  /* En el teléfono la palabra «Carrito» sobra: el icono ya se entiende, y lo
     que hace falta ver son las piezas y el importe. */
  .cart-btn { padding: 8px 12px; gap: 6px; }
  .cart-btn.con .cb-txt { display: none; }
  .menu-btn { display: inline-block; }
  /* El menú abierto va DEBAJO de la barra y a todo lo ancho. Antes, con `flex: 1`
     heredado, se abría apretado al lado del botón y parecía roto. */
  .cat-links { display: none; flex: 1 1 100%; order: 3; flex-direction: column; gap: 0; padding: 4px 0 10px; }
  .cat-links.open { display: flex; }
  .cat-links a { padding: 13px 14px; font-size: 16px; border-radius: 8px; }
  .hero { padding: 24px 18px; }
  .hero h1 { font-size: 24px; }
  .finder { grid-template-columns: 1fr; }
  .finder .btn { grid-column: auto; }
  /* `minmax(0,1fr)`, no `1fr`: una columna de rejilla no baja de lo que mide
     su contenido, y el distintivo «Compatible con su Volkswagen Vento 2014»
     es largo. Con `1fr` a secas las dos columnas se abrían a 540 px sobre una
     pantalla de 375 y la página se iba de lado. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 10px; }
  .card-img img { padding: 3px; }
  /* En dos columnas el precio y la existencia van uno debajo del otro. */
  .card-foot { flex-direction: column; align-items: flex-start; }
  .price { font-size: 17px; }
  /* Un distintivo largo —«15% EN AMORTIGUADORES»— tapaba la foto entera. */
  .badges { max-width: calc(100% - 16px); }
  .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card h3 { font-size: 14px; }
  .cart-table th:nth-child(3), .cart-table td:nth-child(3) { display: none; }
  .foot-cols { grid-template-columns: 1fr; }
  .timeline li { font-size: 11px; }
  .msg { max-width: 95%; }
  .tab-panel { padding: 14px; }
}
@media print {
  .site-head, .site-foot, .btn, .tabs, .facets, form { display: none !important; }
  main.wrap { padding: 0; }
}

/* ---------- Aviso: correos de pedido que no salieron ---------- */
/* `.aviso` / `.aviso.err` / `.aviso.ok`. Se usaban en el carrito, el pago, la
   página de Banamex y el panel, pero sólo estaban definidos DENTRO de las
   consolas de Cobros y Operación: en la tienda salían como texto negro corrido
   y nadie los veía como aviso. Así estuvo mucho tiempo el «no entregamos en ese
   código postal» del carrito, y el dueño no vio la alerta roja de Envíos
   aunque estaba en su pantalla (26-sep-2026). Mismo lenguaje que .aviso-fallo. */
.aviso { background: #FFF8EC; border: 1px solid #F0D3A1; border-left: 4px solid #D9822B;
         border-radius: 8px; padding: 12px 16px; margin: 0 0 16px; color: #6B4210; line-height: 1.5; }
.aviso.err { background: #FFF4F4; border-color: #F3C9C9; border-left-color: #C0392B; color: #8E2418; }
.aviso.ok  { background: #EEF8F1; border-color: #BFE2CE; border-left-color: #2E7D5B; color: #1B5E3F; }
.aviso b { color: inherit; }
.aviso-fallo { background: #FFF4F4; border: 1px solid #F3C9C9; border-left: 4px solid #C0392B;
               border-radius: var(--radius); padding: 14px 18px; margin: 0 0 22px; }
.aviso-fallo b { color: #A5281B; }
.aviso-fallo p { margin: 6px 0; font-size: 13px; color: var(--muted); }
.aviso-fallo ul { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }

/* ---------- Prueba del envío de correo (panel) ---------- */
.correo-caja { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
               padding: 16px 20px; margin: 0 0 22px; }
.correo-caja h2 { font-size: 17px; margin: 0 0 6px; }
.correo-caja input[type=email] { font: inherit; padding: 8px 11px; border: 1px solid var(--line);
                                 border-radius: 8px; min-width: 230px; margin-right: 6px; }
.prueba-correo { margin-top: 14px; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.prueba-correo.bien { background: #E7F5EA; border: 1px solid #BFE3C6; color: #1E7E34; }
.prueba-correo.mal  { background: #FDECEA; border: 1px solid #F5C2BC; color: #B42318; }
.prueba-correo p { margin: 6px 0; }
.prueba-correo pre { background: #FFF; border: 1px solid var(--line); border-radius: 6px; padding: 10px;
                     overflow-x: auto; font-size: 12px; color: var(--ink); max-height: 320px; }
.prueba-correo summary { cursor: pointer; font-weight: 600; }

/* ---------- Nivel de precio del cliente (mayoreo) ---------- */
.nivel-cliente { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
                 border-radius: var(--radius); padding: 14px 18px; margin: 0 0 20px; }
.nivel-cliente select { font: inherit; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; margin: 0 8px; }
.aviso-nivel { background: #E8F6EC; border: 1px solid #B7E0C4; color: #1B6B33; border-radius: 8px;
               padding: 10px 14px; margin: 0 0 16px; font-size: 14px; font-weight: 600; }

/* ---------- Oferta con reloj («cómprelo ahora») ---------- */
.reloj-oferta { background: #FFF4E5; border: 1px solid #F3C98B; border-left: 4px solid var(--accent);
                border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 14px; color: #8A4B00; }
.reloj-oferta b { color: var(--accent-2); }
/* Urgencia = dinero, no botón: tinte, para no competir con «comprar». */
.badge.urge { background: var(--accent-3); color: var(--accent-2); }

/* ---------- Aviso de tienda en pruebas ---------- */
.aviso-vitrina { background: #FFF4E5; border: 1px solid #F0C48B; border-left: 4px solid #E8681A;
                 border-radius: 8px; padding: 11px 16px; margin: 0 0 18px; font-size: 14px;
                 color: #8A4B00; font-weight: 600; }

/* Márgenes de aviso de precio (Panel → Auditoría) */
.margenes { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center;
            background: #f7f8fa; border: 1px solid #e3e6ea; border-radius: 8px;
            padding: .85rem 1rem; margin: .5rem 0 1rem; }
.margenes label { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; }
.margenes input[type=number] { width: 5rem; }
.margenes .chk { gap: .35rem; }

/* Enlace de la consola de operación (Panel → Operación) */
.ops-liga { background:#f7f8fa; border:1px solid #e3e6ea; border-radius:8px;
            padding:1rem 1.1rem; margin:.5rem 0 1.25rem; }
.ops-liga p { margin:.4rem 0; }
.ops-liga code { background:#fff; border:1px solid #dde2e8; border-radius:5px;
                 padding:.35rem .6rem; font-size:.95rem; user-select:all; }
.ops-liga .inline-form { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; }
.ops-liga .inline-form label { display:flex; flex-direction:column; gap:.25rem; font-size:.9rem; }

/* Panel → Ayuda */
.ayuda { max-width: 52rem; }
.ayuda h2 { margin: 1.8rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid #e3e6ea; }
.ayuda dl { margin: 0; }
.ayuda dt { font-weight: 700; margin-top: .9rem; }
.ayuda dd { margin: .2rem 0 0 1.1rem; color: #444; }
.ayuda p { max-width: 62ch; }

/* ---------- Aviso de cookies ----------
   Sólo aparece si hay medición configurada Y se pidió pedir permiso. Va abajo,
   angosto y sin tapar la página: nadie llegó a la tienda a leer esto. */
.cookie-aviso {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60;
  max-width: 38rem; margin: 0 auto;
  background: #fff; border: 1px solid #d6dce3; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(16, 26, 40, .18);
  padding: 1rem 1.15rem;
  display: flex; flex-wrap: wrap; gap: .85rem; align-items: center;
}
.cookie-aviso p { margin: 0; flex: 1 1 18rem; font-size: .92rem; line-height: 1.5; color: #3b4650; }
.cookie-aviso a { color: #1d3557; }
.cookie-btns { display: flex; gap: .5rem; flex: 0 0 auto; }
@media (max-width: 30rem) {
  .cookie-aviso { padding: .9rem 1rem; }
  .cookie-btns { width: 100%; }
  .cookie-btns .btn { flex: 1 1 auto; }
}

/* ================================================================
   BUNKA KIDS — ninos.php y su aviso en la portada
   ----------------------------------------------------------------
   Es la única parte de la tienda que les habla a niñas y niños, y
   por eso tiene colores propios: amarillo sol, verde, lila… El
   fondo cuadriculado es el de un PLANO DE INGENIERO: el mensaje de
   la sección es «si estudias, un día dibujarás tus propios coches y
   cohetes». Respeta la regla del naranja: aquí nada es naranja,
   porque aquí no se compra nada.
   ================================================================ */
.kids, .k-teaser {
  --k-plano:  #1B5FB5;   /* azul de plano */
  --k-sol:    #FFD23F;
  --k-sol-2:  #C99A00;
  --k-cielo:  #E8F3FF;
  --k-rojo:   #D93343;
  --k-tinta:  #12365D;
  --k-font:   "Arial Rounded MT Bold", "Varela Round", "Nunito", "Trebuchet MS", system-ui, sans-serif;
}
.k-hero, .k-teaser, .k-hoja.k-todas {
  background-color: var(--k-plano);
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
}
.k-ceja { display: inline-block; font-family: var(--k-font); font-size: 14px; letter-spacing: .5px;
          background: var(--k-sol); color: var(--k-tinta); padding: 5px 14px; border-radius: 999px; margin: 0 0 14px; }
.k-btn { display: inline-block; font-family: var(--k-font); font-size: 17px; line-height: 1.2; background: var(--k-sol); color: var(--k-tinta);
         padding: 13px 24px; border-radius: 999px; box-shadow: 0 4px 0 var(--k-sol-2); transition: transform .12s, box-shadow .12s; }
.k-btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 0 var(--k-sol-2); }
.k-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--k-sol-2); }
.k-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.k-btn-2 { background: #fff; box-shadow: 0 4px 0 #9DB8DC; }
.k-btn-2:hover { box-shadow: 0 6px 0 #9DB8DC; }

/* --- Portada de la sección --- */
.k-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px;
          color: #fff; border-radius: 22px; padding: 38px 40px; overflow: hidden; margin: 4px 0 8px; }
.k-hero-txt { align-self: center; position: relative; z-index: 2; }
.k-hero h1 { font-family: var(--k-font); font-size: clamp(28px, 4vw, 44px); line-height: 1.12; font-weight: 700;
             letter-spacing: 0; margin: 0 0 14px; text-wrap: balance; }
.k-hero mark { background: none; color: var(--k-sol); }
.k-lead { font-size: 18px; line-height: 1.55; max-width: 34em; margin: 0 0 24px; color: #EAF2FF; }
.k-acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.k-hero-arte { position: relative; min-height: 360px; margin: -38px -40px -38px 0; }
.k-sol { position: absolute; right: 18px; bottom: 0; width: min(310px, 72%); }
.k-sol::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: 16px; aspect-ratio: 1; border-radius: 50%;
                 background: var(--k-sol); box-shadow: 0 0 0 12px rgba(255,210,63,.25); }
.k-sol img { position: relative; display: block; width: 100%; height: auto; }
.k-plano { position: absolute; left: 6px; top: 34px; width: 128px; height: auto; animation: k-flota 3.2s ease-in-out infinite; }
.k-fuego { stroke: var(--k-sol); animation: k-fuego .5s ease-in-out infinite alternate; transform-origin: 110px 258px; }
.k-cajetin { position: absolute; left: 6px; bottom: 26px; border: 2px solid rgba(255,255,255,.8); font-size: 11px; letter-spacing: .6px;
             line-height: 1.35; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: rgba(21,76,147,.85); }
.k-cajetin span { display: block; padding: 4px 8px; }
.k-cajetin span + span { border-top: 1px solid rgba(255,255,255,.6); }
.k-cajetin b { color: var(--k-sol); }
@keyframes k-flota { 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes k-fuego { to { transform: scaleY(1.18); } }
@media (prefers-reduced-motion: reduce) {
  .k-plano, .k-fuego { animation: none; }
  .k-btn, .k-hoja-img img { transition: none; }
}

/* --- Secciones --- */
.k-sec { margin: 46px 0; }
.k-tit { font-family: var(--k-font); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; color: var(--k-tinta); font-weight: 700;
         margin: 0 0 6px; text-wrap: balance; }
.k-sub { color: var(--muted); margin: 0 0 20px; font-size: 16.5px; max-width: 62em; }

/* Superpoderes: una tarjeta de color por materia */
.k-poderes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.k-poder { border-radius: 18px; padding: 20px 20px 18px; background: var(--k-bg); border: 2px solid var(--k-borde); }
.k-poder span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff;
                font-size: 28px; margin-bottom: 10px; box-shadow: 0 3px 0 var(--k-borde); }
.k-poder b { display: block; font-family: var(--k-font); font-size: 19px; color: var(--k-tinta); margin-bottom: 4px; }
.k-poder p { margin: 0; font-size: 15px; color: #33404F; }
.k-c1 { --k-bg: #FFF6D6; --k-borde: #F2CF5B; }
.k-c2 { --k-bg: #E4F6EC; --k-borde: #86CFA6; }
.k-c3 { --k-bg: #E8F1FF; --k-borde: #98BCF0; }
.k-c4 { --k-bg: #F0EBFF; --k-borde: #BBA8F6; }
.k-c5 { --k-bg: #FFE9EC; --k-borde: #F0A1AB; }
.k-c6 { --k-bg: #E3F7F8; --k-borde: #86D2D6; }

/* El camino: una carretera con su raya amarilla y cinco paradas */
.k-camino { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; position: relative; }
.k-camino::before { content: ""; position: absolute; left: 6%; right: 6%; top: 22px; height: 18px; border-radius: 9px;
                    background: #3A4450 linear-gradient(90deg, var(--k-sol) 55%, transparent 0) center / 34px 3px repeat-x; }
.k-camino li { position: relative; text-align: center; }
.k-camino i { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 10px; border-radius: 50%; font-style: normal;
              background: #fff; border: 4px solid var(--k-plano); color: var(--k-plano); font-family: var(--k-font); font-size: 26px;
              position: relative; z-index: 1; }
.k-camino b { display: block; font-family: var(--k-font); font-size: 17px; color: var(--k-tinta); margin-bottom: 4px; }
.k-camino p { margin: 0; font-size: 14.5px; color: #33404F; }
.k-camino .k-meta i { background: var(--k-sol); border-color: var(--k-tinta); }

/* ¿Sabías que…? */
.k-carro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; align-items: center;
           background: var(--k-cielo); border-radius: 22px; padding: 22px 28px; margin-bottom: 16px; }
.k-carro figure { margin: 0; }
.k-carro img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.k-carro-txt > p { font-size: 17px; margin: 0 0 14px; }
.k-adivina { background: #fff; border: 2px dashed var(--k-plano); border-radius: 14px; padding: 12px 16px; }
.k-adivina summary { cursor: pointer; font-family: var(--k-font); color: var(--k-tinta); font-size: 17px; list-style: none; }
.k-adivina summary::-webkit-details-marker { display: none; }
.k-adivina summary span { display: block; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--k-plano); margin-top: 3px; }
.k-adivina[open] summary span { display: none; }
.k-adivina p { margin: 10px 0 0; font-size: 16px; }
.k-adivina p b { color: var(--k-rojo); font-family: var(--k-font); font-size: 22px; }
.k-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.k-datos div { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: #fff; }
.k-datos span { font-size: 30px; line-height: 1; flex: none; }
.k-datos p { margin: 0; font-size: 15px; }
.k-datos p b { color: var(--k-tinta); }

/* Las hojas: cada una como un papel sobre la mesa */
.k-hojas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.k-hoja { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 12px 14px; }
.k-hoja-img { display: block; background: #F2F4F8; border-radius: 10px; padding: 12px; }
.k-hoja-img img { display: block; width: 100%; height: auto; aspect-ratio: 850 / 1100; object-fit: contain; background: #fff;
                  box-shadow: 0 1px 3px rgba(0,0,0,.14); transform: rotate(-1.2deg); transition: transform .2s; }
.k-hoja:nth-child(even) .k-hoja-img img { transform: rotate(1.2deg); }
.k-hoja-img:hover img, .k-hoja-img:focus-visible img { transform: rotate(0) scale(1.03); }
.k-tipo { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
          padding: 3px 10px; border-radius: 999px; margin-top: 4px; }
.k-tipo-colorear { background: #FFF1C2; color: #6E5100; }
.k-tipo-juego    { background: #DDF3E7; color: #13603F; }
.k-tipo-aprende  { background: #E6ECFF; color: #2C3F9E; }
.k-hoja h3 { font-family: var(--k-font); font-size: 17px; line-height: 1.25; margin: 0; color: var(--k-tinta); }
.k-hoja p { margin: 0; font-size: 14px; color: var(--muted); flex: 1; }
.k-hoja-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.k-hoja-btns .btn { flex: 1 1 auto; padding: 7px 10px; }
.k-todas { justify-content: center; gap: 12px; color: #fff; border: 0; padding: 22px; }
.k-todas:hover { text-decoration: none; }
.k-todas-ico { font-size: 44px; line-height: 1; }
.k-todas b { font-family: var(--k-font); font-size: 22px; line-height: 1.2; }
.k-todas span { font-size: 15px; color: #EAF2FF; }
.k-todas .btn { align-self: flex-start; background: var(--k-sol); color: var(--k-tinta); }

.k-papas { background: #FFFBEA; border: 2px solid #F2CF5B; border-radius: 20px; padding: 22px 28px; margin: 46px 0 18px; }
.k-papas h2 { font-family: var(--k-font); color: var(--k-tinta); margin: 0 0 10px; font-size: 22px; }
.k-papas ul { margin: 0; padding-left: 20px; }
.k-papas li { margin: 6px 0; }
.k-final { text-align: center; font-family: var(--k-font); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.4; color: var(--k-tinta);
           max-width: 40em; margin: 28px auto 8px; text-wrap: balance; }

/* --- El aviso en la portada --- */
.k-teaser { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center;
            color: #fff; border-radius: 22px; padding: 30px 36px; margin: 34px 0; overflow: hidden; }
.k-teaser h2 { font-family: var(--k-font); font-size: clamp(24px, 3vw, 32px); line-height: 1.15; margin: 0 0 10px; font-weight: 700; text-wrap: balance; }
.k-teaser p { margin: 0 0 20px; font-size: 17px; color: #EAF2FF; max-width: 36em; }
.k-teaser p b { color: #FFE38A; }   /* el amarillo sol daba 4.3 de contraste sobre el azul; éste 5.0 */
.k-teaser .k-ceja { color: var(--k-tinta); }
.k-teaser-hojas { position: relative; height: 250px; }
.k-teaser-hojas img { position: absolute; top: 12px; width: 150px; height: auto; aspect-ratio: 850 / 1100; object-fit: contain;
                      background: #fff; border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.28); }
.k-teaser-hojas img:nth-child(1) { left: calc(50% - 205px); transform: rotate(-9deg); }
.k-teaser-hojas img:nth-child(2) { left: calc(50% - 75px); top: 0; z-index: 1; }
.k-teaser-hojas img:nth-child(3) { left: calc(50% + 55px); transform: rotate(9deg); }

/* --- La hoja lista para imprimir (ninos.php?hoja=…) --- */
.kh-consejo { text-align: center; color: var(--muted); font-size: 14px; margin: 14px 16px 0; }
.kh-hoja { max-width: 720px; margin: 16px auto 30px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.14); }
.kh-hoja img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .k-hero { grid-template-columns: minmax(0, 1fr); padding: 30px 26px 0; }
  .k-hero-arte { margin: 0 -26px; min-height: 300px; }
  .k-sol { width: 270px; right: 50%; transform: translateX(50%); }
  .k-poderes, .k-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-carro { grid-template-columns: minmax(0, 1fr); }
  /* La carretera se vuelve vertical */
  .k-camino { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .k-camino::before { left: 22px; right: auto; top: 20px; bottom: 20px; width: 18px; height: auto;
                      background: #3A4450 linear-gradient(180deg, var(--k-sol) 55%, transparent 0) center / 3px 34px repeat-y; }
  .k-camino li { text-align: left; padding-left: 82px; min-height: 62px; }
  .k-camino i { position: absolute; left: 0; top: 0; margin: 0; }
  .k-teaser { grid-template-columns: minmax(0, 1fr); padding: 26px 24px; }
  .k-teaser-hojas { height: 210px; }
  .k-teaser-hojas img { width: 125px; }
  .k-teaser-hojas img:nth-child(1) { left: calc(50% - 170px); }
  .k-teaser-hojas img:nth-child(2) { left: calc(50% - 62px); }
  .k-teaser-hojas img:nth-child(3) { left: calc(50% + 45px); }
}
@media (max-width: 560px) {
  .k-hero { padding: 24px 18px 0; border-radius: 18px; }
  .k-hero-arte { margin: 0 -18px; min-height: 270px; }
  .k-sol { width: 230px; right: 12px; transform: none; }
  .k-plano { width: 96px; top: 16px; }
  .k-cajetin { font-size: 10px; bottom: 18px; }
  .k-lead { font-size: 16.5px; }
  .k-btn { font-size: 16px; padding: 12px 20px; }
  .k-poderes, .k-datos { grid-template-columns: minmax(0, 1fr); }
  .k-carro { padding: 16px; }
  .k-hojas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .k-hoja { padding: 8px 8px 12px; }
  .k-hoja-img { padding: 8px; }
  .k-hoja h3 { font-size: 15px; }
  .k-papas { padding: 18px; }
}
@media print {
  .kh-consejo { display: none; }
  .kh-hoja { max-width: none; margin: 0; box-shadow: none; break-after: page; break-inside: avoid; }
  .kh-hoja:last-of-type { break-after: auto; }
  .kh-hoja img { width: auto; max-width: 100%; max-height: 10.1in; margin: 0 auto; }
}

/* ================================================================
   COTIZADOR PARA TALLERES — cotizar.php, «modo cotización» y la
   franja de la portada
   ----------------------------------------------------------------
   La cotización (.cot-doc) es el papel del TALLER, no de la tienda:
   tinta neutra, sin el azul de la casa ni el logotipo. El naranja
   sólo aparece en «Comprar estas piezas», que sí es comprar.
   ================================================================ */
.cot-ceja { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
            color: var(--brand); background: var(--brand-3); padding: 4px 12px; border-radius: var(--pill); margin: 0 0 12px; }

/* --- La cotización de ejemplo (portada y cotizar.php) --- */
.cot-muestra { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px 14px;
               box-shadow: 0 10px 28px rgba(18,54,93,.16); font-size: 13px; color: #222; transform: rotate(1.4deg);
               max-width: 420px; justify-self: center; width: 100%; }
.cm-sello { position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-4deg); border: 2px solid #B42318; color: #B42318;
            font-weight: 800; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 8px; border-radius: 4px;
            background: rgba(255,255,255,.9); }
.cm-cab { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px solid #222; padding-bottom: 8px; margin-bottom: 8px; }
.cm-cab b { display: block; font-size: 14px; }
.cm-cab small { color: #666; }
.cm-folio { text-align: right; }
.cm-folio b { font-size: 12px; letter-spacing: 1px; }
.cm-cli { margin: 0 0 8px; color: #444; font-size: 12px; }
.cm-fila { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid #E6E8EB; }
.cm-fila b { font-variant-numeric: tabular-nums; font-weight: 600; }
.cm-total { border-bottom: 0; border-top: 2px solid #222; margin-top: 4px; padding-top: 6px; font-size: 15px; }
.cm-total b { font-weight: 800; }
.cm-vig { margin: 8px 0 0; font-size: 11px; color: #555; border: 1px dashed #B8BEC6; padding: 5px 8px; border-radius: 4px; }

/* --- Franja de la portada --- */
.taller-banda { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center;
                background: var(--brand-3); border-radius: 20px; padding: 32px 36px; margin: 34px 0; }
.taller-banda h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; margin: 0 0 10px; color: var(--brand); font-weight: 600; text-wrap: balance; }
.taller-banda .tb-txt p { margin: 0 0 18px; max-width: 36em; font-size: 16.5px; }
.taller-banda .cot-ceja { background: #fff; }

/* --- cotizar.php: la explicación --- */
.cot-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; align-items: center; margin: 8px 0 30px; }
.cot-intro h1 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; color: var(--brand); font-weight: 600; margin: 0 0 12px; text-wrap: balance; }
.cot-lead { font-size: 17px; max-width: 36em; margin: 0 0 18px; }
.cot-pasos { margin: 0 0 22px; padding-left: 22px; display: grid; gap: 8px; max-width: 36em; }
.cot-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; }
.cot-cta span { color: var(--muted); font-size: 14px; }
.cot-vacia { margin: 14px 0 0; padding: 12px 16px; border-radius: var(--radius-s); background: #FFF8EC; border: 1px solid #F0D3A1; }

/* --- cotizar.php: el armado --- */
.cot-cabeza h1 { margin: 0 0 4px; }
.cot-cabeza p { margin: 0 0 18px; color: var(--muted); }
.cot-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; align-items: start; }
.cot-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 16px; margin: 0 0 14px; display: grid; gap: 10px; min-width: 0; }
.cot-panel legend { font-weight: 700; color: var(--brand); padding: 0 6px; }
.cot-panel legend small, .cot-panel label small { font-weight: 400; color: var(--muted); }
.cot-panel label { display: grid; gap: 4px; font-weight: 500; font-size: 14.5px; }
.cot-panel input, .cot-panel textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; width: 100%; min-width: 0; background: #fff; }
.cot-panel input:focus, .cot-panel textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.cot-panel label.check { display: flex; font-size: 14px; }
.cot-panel label.check input { width: auto; }
.cot-num { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cot-num input { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.cot-margen { grid-template-columns: 1fr auto; align-items: center; }
.cot-margen .cot-num input { width: 80px; }
.cot-ayuda { margin: -4px 0 0; font-size: 13px; color: var(--muted); }
.cot-linea { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.cot-linea > .cot-num:last-child { grid-column: span 2; }
.cot-mas { margin: 0; font-weight: 600; }
#c-servicios { display: grid; gap: 8px; }
.cot-panel .link-btn { justify-self: start; font-weight: 600; }

/* Cada pieza de la cotización */
.cot-piezas { display: grid; gap: 10px; }
.cp-fila { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img txt quitar" "ctl ctl ctl";
           gap: 6px 10px; padding: 10px; border: 1px solid var(--line-2); border-radius: 10px; background: #FAFBFC; }
.cp-img { grid-area: img; width: 56px; height: 56px; display: grid; place-items: center; background: #fff; border-radius: 8px; overflow: hidden; font-size: 22px; }
.cp-img img { width: 100%; height: 100%; object-fit: contain; }
.cp-txt { grid-area: txt; min-width: 0; display: grid; gap: 1px; }
.cp-nom { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.cp-txt small { color: var(--muted); font-size: 12.5px; }
.cp-txt .cp-costo { color: var(--ink); }
.cp-ctl { grid-area: ctl; display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.cp-ctl label { display: grid; gap: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cp-ctl input { width: 76px; padding: 6px 8px; text-align: right; }
.cp-venta { margin-left: auto; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.cp-quitar { grid-area: quitar; align-self: start; font: inherit; border: 0; background: none; color: var(--muted); cursor: pointer;
             width: 30px; height: 30px; border-radius: 50%; }
.cp-quitar:hover { background: #FDECEC; color: var(--bad); }
.cp-fuera { grid-template-areas: "txt quitar"; grid-template-columns: minmax(0, 1fr) auto; background: #FFF4F4; }
.cp-fuera .cp-nom { color: var(--bad); font-weight: 500; }
.cs-fila { grid-template-columns: minmax(0, 1fr) auto auto; }
.cs-fila .cp-quitar { grid-area: auto; align-self: center; }

.cot-ganancia { border-radius: var(--radius); background: #EEF8F1; border: 1px solid #BFE2CE; padding: 14px 16px; display: grid; gap: 4px; font-size: 14.5px; }
.cot-ganancia:empty { display: none; }
.cot-ganancia > b { color: #1B5E3F; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.cot-ganancia div { display: flex; justify-content: space-between; gap: 10px; }
.cot-ganancia div b { font-variant-numeric: tabular-nums; }

.cot-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.cot-nota-vista { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.cot-comprar { margin: 16px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--accent-3); }
.cot-comprar p { margin: 0 0 10px; }
.cot-comprar .btn:disabled { opacity: .5; cursor: not-allowed; }
.cot-nueva { margin: 14px 0 0; text-align: center; }

/* --- El papel que recibe el cliente --- */
.cot-doc { --cd-tinta: #1D1F22; --cd-linea: #CDD2D8; background: #fff; color: var(--cd-tinta); border: 1px solid var(--line);
           border-radius: 6px; box-shadow: var(--shadow-2); padding: 28px 30px 24px; font-size: 14px; line-height: 1.45; }
.cd-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2.5px solid var(--cd-tinta); padding-bottom: 12px; }
.cd-taller h2 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.cd-taller p { margin: 4px 0 0; color: #555; }
.cd-marca { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cd-logo { display: block; flex: none; width: auto; height: auto; max-height: 72px; max-width: 200px; object-fit: contain; }
/* El logotipo del taller en el formulario */
.cot-logo { display: grid; gap: 8px; }
.cot-logo-tit { font-weight: 500; font-size: 14.5px; }
.cot-logo-tit small { font-weight: 400; color: var(--muted); }
.cot-logo-caja { display: grid; place-items: center; min-height: 86px; padding: 10px; border: 1.5px dashed var(--line); border-radius: 10px; background: #FAFBFC; }
.cot-logo-caja img { display: block; max-height: 72px; max-width: 100%; width: auto; height: auto; }
.cot-logo-vacio { color: var(--muted); font-size: 13px; text-align: center; }
.cot-logo-btns { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cot-panel label.cot-logo-subir { display: inline-flex; align-items: center; position: relative; font-weight: 500; font-size: 14px; cursor: pointer; }
/* El selector de archivo no se ve pero sigue ahí para el teclado: el foco se marca en el botón. */
.cot-logo-subir input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cot-logo-subir:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.cd-folio { display: grid; text-align: right; font-size: 13px; color: #444; flex: none; }
.cd-folio b { font-size: 15px; letter-spacing: 2px; color: var(--cd-tinta); }
.cd-cliente { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #F3F4F6; border-radius: 4px; padding: 8px 12px; margin: 14px 0; }
.cd-cliente span { display: grid; min-width: 0; }
.cd-cliente small { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #666; }
.cd-cliente b { font-weight: 600; overflow-wrap: anywhere; }
.cd-tabla { width: 100%; border-collapse: collapse; }
.cd-tabla th { white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #555; text-align: left; border-bottom: 1.5px solid var(--cd-tinta); padding: 6px 6px; }
.cd-tabla th:nth-child(n+3), .cd-num { text-align: right; }
.cd-tabla td { padding: 7px 6px; border-bottom: 1px solid var(--cd-linea); vertical-align: top; }
.cd-cant { width: 44px; text-align: center; }
.cd-tabla th:first-child { text-align: center; }
.cd-desc span { display: block; }
.cd-desc small { display: block; color: #666; font-size: 12px; }
.cd-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-grupo td { background: #F7F8FA; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #555; padding: 5px 6px; }
.cd-totales { margin: 12px 0 0 auto; width: min(100%, 300px); display: grid; gap: 3px; }
.cd-totales div { display: flex; justify-content: space-between; gap: 12px; }
.cd-totales b { font-variant-numeric: tabular-nums; font-weight: 600; }
.cd-total { border-top: 2px solid var(--cd-tinta); margin-top: 4px; padding-top: 6px; font-size: 18px; }
.cd-total b { font-weight: 800; }
.cd-notas { margin: 16px 0 0; white-space: pre-line; font-size: 13.5px; }
.cd-vigencia { margin: 16px 0 0; padding: 8px 12px; border: 1px dashed #9AA1AA; border-radius: 4px; font-size: 12.5px; color: #333; }
.cd-firma { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 34px; font-size: 12px; color: #555; }
.cd-linea { border-top: 1px solid var(--cd-tinta); padding-top: 4px; min-width: 220px; text-align: center; }

/* --- «Modo cotización» en el catálogo, la ficha y el despiece --- */
.cot-envoltura { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cot-envoltura > .card { flex: 1; }
.cot-btn { font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; border: 1.5px dashed var(--brand); background: var(--brand-3);
           color: var(--brand); border-radius: var(--pill); padding: 8px 10px; cursor: pointer; }
.cot-btn:hover { background: #DCE6F2; }
.cot-btn.on { background: var(--brand); color: #fff; border-style: solid; }
.dz-buy .cot-btn { flex-basis: 100%; }
.cot-ficha .btn.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.cot-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--brand-2); color: #fff; padding: 10px 0;
             box-shadow: 0 -2px 12px rgba(0,0,0,.22); }
.cot-barra .wrap { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.cot-barra-txt { flex: 1 1 220px; }
.cot-barra .btn { background: #fff; color: var(--brand); }
.cot-barra .link-btn { color: #DCE6F2; font-size: 14px; }
body.con-cot { padding-bottom: var(--cot-alto, 64px); }
body.con-cot .wa-float { bottom: calc(var(--cot-alto, 64px) + 14px); }
body.con-cot .dz-bar { bottom: var(--cot-alto, 64px); }

@media (max-width: 900px) {
  .taller-banda, .cot-intro { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .cot-intro { padding: 0; }
  .cot-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cot-muestra { transform: none; font-size: 12px; }
  .cot-doc { padding: 18px 14px; font-size: 13px; }
  .cd-cab { flex-direction: column; gap: 8px; }
  .cd-logo { max-height: 56px; max-width: 150px; }
  .cd-folio { text-align: left; }
  .cd-cliente { grid-template-columns: 1fr; gap: 6px; }
  .cd-firma { flex-direction: column; align-items: stretch; }
  .cot-barra-txt { font-size: 14px; }
  .cot-btn { font-size: 12.5px; padding: 7px 8px; }
}

/* --- Al imprimir: SÓLO la cotización. Ni menú, ni migas, ni la barra, ni el
       formulario: el cliente recibe el papel del taller y nada más. --- */
@media print {
  body:has(.cot) main > :not(.cot) { display: none !important; }
  .cot > :not(.cot-armar), .cot-cabeza, .cot-form, .cot-acciones, .cot-nota-vista, .cot-comprar, .cot-nueva { display: none !important; }
  .cot-cols { display: block; }
  .cot-doc { border: 0; border-radius: 0; box-shadow: none; padding: 0; font-size: 11pt; }
  .cot-barra, .wa-float, .cookie-aviso { display: none !important; }
  body.con-cot { padding-bottom: 0; }
  .cd-tabla thead { display: table-header-group; }
  .cd-tabla tr, .cd-totales, .cd-vigencia, .cd-firma { break-inside: avoid; }
  .cd-cliente, .cd-grupo td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ================================================================
   ACCESIBILIDAD — el panel «♿ Accesibilidad», el foco del teclado,
   la letra grande, el alto contraste y la vista nocturna.
   (27-sep-2026; ver accesibilidad.php y shop.js)
   ================================================================ */

/* El foco del teclado se ve SIEMPRE, y fuerte. En las franjas oscuras,
   amarillo; en lo claro, azul. Quien navega con la tecla Tab o con un
   lector de pantalla necesita saber dónde está parado. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .btn:focus-visible {
  outline: 3px solid #1A5FCC; outline-offset: 2px; }
:is(.head-strip, .cat-nav, .site-foot, .hero, .print-bar, .cot-barra, .k-hero, .k-teaser, .buscon, .a11y-panel) :is(a, button, summary):focus-visible {
  outline-color: #FFD23F; }

/* --- Botones de la franja de arriba --- */
.a11y-btn, .noche-btn { font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.35); border-radius: var(--pill); padding: 3px 12px; cursor: pointer; line-height: 1.5; }
.noche-btn { padding: 3px 9px; }
.a11y-btn:hover, .noche-btn:hover, .a11y-btn[aria-expanded="true"], .noche-btn[aria-pressed="true"] { background: rgba(255,255,255,.22); }

/* --- El panel --- */
.a11y-panel { background: #0E2E50; color: #fff; border-top: 1px solid rgba(255,255,255,.12); padding: 12px 0; font-size: 14px; }
.a11y-panel .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
.a11y-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.a11y-grupo[hidden] { display: none; }
.a11y-tit { font-weight: 700; color: #DCE6F2; margin-right: 2px; }
.a11y-op { font: inherit; font-weight: 600; color: var(--brand-2); background: #fff; border: 2px solid #fff; border-radius: var(--pill);
  padding: 5px 14px; cursor: pointer; }
.a11y-op[aria-pressed="true"] { background: #FFD23F; border-color: #FFD23F; color: #1D1D1D; }
.a11y-op[hidden] { display: none; }
.a11y-a1 { font-size: 16px; } .a11y-a2 { font-size: 18px; }
.a11y-mas { color: #fff; text-decoration: underline; font-weight: 600; }
.a11y-leyendo .a11y-op[data-leer-pagina] { background: #FFD23F; border-color: #FFD23F; color: #1D1D1D; }

/* «Escuchar esta pieza» en la ficha */
.leer-btn { font: inherit; font-size: 14px; font-weight: 600; color: var(--brand); background: var(--brand-3); border: 1px solid #C8D6E8;
  border-radius: var(--pill); padding: 5px 14px; cursor: pointer; margin: 2px 0 10px; }
.leer-btn[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.leer-btn[hidden] { display: none; }

/* --- Letra más grande: se agranda TODO (texto, botones, imágenes), igual
       que el zoom del navegador, pero con un botón a la vista. --- */
html.letra-1 body { zoom: 1.15; }
html.letra-2 body { zoom: 1.3; }

/* --- Alto contraste: negro sobre blanco, bordes marcados y enlaces
       subrayados. Pensado para baja visión y para leer bajo el sol. --- */
html.alto-contraste {
  --ink: #000; --muted: #1F1F1F; --line: #5A5A5A; --line-2: #8A8A8A;
  --brand: #0A2440; --brand-3: #E6EEF8; }
html.alto-contraste body { color: #000; }
html.alto-contraste main a:not(.btn):not(.card):not(.tile):not(.chip):not(.brand-chip):not(.k-btn):not(.dz-link) { text-decoration: underline; }
html.alto-contraste .card, html.alto-contraste .tile, html.alto-contraste .cot-panel,
html.alto-contraste input, html.alto-contraste select, html.alto-contraste textarea { border-color: #000 !important; border-width: 2px; }
html.alto-contraste .fineprint, html.alto-contraste small, html.alto-contraste .meta, html.alto-contraste .sku { color: #1F1F1F !important; }
html.alto-contraste .btn.ghost { border: 2px solid currentColor; }

/* --- Vista nocturna ---
   Una «inversión inteligente»: se invierte la página entera y se le regresa
   el tono a cada color (hue-rotate), así el blanco pasa a negro y el texto
   oscuro a claro sin tocar uno por uno los ~140 colores de la hoja. Lo que NO
   debe invertirse —fotos, dibujos, videos y las franjas que ya son oscuras
   (cabecera, menú, pie, portada), además del «papel» de la cotización— se
   vuelve a invertir para que quede como está. */
html.nocturno { filter: invert(1) hue-rotate(180deg); background: #fff; }
html.nocturno :is(img, video, iframe, picture, canvas, .ph-img),
html.nocturno :is(.head-strip, .cat-nav, .site-foot, .hero, .buscon, .print-bar, .cot-barra, .k-hero, .k-teaser, .wa-float, .cot-doc, .cot-muestra, .a11y-panel, .kh-hoja) {
  filter: invert(1) hue-rotate(180deg); }
/* Lo que está DENTRO de una franja que ya se regresó no se toca otra vez. */
html.nocturno :is(.head-strip, .cat-nav, .site-foot, .hero, .buscon, .print-bar, .cot-barra, .k-hero, .k-teaser, .cot-doc, .cot-muestra, .a11y-panel, .kh-hoja) :is(img, video, iframe, picture, canvas) {
  filter: none; }
html.nocturno .head-main { background: #fff; }
/* El logotipo es un dibujo de línea azul marino: se deja invertir con la página
   (sale claro sobre el fondo oscuro); regresado a su color casi no se veía. */
html.nocturno .brand-logo { filter: none; }
/* Las sombras invertidas se verían como brillos: fuera. */
html.nocturno :is(.card, .tile, .k-hoja, .cot-doc, .kh-hoja, .sheet) { box-shadow: none; }

/* Pie: la nota de accesibilidad e idiomas */
.foot-a11y { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; padding: 12px 16px 18px; font-size: 13.5px; color: #DCE6F2;
  border-top: 1px solid rgba(255,255,255,.12); }
.foot-a11y a { color: #fff; font-weight: 600; }
.foot-corazon { color: #FF6B6B; }

@media (max-width: 640px) {
  .a11y-btn { padding: 3px 10px; }
  .a11y-panel .wrap { gap: 12px; }
  .a11y-grupo { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Al imprimir, siempre como papel: sin vista nocturna, sin zoom, sin panel. */
@media print {
  html.nocturno, html.nocturno * { filter: none !important; }
  html.letra-1 body, html.letra-2 body { zoom: 1; }
  .a11y-panel, .a11y-btn, .noche-btn, .leer-btn, .foot-a11y { display: none !important; }
}

/* accesibilidad.php */
.a11y-pag { max-width: 780px; }
.a11y-pag h2 { margin-top: 30px; color: var(--brand); }
.a11y-lead { font-size: 18px; }
.a11y-lista { padding-left: 22px; display: grid; gap: 8px; }

/* --- Idiomas: el selector de la franja de arriba y el aviso de la versión piloto --- */
.idiomas { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,.08); border-radius: var(--pill); padding: 2px; }
.idiomas a { color: #DCE6F2; font-weight: 600; font-size: 12.5px; padding: 2px 9px; border-radius: var(--pill); }
.idiomas a:hover { color: #fff; background: rgba(255,255,255,.14); text-decoration: none; }
.idiomas a.on { background: #fff; color: var(--brand-2); }
.aviso-piloto { background: #FFF8E1; border: 1px solid #F2CF5B; border-left: 4px solid #E0A800; border-radius: 8px; padding: 10px 14px;
  margin: 0 0 16px; font-size: 14.5px; color: #4A3B00; }
.aviso-piloto a { color: #6B4E00; font-weight: 600; }
@media (max-width: 640px) { .idiomas a { padding: 2px 7px; font-size: 12px; } }

/* ================================================================
   FICHA DE PROVEEDOR (Truper): viñetas, incluye, garantía, documentos
   ================================================================ */
.sku-cod { color: var(--muted); font-size: 14px; }
.pr-bullets { margin: 4px 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; }
.pr-bullets li { position: relative; padding-left: 22px; line-height: 1.4; }
.pr-bullets li::before { content: "✔"; position: absolute; left: 0; top: 0; color: #1E8E3E; font-weight: 700; }
.pr-h { margin: 22px 0 8px; font-size: 1.05rem; }
.pr-lista { margin: 0 0 6px; padding-left: 20px; max-width: 640px; display: grid; gap: 4px; }
.pr-docs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pr-docs a { display: inline-block; padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--brand); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.pr-docs a:hover, .pr-docs a:focus-visible { border-color: var(--brand); }
.pr-docs small { font-weight: 400; }

/* En el teléfono una tarjeta mide ~145 px y «Bajo pedido · consulte tiempo de
   entrega» mide 234: sin poder partirse en dos renglones empujaba TODA la
   página 63 px a lo ancho (barra horizontal). Medido el 10-nov-2026. */
@media (max-width: 640px) { .card .stk { white-space: normal; } }

/* ================================================================
   VISOR: la foto del producto a pantalla completa (shop.js)
   ================================================================ */
.media-main img[data-full] { cursor: zoom-in; }
.visor { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  background: #fff; overflow: hidden; }
.visor::backdrop { background: rgba(0, 0, 0, .7); }
.visor-lienzo { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.visor-lienzo img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; display: block; }
.visor-lienzo.cerca { display: block; }
.visor-lienzo.cerca img { max-width: none; max-height: none; height: auto; cursor: zoom-out; }
.visor button { position: absolute; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(20, 30, 50, .82);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.visor button[hidden] { display: none; }
.visor button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.visor-x { top: 12px; right: 12px; }
.visor-ant { left: 10px; top: 50%; transform: translateY(-50%); }
.visor-sig { right: 10px; top: 50%; transform: translateY(-50%); }
.visor-pie { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px;
  background: rgba(20, 30, 50, .82); color: #fff; font-size: 13.5px; white-space: nowrap; pointer-events: none; }

/* ================================================================
   LOS DOS MUNDOS EN EL MENÚ: «Herramientas y ferretería» y su panel
   de departamentos (un <details>; lo cierra shop.js al tocar fuera)
   ================================================================ */
.dep-menu { position: relative; }
.dep-menu > summary { list-style: none; cursor: pointer; color: #fff; padding: 10px 14px; font-weight: 500; font-size: 14px;
  border-radius: var(--pill); user-select: none; }
.dep-menu > summary::-webkit-details-marker { display: none; }
.dep-menu > summary::after { content: "▾"; margin-left: 6px; font-size: 11px; opacity: .85; }
.dep-menu[open] > summary::after { content: "▴"; }
.dep-menu > summary:hover, .dep-menu[open] > summary { background: rgba(255,255,255,.12); }
.dep-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; width: min(680px, 92vw); padding: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(10, 25, 50, .22);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.cat-links .dep-panel a { color: var(--ink, #1B2430); padding: 9px 12px; font-size: 14.5px; font-weight: 500; border-radius: 8px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cat-links .dep-panel a:hover, .cat-links .dep-panel a:focus-visible { background: #EEF3FA; color: var(--brand); }
.cat-links .dep-panel a small { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.cat-links .dep-panel a.dep-todo { grid-column: 1 / -1; font-weight: 700; color: var(--brand); border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0; margin-bottom: 4px; }
@media (max-width: 900px) {
  /* En el teléfono y la tableta el menú es una lista: el panel deja de flotar y se abre debajo */
  .dep-menu > summary { padding: 13px 14px; font-size: 16px; border-radius: 8px; }
  .dep-panel { position: static; width: auto; margin: 2px 0 8px; grid-template-columns: 1fr; box-shadow: none; }
  .cat-links .dep-panel a { padding: 11px 12px; font-size: 15.5px; }
}

/* ================================================================
   CABECERA (rehecha el 10-nov-2026)
   ----------------------------------------------------------------
   Va al final para mandar sobre las reglas viejas de arriba.
   ================================================================ */
.head-cart { display: flex; align-items: center; }
.head-nav { margin-left: auto; }
.nav-casa { display: contents; }
.hs-lupa { display: none; width: 20px; height: 20px; }
.menu-btn svg { width: 24px; height: 24px; display: block; }
.mundos-movil, .menu-movil { display: none; }
.cat-links { flex-wrap: nowrap; align-items: center; }
.cat-links > a, .dep-menu > summary { white-space: nowrap; }
.cat-links .dep-panel a.dep-util { color: var(--brand); font-weight: 600; }
.cat-links .dep-panel a.dep-util + a:not(.dep-util) { margin-top: 4px; }
/* el panel de departamentos en vista nocturna: la franja ya se volvió a invertir,
   así que aquí dentro los colores salen como son; se oscurece a mano */
html.nocturno .dep-panel { background: #16202C; border-color: #2B3A4D; }
html.nocturno .cat-links .dep-panel a { color: #E6EDF5; }
html.nocturno .cat-links .dep-panel a:hover { background: #22303F; color: #fff; }
html.nocturno .cat-links .dep-panel a.dep-todo, html.nocturno .cat-links .dep-panel a.dep-util { color: #9CC4F0; border-color: #2B3A4D; }

/* La franja de arriba en UN renglón: con «Rastrear pedido» y «Ayuda» dentro, a
   1280 px el botón de accesibilidad se caía a un segundo renglón. El horario
   cede su sitio primero (sigue en el pie) y la nota de envío se recorta. */
.head-strip .wrap { flex-wrap: nowrap; }
.head-strip .wrap > * { flex: none; }
.head-strip .wrap > .grow { flex: 1 1 0; }
.head-strip .ship-note { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1360px) { .head-strip .hours { display: none; } }

/* Hasta 900 px (teléfono y tableta): entre 641 y 900 la cabecera de escritorio
   se partía en cuatro renglones y medía 332 px. */
@media (max-width: 900px) {
  /* TRES RENGLONES, Y SÓLO EL DEL BUSCADOR SE QUEDA.
     La cabecera es una rejilla; .head-main y .cat-nav «desaparecen como cajas»
     (display: contents) para que sus hijos se acomoden en ella:
        1 · logotipo ........................ cuenta        50 px
        2 · Autopartes · Herramientas · 🚗 vehículo         42 px
        3 · ☰ · [ buscador ] · carrito                      56 px
        4 · el menú, cuando se abre
     `position: sticky` con `top: -92px` (los dos primeros renglones) hace que al
     bajar se vayan el 1 y el 2 y el 3 se quede pegado arriba. Sin JavaScript y
     sin que la página brinque. Si se cambia el alto de un renglón, hay que
     cambiar ese -92. */
  .site-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 50px 42px 56px auto;
    position: sticky; top: -92px; z-index: 40; border-bottom: 1px solid var(--line); }
  html { scroll-padding-top: 66px; }           /* un enlace a #algo no queda debajo de la barra */
  .head-strip { display: none; }
  .head-main, .cat-nav, .cat-nav > .wrap { display: contents; }
  .a11y-panel { grid-column: 1 / -1; grid-row: 4; }

  /* Los renglones 1 y 2 NO ocupan columnas: cada pieza cruza la rejilla entera y
     se arrima a su lado (justify-self). Si ocuparan columnas, la tercera mediría
     lo que «Entrar ♡» (151 px) y el buscador del renglón 3 se quedaba en 174. */
  /* 1 · logotipo y cuenta */
  .brand { grid-row: 1; grid-column: 1 / -1; justify-self: start; padding-left: 14px; min-width: 0; }
  .brand b { font-size: 18px; white-space: nowrap; }
  .brand-logo { height: 34px; }
  .head-nav { grid-row: 1; grid-column: 1 / -1; justify-self: end; padding-right: 14px; gap: 14px; flex-wrap: nowrap; margin: 0; }
  .head-nav a { font-size: 14px; white-space: nowrap; }
  .nav-casa, .nav-txt { display: none; }       /* las consolas del personal van en el menú */

  /* 2 · los dos mundos y el vehículo, sobre el azul */
  .site-head::before { content: ""; grid-row: 2; grid-column: 1 / -1; background: var(--brand); }   /* el azul del renglón 2 */
  .mundos-movil { grid-row: 2; grid-column: 1 / -1; justify-self: start; display: flex; align-items: center; gap: 2px; padding-left: 8px;
    min-width: 0; }
  .mundos-movil a { color: #fff; font-weight: 600; font-size: 14.5px; padding: 8px 9px; border-radius: 8px; white-space: nowrap; }
  .veh-box { grid-row: 2; grid-column: 1 / -1; justify-self: end; padding-right: 10px; min-width: 0; }
  .my-vehicle { font-size: 13px; padding: 5px 10px; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }

  /* 3 · ☰ · buscador · carrito */
  .menu-btn { grid-row: 3; grid-column: 1; display: flex; align-items: center; justify-content: center; width: 50px; height: 56px;
    padding: 0; border: 0; border-radius: 0; color: var(--brand); background: none; }
  .head-search, body.con-buscon .head-search { grid-row: 3; grid-column: 2; display: flex; align-self: center; flex: none; min-width: 0; }
  .head-search input { padding: 10px 14px; font-size: 16px; min-width: 0; }     /* 16 px: con menos, el iPhone acerca la pantalla al tocar */
  .head-search button { padding: 0 14px; }
  .hs-txt { display: none; } .hs-lupa { display: block; }
  .head-cart { grid-row: 3; grid-column: 3; padding: 0 12px 0 8px; }
  .cart-btn { min-height: 40px; }
  .cart-btn .cb-txt { display: none; }          /* el icono ya se entiende */

  /* 4 · el menú */
  .cat-links { grid-row: 4; grid-column: 1 / -1; display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 10px 14px; background: var(--brand); max-height: calc(100dvh - 58px); overflow-y: auto; overscroll-behavior: contain; }
  .cat-links.open { display: flex; }
  .cat-links > a, .dep-menu > summary { white-space: normal; }
  .menu-movil { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.22); }
  .menu-movil > a, .mm-casa a { display: block; color: #fff; padding: 12px 14px; font-size: 15.5px; border-radius: 8px; font-weight: 500; }
  .mm-casa { border-top: 1px solid rgba(255,255,255,.22); margin-top: 6px; padding-top: 6px; }
  .mm-ajustes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 8px 2px; }
  .mm-ajustes .noche-btn, .mm-ajustes .a11y-btn { padding: 8px 12px; font-size: 14px; }
  .mm-ajustes .idiomas a { padding: 6px 11px; font-size: 13.5px; }

  /* El buscador grande de la portada sobra: el de la barra ya está siempre a la vista */
  .buscon { display: none; }
}
@media (max-width: 380px) {
  .mundos-movil { padding-left: 4px; }
  .mundos-movil a { font-size: 13px; padding: 8px 5px; }
  .my-vehicle { max-width: 36vw; font-size: 12.5px; padding: 5px 8px; }
}
/* Entre 901 y 1100 px (laptop chica, tableta acostada) el logotipo con su lema,
   el buscador, la cuenta y el carrito no cabían en un renglón y la cabecera se
   partía en dos. Sin el lema caben. */
@media (min-width: 901px) and (max-width: 1100px) {
  .brand small { display: none; }
  .head-main { gap: 14px; }
  .head-search { flex-basis: 260px; }
  .cat-links > a, .dep-menu > summary { padding-left: 10px; padding-right: 10px; }
}

/* ================================================================
   BUSCADOR DE LA CABECERA: micrófono y cámara dentro de la caja
   ================================================================ */
.hs-iconos { display: flex; align-items: center; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.head-search:focus-within .hs-iconos { border-color: var(--brand); }
.hs-iconos .buscon-mic, .hs-iconos .buscon-cam { width: 38px; height: 38px; border: 0; background: none; color: #5F6B7A; cursor: pointer; border-radius: 50%; padding: 0; }
.hs-iconos .buscon-mic[hidden], .hs-iconos .buscon-cam[hidden] { display: none; }
.hs-iconos svg { width: 21px; height: 21px; }

/* ================================================================
   PORTADA DE LOS DOS MUNDOS (10-nov-2026)
   Dos puertas: autopartes (por vehículo) y herramientas (por
   departamento), cada una con su mascota. Reusan .hero y .finder.
   ================================================================ */
.portada-h1 { font-size: 26px; margin: 4px 0 14px; }
.puertas { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-bottom: 18px; }
.puerta { position: relative; overflow: hidden; margin-bottom: 0; padding: 26px 26px 22px; display: flex; flex-direction: column; }
.puerta .hero-text { padding-right: 150px; min-height: 132px; }
.puerta h2 { font-size: 25px; margin: 0 0 6px; line-height: 1.2; color: #fff; }
.puerta p { margin: 0 0 14px; }
.puerta-ceja { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin: 0 0 4px !important; }
.puerta-herr { background: linear-gradient(135deg, #20262E, #2F3B49 60%, #3C4B5C); }
/* la puerta a la que hoy no le toca mascota aprovecha todo el ancho */
.puerta.sin-masc .hero-text { padding-right: 0; min-height: 0; }
.puerta-masc { position: absolute; right: 6px; top: 8px; height: 168px; pointer-events: none; }
.puerta-masc img { height: 100%; width: auto; display: block; }
.puerta .finder { grid-template-columns: 1fr 1fr; margin-top: auto; position: relative; }
.puerta .finder .btn { grid-column: auto; }
.puerta .hero-tools { margin-top: 14px; }
.sello-dist { display: inline-block; background: #fff; color: #20262E; font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: var(--pill); margin-right: 4px; }
.puerta-deptos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; position: relative; }
.puerta-deptos a { background: rgba(255,255,255,.12); color: #fff; padding: 8px 14px; border-radius: var(--pill); font-size: 14px; font-weight: 500; }
.puerta-deptos a:hover, .puerta-deptos a:focus-visible { background: rgba(255,255,255,.24); text-decoration: none; }
.confianza { list-style: none; margin: 0 0 8px; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; color: var(--muted); }
.confianza b { color: var(--ink); margin-right: 4px; }
.deptos-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.depto-foto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); transition: .15s; }
.depto-foto:hover, .depto-foto:focus-visible { border-color: var(--brand); box-shadow: var(--shadow-2); text-decoration: none; }
.depto-foto img { width: 100%; max-width: 132px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; margin-bottom: 6px; }
.depto-foto b { font-size: 14.5px; line-height: 1.25; }
.depto-foto small { color: var(--muted); font-size: 12.5px; }
html.nocturno .puerta-masc img, html.nocturno .depto-foto img { filter: none; }
@media (max-width: 900px) {
  .portada-h1 { font-size: 21px; margin: 0 0 10px; }
  .puertas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .puerta { padding: 18px 16px 16px; }
  .puerta .hero-text { padding-right: 104px; min-height: 104px; }
  .puerta h2 { font-size: 20px; }
  .puerta-masc { height: 122px; right: 2px; top: 6px; }
  /* En el teléfono cada puerta medía casi una pantalla (715 y 655 px) y el
     primer producto quedaba 2.2 pantallas abajo. El buscador por vehículo va en
     dos columnas; los atajos (despiece, PDF, cotizar) ya están en el menú; y de
     los departamentos se enseñan seis, con el botón para verlos todos. */
  .puerta .finder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px; }
  .puerta .finder label { font-size: 12px; }
  .puerta .finder select { padding: 9px 8px; }
  .puerta .finder .btn { padding: 10px 8px; align-self: end; }
  .puerta-auto .hero-tools { display: none; }
  .puerta p { margin-bottom: 10px; font-size: 14.5px; }
  .puerta-deptos { gap: 6px; }
  .puerta-deptos a { padding: 6px 11px; font-size: 13px; }
  .puerta-deptos a:nth-child(n+7) { display: none; }
  .puerta .hero-tools { margin-top: 10px; }
  .puerta .hero-tools a { min-height: 40px; padding: 8px 14px; }
  .confianza { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 22px; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .deptos-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .depto-foto { padding: 8px 6px 10px; }
  .depto-foto b { font-size: 12.5px; }
}
@media (max-width: 380px) { .deptos-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================
   TARJETA CON BOTÓN, PROMESA DE SALIDA Y BARRA DE COMPRA  (etapa 3, 10-nov-2026)
   ----------------------------------------------------------------
   La tarjeta (un enlace) y su botón «Agregar» van en una caja: juntos se ven
   como una sola tarjeta. El naranja sigue queriendo decir COMPRAR.
   ================================================================ */
.card-caja { display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius); transition: box-shadow .15s; }
.card-caja > .card { flex: 1; }
.card-caja.con-boton > .card { border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; padding-bottom: 10px; }
.card-caja.con-boton > .card:hover { box-shadow: none; border-color: var(--line); }
.card-caja.con-boton > .card.le-queda:hover { border-color: #C6E7CF; }
.card-caja.con-boton:hover { box-shadow: var(--shadow-2); }
.card-add { margin: 0; padding: 0 14px 14px; background: var(--surface); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius); }
.card.le-queda + .card-add { border-color: #C6E7CF; }
.card-add .btn { width: 100%; justify-content: center; text-align: center; padding: 9px 12px; font-size: 14.5px; min-height: 40px; }
.card-add .btn.listo { background: var(--ok); border-color: var(--ok); color: #fff; }
.card-add .btn[disabled] { opacity: 1; cursor: default; }
.cot-envoltura > .card-caja { flex: 1; }
.fav-item > .card-caja, .eq-wrap > .card-caja { height: 100%; }
/* «Sale del almacén al día siguiente» es una buena noticia, no una advertencia */
.stk.order { color: var(--ok); }
.promesa { margin: 8px 0 2px; font-weight: 600; color: var(--ok); }

/* el aviso que sale al agregar desde una tarjeta */
.aviso-flot { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); z-index: 90; max-width: min(92vw, 30rem);
  background: #14532D; color: #fff; font-weight: 600; font-size: 14.5px; padding: 11px 18px; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aviso-flot.ver { opacity: 1; transform: translate(-50%, 0); }
body.con-cot .aviso-flot { bottom: calc(var(--cot-alto, 64px) + 14px); }

/* barra fija de compra de la ficha: sólo teléfono y tableta */
.barra-compra { display: none; }
@media (max-width: 900px) {
  .barra-compra:not([hidden]) { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(0,0,0,.10);
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px)); }
  .barra-compra .bc-precio { flex: 1; min-width: 0; font-size: 15px; line-height: 1.2; }
  .barra-compra .bc-precio .price { font-size: 19px; }
  .barra-compra .btn { flex: 0 0 auto; padding: 11px 18px; white-space: nowrap; }
  body.con-barra-compra { padding-bottom: 66px; }
  body.con-barra-compra .wa-float { bottom: 78px; }
  body.con-barra-compra .aviso-flot { bottom: 80px; }
  body.con-cot .barra-compra { bottom: var(--cot-alto, 64px); }
  body.con-cot.con-barra-compra { padding-bottom: calc(var(--cot-alto, 64px) + 66px); }
}
@media print { .barra-compra, .aviso-flot, .card-add { display: none !important; } }

/* bloque para profesionales (portada) */
.pro-puntos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pro-puntos li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.pro-puntos li > span { font-size: 22px; line-height: 1; }
.pro-puntos b { font-size: 15.5px; color: var(--brand); }
.pro-puntos small { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 900px) { .pro-puntos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .pro-puntos { grid-template-columns: 1fr; } }

/* Vista nocturna en teléfono: ahí `.cat-nav` va con display: contents y no tiene
   caja a la que ponerle el filtro, así que se le pone a sus piezas (el renglón
   azul de los dos mundos y el menú). Sin esto salían en azul claro. */
@media (max-width: 900px) {
  html.nocturno .site-head::before, html.nocturno .mundos-movil, html.nocturno .veh-box, html.nocturno .cat-links { filter: invert(1) hue-rotate(180deg); }
}

/* ================================================================
   CARRITO Y PAGO  (etapa 4, 10-nov-2026)
   ================================================================ */
h1 .cart-n { font-size: 15px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.cart-lineas { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.cart-linea { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 128px; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.cl-img { display: block; width: 92px; height: 92px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cl-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cl-img .noimg { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 30px; }
.cl-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cl-nombre { color: var(--ink); font-weight: 500; line-height: 1.3; }
.cl-info small { color: var(--muted); font-size: 12.5px; }
.cl-info small.stock { font-weight: 500; }
.cl-info small.stock.ok, .cl-info small.stock.order { color: var(--ok); }
.cl-info small.stock.low { color: var(--warn); } .cl-info small.stock.oos { color: var(--bad); }
.cl-precio { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.cl-precio b { font-size: 17px; }
.cl-precio small { color: var(--muted); font-size: 12.5px; }
.cl-quitar { font-size: 13px; color: var(--muted); padding: 4px 0; }
.cl-quitar:hover { color: var(--bad); }
.cart-acciones { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 0 0 10px; }
.totals .cp-form, .totals .coupon-form { margin: 12px 0; }
.totals .cp-form label, .totals .coupon-form label { margin-bottom: 0; }
.totals dd.por-cotizar, .totals-list dd.por-cotizar { color: var(--warn); }
.totals-list dt.gratis, .totals-list dd.gratis { color: #1E7B45; font-weight: 600; }
.totals-list dt.gratis small { display: block; font-weight: 400; opacity: .85; }
.promesa-carrito { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ok); }
/* meta de envío gratis */
.meta-envio { background: var(--brand-3, #EEF3F9); border-radius: 10px; padding: 10px 12px; margin: 10px 0 4px; }
.meta-envio p { margin: 0 0 7px; font-size: 14px; font-weight: 600; color: var(--brand); }
.meta-envio.lista { background: #E7F5EA; } .meta-envio.lista p { color: var(--ok); }
.me-barra { height: 8px; border-radius: 999px; background: rgba(0,0,0,.10); overflow: hidden; }
.me-barra span { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.meta-envio.lista .me-barra span { background: var(--ok); }
@media (max-width: 640px) {
  .cart-linea { grid-template-columns: 76px minmax(0, 1fr); gap: 10px 12px; }
  .cl-img { width: 76px; height: 76px; }
  .cl-cant { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .cl-precio { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
}

/* cabecera mínima de la pantalla de pago */
.head-min { display: none; }
body.pag-minima .site-head { display: block; position: static; background: #fff; border-bottom: 1px solid var(--line); }
body.pag-minima .site-head::before { display: none; }
body.pag-minima .site-head > :not(.head-min) { display: none !important; }
body.pag-minima .head-min { display: flex; align-items: center; gap: 18px; padding-top: 10px; padding-bottom: 10px; }
body.pag-minima .head-min .brand { padding: 0; min-width: 0; }
.hm-seguro { margin-left: auto; color: var(--ok); font-weight: 600; font-size: 14px; white-space: nowrap; }
.hm-volver { font-size: 14px; white-space: nowrap; }
body.pag-minima .foot-cols, body.pag-minima .foot-a11y { display: none; }
@media (max-width: 560px) { .hm-seguro .hm-txt { display: none; } body.pag-minima .head-min { gap: 10px; } }
/* pasos, resumen y formas de pago a la vista */
.steps li.hecho { background: #E7F5EA; border-color: #BFE3C6; color: var(--ok); }
.steps li.hecho::before { content: "✓ "; }
.steps li.hecho a { color: inherit; }
.summary li { align-items: center; }
.summary .sum-img { width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; flex: 0 0 auto; }
.summary li > span { flex: 1; min-width: 0; }
.pagos-previa { border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px 16px; background: #FBFCFD; }
.pagos-previa p { margin: 0 0 8px; }
.pagos-previa ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pagos-previa li { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 500; }
html.nocturno .head-min .brand-logo { filter: none; }
/* el resumen es angosto: el detalle del envío va en su propio renglón, y el
   código postal no necesita una casilla de lado a lado */
.totals dt small { display: block; font-size: 12.5px; line-height: 1.35; }
.totals .cp-form .inline input { max-width: 7.5em; }
.totals .cp-form .btn { white-space: nowrap; }
/* teléfono: con el carrito lleno, el importe le quitaba el sitio al buscador */
@media (max-width: 480px) { .cart-btn .cb-imp { display: none; } }

/* ================= COMPRA AL PROVEEDOR (compras.php) ================= */
.admin-table .num { text-align: right; white-space: nowrap; }
.compra-tabla td small { color: var(--muted); }
.compra-total td { background: #F4F6F8; font-weight: 600; }
.compra-ojo { color: #B42318; font-weight: 600; }
.compra-form { display: grid; gap: 10px; max-width: 34rem; margin: 14px 0 6px; }
.compra-form label { display: grid; gap: 4px; font-size: 14px; }
.compra-form label:has(input[type=checkbox]) { display: block; }
.compra-form input[type=text], .compra-form input[type=number], .compra-form textarea { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.compra-form .btn { justify-self: start; }
@media print {
  .no-print, .site-head, .site-foot, .wa-float, .cot-barra, .flash, .aviso-piloto, .skip { display: none !important; }
  .import-box { border: 0; padding: 0; }
  .compra-tabla { font-size: 11px; }
  .compra-tabla a { color: inherit; text-decoration: none; }
}

/* ================= KITS Y PRECIO POR VOLUMEN ================= */
/* Verde y azul, no naranja: el naranja es sólo para el botón de comprar. */
.vol-tabla { margin: 10px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #F7FAF7; font-size: 14px; }
.vol-tabla > b { display: block; margin-bottom: 6px; color: var(--ok); }
.vol-tabla ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.vol-tabla li { display: flex; align-items: baseline; gap: 6px; padding: 5px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.vol-tabla li span { color: var(--muted); }
.vol-tabla li small { color: var(--muted); }

.kit-aviso, .kit-casi { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 14px; border: 1px solid #BFD3EA; border-radius: 12px; background: #F1F6FC; color: inherit; text-decoration: none; }
.kit-aviso:hover { border-color: var(--brand); }
.ka-ico { font-size: 26px; line-height: 1; }
.ka-txt, .kc-txt { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 14px; }
.ka-txt b, .kc-txt b { color: var(--brand); }
.ka-ir { color: var(--brand); font-weight: 600; white-space: nowrap; font-size: 14px; }
.kit-casi form { flex: none; }
.cl-info small.cl-promo { color: var(--ok); font-weight: 600; }
.cl-info small.cl-promo s { color: var(--muted); font-weight: 400; }
.cl-info small.cl-vol { color: var(--brand); }

.kits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.kit-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; }
.kit-card:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(15, 39, 71, .10); }
/* Las fotos de sus productos, en una tira del MISMO alto lleve 2, 3 o 4: así las tarjetas quedan parejas. */
.kit-fotos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; background: var(--line); aspect-ratio: 5 / 2; overflow: hidden; }
.kit-fotos img { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #fff; display: block; padding: 6px; box-sizing: border-box; }
.kit-fotos .noimg { display: grid; place-items: center; font-size: 44px; background: #fff; }
.kit-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.kit-ceja { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 0; }
.kit-nombre { font-size: 16px; line-height: 1.3; }
.kit-precios .price { font-size: 20px; font-weight: 700; }
.kit-ahorro { color: var(--ok); font-weight: 600; font-size: 14px; margin: 0; }

.kit-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 8px 28px; align-items: start; }
.kit-cab { grid-column: 1; }
.kit-cab h1 { margin: 2px 0 8px; }
.kit-descr { color: #333; max-width: 70ch; }
.kit-compra { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.kit-compra p { margin: 0 0 8px; }
.kit-sep { color: var(--muted); }
.kit-precio .price { font-size: 30px; font-weight: 700; }
.kit-compra .btn { width: 100%; margin: 6px 0 10px; }
.kit-lista { grid-column: 1; }
.kit-lista h2 { font-size: 18px; margin: 10px 0; }
.kit-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kit-lista li { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.kl-img { display: grid; place-items: center; width: 84px; height: 84px; background: #fff; border-radius: 8px; overflow: hidden; }
.kl-img img { width: 100%; height: 100%; object-fit: contain; }
.kl-info { display: grid; gap: 3px; min-width: 0; }
.kl-info small { color: var(--muted); font-size: 12.5px; }
.kl-precio { text-align: right; display: grid; gap: 2px; white-space: nowrap; }
.kl-precio s { color: var(--muted); font-size: 13px; }
.kit-form textarea, .kit-form input[type=text] { width: 100%; }
.vol-tramos { display: grid; gap: 6px; }
.vol-tramos > div { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.vol-tramos label { display: inline-flex !important; align-items: center; gap: 6px; }
.vol-tramos input { width: 5.2rem; }
@media (max-width: 900px) {
  .kit-ficha { grid-template-columns: minmax(0, 1fr); }
  .kit-compra { grid-column: 1; grid-row: auto; position: static; }
  .kit-aviso, .kit-casi { flex-wrap: wrap; }
  .kit-lista li { grid-template-columns: 64px minmax(0, 1fr); }
  .kl-img { width: 64px; height: 64px; }
  .kl-precio { grid-column: 2; text-align: left; display: flex; gap: 8px; align-items: baseline; }
}
html.nocturno .kit-fotos img, html.nocturno .kl-img img { filter: invert(1) hue-rotate(180deg); }

/* ================= LA MISMA HERRAMIENTA EN OTRA LÍNEA · CORREOS ================= */
.lineas-alt { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.lineas-alt > b { display: block; margin-bottom: 6px; }
.lineas-alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lineas-alt li, .lineas-alt li a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lineas-alt li a { flex: 1; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; }
.lineas-alt li a:hover { border-color: var(--brand); }
.lineas-alt li.aqui { padding: 7px 10px; border: 1px solid var(--brand); border-radius: 8px; background: #F1F6FC; }
.lineas-alt li strong { margin-left: auto; }
.lineas-alt li.aqui small { flex-basis: 100%; color: var(--muted); }
.la-niv { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; background: var(--brand); color: #fff; border-radius: 999px; padding: 2px 8px; }
.kit-sist { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.kit-sist legend { font-size: 14px; padding: 0 4px; }
.kit-sist .fineprint { flex-basis: 100%; margin: 0 0 4px; }
.kit-sist label { display: inline-flex !important; gap: 6px; align-items: center; }
.baja-form { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.baja-form p { margin: 0; flex: 1 1 18rem; }

/* La frase de presentacion de una pagina del catalogo con nombre propio (etapa 6). */
.cat-intro { margin: 2px 0 14px; color: #333; font-size: 15px; max-width: 80ch; }

/* ================= INTERRUPTORES (encendido / apagado) ================= */
.interruptores { display: grid; gap: 10px; }
.interruptor { display: flex !important; align-items: flex-start; gap: 12px; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .int-pista { flex: none; width: 46px; height: 26px; margin-top: 1px; border-radius: 999px; background: #C3CAD3; position: relative; transition: background .15s; }
.interruptor .int-pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .15s; }
.interruptor input:checked + .int-pista { background: var(--ok); }
.interruptor input:checked + .int-pista::after { left: 23px; }
.interruptor input:focus-visible + .int-pista { outline: 3px solid var(--brand); outline-offset: 2px; }
.interruptor b { display: block; }
.interruptor small { display: block; color: var(--muted); font-size: 12.5px; max-width: 46ch; }
@media (prefers-reduced-motion: reduce) { .interruptor .int-pista, .interruptor .int-pista::after { transition: none; } }

/* ================================================================
   LOGOTIPO CON NOMBRE (11-nov-2026): la corona de llaves + «KingMart.MX».
   El logotipo ya trae el nombre, así que no va letra al lado: el lema
   va DEBAJO, en chico. Es ancho (6.3 a 1): se mide por el alto.
   ================================================================ */
.brand.con-nombre { flex-direction: column; align-items: flex-start; gap: 3px; }
.brand.con-nombre .brand-logo { height: 40px; width: auto; }
.brand.con-nombre small { font-size: 11.5px; white-space: nowrap; }
.foot-logo { display: block; height: 36px; width: auto; max-width: 100%; }
.foot-cols h2:has(.foot-logo) { margin-bottom: 12px; }
.sheet-head .sh-brand:has(h1.vh) { flex-direction: column; align-items: flex-start; gap: 4px; }
.sheet-head .sh-brand:has(h1.vh) .sh-logo { height: 46px; }
.sf-marca img[src*="logo-kingmart"] { height: 34px; }
@media (max-width: 900px) {
  .brand.con-nombre .brand-logo { height: 30px; }
  body.pag-minima .head-min .brand.con-nombre .brand-logo { height: 28px; }
}
@media print { .sheet-head .sh-brand:has(h1.vh) .sh-logo { height: 42px; } }

/* ================================================================
   REFACCIONES DE HERRAMIENTAS (11-nov-2026): «sirve para» en la ficha
   de la refacción, el buscador por modelo (refacciones.php) y el aviso
   del catálogo. Azul y gris: aquí no se compra, se comprueba.
   ================================================================ */
.sirve-para { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; font-size: 14px; background: var(--surface); }
.sirve-para > b { display: block; margin-bottom: 6px; }
.sirve-para ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sirve-para li, .sirve-para li a { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sirve-para li a { color: inherit; flex: 1; padding: 3px 0; }
.sirve-para li a:hover .sp-nom { text-decoration: underline; }
.sp-mod { font-weight: 700; color: var(--brand); white-space: nowrap; }
.sp-nom { color: var(--muted); font-size: 13px; min-width: 0; }
.sp-fuera { font-style: italic; }
.sirve-para details { margin-top: 6px; }
.sirve-para summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.sirve-para details ul { margin-top: 6px; }
.sirve-para > small { display: block; margin-top: 8px; color: var(--muted); }
.ref-diag { display: inline-block; font-weight: 600; }
.ref-diag small { font-weight: 400; color: var(--muted); }
.ref-diag-p { margin: 14px 0 0; }
.ref-aviso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ref-busca { background: linear-gradient(135deg, #0C2340, #1E4A80); color: #fff; border-radius: var(--radius); padding: 26px 26px 20px; margin: 6px 0 18px; }
.ref-busca h1 { margin: 0 0 6px; font-size: 28px; color: #fff; }
.ref-busca p { margin: 0 0 12px; }
.ref-busca form { display: flex; gap: 8px; flex-wrap: wrap; max-width: 44rem; }
.ref-busca input { flex: 1 1 16rem; min-width: 0; padding: 13px 16px; border-radius: 999px; border: 0; font-size: 17px; }
.ref-busca .btn { background: #fff; color: var(--brand); border-color: #fff; }
.ref-busca .btn:hover { background: #E6EEF8; }
.ref-pista { margin: 10px 0 0 !important; font-size: 13.5px; color: #C9D6E5; }
.ref-herr { display: flex; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 6px; background: var(--surface); }
.ref-herr img { width: 120px; height: 120px; object-fit: contain; flex: none; }
.ref-herr > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ref-herr small { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.ref-herr b { font-size: 17px; line-height: 1.25; }
.ref-herr span { color: var(--muted); font-size: 14px; }
.ref-otros-t { font-size: 18px; margin: 22px 0 10px; }
.ref-modelos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ref-modelos a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); }
.ref-modelos a:hover { border-color: var(--brand); box-shadow: var(--shadow-2); text-decoration: none; }
.ref-modelos b { color: var(--brand); font-size: 16px; }
.ref-modelos span { font-size: 13.5px; color: var(--muted); }
.ref-modelos small { font-size: 12.5px; color: var(--ink); font-weight: 600; margin-top: auto; padding-top: 4px; }
html.nocturno .ref-busca { filter: invert(1) hue-rotate(180deg); }
html.nocturno .ref-busca :is(img, video) { filter: none; }
@media (max-width: 640px) {
  .ref-busca { padding: 18px 16px 16px; }
  .ref-busca h1 { font-size: 22px; }
  .ref-busca .btn { flex: 1 1 100%; }
  .ref-herr img { width: 84px; height: 84px; }
  .ref-herr b { font-size: 15px; }
}
@media print { .ref-busca form, .ref-pista { display: none; } }

/* ===== KITS POR VEHICULO (14-nov-2026): sin descuento, con piezas en existencia ===== */
.kit-para { margin: 10px 0 0; font-size: 14.5px; }
.kit-para a { white-space: nowrap; }
.kl-hay { color: var(--ok); font-weight: 600; }
.kit-marcas { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.kit-marcas .chip { text-decoration: none; }
.kit-marcas .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.kit-marcas .chip small { opacity: .75; }
.kit-aviso-veh { border-color: #BFE3CF; background: #F1FAF5; }

/* ===== PAGINA DE VENTA DE UN KIT POR VEHICULO (14-nov-2026): la que se manda a redes ===== */
.kp { margin: 6px 0 0; }
.kp-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; align-items: center;
  background: linear-gradient(135deg, #0B2545 0%, #13407A 100%); color: #fff; border-radius: 18px; padding: 34px 34px 30px; }
.kp-ceja { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #FFD9A8; }
.kp-hero h1 { margin: 0 0 10px; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.08; color: #fff; }
.kp-auto { margin: 0 0 10px; font-size: 17px; font-weight: 600; color: #E3EEFB; }
.kp-gancho { margin: 0 0 16px; font-size: 16.5px; line-height: 1.5; color: #DCE7F5; }
.kp-precio { margin: 0 0 14px; }
.kp-precio small { display: block; font-size: 14px; opacity: .85; }
.kp-precio b { font-size: clamp(38px, 6vw, 60px); line-height: 1; letter-spacing: -.01em; }
.kp-puntos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; font-size: 15px; color: #EAF2FB; }
.kp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.kp-btn { font-size: 18px; padding: 16px 26px; border-radius: 999px; font-weight: 700; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.kp-wa { background: #1FA855; border-color: #1FA855; color: #fff; font-size: 16px; padding: 15px 22px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.kp-wa:hover { background: #178A45; border-color: #178A45; color: #fff; }
.kp-fino { margin: 12px 0 0; font-size: 13px; opacity: .85; }
.kp-foto { min-width: 0; }
.kp-auto-img { width: 100%; height: auto; border-radius: 14px; background: #fff; display: block; }
.kp-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kp-mosaico.n1 { grid-template-columns: 1fr; }
.kp-mosaico img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 14px; padding: 8px; }
.kp-sec { margin: 34px 0 0; }
.kp-sec h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 8px; }
.kp-descr { max-width: 60rem; color: var(--muted); margin: 0 0 18px; }
.kp-piezas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.kp-piezas li { border: 1px solid var(--line, #E3E8EF); border-radius: 14px; background: #fff; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.kp-img { position: relative; display: block; background: #fff; aspect-ratio: 1 / 1; }
.kp-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.kp-img .noimg { display: grid; place-items: center; height: 100%; font-size: 54px; }
.kp-cant { position: absolute; left: 10px; top: 10px; background: #0B2545; color: #fff; font-weight: 700; font-size: 13px; padding: 5px 10px; border-radius: 999px; }
.kp-info { padding: 12px 14px 14px; border-top: 1px solid var(--line, #E3E8EF); }
.kp-info h3 { font-size: 16px; line-height: 1.3; margin: 0 0 6px; }
.kp-info p { margin: 0 0 6px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.kp-sku { font-size: 12.5px !important; }
.kp-cierre { margin: 34px 0 10px; padding: 30px 24px; text-align: center; border-radius: 18px; background: #F1F6FC; border: 1px solid #BFD3EA; }
.kp-cierre h2 { margin: 0 0 8px; font-size: clamp(20px, 3vw, 28px); }
.kp-cierre .kp-precio b { color: var(--brand); }
.kp-cierre .kp-fino { max-width: 46rem; margin: 14px auto 0; color: var(--muted); opacity: 1; }
.kp-cierre .kp-wa { display: inline-block; margin-left: 8px; }
.kp-barra { display: none; }
@media (max-width: 900px) {
  .kp-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 18px 22px; gap: 18px; border-radius: 14px; }
  .kp-foto { order: -1; }
  .kp-mosaico { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .kp-mosaico img { padding: 4px; border-radius: 10px; }
  .kp-btn, .kp-wa { width: 100%; text-align: center; }
  .kp-cierre .kp-wa { margin: 10px 0 0; display: block; }
  .kp-piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kp-info { padding: 10px; }
  .kp-info h3 { font-size: 14.5px; }
  .kp-barra { display: flex; position: sticky; bottom: 0; z-index: 30; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 -16px; padding: 10px 16px; background: #fff; border-top: 1px solid #D5DEE9; box-shadow: 0 -6px 18px rgba(11, 37, 69, .12); }
  .kp-barra b { display: block; font-size: 19px; }
  .kp-barra small { color: var(--muted); font-size: 12px; }
  .kp-barra .btn { border-radius: 999px; padding: 12px 20px; font-weight: 700; white-space: nowrap; }
}
html.nocturno .kp-hero, html.nocturno .kp-img img, html.nocturno .kp-mosaico img, html.nocturno .kp-auto-img { filter: invert(1) hue-rotate(180deg); }
html.nocturno .kp-hero .kp-mosaico img, html.nocturno .kp-hero .kp-auto-img { filter: none; }
@media print { .kp-barra, .kp-cta, .kp-wa { display: none !important; } }