/*
Theme Name: Gallardo Parts
Theme URI: https://gallardoparts.es
Description: Tema hijo de Storefront con la identidad visual de Gallardo Parts. Colores medidos de los ficheros reales del logotipo (no del brandbook, que los tiene desfasados). Sólo presentación: la lógica de cascos, stock y logística vive en el plugin gallardo-core.
Author: Gallardo Automotive Technologies, S.L.
Template: storefront
Version: 0.25.0
Text Domain: gallardo-parts
*/

/* ==========================================================================
   1. Tokens de marca — brandbook Diesel Gallardo
   La línea profesional de inyección usa AZUL OSCURO como color dominante.
   Los dos azules nunca van superpuestos: siempre con blanco de por medio.
   ========================================================================== */
:root{
  --gp-navy:#002A6F;
  --gp-navy-d:#001C4A;
  --gp-blue:#0073B9;
  --gp-blue-d:#005C94;
  --gp-ink:#1C242A;
  --gp-paper:#f7f7f7;
  --gp-white:#ffffff;
  --gp-line:#dde3ec;
  --gp-line-s:#eef1f6;
  --gp-mute:#5d6b80;
  --gp-ok:#0f6b45;
  --gp-ok-bg:#e9f4ee;
  --gp-amber:#8f5000;
  --gp-amber-bg:#fdf2e2;
  --gp-amber-line:#f0d9b4;
  --gp-red:#9a2b31;
  --gp-display:"Special Gothic Expanded One","Arial Narrow",Impact,sans-serif;
  --gp-body:"DM Sans","Helvetica Neue",Arial,sans-serif;
}

/* ==========================================================================
   2. Base tipográfica
   ========================================================================== */
body,
button, input, select, textarea,
.widget, .site-footer{
  font-family:var(--gp-body);
  letter-spacing:-.028em;
  color:var(--gp-ink);
}
body{ background:var(--gp-paper); }

h1,h2,h3,h4,
.site-title,
.page-title,
.product_title,
.woocommerce-loop-product__title,
.widget-title,
.section-title{
  font-family:var(--gp-display);
  font-weight:400;
  letter-spacing:.005em;
  text-wrap:balance;
  color:var(--gp-ink);
}
h1,h2,h3,.page-title,.product_title{ text-transform:uppercase; }
.woocommerce-loop-product__title{
  font-family:var(--gp-body);
  font-weight:600;
  text-transform:none;
  letter-spacing:-.02em;
}

a{ color:var(--gp-blue); }
a:hover{ color:var(--gp-blue-d); }

/* ==========================================================================
   3. Cabecera
   ========================================================================== */
/* El logotipo crece, la banda azul no: lo que sube de alto el logotipo se
   le quita al relleno vertical. La cabecera queda igual de alta —incluso
   un pelo menos— con la marca más grande dentro. */
.site-header{
  background-color:var(--gp-navy) !important;
  border-bottom:0;
  padding-top:10px !important;
  padding-bottom:0 !important;
}
.site-header,
.site-header a,
.site-header .site-title a,
.site-branding .site-title a,
.site-header .site-description{ color:#fff !important; }

.site-header .site-title a{
  font-family:var(--gp-display);
  letter-spacing:.01em;
  text-transform:uppercase;
}

/* 3.1 El logotipo manda en la cabecera. — v0.13.2
   POR QUÉ NO CRECÍA, HASTA AHORA. Storefront trae esta regla:

     .site-header .site-branding img{ height:auto; max-width:230px; max-height:none }

   El tope real era el ANCHO, no el alto. El logotipo mide 2757×300 px:
   con 9,19 de proporción, 230 px de ancho son 25 px de alto. Mis reglas
   anteriores subían `max-height` a 46 px y no servían de nada, porque el
   ancho se agotaba mucho antes. Se pedía un logotipo más grande tres veces
   y crecía cero. Hay que levantar `max-width`, y por eso está aquí.

   El alto de la banda NO cambia: lo que gana el logotipo se le quita al
   margen inferior de .site-branding (Storefront le pone 1,41575em = 22,6 px).
     antes:  25 px de logotipo + 22,6 de margen = 47,6
     ahora:  42 px de logotipo +  5   de margen = 47
   Se usan max-width y max-height a la vez —nunca `height` a secas— para que
   la proporción se conserve cuando mande cualquiera de los dos topes. */
.site-header .custom-logo-link img,
.site-header .site-branding img.custom-logo,
.site-header .custom-logo{
  width:auto;
  height:auto;
  max-width:min(420px,92vw);
  max-height:clamp(24px,2.95vw,42px);
  display:block;
}
.site-header .site-branding{ margin-bottom:5px; }
@media (max-width:767px){
  .site-header .custom-logo-link img,
  .site-header .site-branding img.custom-logo,
  .site-header .custom-logo{ max-height:26px; max-width:92vw; }
  .site-header .site-branding{ margin-bottom:8px; }
}

/* 3.2 La marca, sola en su fila. — v0.13.2
   Los cinco sellos de fabricante (Bosch, Delphi, Zexel, Stanadyne, VDO)
   salen de la cabecera. El sitio donde deben estar es la página «Sobre
   Gallardo» o una banda propia de tecnologías, no al lado del nombre: ahí
   competían con el logotipo por el mismo ancho y lo tenían enano.

   El filtro que los inyectaba se desengancha en functions.php; la función
   y los PNG siguen en el tema, así que volver a ponerlos es una línea.

   Se conserva el flex porque centra verticalmente el logotipo dentro de la
   fila sin depender del line-height del enlace. */
.site-header .site-branding{
  display:flex;
  align-items:center;
  max-width:100%;
  min-width:0;
}
/* 3.3 El menú, centrado.
   El carrito se saca del flujo con posición absoluta y el menú pasa a
   ocupar la fila entera y centrar su contenido. Es la forma de centrarlo
   sin tocar la rejilla de Storefront: la versión con grid dejó al carrito
   en una columna de setenta píxeles partiendo «productos» en dos. */
@media (min-width:768px){
  .storefront-primary-navigation .col-full{ position:relative; }
  .storefront-primary-navigation .main-navigation{
    float:none;
    width:auto;
    margin:0;
    text-align:center;
  }
  .storefront-primary-navigation .main-navigation .primary-navigation{ float:none; }
  /* Medidas en PÍXELES, no en em. Los em heredan el cuerpo de letra de
     Storefront, que no es el que yo supongo, y por eso el menú se partía en
     dos líneas y engordaba la banda. Con píxeles y `nowrap` no puede pasar
     sea cual sea el tamaño base del padre. */
  .storefront-primary-navigation{ padding-top:2px !important; padding-bottom:0 !important; }
  .storefront-primary-navigation .main-navigation ul.menu,
  .storefront-primary-navigation .main-navigation ul.nav-menu{
    display:inline-flex;
    flex-wrap:nowrap;
    justify-content:center;
    gap:0 24px;
    float:none;
    margin:0;
    padding:0;
    text-align:left;
    white-space:nowrap;
  }
  .storefront-primary-navigation .main-navigation ul.menu > li,
  .storefront-primary-navigation .main-navigation ul.nav-menu > li{
    float:none;
    margin:0;
    white-space:nowrap;
  }
  .storefront-primary-navigation .main-navigation ul.menu > li > a,
  .storefront-primary-navigation .main-navigation ul.nav-menu > li > a{
    font-size:14px !important;
    padding:9px 0 11px !important;
    display:block;
  }
  .storefront-primary-navigation .site-header-cart,
  .storefront-primary-navigation .site-header-cart a{ font-size:13px !important; }
  .storefront-primary-navigation .site-header-cart{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    float:none;
    width:auto;
    margin:0;
    white-space:nowrap;
  }
  .storefront-primary-navigation .site-header-cart li{ float:none; white-space:nowrap; }
}

/* ==========================================================================
   4. Botones
   El azul claro siempre sobre blanco, nunca pegado al azul oscuro.
   ========================================================================== */
button, input[type="button"], input[type="reset"], input[type="submit"],
.button, .added_to_cart, .widget a.button{
  background-color:var(--gp-blue);
  color:#fff;
  border-radius:3px;
  font-weight:500;
  letter-spacing:-.02em;
  text-shadow:none;
  border:0;
  padding:.85em 1.5em;
}
button:hover, input[type="submit"]:hover,
.button:hover, .added_to_cart:hover{
  background-color:var(--gp-blue-d);
  color:#fff;
}
.button.alt, .single_add_to_cart_button, .checkout-button{
  background-color:var(--gp-blue) !important;
  color:#fff !important;
}
.button.alt:hover, .single_add_to_cart_button:hover, .checkout-button:hover{
  background-color:var(--gp-blue-d) !important;
}
/* Secundario: contorno azul oscuro sobre blanco */
.button.wc-backward, .woocommerce-message .button, .return-to-shop .button{
  background:#fff;
  color:var(--gp-navy);
  box-shadow:inset 0 0 0 1px var(--gp-navy);
}

/* ==========================================================================
   5. Catálogo en cuadrícula
   Sin fotos todavía: la tarjeta se sostiene con tipografía y referencia.

   La tarjeta tiene tres bandas fijas —cabecera, cuerpo, pie— de modo que
   el código Gallardo y el precio queden siempre a la misma altura en toda
   la fila. Un recambista compara en vertical; si el precio baila de
   tarjeta en tarjeta, no compara: lee una por una.
   ========================================================================== */

/* 5.1 La rejilla.
   Storefront reparte las tarjetas con float y porcentajes, así que quedan
   de distinta altura y la fila se descuadra. Se pasa a grid. Los
   !important son contra `li.product.last` y las reglas por media query
   del tema padre, que tienen más peso que estas. */
ul.products{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:14px;
  margin:0 0 1.6em;
  padding:0;
  list-style:none;
}
ul.products::before,
ul.products::after{ content:none; display:none; }

ul.products li.product{
  width:auto !important;
  float:none !important;
  clear:none !important;
  margin:0 !important;
  padding:0;
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:3px;
  overflow:hidden;
  display:grid;
  grid-template-rows:1fr auto;
  text-align:left;
  transition:border-color .12s ease, box-shadow .12s ease;
}
ul.products li.product:hover{
  border-color:var(--gp-navy);
  box-shadow:0 3px 0 0 var(--gp-navy);
}
ul.products li.product > a.woocommerce-LoopProduct-link{
  display:grid;
  grid-template-rows:auto 1fr;
  color:var(--gp-ink);
  text-decoration:none;
}

/* 5.2 Cabecera: icono de familia a la izquierda, MARCA a la derecha.
   El icono no es decoración: a dos metros del monitor distingue una bomba
   de un inyector antes de leer nada. La marca va sin `text-transform`
   porque ya viene escrita como se escribe —VDO en mayúscula, Bosch con
   capital inicial— y forzarla a mayúsculas rompe nombres largos como
   Magneti Marelli. */
.gp-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:13px 15px 0;
  color:var(--gp-navy);
}
.gp-icono{ width:26px; height:26px; flex:none; opacity:.85; }
.gp-marca{
  font-size:.85em;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.1;
  text-align:right;
  color:var(--gp-navy);
  min-width:0;
  overflow-wrap:anywhere;
}

