/* ================================================================
   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; }
.media-main img.zoom { object-fit: cover; transform: scale(1.6); cursor: zoom-out; }
.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; } }