/* 5.3 Cuerpo */
.gp-card-body{
  padding:11px 15px 14px;
  display:grid;
  gap:4px;
  align-content:start;
}
ul.products li.product .woocommerce-loop-product__title{
  font-size:.92em;
  font-weight:600;
  line-height:1.3;
  margin:0;
  padding:0;
  color:var(--gp-ink);
}
.gp-card-sub{
  font-size:.79em;
  line-height:1.4;
  color:var(--gp-mute);
}
.gp-card-body .gp-av{ margin-top:6px; }

/* 5.4 Pie: referencia Gallardo a la izquierda, precio y casco a la derecha */
.gp-card-pie{
  border-top:1px solid var(--gp-line-s);
  padding:10px 15px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  min-height:52px;
}
.gp-card-ref{
  font-size:.76em;
  color:var(--gp-mute);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.gp-card-precio{
  text-align:right;
  font-size:.92em;
  font-weight:600;
  line-height:1.25;
  color:var(--gp-ink);
  font-variant-numeric:tabular-nums;
}
.gp-card-precio .woocommerce-Price-amount{ font-weight:600; }
.gp-card-precio del{ opacity:.5; font-weight:400; margin-right:.3em; }
.gp-card-precio ins{ text-decoration:none; }
/* El «+ IVA» va pegado al precio, no en línea aparte: el pie tiene sitio
   para dos renglones —precio y casco— y el tercero lo emborrona. */
.gp-card-precio .woocommerce-price-suffix,
.gp-card-precio small{
  display:inline;
  margin-left:.35em;
  font-size:.76em;
  font-weight:400;
  color:var(--gp-mute);
  letter-spacing:0;
  white-space:nowrap;
}
.gp-card-casco{
  display:block;
  font-size:.78em;
  font-weight:400;
  color:var(--gp-mute);
}
.gp-card-consultar{
  font-weight:500;
  color:var(--gp-amber);
}

/* El SKU es lo que busca un taller: que se vea */
.gp-sku{
  display:block;
  font-size:.78em;
  color:var(--gp-mute);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  margin-bottom:.25em;
}

/* ==========================================================================
   6. Ficha de producto
   ========================================================================== */
.single-product div.product .product_title{ font-size:1.9em; line-height:1.1; }
.single-product div.product .price{
  color:var(--gp-ink);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.woocommerce-tabs ul.tabs li.active a{ color:var(--gp-navy); }
.product_meta{ font-size:.85em; color:var(--gp-mute); }

/* Bloque del casco — lo pinta el plugin gallardo-core */
.gp-casco{
  background:var(--gp-ok-bg);
  border:1px solid #c8e3d5;
  border-radius:3px;
  padding:.9em 1.1em;
  font-size:.9em;
  color:var(--gp-ok);
  line-height:1.5;
  margin:1em 0;
}
.gp-casco strong{ color:var(--gp-ink); display:block; }

/* Semáforo de disponibilidad */
.gp-av{ display:inline-flex; align-items:center; gap:.5em; font-size:.85em; white-space:nowrap; }
.gp-av .gp-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.gp-av.gp-ok{ color:var(--gp-ok); }
.gp-av.gp-ok .gp-dot{ background:var(--gp-ok); box-shadow:0 0 0 2.5px var(--gp-ok-bg); }
.gp-av.gp-core{ color:var(--gp-amber); }
.gp-av.gp-core .gp-dot{ background:#e0a12a; box-shadow:0 0 0 2.5px var(--gp-amber-bg); }
.gp-av.gp-no{ color:var(--gp-red); }
.gp-av.gp-no .gp-dot{ background:#c0392f; box-shadow:0 0 0 2.5px #fbeced; }

/* ==========================================================================
   7. Carrito y checkout
   ========================================================================== */
.woocommerce table.shop_table,
.woocommerce-checkout #payment{
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:3px;
}
.woocommerce table.shop_table th{
  background:var(--gp-line-s);
  font-size:.75em;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gp-mute);
}
.woocommerce table.shop_table td{ border-top:1px solid var(--gp-line-s); }
.woocommerce-checkout #payment div.payment_box{
  background:var(--gp-line-s);
  color:var(--gp-ink);
  font-size:.9em;
}
.woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:var(--gp-line-s); }
.woocommerce-info, .woocommerce-message{
  background:#fff;
  border-top:3px solid var(--gp-blue);
  color:var(--gp-ink);
}
.woocommerce-error{ border-top-color:var(--gp-red); }

/* Aviso del depósito de casco en el carrito */
.gp-deposito-aviso{
  background:var(--gp-amber-bg);
  border:1px solid var(--gp-amber-line);
  border-radius:3px;
  padding:.9em 1.1em;
  font-size:.88em;
  color:var(--gp-amber);
  line-height:1.5;
}
.gp-deposito-aviso strong{ color:var(--gp-ink); }

/* ==========================================================================
   8. Mi Gallardo (Mi cuenta)

   VACÍA A PROPÓSITO. Aquí había dos reglas del menú escritas como
   `...MyAccount-navigation ul li a`. Ese `ul` de más las hacía más
   específicas que las de la sección 20, así que ganaban aunque estuvieran
   mil quinientas líneas por encima —la especificidad manda sobre el orden—
   y su `padding:.7em 0` dejaba las etiquetas sin relleno horizontal: de ahí
   los óvalos.

   El menú se pinta entero en la sección 20. No volver a escribir reglas del
   portal aquí.
   ========================================================================== */

/* ==========================================================================
   9. Pie
   ========================================================================== */
.site-footer{
  background-color:var(--gp-navy) !important;
  color:#fff;
}
.site-footer a, .site-footer .widget-title{ color:#fff !important; }
.site-footer p, .site-footer li{ opacity:.8; }

/* ==========================================================================
   10. Accesibilidad y foco
   ========================================================================== */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gp-blue);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ==========================================================================
   11. Ajustes sobre WooCommerce real — v0.2.0 · 14/09/2026
   Correcciones hechas viendo la tienda montada, no a ciegas.
   ========================================================================== */

/* 11.1 Cabecera compacta.
   Storefront deja mucho aire entre la marca y el menú. En una web donde
   manda el buscador, ese hueco es espacio robado a lo que importa. */
.site-header{
  padding-top:1.4em !important;
  padding-bottom:0 !important;
}
.site-header .site-branding{ margin-bottom:.5em; }
.site-header .site-description{
  font-size:.8em;
  opacity:.72;
  margin-top:.1em;
}
.storefront-primary-navigation{ margin-top:.2em; }
.main-navigation ul.menu > li > a,
.site-header ul.menu > li > a{
  padding-top:.85em !important;
  padding-bottom:.85em !important;
}
.site-header-cart{ margin-bottom:0; }

/* El buscador de cabecera manda: que se note */
.site-search{ margin-bottom:.8em; }

/* 11.2 Título de página.
   «TIENDA» a 3em y centrado se come la pantalla y no aporta nada:
   el cliente ya sabe dónde está. */
.woocommerce-products-header__title,
.page-title{
  font-size:1.45em !important;
  text-align:left;
  margin-bottom:.2em;
  letter-spacing:.01em;
}
.woocommerce-products-header{ margin-bottom:1.2em; }

/* 11.3 Migas de pan: informativas, no protagonistas */
.woocommerce-breadcrumb{
  font-size:.82em;
  color:var(--gp-mute);
  margin-bottom:1.4em;
}
.woocommerce-breadcrumb a{ color:var(--gp-mute); }
.woocommerce-breadcrumb a:hover{ color:var(--gp-navy); }

/* 11.4 Tarjetas sin fotografía.
   La miniatura ya no se pinta en la cuadrícula (ver sección 5): mientras
   no haya fotos propias, el marco vacío es lo primero que ve el ojo y es
   justo lo que no queremos. Esta regla queda como red de seguridad por si
   algún listado la cuela igualmente. */
ul.products li.product img.woocommerce-placeholder{ display:none; }

/* El sufijo «+ IVA» va en pequeño y apagado: informa, no compite */
.woocommerce-Price-amount + small,
.woocommerce div.product p.price small{
  font-size:.68em;
  font-weight:400;
  color:var(--gp-mute);
  letter-spacing:0;
}

/* 11.5 Barra de orden y resultados */
.woocommerce-result-count{
  font-size:.86em;
  color:var(--gp-mute);
}
.woocommerce-ordering select{
  font-size:.9em;
  padding:.55em .8em;
  border:1px solid var(--gp-line);
  border-radius:3px;
  background:#fff;
}

/* 11.6 Paginación */
.woocommerce nav.woocommerce-pagination ul{
  border:0;
  display:flex;
  gap:5px;
  justify-content:flex-end;
}
.woocommerce nav.woocommerce-pagination ul li{
  border:0;
  overflow:visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--gp-line);
  border-radius:3px;
  background:#fff;
  padding:.45em .8em;
  font-size:.88em;
  min-width:2.2em;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--gp-navy);
  border-color:var(--gp-navy);
  color:#fff;
}

/* 11.7 Ficha de producto: la referencia por delante del marketing */
.single-product div.product .woocommerce-product-gallery img.woocommerce-placeholder{
  max-width:180px;
  opacity:.2;
  margin:2em auto;
  display:block;
}
.single-product .product_meta .sku_wrapper{
  display:block;
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
  color:var(--gp-ink);
  font-weight:600;
}

/* 11.8 Aviso de «Próximamente» del pie: que no tape el contenido */
.woocommerce-store-notice,
p.demo_store{ font-size:.85em; }

/* ==========================================================================
   12. Páginas legales — v0.3.0 · 14/09/2026
   Aviso legal, privacidad, cookies, condiciones de venta y devoluciones.
   Son documentos largos que alguien tiene que poder leer de verdad.
   ========================================================================== */

/* Ancho de lectura: una línea de 120 caracteres no la lee nadie */
.page .entry-content > h2,
.page .entry-content > h3,
.page .entry-content > p,
.page .entry-content > ul,
.page .entry-content > ol{
  max-width:76ch;
}

.page .entry-content h2{
  font-family:var(--gp-display);
  font-size:1.12em;
  text-transform:none;
  letter-spacing:.005em;
  color:var(--gp-navy);
  margin-top:2.1em;
  margin-bottom:.5em;
  padding-bottom:.35em;
  border-bottom:1px solid var(--gp-line);
}
.page .entry-content p{ line-height:1.66; }
.page .entry-content li{ line-height:1.6; margin-bottom:.3em; }

/* Tablas de los textos legales */
table.gp-legal-tabla{
  width:100%;
  max-width:860px;
  border-collapse:collapse;
  margin:1.2em 0 1.8em;
  font-size:.92em;
  background:#fff;
}
table.gp-legal-tabla th,
table.gp-legal-tabla td{
  border:1px solid var(--gp-line);
  padding:.65em .8em;
  text-align:left;
  vertical-align:top;
  line-height:1.5;
}
table.gp-legal-tabla thead th{
  background:var(--gp-line-s);
  color:var(--gp-navy);
  font-weight:600;
  font-size:.95em;
}
table.gp-legal-tabla tbody th[scope="row"]{
  background:var(--gp-line-s);
  font-weight:600;
  width:30%;
}

/* Huecos pendientes de rellenar.
   Deliberadamente chillón: si alguien publica la página sin completarlos,
   tiene que saltar a la vista a un metro de distancia. */
mark.gp-pendiente{
  background:#ffe7a3;
  color:#6b4a00;
  padding:.05em .3em;
  border-radius:2px;
  font-weight:600;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ==========================================================================
   13. PORTADA — v0.4.0 · 14/09/2026
   Fachada, buscador centrado, sellos y accesos por categoría.
   El HTML lo pinta gallardo_parts_portada() desde functions.php, enganchado
   en storefront_before_content. Eso lo deja dentro de #content .col-full,
   que está centrado y con ancho máximo: las bandas que tienen que ir a
   sangre rompen ese contenedor con el truco de 100vw.
   ========================================================================== */

.site-content,
#content{
  overflow-x:clip;
}
.gp-fachada,
.gp-sellos{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* 13.1 La fachada CON el buscador dentro. — v0.6.0 · 14/09/2026
   Antes eran dos bandas apiladas: la foto ocupaba 404 px y empujaba el
   buscador al filo de la pantalla. En un portátil de 820 px de alto, el
   motor de la web quedaba medio fuera de vista.

   Ahora son una sola banda. La foto sigue entera —el rótulo de la nave es
   lo que demuestra que Gallardo existe físicamente, y eso no se recorta—
   pero va DESENFOCADA y con un velo azul encima, y el buscador se apoya
   sobre ella. Entra todo por encima de la línea de flotación: cabecera,
   nave, titular, buscador, sellos y accesos.

   El desenfoque va en una capa aparte con `inset:-28px` porque el filtro
   difumina también los bordes: si se aplicase al propio contenedor se
   verían cuatro cantos blandos. */
.gp-fachada{
  position:relative;
  overflow:hidden;
  background:var(--gp-navy-d);
  display:flex;
  align-items:center;
  min-height:clamp(290px,31vw,392px);
}
.gp-fachada-fondo{
  position:absolute;
  inset:-28px;
  background-position:center 42%;
  background-size:cover;
  background-repeat:no-repeat;
  filter:blur(1px);
  transform:scale(1.02);
}
.gp-fachada::after{
  content:"";
  position:absolute;
  inset:0;
  /* El texto va centrado, así que el velo no puede ser lateral: se
     concentra en el centro, donde cae el titular y la caja, y se afloja
     hacia los bordes para que la foto respire. Con poco desenfoque las
     letras blancas del rótulo son muy brillantes y sin este refuerzo
     central el titular se pierde encima de ellas. */
  background:
    radial-gradient(ellipse 62% 74% at 50% 48%,
      rgba(0,26,64,.60) 0%, rgba(0,26,64,.44) 58%, rgba(0,26,64,.16) 100%),
    linear-gradient(180deg, rgba(0,26,64,.22) 0%, rgba(0,26,64,.12) 45%,
      rgba(0,26,64,.26) 100%);
}

/* 13.2 El bloque del buscador, sobre la foto y centrado.
   El buscador es el motor de la web y va donde cae el ojo al abrir: en
   medio. */
.gp-hero{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  background:none;
  border-bottom:0;
  color:#fff;
  padding:2.6em 20px 2.7em;
  text-align:center;
}
.gp-hero > *{ margin-left:auto; margin-right:auto; max-width:100%; }

.gp-hero .gp-eyebrow{
  font-size:.72em;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  margin:0 auto .5em;
}
.gp-hero h1{
  font-family:var(--gp-display);
  font-size:clamp(23px,2.9vw,34px);
  line-height:1.08;
  text-transform:none;
  letter-spacing:.005em;
  margin:0 auto .85em;
  max-width:min(42ch,100%);
  color:#fff;
  text-shadow:0 1px 22px rgba(0,16,44,.62), 0 1px 3px rgba(0,16,44,.35);
}
.gp-hero .gp-lede{
  color:rgba(255,255,255,.88);
  font-size:.93em;
  line-height:1.55;
  max-width:min(60ch,100%);
  margin:0 auto 1.5em;
  text-shadow:0 1px 14px rgba(0,16,44,.45);
}

/* El buscador: es el objeto más grande de la página, a propósito */
.gp-hero .gp-buscador{
  position:relative;
  display:flex;
  max-width:min(800px,100%);
  margin:0 auto;
  background:#fff;
  border:0;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,16,44,.34);
}
.gp-hero .gp-buscador:focus-within{
  box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 16px 40px rgba(0,16,44,.34);
}
.gp-hero .gp-buscador input[type="search"]{
  flex:1;
  min-width:0;
  border:0;
  background:none;
  padding:20px 22px;
  font-size:18px;
  color:var(--gp-ink);
  text-align:left;
  box-shadow:none;
  margin:0;
}
.gp-hero .gp-buscador input[type="search"]:focus{ outline:none; box-shadow:none; }
.gp-hero .gp-buscador input[type="search"]::placeholder{ color:#8b97a8; font-size:16.5px; }
.gp-hero .gp-buscador button{
  border:0;
  border-radius:0;
  padding:0 34px;
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
  background:var(--gp-blue);
  color:#fff;
}
.gp-hero .gp-buscador button:hover{ background:var(--gp-blue-d); }

/* Atajo de teclado: el recambista que pide veinte referencias al día no
   quiere volver al ratón entre una y otra. */
.gp-hero .gp-kbd{
  position:absolute;
  right:132px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  border:1px solid var(--gp-line);
  border-radius:4px;
  background:var(--gp-line-s);
  color:var(--gp-mute);
  font-size:11px;
  padding:3px 8px;
  pointer-events:none;
  letter-spacing:.02em;
}
.gp-hero .gp-buscador:focus-within .gp-kbd{ display:none; }

.gp-hero .gp-chips{
  margin:1.1em auto 0;
  font-size:.85em;
  line-height:2.2;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  justify-content:center;
}
.gp-hero .gp-chips em{ font-style:normal; color:rgba(255,255,255,.72); margin-right:.4em; }
.gp-hero .gp-chips a{
  margin-right:0;
  border:1px solid rgba(255,255,255,.30);
  border-radius:999px;
  padding:6px 13px;
  color:#fff;
  background:rgba(255,255,255,.13);
  text-decoration:none;
  white-space:nowrap;
  margin-right:.3em;
}
.gp-hero .gp-chips a:hover{ border-color:#fff; background:rgba(255,255,255,.26); color:#fff; }

@media (max-width:640px){
  .gp-fachada{ min-height:0; }
  /* En móvil el texto ocupa todo el ancho, así que el velo deja de ser
     lateral y pasa a ser parejo: si no, la última línea cae sobre la parte
     clara de la foto y no se lee. */
  .gp-fachada::after{
    background:linear-gradient(180deg,rgba(0,26,64,.52) 0%,rgba(0,26,64,.68) 100%);
  }
  .gp-hero{ padding:1.6em 16px 1.9em; }
  .gp-hero .gp-kbd{ display:none; }
  /* «Búsquedas frecuentes» parte en dos líneas y roba sitio: en móvil los
     atajos se explican solos. */
  .gp-hero .gp-chips em{ display:none; }
  .gp-hero .gp-chips{ display:flex; flex-wrap:wrap; gap:7px; line-height:1.4; }
  .gp-hero .gp-chips a{ margin-right:0; }
  .gp-hero .gp-buscador input[type="search"]{ padding:16px 14px; font-size:16px; }
  .gp-hero .gp-buscador input[type="search"]::placeholder{ font-size:14px; }
  .gp-hero .gp-buscador button{ padding:0 18px; font-size:14px; }
}

/* 13.3 Sellos de red.
   Van SOBRE BLANCO: el rojo de Bosch y el azul de Delphi sobre el azul
   marino de Gallardo son ilegibles. Y van DESPUÉS del argumento propio:
   si los sellos van primero, la portada dice «somos distribuidores de
   Bosch», que es lo que dice media internet. */
.gp-sellos{
  background:#fff;
  border-bottom:1px solid var(--gp-line);
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  padding:16px 20px;
  justify-content:center;
}
.gp-sellos-et{
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gp-mute);
  font-weight:600;
  line-height:1.35;
}
.gp-sellos-et b{
  display:block;
  color:var(--gp-ink);
  font-size:13px;
  letter-spacing:-.02em;
  text-transform:none;
  font-weight:600;
  margin-top:2px;
}
.gp-sellos img{ display:block; }
.gp-sellos .gp-bosch{ height:50px; width:auto; }
.gp-sellos .gp-delphi{ height:26px; width:auto; }
.gp-sellos-nota{
  font-size:12.5px;
  color:var(--gp-mute);
  max-width:42ch;
  line-height:1.45;
  margin:0;
}
@media (max-width:900px){ .gp-sellos-nota{ display:none; } }

/* 13.4 Navegador: por sistema y por fabricante. — v0.9.0
   Sustituye a las cuatro tarjetas genéricas (Inyectores / Bombas / Common
   Rail / Rotativas). El motivo es medido, no estético: «Inyectores» deja
   347 referencias y «Bombas» 254, que es la misma pared un clic más lejos.
   El SISTEMA sí reparte —CRI 203, CR 109, CP4 93, EUI 67, y de ahí para
   abajo— y además es como razona quien tiene el motor abierto.

   Los contadores salen de la base de datos. Ninguno está escrito a mano, y
   por eso no se quedarán desfasados. */
.gp-nav-bloque{ margin:2.2em 0 0; }
.gp-nav-bloque + .gp-nav-bloque{ margin-top:2em; }
.gp-nav-cab{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin:0 0 .9em;
}
.gp-nav-cab h2{
  font-family:var(--gp-display);
  font-size:1.15em;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--gp-ink);
  margin:0;
}
.gp-nav-cab p{
  margin:0;
  font-size:.83em;
  color:var(--gp-mute);
}

.gp-sistemas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:13px;
}
.gp-sistema-t{
  display:block;
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:3px;
  padding:15px 16px 16px;
  text-decoration:none;
  color:var(--gp-ink);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.gp-sistema-t:hover{
  border-color:var(--gp-navy);
  box-shadow:0 3px 0 0 var(--gp-navy);
  color:var(--gp-ink);
}
/* La sigla manda: es lo que el recambista busca con la vista. */
.gp-sistema-c{
  display:block;
  font-family:var(--gp-display);
  font-size:1.5em;
  line-height:1.05;
  letter-spacing:.02em;
  color:var(--gp-ink);
  margin-bottom:.18em;
}
.gp-sistema-q{
  display:block;
  font-size:.86em;
  line-height:1.35;
  color:var(--gp-ink);
  margin-bottom:.5em;
}
.gp-sistema-m{
  display:block;
  font-size:.76em;
  color:var(--gp-mute);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

.gp-marcas{ display:flex; flex-wrap:wrap; gap:10px; }
.gp-marca-t{
  display:inline-flex;
  align-items:baseline;
  gap:9px;
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:3px;
  padding:11px 16px;
  font-size:.95em;
  color:var(--gp-ink);
  text-decoration:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.gp-marca-t:hover{
  border-color:var(--gp-navy);
  box-shadow:0 3px 0 0 var(--gp-navy);
  color:var(--gp-ink);
}
.gp-marca-t span{
  font-size:.82em;
  color:var(--gp-mute);
  font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .gp-sistemas{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .gp-sistema-t{ padding:12px 13px 13px; }
  .gp-sistema-c{ font-size:1.3em; }
  .gp-nav-cab p{ display:none; }
}

/* 13.5 Encabezado del catálogo en la portada */
/* OJO: el atajo `margin` de más abajo lleva los tres valores a propósito.
   Poner `margin-top` por separado aquí arriba no sirve de nada porque el
   atajo va después y lo pisa. Es el fallo que ya me ha costado dos ratos
   hoy: en una misma regla, atajo y propiedad larga no se mezclan. */
.gp-catalogo-t{
  font-family:var(--gp-display);
  font-size:1.15em !important;
  text-transform:none;
  letter-spacing:.005em;
  color:var(--gp-ink);
  margin:1.6em 0 .2em;
  padding-bottom:.4em;
  border-bottom:1px solid var(--gp-line);
}

/* 13.6 La fachada pegada a la cabecera. (ver también la red de seguridad
   en functions.php: mide el hueco real y lo cierra si el CSS no lo pilla)
   Storefront mete un colchón de padding en el contenedor de contenido. En
   una página normal está bien; aquí deja una banda gris entre el azul de la
   cabecera y la foto que rompe la continuidad. Sólo en la portada.
   Y la miga de pan sobra: en el inicio no lleva a ninguna parte. */
.home .site-content,
.home #content{
  padding-top:0 !important;
  margin-top:0 !important;
}
.home .site-content > .col-full,
.home #content > .col-full{
  padding-top:0 !important;
}
.home .storefront-breadcrumb,
.home .woocommerce-breadcrumb{ display:none !important; }

/* El hueco entre la cabecera y el contenido es un MARGEN, no un padding:
   por eso al inspeccionarlo el navegador selecciona el contenedor de toda
   la página y no un elemento concreto. Se ataca por los dos lados. */
.home .site-header{ margin-bottom:0 !important; }
.home #page > .site-content{ margin-top:0 !important; }
.home .gp-fachada{ margin-top:0 !important; }

/* Y un poco menos de aire por abajo: el catálogo empieza antes */
.home .site-main{ padding-top:0; }

/* ==========================================================================
   14. FILTROS DEL CATÁLOGO — v0.6.0 · 14/09/2026
   Chips horizontales, no una columna lateral: en la portada el catálogo ya
   va a todo el ancho y una barra lateral obligaría a estrechar la
   cuadrícula justo donde hace falta sitio.

   Los contadores no son adorno. Un filtro que dice «Delphi (62)» y al
   pulsarlo enseña 62 es fiable; uno que enseña una pantalla vacía no se
   vuelve a tocar. Por eso se cuentan aplicando los OTROS filtros activos.
   ========================================================================== */
/* WooCommerce deja este contenedor vacío cuando no hay avisos, pero con
   sus márgenes puestos: un hueco de la nada entre el título y los filtros. */
.woocommerce-notices-wrapper:empty{ display:none !important; }

.gp-filtros{
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:3px;
  padding:14px 16px 6px;
  margin:0 0 16px;
}
.gp-eje{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:0 0 9px;
}
.gp-eje + .gp-eje{ border-top:1px solid var(--gp-line-s); padding-top:9px; }
.gp-eje-t{
  flex:none;
  width:72px;
  font-size:.72em;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gp-navy);
  padding-top:5px;
}
.gp-eje-c{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }

.gp-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--gp-line);
  border-radius:999px;
  padding:5px 12px;
  font-size:.8em;
  line-height:1.4;
  color:var(--gp-ink);
  background:#fff;
  text-decoration:none;
  white-space:nowrap;
}
.gp-chip:hover{ border-color:var(--gp-navy); background:var(--gp-line-s); color:var(--gp-ink); }
.gp-chip-n{
  font-size:.86em;
  color:var(--gp-mute);
  font-variant-numeric:tabular-nums;
}
/* El activo lleva una × porque volver a pulsarlo lo quita: sin la marca,
   nadie adivina que el mismo chip sirve para poner y para quitar. */
.gp-chip-on{
  background:var(--gp-navy);
  border-color:var(--gp-navy);
  color:#fff;
  font-weight:500;
}
.gp-chip-on:hover{ background:var(--gp-navy-d); border-color:var(--gp-navy-d); color:#fff; }
.gp-chip-on .gp-chip-n{ color:rgba(255,255,255,.7); }
.gp-chip-on::after{
  content:"×";
  font-size:1.15em;
  line-height:1;
  opacity:.75;
  margin-left:1px;
}

.gp-filtros-pie{
  margin:2px 0 8px;
  font-size:.78em;
  display:flex;
  gap:14px;
  align-items:baseline;
  flex-wrap:wrap;
}
.gp-limpia{ color:var(--gp-blue); text-decoration:none; }
.gp-limpia:hover{ text-decoration:underline; }
.gp-filtros-nota{ color:var(--gp-mute); }

/* Mientras se busca por referencia, los filtros estorban: el buscador ya
   ha resuelto lo que ellos intentan resolver. */
body.gp-filtrando .gp-filtros{ display:none !important; }

@media (max-width:640px){
  .gp-eje{ flex-direction:column; gap:6px; }
  .gp-eje-t{ width:auto; padding-top:0; }
  .gp-filtros{ padding:12px 0 6px; }
  .gp-eje-t,
  .gp-filtros-pie{ padding-left:13px; padding-right:13px; }
  /* Cada eje en una sola línea que se desliza con el dedo. Apilados
     ocuparían media pantalla antes de llegar al primer producto. */
  .gp-eje-c{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding:2px 13px 4px;
    scroll-padding-left:13px;
  }
  .gp-eje-c::-webkit-scrollbar{ display:none; }
  .gp-chip{ flex:none; }
}


/* 3.5 Simetría en la portada. — v0.8.4
   En la portada no hay buscador en la cabecera, así que la fila de la marca
   se queda coja: todo a la izquierda y medio ancho vacío a la derecha,
   mientras el menú de debajo va centrado. Dos filas con ejes distintos.
   Aquí se centra también la de arriba y la cabecera queda axial.

   Sólo en la portada: en el resto de páginas esa fila lleva el buscador a
   la derecha y debe seguir alineada a la izquierda. */

/* El navegador, ahora al pie del catálogo. Separado con una línea para que
   se lea como «otra forma de buscar» y no como más catálogo. */
.gp-nav-pie{
  margin-top:2em;
  padding-top:1.8em;
  border-top:1px solid var(--gp-line);
}
.gp-nav-pie .gp-nav-bloque:first-child{ margin-top:0; }

/* ==========================================================================
   15. BARRA DE RECUENTO, BANDA DE CONFIANZA Y PIE — v0.10.0
   Reconstruidas a partir del prototipo. Las tres son bandas a sangre, como
   la fachada y los sellos, y usan el mismo truco de 100vw.

   Lo que NO se ha traído del prototipo, a propósito: los conmutadores
   «Vista cliente / Laboratorio / Estado del dato» y el selector de precios.
   Son herramientas de trabajo para auditar el maestro, no algo que deba ver
   un cliente en la tienda.
   ========================================================================== */
.gp-recuento,
.gp-confianza{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* 15.1 El recuento. La primera cifra que ve el cliente, y hace un trabajo:
   decir que aquí hay catálogo de verdad. «604 grupos» pesa más que
   cualquier frase que escribamos nosotros. */
.gp-recuento{
  background:#fff;
  border-bottom:1px solid var(--gp-line);
}
.gp-recuento p{
  max-width:1170px;
  margin:0 auto;
  padding:9px 22px;
  font-size:.84em;
  color:var(--gp-mute);
  font-variant-numeric:tabular-nums;
}
.gp-recuento b{ color:var(--gp-ink); font-weight:600; }

/* 15.2 La banda de confianza. Azul marino y al final: quien ha bajado hasta
   aquí es quien duda, y es a ése a quien hay que contarle lo del casco. */
.gp-confianza{
  background:var(--gp-navy);
  color:#fff;
  padding-block:34px;
  margin-top:2.4em;
}
.gp-confianza{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:26px;
  padding-left:max(22px, calc(50vw - 563px));
  padding-right:max(22px, calc(50vw - 563px));
}
.gp-confianza h4{
  font-family:var(--gp-display);
  font-size:.88em;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:400;
  color:#fff;
  margin:0 0 6px;
}
.gp-confianza p{
  margin:0;
  font-size:.84em;
  line-height:1.5;
  color:rgba(255,255,255,.78);
}

/* 15.3 El pie, en el azul más oscuro para cerrar la página. */
.site-footer{
  background:var(--gp-navy-d) !important;
  color:rgba(255,255,255,.7);
  padding-top:1.8em;
  padding-bottom:1.8em;
  font-size:.82em;
  border-top:0;
}
.site-footer a{ color:rgba(255,255,255,.82); }
.site-footer a:hover{ color:#fff; }
.site-footer .widget-title,
.site-footer h1, .site-footer h2, .site-footer h3{ color:#fff; }
.site-footer .site-info{ border-top:0; color:rgba(255,255,255,.55); }

/* Aire recortado en la portada. Entre el buscador y la primera ficha no
   debe haber más que lo imprescindible: la banda de sellos, el recuento y
   el título. Todo lo que sobre ahí son píxeles que separan al cliente del
   producto. */
.home .gp-recuento{ margin-bottom:0; }
.home .woocommerce-result-count,
.home .woocommerce-ordering{ margin-bottom:1em; }
.home .storefront-sorting{ margin-bottom:.8em; }
.home ul.products{ margin-bottom:1.2em; }
.home .site-main{ padding-bottom:0; margin-bottom:0; }
.home .woocommerce-products-header{ margin:0; padding:0; }

/* ==========================================================================
   16. MI GALLARDO — el portal del cliente. v0.11.0
   El «Mi cuenta» de WooCommerce está pensado para una tienda de camisetas.
   Aquí entra un recambista a ver si le han abonado un casco, así que la
   pantalla se ordena por lo que él busca, no por lo que trae el plugin.
   ========================================================================== */

/* 16.1 La navegación lateral: columna sólida, no una lista de enlaces. */
/* El menú de Mi Gallardo se pinta en la sección 20, con el mismo lenguaje de
   etiquetas que los filtros del catálogo. Aquí estaba la versión anterior —una
   caja vertical al estilo de WooCommerce— y se ha retirado entera: dejarla
   obligaba a ganarle regla por regla con la misma especificidad, y basta con
   que mañana se añada una para que el menú vuelva a descuadrarse. */

/* 16.2 El escritorio */
.gp-mig-hola{
  font-size:1.25em;
  font-weight:600;
  letter-spacing:-.03em;
  margin:0 0 1.2em;
  line-height:1.25;
}
.gp-mig-hola span{
  display:block;
  font-size:.62em;
  font-weight:400;
  color:var(--gp-mute);
  letter-spacing:0;
  margin-top:.15em;
}

.gp-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  margin-bottom:1.6em;
}
.gp-tile{
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:3px;
  padding:15px 16px 16px;
}
.gp-tile b{
  display:block;
  font-family:var(--gp-display);
  font-size:1.9em;
  line-height:1;
  color:var(--gp-navy);
  font-weight:400;
  font-variant-numeric:tabular-nums;
}
.gp-tile span{
  display:block;
  font-size:.86em;
  font-weight:600;
  margin:.35em 0 .1em;
}
.gp-tile small{
  display:block;
  font-size:.76em;
  color:var(--gp-mute);
  line-height:1.35;
}
/* La casilla del dinero parado se distingue: es a lo que se entra. */
.gp-tile-hot{
  border-color:var(--gp-amber-line);
  background:var(--gp-amber-bg);
}
.gp-tile-hot b{ color:var(--gp-amber); }

.gp-mig-accesos{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:2em; }
.gp-mig-b{
  display:inline-block;
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:3px;
  padding:9px 15px;
  font-size:.85em;
  color:var(--gp-navy);
  text-decoration:none;
}
.gp-mig-b:hover{ border-color:var(--gp-navy); background:var(--gp-line-s); color:var(--gp-navy); }

/* 16.3 Lo que viene. Decirlo es mejor que una pantalla vacía. */
.gp-mig-proximo{
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:3px;
  padding:17px 19px 18px;
}
.gp-mig-proximo h3{
  font-family:var(--gp-display);
  font-size:.92em;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--gp-navy);
  margin:0 0 .7em;
}
.gp-mig-proximo ul{ margin:0; padding-left:1.1em; }
.gp-mig-proximo li{
  font-size:.86em;
  line-height:1.5;
  color:var(--gp-mute);
  margin-bottom:.5em;
}
.gp-mig-proximo li b{ color:var(--gp-ink); }

/* 16.4 Tablas del portal (pedidos, y mañana cascos y devoluciones) */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table{
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:3px;
  font-size:.88em;
}
.woocommerce-account table.shop_table th{
  background:var(--gp-line-s);
  color:var(--gp-navy);
  font-size:.82em;
  letter-spacing:.05em;
  text-transform:uppercase;
}

/* 16.5 Distintivos de estado. Se definen ya porque los usarán los cascos y
   las devoluciones en cuanto existan: un expediente sin estado visible es
   una llamada de teléfono. */
.gp-pill{
  display:inline-block;
  border-radius:999px;
  padding:3px 10px;
  font-size:.78em;
  font-weight:600;
  line-height:1.5;
  white-space:nowrap;
}
.gp-pill-espera{ background:var(--gp-amber-bg); color:var(--gp-amber); }
.gp-pill-curso{ background:#e8f1fa; color:var(--gp-blue-d); }
.gp-pill-ok{ background:var(--gp-ok-bg); color:var(--gp-ok); }
.gp-pill-no{ background:#fbeced; color:var(--gp-red); }

@media (max-width:768px){
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{ width:100%; margin-right:0; }
  .woocommerce-account .woocommerce-MyAccount-navigation{ margin-bottom:1.4em; }
}

/* ==========================================================================
   17. PÁGINAS DE CATEGORÍA — v0.13.1
   Storefront pinta el nombre de la categoría como un cartel: tipografía
   enorme y un colchón de más de doscientos píxeles arriba y abajo. Para
   decir «BOMBAS», cuando la miga de pan y el menú ya lo dicen. El cliente
   viene a ver bombas.

   El H1 se conserva —es lo que le dice a Google de qué va la página— pero
   se encoge al mismo tamaño que «Catálogo completo» en la portada, para que
   las dos pantallas se lean igual.
   ========================================================================== */
.woocommerce-products-header{
  margin:0 !important;
  padding:0 !important;
}
.woocommerce-products-header .woocommerce-products-header__title,
.woocommerce .page-title,
body.tax-product_cat .page-title,
body.tax-product_tag .page-title{
  font-family:var(--gp-display) !important;
  font-size:1.15em !important;
  line-height:1.2 !important;
  text-transform:none !important;
  letter-spacing:.005em;
  color:var(--gp-ink);
  text-align:left;
  margin:0 0 .2em !important;
  padding:0 0 .4em !important;
  border-bottom:1px solid var(--gp-line);
}
/* Y el aire de alrededor, al mínimo: entre la miga de pan y la primera
   ficha no debe haber nada que no sea información.

   MEDIDO EN EL CSS REAL DE STOREFRONT 4.6.2 (v0.13.1). Los dos culpables
   del hueco enorme son exactamente estos:

     .storefront-full-width-content .woocommerce-products-header{
         padding:0 0 5.9968353111em }      ← 96 px debajo del título
     .storefront-breadcrumb{
         padding:1.41575em 0; margin:0 0 3.706325903em }  ← 81 px más

   La v0.13.0 mataba el primero pero fallaba el segundo: apuntaba a
   `.woocommerce-breadcrumb`, que es el <nav> de dentro, cuando el margen
   está en `.storefront-breadcrumb`, el <div> de fuera. Por eso seguían
   sobrando ochenta píxeles por encima del título. */
.storefront-breadcrumb{
  padding:.9em 0 0 !important;
  margin:0 0 .9em !important;
}
body.woocommerce .site-main,
body.woocommerce-page .site-main{ padding-top:0; }
body.woocommerce .term-description,
body.woocommerce-page .term-description{ margin-bottom:.8em; font-size:.9em; color:var(--gp-mute); }
.woocommerce-breadcrumb{ margin:0 !important; padding:0 !important; }

/* Con el buscador fuera de la cabecera, la marca se queda sola en su fila
   en TODAS las páginas: así la cabecera mide siempre lo mismo y el
   logotipo no salta al cambiar de página. */
.site-header .site-search{ display:none !important; }
.site-header > .col-full{ text-align:center; }
.site-header .site-branding{
  float:none;
  display:inline-flex;
  vertical-align:middle;
  text-align:left;
}

/* ==========================================================================
   18. FICHA DE PRODUCTO — v0.14.0
   Era la única pantalla que seguía pareciendo una tienda genérica: titular a
   cuerpo de cartel partido en dos líneas, recuadro gris de «foto rota» a
   media pantalla, botón azul gritando en medio y cuatrocientos píxeles de
   aire entre cosa y cosa.

   Lo que un profesional busca, por orden: si es su referencia, cuánto cuesta,
   si lo hay y cuándo llega. Todo lo demás estorba, y por eso encoge.
   ========================================================================== */

/* --- Cabecera: el número primero -------------------------------------- */
.gp-ficha-cab{ margin:0 0 .9em; }
.gp-ficha-ref{
  display:flex;
  align-items:baseline;
  gap:.6em;
  margin:0 0 .35em;
  flex-wrap:wrap;
}
.gp-ficha-ref span{
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gp-mute);
}
.gp-ficha-ref code{
  background:none;
  padding:0;
  font-size:1.05em;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  color:var(--gp-ink);
}
.single-product div.product .product_title,
.single-product div.product .gp-ficha-cab .product_title{
  font-size:1.5em !important;
  line-height:1.15;
  margin:0;
  text-transform:none;
  letter-spacing:-.01em;
  font-weight:400;
}
@media (max-width:767px){
  .single-product div.product .product_title,
  .single-product div.product .gp-ficha-cab .product_title{ font-size:1.3em !important; }
}

/* --- Precio ------------------------------------------------------------ */
.single-product div.product p.price,
.single-product div.product span.price{
  font-size:1.5em !important;
  font-weight:600;
  color:var(--gp-ink);
  margin:0 0 .5em;
  line-height:1.2;
}
.single-product div.product p.price small,
.single-product div.product .woocommerce-price-suffix{
  font-size:.5em;
  font-weight:400;
  color:var(--gp-mute);
  letter-spacing:.02em;
}

/* --- Entradilla -------------------------------------------------------- */
.single-product div.product .woocommerce-product-details__short-description{
  font-size:.94em;
  line-height:1.55;
  color:var(--gp-ink);
  max-width:58ch;
  margin:0 0 1em;
}
.single-product div.product .woocommerce-product-details__short-description p:last-child{ margin-bottom:0; }

/* --- Disponibilidad ---------------------------------------------------- */
.single-product div.product p.stock{
  display:inline-block;
  font-size:.85em;
  margin:0 0 1.1em;
  padding:.3em .8em;
  border-radius:999px;
  background:var(--gp-line-s);
  color:var(--gp-mute);
}
.single-product div.product p.stock.in-stock{ background:var(--gp-ok-bg); color:var(--gp-ok); }
.single-product div.product p.stock.available-on-backorder{
  background:var(--gp-amber-bg);
  color:var(--gp-amber);
}
.single-product div.product p.stock.out-of-stock{ background:#fbeced; color:var(--gp-red); }

/* --- Carrito: un botón, no un cartel ----------------------------------- */
.single-product div.product form.cart{ margin:0 0 1.4em; }
.single-product div.product form.cart .quantity input.qty{
  height:44px;
  width:64px;
  padding:0 .4em;
  text-align:center;
  border:1px solid var(--gp-line);
  border-radius:3px;
  font-size:.95em;
}
.single-product div.product .single_add_to_cart_button{
  height:44px;
  padding:0 1.6em !important;
  font-size:.95em !important;
  font-weight:600;
  border-radius:3px !important;
  vertical-align:top;
}

/* --- Referencias equivalentes ------------------------------------------
   Es lo que de verdad se mira aquí: el taller llega con un número grabado en
   una pieza y sólo quiere saber si está en la lista. Dentro de un párrafo no
   se puede recorrer con la vista; en rejilla y monoespaciadas, sí. */
.gp-eq{
  border-top:1px solid var(--gp-line);
  border-bottom:1px solid var(--gp-line);
  padding:1em 0;
  margin:0 0 1.3em;
}
.gp-eq-t{
  margin:0 0 .6em;
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gp-mute);
}
.gp-eq-lista{ display:flex; flex-wrap:wrap; gap:6px; }
.gp-eq-ref{
  background:var(--gp-line-s);
  border:1px solid transparent;
  border-radius:3px;
  padding:.28em .6em;
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
  color:var(--gp-ink);
  white-space:nowrap;
}
.gp-eq-mas{ margin-top:.6em; }
.gp-eq-mas summary{
  cursor:pointer;
  font-size:.86em;
  color:var(--gp-blue);
  list-style:none;
}
.gp-eq-mas summary::-webkit-details-marker{ display:none; }
.gp-eq-mas summary::before{ content:"+ "; font-weight:600; }
.gp-eq-mas[open] summary::before{ content:"− "; }
.gp-eq-mas[open] summary{ margin-bottom:.6em; }
.gp-eq-pie{
  margin:.8em 0 0;
  font-size:.82em;
  color:var(--gp-mute);
  line-height:1.5;
  max-width:60ch;
}

/* --- Sin fotografía ----------------------------------------------------
   Mientras no haya fotos, el hueco lo ocupa el icono del catálogo. No
   disimula que falta la foto: lo dice en letra pequeña, en vez de plantar un
   error de imagen a tamaño mural. */
.gp-ficha-sinfoto{ margin:0 0 1.4em; }
.gp-ficha-sinfoto-caja{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:3 / 2;
  max-width:100%;
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:4px;
  color:var(--gp-navy);
}
.gp-ficha-sinfoto-caja .gp-icono{
  width:34%;
  max-width:150px;
  height:auto;
  opacity:.5;
}
.gp-ficha-sinfoto-pie{
  margin:.7em 0 0;
  font-size:.8em;
  color:var(--gp-mute);
  line-height:1.5;
}

/* --- Meta: categoría y etiquetas, en una línea -------------------------- */
.single-product div.product .product_meta{
  font-size:.82em;
  color:var(--gp-mute);
  border-top:1px solid var(--gp-line);
  padding-top:.9em;
  margin:0;
}
.single-product div.product .product_meta > span{ display:block; margin-bottom:.2em; }
/* El SKU ya está arriba, grande y con su rótulo. Repetirlo aquí es ruido. */
.single-product div.product .product_meta .sku_wrapper{ display:none; }

/* --- Pestañas: planas ---------------------------------------------------
   Storefront las pinta como cajas con borde, sombra y esquinas redondeadas.
   Aquí basta una línea y la pestaña activa marcada. */
.single-product .woocommerce-tabs{
  /* clear:both explícito. Cuando la ficha no tiene fotografía, la columna
     izquierda la ocupa un bloque nuestro; si las pestañas no limpian el
     flotante se meten dentro de esa columna y la descripción sale a media
     página de ancho debajo del icono. */
  clear:both;
  margin-top:2.2em;
}
.single-product .woocommerce-tabs ul.tabs{
  padding:0;
  margin:0 0 1.4em;
  border-bottom:1px solid var(--gp-line);
  display:flex;
  gap:0;
  flex-wrap:wrap;
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after{ display:none; }
.single-product .woocommerce-tabs ul.tabs li{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  margin:0 !important;
  padding:0 !important;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after{ display:none !important; }
.single-product .woocommerce-tabs ul.tabs li a{
  display:block;
  padding:.6em 1.2em .7em 0;
  margin-right:1.6em;
  font-family:var(--gp-display);
  font-size:.92em;
  text-transform:uppercase;
  letter-spacing:.005em;
  color:var(--gp-mute);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.single-product .woocommerce-tabs ul.tabs li.active a{
  color:var(--gp-ink);
  border-bottom-color:var(--gp-navy);
}
.single-product .woocommerce-tabs .panel > h2:first-child{ display:none; }
.single-product .woocommerce-tabs .panel{
  font-size:.94em;
  line-height:1.6;
  max-width:72ch;
}
.single-product .woocommerce-tabs .panel h3{
  font-size:1em;
  margin:1.4em 0 .5em;
}

/* --- Aire general ------------------------------------------------------- */
.single-product div.product{ margin-bottom:1.6em; }
.single-product div.product .summary{ margin-bottom:0; }
.single-product .related.products,
.single-product .up-sells{ margin-top:2.4em; }
.single-product .related.products > h2,
.single-product .up-sells > h2{
  font-size:1.15em;
  text-transform:none;
  padding-bottom:.4em;
  border-bottom:1px solid var(--gp-line);
  margin-bottom:1.2em;
}

/* --- Ficha en móvil -----------------------------------------------------
   Sin foto, el recuadro del icono a 3:2 se come media pantalla del teléfono:
   se aplasta. Y el botón de comprar pasa a ocupar todo lo que sobra después
   de la cantidad, que es donde llega el pulgar. */
@media (max-width:767px){
  .gp-ficha-sinfoto-caja{ aspect-ratio:5 / 2; }
  .gp-ficha-sinfoto-caja .gp-icono{ width:22%; max-width:96px; }
  .single-product div.product form.cart{
    display:flex;
    gap:10px;
    align-items:stretch;
    flex-wrap:nowrap;
  }
  .single-product div.product form.cart .quantity{ flex:none; float:none; margin:0; }
  .single-product div.product .single_add_to_cart_button{ flex:1 1 auto; }
  .gp-eq-ref{ font-size:12px; padding:.25em .5em; }
}

/* ==========================================================================
   19. LA FICHA ES LA TARJETA, EN GRANDE — v0.15.0
   Mismo marco, mismo icono arriba a la izquierda, misma marca arriba a la
   derecha, misma referencia monoespaciada. El que pincha una tarjeta del
   catálogo aterriza en algo que reconoce, no en otra web.
   ========================================================================== */
.gp-ficha{
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:3px;
  overflow:hidden;
  margin:0 0 1.8em;
}
.gp-ficha::after{ content:""; display:table; clear:both; }

/* Banda superior, idéntica a la de la tarjeta pero con más aire. */
.gp-ficha-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px 22px;
  border-bottom:1px solid var(--gp-line-s);
  color:var(--gp-navy);
}
.gp-ficha-top .gp-icono{ width:34px; height:34px; opacity:.85; }
.gp-ficha-top .gp-marca{ font-size:1em; }

/* Las dos columnas de dentro. Se reescriben los porcentajes de Storefront
   porque ahora viven dentro de una tarjeta con relleno propio. */
.single-product .gp-ficha .woocommerce-product-gallery{
  float:left;
  width:38% !important;
  margin:22px 0 22px 22px !important;
  box-sizing:border-box;
}
.single-product .gp-ficha .summary.entry-summary{
  float:right;
  width:calc(62% - 66px) !important;
  margin:22px 22px 22px 0 !important;
  box-sizing:border-box;
}
@media (max-width:767px){
  .single-product .gp-ficha .woocommerce-product-gallery,
  .single-product .gp-ficha .summary.entry-summary{
    float:none;
    width:auto !important;
    margin:18px !important;
  }
}

/* La foto, dentro del marco de la tarjeta */
.single-product .gp-ficha .woocommerce-product-gallery img{
  border-radius:3px;
  display:block;
}

/* Subtítulo técnico, como la segunda línea de la tarjeta */
.gp-ficha-sub{
  margin:.3em 0 .8em;
  font-size:.86em;
  color:var(--gp-mute);
  letter-spacing:.01em;
}

/* --- Semáforo con unidades ---------------------------------------------
   Cuatro estados, no tres: el cuarto —gris— es «no lo sabemos», que es
   distinto de «no hay». Mientras el inventario no esté cargado, decir
   «0 unidades» sería mentir al revés. */
.gp-sem{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  margin:0 0 .35em;
  padding:.4em .9em;
  border-radius:999px;
  font-size:.88em;
  font-weight:600;
  white-space:nowrap;
}
.gp-sem .gp-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.gp-sem.gp-ok{ background:var(--gp-ok-bg); color:var(--gp-ok); }
.gp-sem.gp-ok .gp-dot{ background:var(--gp-ok); }
.gp-sem.gp-pocas{ background:var(--gp-amber-bg); color:var(--gp-amber); }
.gp-sem.gp-pocas .gp-dot{ background:#e0a12a; }
.gp-sem.gp-core{ background:var(--gp-amber-bg); color:var(--gp-amber); }
.gp-sem.gp-core .gp-dot{ background:#e0a12a; }
.gp-sem.gp-no{ background:#fbeced; color:var(--gp-red); }
.gp-sem.gp-no .gp-dot{ background:#c0392f; }
.gp-sem.gp-gris{ background:var(--gp-line-s); color:var(--gp-mute); }
.gp-sem.gp-gris .gp-dot{ background:#9aa6b8; }
.gp-sem-pie{
  margin:0 0 1.1em;
  font-size:.8em;
  color:var(--gp-mute);
  line-height:1.5;
  max-width:52ch;
}

/* --- Ficha técnica ------------------------------------------------------
   Dos columnas con la etiqueta en pequeño y el valor legible. Sólo se
   pintan las filas que tienen dato: una tabla con ocho «por confirmar» no
   informa, comunica que no sabemos lo que vendemos. */
.gp-tec{
  display:grid;
  grid-template-columns:minmax(120px,auto) 1fr;
  gap:.45em 1.2em;
  margin:0 0 1.3em;
  padding:1em 0 0;
  border-top:1px solid var(--gp-line);
  font-size:.88em;
}
.gp-tec dt{
  margin:0;
  font-size:.86em;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gp-mute);
  align-self:center;
}
.gp-tec dd{ margin:0; color:var(--gp-ink); }
@media (max-width:420px){
  .gp-tec{ grid-template-columns:1fr; gap:.1em; }
  .gp-tec dd{ margin-bottom:.6em; }
}

/* Dentro de la tarjeta, la caja del icono ya no necesita su propio marco:
   el marco es la tarjeta. */
.gp-ficha .gp-ficha-sinfoto{ margin:0; }
.gp-ficha .gp-ficha-sinfoto-caja{
  background:var(--gp-line-s);
  border-color:transparent;
}

/* Las pestañas van FUERA de la tarjeta, debajo. */
.single-product .woocommerce-tabs{ margin-top:0; }

/* ==========================================================================
   20. MI GALLARDO — cabecera compacta y menú de etiquetas · v0.16.0
   El portal era la única parte de la web que seguía con el cartel gigante y
   el colchón de Storefront, y con un menú de caja vertical que no se parece
   a nada de lo demás.

   Ahora usa el MISMO lenguaje que el catálogo: etiquetas redondeadas, la
   activa en azul oscuro. Un taller que ha estado filtrando por SISTEMA y
   MARCA reconoce el gesto sin tener que aprenderlo otra vez.
   ========================================================================== */

/* 20.1 Fuera el cartel.
   La regla de Storefront es la misma que ya se mató en las páginas de
   categoría, pero con otro selector — aquí el encabezado es `.entry-header`:

     .storefront-full-width-content.woocommerce-account .entry-header{
         text-align:center; padding:0 0 5.9968353111em }   ← 96 px

   Se le suman los 42 de `.hentry .entry-header{margin-bottom:2.617924em}`.
   Casi ciento cuarenta píxeles para decir «Mi cuenta». */
.woocommerce-account .entry-header,
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header{
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  border-bottom:0 !important;
}
.woocommerce-account .entry-header .entry-title,
.woocommerce-cart .entry-header .entry-title,
.woocommerce-checkout .entry-header .entry-title{
  font-family:var(--gp-display) !important;
  font-size:1.15em !important;
  line-height:1.2 !important;
  text-transform:none !important;
  letter-spacing:.005em;
  color:var(--gp-ink);
  text-align:left;
  margin:0 0 .2em !important;
  padding:0 0 .4em !important;
  border-bottom:1px solid var(--gp-line);
}
.woocommerce-account .site-main,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main{ padding-top:0; }

/* 20.2 El menú, en etiquetas y arriba.
   Deja de ser una columna: pasa a ser una fila de etiquetas sobre el
   contenido, y el contenido ocupa el ancho entero. En un portátil eso son
   doscientos cincuenta píxeles más de tabla, que en el panel de stock son
   dos columnas que ya no hay que estrechar. */
.woocommerce-account .woocommerce-MyAccount-navigation{
  float:none !important;
  width:100% !important;
  margin:0 0 1.5em !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  background:none;
  border:0;
  border-radius:0;
  overflow:visible;
  margin:0;
  padding:0;
  list-style:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{
  margin:0;
  padding:0;
  border:0;
  float:none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  /* Los !important no son pereza: WooCommerce y Storefront traen sus propias
     reglas para este enlace, y cualquiera de las dos que gane deja la
     etiqueta sin relleno o sin forma. */
  display:inline-block !important;
  padding:.4em 1em !important;
  border:1px solid var(--gp-line) !important;
  border-radius:999px !important;
  /* Una etiqueta nunca se queda sin caja: aunque su texto llegara vacío,
     sigue midiendo lo mismo que las demás y no se convierte en una bolita.
     Con `min-height` además, porque un enlace sin texto no genera línea y se
     quedaría en un canuto de trece píxeles. */
  min-width:3.4em;
  min-height:1.4em;
  text-align:center;
  background:#fff;
  font-size:.88em;
  line-height:1.4;
  color:var(--gp-ink);
  text-decoration:none;
  white-space:nowrap;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  border-color:var(--gp-navy);
  background:var(--gp-line-s);
  color:var(--gp-navy);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--gp-navy);
  border-color:var(--gp-navy);
  color:#fff;
  font-weight:600;
}
/* Storefront cuelga un icono de fuente en cada enlace con ::after. Dentro de
   una etiqueta redondeada se sale del sitio y no aporta nada: fuera. */
.woocommerce-account .woocommerce-MyAccount-navigation li a::after,
.woocommerce-account .woocommerce-MyAccount-navigation li a::before{
  display:none !important;
  content:none !important;
}
/* Cerrar sesión no es una sección más: se aparta al final y se apaga. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{
  margin-left:auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{
  border-style:dashed;
  color:var(--gp-mute);
  font-size:.83em;
}

/* 20.2.b Los grupos — v0.23.0
   El menú llegó a trece etiquetas seguidas, y trece etiquetas en fila no son
   un menú: para encontrar «Ubicaciones» hay que leerlas todas, y las del
   almacén estaban mezcladas con las de la cuenta del cliente sin tener nada
   que ver.

   Se agrupan con el MISMO patrón que los filtros del catálogo (`.gp-filtros`
   y `.gp-eje`): caja blanca, una fila por grupo, el nombre del grupo a la
   izquierda en versalitas y las etiquetas a la derecha. Quien filtra por
   SISTEMA y MARCA reconoce el gesto; es el argumento de la 0.16 aplicado a
   un menú que ha crecido.

   Un taller sólo ve el grupo CUENTA, así que para él esto vuelve a ser una
   sola fila de etiquetas: exactamente lo que había antes. */
.woocommerce-account .woocommerce-MyAccount-navigation.gp-mig-nav{
  background:#fff;
  border:1px solid var(--gp-line);
  border-radius:3px;
  padding:11px 14px 3px;
}
.gp-mig-grupo{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:0 0 8px;
}
.gp-mig-grupo + .gp-mig-grupo{
  border-top:1px solid var(--gp-line-s);
  padding-top:8px;
}
.gp-mig-et{
  flex:none;
  width:74px;
  padding-top:6px;
  font-size:.72em;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gp-navy);
}
/* El `margin-left:auto` de Cerrar sesión empujaba la etiqueta al otro extremo
   de la fila y dejaba un vacío enorme en medio. Dentro de un grupo ya no hace
   falta apartarla: el grupo la aparta. */
.gp-mig-grupo li.woocommerce-MyAccount-navigation-link--customer-logout{
  margin-left:0 !important;
}

@media (max-width:600px){
  /* En móvil la etiqueta del grupo se pone encima: 74 px de columna fija se
     comen media pantalla. */
  .gp-mig-grupo{ display:block; }
  .gp-mig-et{ display:block; width:auto; padding:0 0 6px; }
}

/* 20.2.c Las dos áreas — v0.24.0
   Mi Gallardo (cliente) y Operativa (interna) no son dos carpetas del mismo
   menú: son dos sitios. Cuando estás dentro de Operativa la caja lleva una
   línea de vuelta arriba y el nombre del área, para que nadie dude de dónde
   está. Y la puerta a Operativa, en el menú del cliente, va apagada y al
   final: es un salto, no una sección más. */
.gp-mig-volver{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 0 9px;
  padding:0 0 8px;
  border-bottom:1px solid var(--gp-line-s);
  font-size:.8em;
}
.gp-mig-volver a{ color:var(--gp-blue); text-decoration:none; }
.gp-mig-volver a:hover{ color:var(--gp-blue-d); text-decoration:underline; }
.gp-mig-area{
  font-size:.92em;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gp-navy);
}
.gp-mig-puerta .gp-mig-et{ color:var(--gp-mute); }
.gp-mig-puerta li a{
  border-style:dashed !important;
  color:var(--gp-navy) !important;
  font-weight:600 !important;
}
.gp-mig-puerta li a:hover{
  border-style:solid !important;
  background:var(--gp-navy) !important;
  color:#fff !important;
}

/* 20.2.d «Operativa» en la cabecera — v0.25.0
   Es una puerta de servicio, no una sección de la tienda: va la última y
   separada por una línea fina, para que se lea como «y además, lo de dentro»
   y no como una categoría más de catálogo. */
.main-navigation li.gp-menu-operativa{
  margin-left:.9em;
  padding-left:.9em;
  border-left:1px solid rgba(255,255,255,.25);
}
.main-navigation li.gp-menu-operativa > a{ opacity:.85; }
.main-navigation li.gp-menu-operativa > a:hover,
.main-navigation li.gp-menu-operativa.current-menu-item > a{ opacity:1; }
@media (max-width:767px){
  /* En el menú desplegable de móvil no hay fila que separar: la línea
     horizontal haría de tajo en medio de la lista. */
  .main-navigation li.gp-menu-operativa{
    margin-left:0; padding-left:0; border-left:0;
    border-top:1px solid rgba(255,255,255,.25);
  }
}

/* 20.3 El contenido, a todo lo ancho. */
.woocommerce-account .woocommerce-MyAccount-content{
  float:none !important;
  width:100% !important;
  margin:0 !important;
}

@media (max-width:600px){
  .woocommerce-account .woocommerce-MyAccount-navigation ul{ gap:5px; }
  .woocommerce-account .woocommerce-MyAccount-navigation li a{ font-size:.84em; padding:.34em .8em; }
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{
    margin-left:0;
  }
}

/* ==========================================================================
   21. CARRITO Y FINALIZAR COMPRA · v0.18.0

   El carrito era la única pantalla que seguía con el aspecto de fábrica:
   botón negro, totales sin caja, tipografía de otro sitio. Después de
   recorrer un catálogo azul marino, llegar a un botón negro con el texto
   subrayado se lee como que has salido de la web.

   POR QUÉ HAY DOS JUEGOS DE SELECTORES.
   WooCommerce tiene hoy dos carritos: el clásico (una tabla) y el de
   bloques (`wc-block-*`), que es el que está puesto aquí. No se sabe cuál
   habrá mañana —y al cambiar de uno a otro la página se queda sin estilo
   sin avisar—, así que se visten los dos. Cuesta unas líneas más y quita
   una sorpresa.

   RIESGO CONOCIDO: las clases `wc-block-*` son internas de WooCommerce y
   pueden cambiar de nombre en una actualización. Si algún día el carrito
   vuelve a verse de fábrica, es esto. Por eso NO se toca la estructura, sólo
   colores, bordes y espacios: si una regla deja de aplicar, se ve feo, no
   roto.
   ========================================================================== */

/* 21.1 El ancho y el aire, iguales que en el portal. */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main{
  max-width:1180px;
  margin-inline:auto;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{
  font-family:var(--gp-body);
  color:var(--gp-ink);
}

/* 21.2 Las cabeceras de columna: como las del panel de stock. */
.wc-block-cart-items__header,
.woocommerce-cart table.shop_table thead th{
  font-family:var(--gp-body) !important;
  font-size:.72em !important;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gp-mute) !important;
  border-bottom:1px solid var(--gp-line) !important;
  padding-bottom:.7em !important;
}

/* 21.3 Cada línea del carrito. */
.wc-block-cart-items__row,
.woocommerce-cart table.shop_table tbody tr{
  border-bottom:1px solid var(--gp-line-s) !important;
}

.wc-block-cart-item__wrap .wc-block-components-product-name,
.woocommerce-cart .product-name a{
  font-weight:600 !important;
  color:var(--gp-ink) !important;
  text-decoration:none !important;
  font-size:1.02em;
}
.wc-block-cart-item__wrap .wc-block-components-product-name:hover,
.woocommerce-cart .product-name a:hover{ color:var(--gp-navy) !important; }

/* La miniatura vacía no tiene que parecer una imagen rota. */
.wc-block-cart-item__image img,
.woocommerce-cart .product-thumbnail img{
  border:1px solid var(--gp-line-s);
  border-radius:3px;
  background:var(--gp-paper);
}

/* 21.4 La etiqueta de disponibilidad, con el mismo gesto que el catálogo. */
.wc-block-components-product-badge{
  border:1px solid var(--gp-amber-line) !important;
  background:var(--gp-amber-bg) !important;
  color:var(--gp-amber) !important;
  border-radius:999px !important;
  font-size:.72em !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:600;
  padding:.25em .8em !important;
}

/* 21.5 El selector de cantidad, igual que el − 1 + del panel de almacén. */
.wc-block-components-quantity-selector{
  border:1px solid var(--gp-line) !important;
  border-radius:3px !important;
  /* SIN overflow:hidden. Con él, si WooCommerce deja el selector justo de
     ancho, el botón «+» se recorta y desaparece: el cliente puede quitar
     unidades pero no añadirlas. Lo vi en la maqueta antes de subirlo. */
}
.wc-block-components-quantity-selector__button{
  color:var(--gp-navy) !important;
  font-weight:700 !important;
  background:var(--gp-paper) !important;
  border:0 !important;
}
.wc-block-components-quantity-selector__button:hover{ background:var(--gp-line-s) !important; }
.wc-block-components-quantity-selector__input{
  font-variant-numeric:tabular-nums;
  font-weight:600;
}

/* 21.6 La caja de totales: una caja de verdad, no texto suelto. */
.wp-block-woocommerce-cart-order-summary-block,
.woocommerce-cart .cart_totals{
  border:1px solid var(--gp-line) !important;
  border-top:3px solid var(--gp-blue) !important;
  border-radius:4px;
  background:var(--gp-white);
  padding:1.1em 1.2em 1.3em !important;
}

.wp-block-woocommerce-cart-order-summary-heading-block,
.woocommerce-cart .cart_totals h2{
  font-family:var(--gp-display) !important;
  font-size:1.05em !important;
  color:var(--gp-navy) !important;
  text-transform:none !important;
  letter-spacing:.01em;
  margin:0 0 .8em !important;
  padding:0 0 .6em !important;
  border-bottom:1px solid var(--gp-line-s);
}

.wc-block-components-totals-item{
  font-size:.92em;
  padding:.45em 0 !important;
}
.wc-block-components-totals-item__label{ color:var(--gp-mute); }
.wc-block-components-totals-item__value{ font-variant-numeric:tabular-nums; }

/* El total, en azul marino y sin adornos. */
.wc-block-components-totals-footer-item,
.woocommerce-cart .order-total{
  border-top:1px solid var(--gp-line) !important;
  margin-top:.5em !important;
  padding-top:.8em !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--gp-display);
  font-size:1.2em !important;
  color:var(--gp-navy) !important;
  font-weight:400;
}

/* 21.7 EL BOTÓN. Era negro con el texto subrayado; ahora es el de la casa. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order{
  background:var(--gp-navy) !important;
  border:0 !important;
  border-radius:3px !important;
  color:var(--gp-white) !important;
  font-family:var(--gp-body) !important;
  font-weight:600 !important;
  font-size:1em !important;
  letter-spacing:.01em;
  text-decoration:none !important;
  text-transform:none !important;
  padding:.95em 1.4em !important;
  width:100%;
  transition:background .12s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-checkout #place_order:hover{
  background:var(--gp-navy-d) !important;
}

/* 21.8 Enlaces sueltos («Editar», «Volver a la tienda»): azul, no negro. */
.wp-block-woocommerce-cart a:not(.wc-block-cart__submit-button),
.wp-block-woocommerce-checkout a{
  color:var(--gp-blue);
}

/* 21.9 El aviso de que no se cobra nada, con aire. */
.woocommerce-checkout .gp-aviso-ref{ margin:0 0 1.2em; }

/* 21.10 En móvil la caja de totales va después, con separación. */
@media (max-width:768px){
  .wp-block-woocommerce-cart-order-summary-block,
  .woocommerce-cart .cart_totals{ margin-top:1.4em !important; }
}

/* ==========================================================================
   22. EL PIE Y LA PREVISUALIZACIÓN DEL CARRITO · v0.19.0
   ========================================================================== */

/* 22.1 El pie.
   Era una banda azul marino con una línea de copyright dentro: cuatrocientos
   píxeles de color para no decir nada. Ahora tiene columnas, y el azul
   marino deja de ser el protagonista para ser el fondo. */
.gp-pie{
  width:100%;
  background:var(--gp-navy-d);
  color:rgba(255,255,255,.82);
  font-size:.9em;
  line-height:1.65;
}
.gp-pie-in{
  max-width:1180px;
  margin-inline:auto;
  padding:2.8em 1.5em 2.2em;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:2.4em;
}
.gp-pie-col h4{
  font-family:var(--gp-body);
  font-size:.72em;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin:0 0 1em;
  font-weight:600;
}
.gp-pie-txt{ margin:0 0 .8em; }
.gp-pie-1933{
  margin:0;
  font-size:.86em;
  color:rgba(255,255,255,.5);
}

/* El logotipo, con el mismo gesto que la cabecera: GALLARDO macizo y PARTS
   en azul medio, separados por un filete. */
.gp-pie-logo{
  font-family:var(--gp-display);
  font-size:1.35em;
  letter-spacing:.04em;
  margin:0 0 .7em;
  line-height:1;
}
.gp-pie-logo b{ color:#fff; font-weight:400; }
.gp-pie-logo span{
  color:var(--gp-blue);
  margin-left:.55em;
  padding-left:.55em;
  border-left:1px solid rgba(255,255,255,.25);
}

.gp-pie-lista{ list-style:none; margin:0; padding:0; }
.gp-pie-lista li{ margin:0 0 .45em; }
.gp-pie-lista a{
  color:rgba(255,255,255,.82);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .12s ease,color .12s ease;
}
.gp-pie-lista a:hover{ color:#fff; border-bottom-color:var(--gp-blue); }
.gp-pie-legal{ margin-top:.9em; font-size:.92em; }
.gp-pie-legal a{ color:rgba(255,255,255,.62); }

/* Aviso que sólo ve el administrador. */
.gp-pie-aviso{
  margin:.8em 0 0;
  padding:.6em .8em;
  border:1px dashed rgba(255,255,255,.3);
  border-radius:3px;
  font-size:.82em;
  color:rgba(255,255,255,.6);
}

/* La raya de abajo: separada, pequeña y sin gritar. */
.gp-pie-raya{
  border-top:1px solid rgba(255,255,255,.14);
  max-width:1180px;
  margin-inline:auto;
  padding:1.1em 1.5em 1.6em;
  display:flex;
  justify-content:space-between;
  gap:1.5em;
  flex-wrap:wrap;
  font-size:.82em;
  color:rgba(255,255,255,.45);
}

/* Storefront pinta su propio pie debajo. Se calla. */
.site-footer .site-info{ display:none; }
.site-footer{ padding:0 !important; background:var(--gp-navy-d); }

@media (max-width:900px){
  .gp-pie-in{ grid-template-columns:1fr 1fr; gap:1.8em; }
}
@media (max-width:560px){
  .gp-pie-in{ grid-template-columns:1fr; }
  .gp-pie-raya{ flex-direction:column; gap:.4em; }
}

/* 22.2 La previsualización del carrito.
   El nombre del producto se montaba encima de la miniatura y el botón «Ver
   carrito» era gris claro sobre gris claro: invisible. Storefront coloca la
   imagen flotando a la derecha y la X en posición absoluta a la izquierda,
   así que lo que faltaba era sitio a los dos lados. */
.site-header-cart .widget_shopping_cart_content{
  background:#fff;
  border:1px solid var(--gp-line);
  border-top:3px solid var(--gp-blue);
  border-radius:0 0 4px 4px;
  box-shadow:0 12px 28px rgba(0,26,64,.16);
  padding:1em 1.1em 1.1em;
  min-width:330px;
}

.site-header-cart .cart_list{ margin:0; padding:0; }

.site-header-cart .cart_list li{
  position:relative;
  list-style:none;
  padding:.85em 3.6em .85em 1.9em;   /* izquierda: la X · derecha: la miniatura */
  margin:0;
  border-bottom:1px solid var(--gp-line-s);
  min-height:0;
  line-height:1.45;
}
.site-header-cart .cart_list li:first-child{ padding-top:.2em; }
.site-header-cart .cart_list li:last-child{ border-bottom:0; }

.site-header-cart .cart_list li a:not(.remove){
  display:block;
  font-weight:600;
  font-size:.92em;
  color:var(--gp-ink);
  text-decoration:none;
  padding:0;
}
.site-header-cart .cart_list li a:not(.remove):hover{ color:var(--gp-navy); }

.site-header-cart .cart_list li img{
  position:absolute;
  top:.85em;
  right:0;
  width:44px;
  height:44px;
  object-fit:cover;
  margin:0;
  border:1px solid var(--gp-line-s);
  border-radius:3px;
  background:var(--gp-paper);
  float:none;
}

.site-header-cart .cart_list li .remove{
  position:absolute;
  top:.9em;
  left:0;
  width:1.3em;
  height:1.3em;
  line-height:1.2;
  text-align:center;
  color:var(--gp-mute) !important;
  background:none !important;
  font-size:1.1em;
}
.site-header-cart .cart_list li .remove:hover{ color:var(--gp-red) !important; }

.site-header-cart .quantity{
  display:block;
  font-size:.85em;
  color:var(--gp-mute);
  margin-top:.15em;
}

.site-header-cart .woocommerce-mini-cart__total{
  display:flex;
  justify-content:space-between;
  gap:1em;
  margin:.9em 0 1em;
  padding:.8em 0 0;
  border-top:1px solid var(--gp-line);
  font-size:.95em;
}
.site-header-cart .woocommerce-mini-cart__total strong{ color:var(--gp-mute); font-weight:400; }
.site-header-cart .woocommerce-mini-cart__total .amount{
  font-weight:700;
  color:var(--gp-navy);
  font-variant-numeric:tabular-nums;
}

/* Los dos botones: el de seguir mirando en hueco, el de pagar macizo.
   Antes los dos eran del mismo gris y no se distinguía cuál era cuál. */
.site-header-cart .woocommerce-mini-cart__buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5em;
  margin:0;
}
.site-header-cart .woocommerce-mini-cart__buttons a{
  display:block;
  text-align:center;
  padding:.7em .6em !important;
  border-radius:3px;
  font-size:.88em !important;
  font-weight:600;
  text-decoration:none !important;
  line-height:1.3;
}
.site-header-cart .woocommerce-mini-cart__buttons a:first-child{
  background:#fff !important;
  color:var(--gp-navy) !important;
  border:1px solid var(--gp-line) !important;
}
.site-header-cart .woocommerce-mini-cart__buttons a:first-child:hover{
  border-color:var(--gp-navy) !important;
}
.site-header-cart .woocommerce-mini-cart__buttons a.checkout{
  background:var(--gp-navy) !important;
  color:#fff !important;
  border:1px solid var(--gp-navy) !important;
}
.site-header-cart .woocommerce-mini-cart__buttons a.checkout:hover{
  background:var(--gp-navy-d) !important;
  border-color:var(--gp-navy-d) !important;
}

.site-header-cart .woocommerce-mini-cart__empty-message{
  margin:0;
  padding:.6em 0;
  color:var(--gp-mute);
  font-size:.92em;
}

/* 22.3 La banda de confianza, en claro, cerrando el carrito.

   La de la portada es azul marino a sangre. Aquí no puede serlo: el pie
   también es azul marino y quedarían dos bloques del mismo color pegados,
   que es exactamente el muro de azul que había que quitar. En claro, las
   tarjetas se despegan del fondo y el pie vuelve a leerse como el final de
   la página y no como más de lo mismo. */
.gp-confianza-clara{
  background:transparent !important;
  color:var(--gp-ink) !important;
  padding-block:0 !important;
  margin:2.6em 0 3em !important;
}
.gp-confianza-clara > div{
  background:#fff;
  border:1px solid var(--gp-line);
  border-top:3px solid var(--gp-blue);
  border-radius:4px;
  padding:1.05em 1.15em 1.15em;
}
.gp-confianza-clara h4{
  color:var(--gp-navy) !important;
  opacity:1 !important;
  margin:0 0 .35em;
}
.gp-confianza-clara p{
  color:var(--gp-mute) !important;
  opacity:1 !important;
  margin:0;
}

/* ==========================================================================
   16. La cabecera del listado de la portada
   La portada enseña sólo lo que está en la estantería. Esta nota dice cuántas
   son y deja el enlace al catálogo entero: sin esa puerta, 448 referencias
   que existen y se pueden pedir no se encontrarían navegando.
   ========================================================================== */
.gp-almacen-nota{
  margin:.35em 0 1.25em;
  font-size:.86em;
  line-height:1.5;
  color:var(--gp-mute);
  max-width:74ch;
}
.gp-almacen-nota b{ color:var(--gp-ink); font-weight:600; }

.gp-ver-todo{
  display:inline-block;
  margin-left:.5em;
  white-space:nowrap;
  font-weight:600;
  color:var(--gp-blue);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.gp-ver-todo:hover,
.gp-ver-todo:focus{
  color:var(--gp-navy);
  border-bottom-color:currentColor;
}

@media (max-width:600px){
  .gp-almacen-nota{ font-size:.84em; }
  .gp-ver-todo{ display:block; margin:.5em 0 0; }
}