/* HCS — sistema visual etapa 1
   Referencia de estilo: tienda oficial de F1 — base clara, mucho producto,
   tipografía condensada tipo Titillium, negro estructural y rojo de acento.
   Paleta del manual de marca 2016: rojo Pantone 485 C #E62B1E sobre negro #000000. */

:root {
  --rojo: #e62b1e;
  --rojo-oscuro: #b81f15;
  --negro: #15151e;      /* negro azulado del universo F1, más elegante que el negro puro */
  --negro-puro: #000000;
  --tinta: #15151e;
  --gris-900: #2b2b35;
  --gris-600: #6e6e78;
  --gris-400: #a5a5ae;
  --gris-200: #e2e2e6;
  --gris-100: #f2f2f4;
  --fondo: #ffffff;
  --blanco: #ffffff;

  /* alias heredados de la primera versión oscura, apuntados a la paleta clara */
  --humo: #6e6e78;
  --niebla: #2b2b35;
  --carbon: #f2f2f4;
  --grafito: #ffffff;
  --acero: #e2e2e6;

  --fuente-titulo: "Titillium Web", "Saira Condensed", system-ui, sans-serif;
  --fuente-texto: "Titillium Web", system-ui, -apple-system, sans-serif;

  --ancho: 1320px;
  --radio: 2px;
  --sombra: 0 1px 3px rgba(21, 21, 30, 0.10);
  --sombra-alta: 0 8px 24px rgba(21, 21, 30, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--tinta); text-decoration: none; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  color: var(--tinta);
  text-transform: uppercase;
  font-weight: 900;
  font-style: italic;          /* la cursiva es la firma gráfica del motorsport */
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0 0 14px;
}

h1 { font-size: clamp(2.3rem, 6.5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 0.95rem; letter-spacing: 0.04em; }

p { margin: 0 0 14px; }

.rojo { color: var(--rojo); }

/* ---------- barra de aviso ---------- */

.barra-aviso {
  background: var(--negro);
  color: var(--blanco);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}

/* ---------- encabezado ---------- */

.encabezado {
  position: sticky;
  top: 0;
  /* por sobre el menú móvil (60): si queda debajo, el botón de cierre resulta
     inalcanzable y el panel se convierte en una trampa sin salida */
  z-index: 70;
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-200);
}

.encabezado .contenedor {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 80px;
}

.marca { display: flex; align-items: center; gap: 12px; }
.marca img { width: 54px; height: 54px; }
.marca span {
  font-family: var(--fuente-titulo);
  font-size: 1.6rem;
  font-weight: 900;
  font-style: italic;
  color: var(--tinta);
  letter-spacing: 0.02em;
}

.navegacion {
  margin-left: auto;
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: nowrap;
}

.navegacion a {
  position: relative;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--tinta);
  padding: 28px 0;
}

.navegacion a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--rojo);
  transform: scaleX(0);
  transition: transform 0.18s ease;
}

.navegacion a:hover::after,
.navegacion a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- botones ---------- */

.boton {
  display: inline-block;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px 34px;
  border-radius: var(--radio);
  border: 2px solid var(--rojo);
  background: var(--rojo);
  color: var(--blanco);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.boton:hover { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); }

.boton.contorno {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
}
.boton.contorno:hover { background: var(--tinta); color: var(--blanco); }

.boton.chico { font-size: 0.85rem; padding: 11px 22px; width: 100%; }

/* sobre fondo oscuro */
.sobre-oscuro .boton.contorno,
.portada .boton.contorno,
.seccion.oscura .boton.contorno { color: var(--blanco); border-color: var(--blanco); background: transparent; }

.sobre-oscuro .boton.contorno:hover,
.portada .boton.contorno:hover,
.seccion.oscura .boton.contorno:hover { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }

/* ---------- portada ---------- */

.portada {
  position: relative;
  color: var(--blanco);
  padding: clamp(72px, 11vw, 128px) 0;
  background:
    radial-gradient(ellipse at 76% 30%, rgba(230, 43, 30, 0.34), transparent 60%),
    linear-gradient(105deg, #15151e 0%, #1d1d28 55%, #24242f 100%);
  overflow: hidden;
}

/* Con foto: la imagen se apila sobre el degradado. Si el archivo aún no existe, el navegador
   descarta esa capa y queda el degradado — la portada nunca se ve rota. */
.portada.home {
  background:
    linear-gradient(100deg, rgba(21,21,30,0.96) 0%, rgba(21,21,30,0.80) 42%, rgba(21,21,30,0.42) 100%),
    url("../img/heroper-home.jpg") center/cover no-repeat,
    radial-gradient(ellipse at 76% 30%, rgba(230, 43, 30, 0.34), transparent 60%),
    linear-gradient(105deg, #15151e 0%, #1d1d28 55%, #24242f 100%);
}

.portada.escaner {
  background:
    linear-gradient(260deg, rgba(21,21,30,0.96) 0%, rgba(21,21,30,0.80) 42%, rgba(21,21,30,0.42) 100%),
    url("../img/heroper-escaner.jpg") center/cover no-repeat,
    radial-gradient(ellipse at 24% 30%, rgba(230, 43, 30, 0.34), transparent 60%),
    linear-gradient(255deg, #15151e 0%, #1d1d28 55%, #24242f 100%);
}

/* con foto de fondo, la trama diagonal sobra */
.portada.home::before,
.portada.escaner::before { opacity: 0.35; }

.portada.catalogo {
  padding: clamp(56px, 8vw, 92px) 0;
  background:
    linear-gradient(90deg, rgba(21,21,30,0.94) 0%, rgba(21,21,30,0.72) 34%, rgba(21,21,30,0.55) 100%),
    url("../img/hero-catalogo.jpg") center/cover no-repeat,
    linear-gradient(105deg, #15151e 0%, #1d1d28 55%, #24242f 100%);
}

/* la foto del escáner tiene al técnico a la izquierda: el texto se va al lado despejado */
.portada.escaner .contenedor { max-width: var(--ancho); }
.portada.escaner .contenedor > * { max-width: 620px; margin-left: auto; margin-right: 0; }
.portada.escaner .etiqueta { display: block; width: fit-content; }

/* trama de velocidad: líneas diagonales, gráfica propia, sin arte de terceros */
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    108deg,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 2px,
    transparent 2px,
    transparent 26px
  );
  pointer-events: none;
}

.portada::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--rojo) 0%, var(--rojo) 34%, var(--negro) 34%, var(--negro) 100%);
}

.portada .contenedor { position: relative; z-index: 1; max-width: 860px; }
.portada h1 { color: var(--blanco); }

.etiqueta {
  display: inline-block;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blanco);
  background: var(--rojo);
  padding: 5px 12px;
  margin-bottom: 20px;
}

.bajada {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.82);
  max-width: 620px;
  margin-bottom: 30px;
}

/* bajada sobre fondo claro */
.seccion .bajada { color: var(--gris-600); }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- secciones ---------- */

.seccion { padding: clamp(48px, 7vw, 80px) 0; }
.seccion.alterna { background: var(--gris-100); }

.seccion.oscura {
  background:
    linear-gradient(rgba(21,21,30,0.93), rgba(21,21,30,0.93)),
    url("../img/textura-carbono.jpg") center/380px repeat,
    var(--negro);
  color: rgba(255, 255, 255, 0.82);
}
.seccion.oscura h1, .seccion.oscura h2, .seccion.oscura h3, .seccion.oscura h4 { color: var(--blanco); }

.encabezado-seccion { max-width: 720px; margin-bottom: 34px; }
.encabezado-seccion p { color: var(--gris-600); margin-bottom: 0; }
.seccion.oscura .encabezado-seccion p { color: rgba(255, 255, 255, 0.7); }

/* barra de título estilo F1: filete rojo a la izquierda */
.encabezado-seccion h2 {
  position: relative;
  padding-left: 18px;
}
.encabezado-seccion h2::before {
  content: "";
  position: absolute;
  left: 0; top: 0.12em; bottom: 0.12em;
  width: 6px;
  background: var(--rojo);
}

/* ---------- rejillas ---------- */

.rejilla { display: grid; gap: 20px; }
.rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.rejilla.cuatro { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- tarjetas ---------- */

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-top: 4px solid var(--rojo);
  border-radius: var(--radio);
  padding: 26px;
  transition: box-shadow 0.18s, transform 0.18s;
}

.tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.tarjeta p { color: var(--gris-600); font-size: 0.95rem; }
.tarjeta p:last-child { margin-bottom: 0; }

.tarjeta .numero {
  font-family: var(--fuente-titulo);
  font-size: 2.6rem;
  font-weight: 900;
  font-style: italic;
  color: var(--rojo);
  line-height: 1;
  margin-bottom: 8px;
}

.seccion.oscura .tarjeta { background: var(--gris-900); border-color: #3a3a46; }
.seccion.oscura .tarjeta p { color: rgba(255, 255, 255, 0.72); }

/* mundo: tiles de categoría, el patrón "shop by team" de la tienda F1 */
.mundo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: 28px;
  color: var(--blanco);
  background: linear-gradient(180deg, rgba(21,21,30,0.15) 0%, rgba(21,21,30,0.88) 78%), var(--gris-900);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform 0.2s;
}

/* mismo criterio que las portadas: foto encima, degradado de respaldo debajo */
.mundo.repuestos {
  background:
    linear-gradient(180deg, rgba(21,21,30,0.10) 0%, rgba(21,21,30,0.90) 74%),
    url("../img/tile-repuestos.jpg") center/cover no-repeat,
    linear-gradient(150deg, var(--grafito), var(--negro)), var(--gris-900);
}

.mundo.racing {
  background:
    linear-gradient(180deg, rgba(21,21,30,0.10) 0%, rgba(21,21,30,0.90) 74%),
    url("../img/tile-racing.jpg") center/cover no-repeat,
    linear-gradient(150deg, var(--grafito), var(--negro)), var(--gris-900);
}

.mundo.lifestyle {
  background:
    linear-gradient(180deg, rgba(21,21,30,0.10) 0%, rgba(21,21,30,0.90) 74%),
    url("../img/tile-lifestyle.jpg") center/cover no-repeat,
    linear-gradient(150deg, var(--grafito), var(--negro)), var(--gris-900);
}

/* con fotografía, el ícono y la trama sobran: la imagen ya carga el peso visual */
.mundo.repuestos .icono,
.mundo.racing .icono,
.mundo.lifestyle .icono { display: none; }

.mundo.repuestos::before,
.mundo.racing::before,
.mundo.lifestyle::before { opacity: 0.25; }

.mundo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    108deg,
    rgba(255,255,255,0.045) 0px,
    rgba(255,255,255,0.045) 2px,
    transparent 2px,
    transparent 22px
  );
}

.mundo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.mundo:hover { transform: translateY(-3px); }
.mundo:hover::after { transform: scaleX(1); }

.mundo > * { position: relative; z-index: 1; }

.mundo .icono {
  position: absolute;
  top: 26px;
  right: 24px;
  width: 96px;
  height: 96px;
  color: var(--rojo);
  opacity: 0.9;
  transition: transform 0.25s ease, opacity 0.25s;
}
.mundo:hover .icono { transform: translateX(-4px) scale(1.04); opacity: 1; }
.mundo .icono svg { width: 100%; height: 100%; display: block; }

.tarjeta .icono { color: var(--rojo); width: 40px; height: 40px; margin-bottom: 14px; }
.tarjeta .icono svg { width: 100%; height: 100%; display: block; }
.mundo h3 { color: var(--blanco); font-size: 1.5rem; margin-bottom: 6px; }
.mundo p { color: rgba(255,255,255,0.78); font-size: 0.93rem; margin: 0; }
.mundo .flecha {
  margin-top: 14px;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--blanco);
}

/* ---------- producto ---------- */

.producto {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s, transform 0.18s;
}

.producto:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }

.producto .imagen {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--gris-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-400);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid var(--gris-200);
}

.producto .cuerpo {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.producto h3 { font-size: 1rem; margin: 0; font-style: normal; letter-spacing: 0; }
.producto .oem {
  font-size: 0.76rem;
  color: var(--gris-600);
  font-family: ui-monospace, "SF Mono", monospace;
  margin: 0;
}
.producto .compat { font-size: 0.84rem; color: var(--gris-600); margin: 0; }
.producto .boton { margin-top: auto; text-align: center; }

.insignia {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--fuente-titulo);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  padding: 4px 9px;
  background: var(--rojo);
  color: var(--blanco);
  border-radius: var(--radio);
}

.insignia.neutra { background: var(--negro); color: var(--blanco); }

/* la insignia vive dentro de .imagen; si queda en el cuerpo, se muestra en línea */
.producto .cuerpo .insignia {
  position: static;
  align-self: flex-start;
  background: var(--gris-100);
  color: var(--tinta);
  border: 1px solid var(--gris-200);
}
.producto .cuerpo .insignia.neutra { background: var(--gris-100); color: var(--gris-600); }

/* ---------- banners de categoría ----------
   Cada uno filtra la grilla sin recargar: es el atajo visual para el que sabe
   qué sistema le falla, mientras que el buscador sirve al que trae el número OEM. */

.categorias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.cat-banner {
  position: relative;
  display: block;
  aspect-ratio: 8 / 3;
  padding: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background-color: var(--gris-900);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: none;
  text-align: left;
  transition: transform 0.2s;
}

.cat-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(21,21,30,0.20) 0%, rgba(21,21,30,0.55) 45%, rgba(21,21,30,0.88) 100%);
}

.cat-banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.cat-banner:hover { transform: translateY(-3px); }
.cat-banner:hover::after,
.cat-banner[aria-pressed="true"]::after { transform: scaleX(1); }

/* caja de rótulo con límites propios: el texto envuelve dentro de ella
   y nunca puede tocar el borde del banner */
.cat-banner span {
  position: absolute;
  right: 20px;
  bottom: 16px;
  left: 34%;
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  line-height: 1.06;
  color: var(--blanco);
  text-align: right;
  max-width: 100%;
  overflow-wrap: anywhere;   /* ninguna palabra larga rompe el marco */
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.cat-banner span small {
  display: block;
  font-size: 0.72em;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.cat-banner.motor      { background-image: url("../img/cat-motor.jpg"); }
.cat-banner.frenos     { background-image: url("../img/cat-frenos.jpg"); }
.cat-banner.suspension { background-image: url("../img/cat-suspension.jpg"); }
.cat-banner.electrico  { background-image: url("../img/cat-electrico.jpg"); }
.cat-banner.filtros    { background-image: url("../img/cat-filtros.jpg"); }
.cat-banner.refrigeracion { background-image: url("../img/cat-refrigeracion.jpg"); }
.cat-banner.transmision   { background-image: url("../img/cat-transmision.jpg"); }
.cat-banner.carroceria    { background-image: url("../img/cat-carroceria.jpg"); }
.cat-banner.neumaticos    { background-image: url("../img/cat-neumaticos.jpg"); }


/* ---------- fotos de producto ----------
   La imagen se apila sobre el fondo tramado: mientras el archivo no exista, la ficha
   muestra el marcador y no se ve rota. Imágenes referenciales hasta tener foto real. */

.producto .imagen[class*="prod-"] {
  background-size: cover;
  background-position: center;
}

/* Solo las fichas que ya tienen archivo ocultan el marcador y muestran el aviso.
   Las que siguen sin foto conservan "Foto real pendiente" a la vista: el aviso de
   imagen referencial sobre un cuadro vacío sería mentira. Al montar un lote nuevo,
   se agregan aquí sus selectores. */
.producto .imagen.prod-cadena-distribucion,
.producto .imagen.prod-pastillas-delanteras,
.producto .imagen.prod-brazo-control,
.producto .imagen.prod-bomba-agua,
.producto .imagen.prod-bobina-encendido,
.producto .imagen.prod-kit-mantencion,
.producto .imagen.prod-junta-tapa-valvulas,
.producto .imagen.prod-discos-traseros,
.producto .imagen.prod-casco,
.producto .imagen.prod-buzo,
.producto .imagen.prod-butaca,
.producto .imagen.prod-arnes,
.producto .imagen.prod-polera,
.producto .imagen.prod-poleron,
.producto .imagen.prod-jockey,
.producto .imagen.prod-llavero,
.producto .imagen.prod-amortiguador,
.producto .imagen.prod-resortes,
.producto .imagen.prod-radiador,
.producto .imagen.prod-termostato,
.producto .imagen.prod-alternador,
.producto .imagen.prod-motor-arranque,
.producto .imagen.prod-bateria,
.producto .imagen.prod-bujias,
.producto .imagen.prod-correa,
.producto .imagen.prod-embrague,
.producto .imagen.prod-escape,
.producto .imagen.prod-faro { color: transparent; }

.producto .imagen.prod-cadena-distribucion::after,
.producto .imagen.prod-pastillas-delanteras::after,
.producto .imagen.prod-brazo-control::after,
.producto .imagen.prod-bomba-agua::after,
.producto .imagen.prod-bobina-encendido::after,
.producto .imagen.prod-kit-mantencion::after,
.producto .imagen.prod-junta-tapa-valvulas::after,
.producto .imagen.prod-discos-traseros::after,
.producto .imagen.prod-casco::after,
.producto .imagen.prod-buzo::after,
.producto .imagen.prod-butaca::after,
.producto .imagen.prod-arnes::after,
.producto .imagen.prod-polera::after,
.producto .imagen.prod-poleron::after,
.producto .imagen.prod-jockey::after,
.producto .imagen.prod-llavero::after,
.producto .imagen.prod-amortiguador::after,
.producto .imagen.prod-resortes::after,
.producto .imagen.prod-radiador::after,
.producto .imagen.prod-termostato::after,
.producto .imagen.prod-alternador::after,
.producto .imagen.prod-motor-arranque::after,
.producto .imagen.prod-bateria::after,
.producto .imagen.prod-bujias::after,
.producto .imagen.prod-correa::after,
.producto .imagen.prod-embrague::after,
.producto .imagen.prod-escape::after,
.producto .imagen.prod-faro::after {
  content: "Imagen referencial";
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-family: var(--fuente-texto);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(21,21,30,0.55);
  padding: 3px 7px;
  border-radius: 2px;
}

.producto .imagen.prod-cadena-distribucion { background-image: url("../img/prod-cadena-distribucion.jpg"); }
.producto .imagen.prod-pastillas-delanteras { background-image: url("../img/prod-pastillas-delanteras.jpg"); }
.producto .imagen.prod-brazo-control { background-image: url("../img/prod-brazo-control.jpg"); }
.producto .imagen.prod-bomba-agua { background-image: url("../img/prod-bomba-agua.jpg"); }
.producto .imagen.prod-bobina-encendido { background-image: url("../img/prod-bobina-encendido.jpg"); }
.producto .imagen.prod-kit-mantencion { background-image: url("../img/prod-kit-mantencion.jpg"); }
.producto .imagen.prod-junta-tapa-valvulas { background-image: url("../img/prod-junta-tapa-valvulas.jpg"); }
.producto .imagen.prod-discos-traseros { background-image: url("../img/prod-discos-traseros.jpg"); }
.producto .imagen.prod-casco { background-image: url("../img/prod-casco.jpg"); }
.producto .imagen.prod-buzo { background-image: url("../img/prod-buzo.jpg"); }
.producto .imagen.prod-butaca { background-image: url("../img/prod-butaca.jpg"); }
.producto .imagen.prod-arnes { background-image: url("../img/prod-arnes.jpg"); }
.producto .imagen.prod-polera { background-image: url("../img/prod-polera.jpg"); }
.producto .imagen.prod-poleron { background-image: url("../img/prod-poleron.jpg"); }
.producto .imagen.prod-jockey { background-image: url("../img/prod-jockey.jpg"); }
.producto .imagen.prod-llavero { background-image: url("../img/prod-llavero.jpg"); }
.producto .imagen.prod-amortiguador { background-image: url("../img/prod-amortiguador.jpg"); }
.producto .imagen.prod-resortes { background-image: url("../img/prod-resortes.jpg"); }
.producto .imagen.prod-radiador { background-image: url("../img/prod-radiador.jpg"); }
.producto .imagen.prod-termostato { background-image: url("../img/prod-termostato.jpg"); }
.producto .imagen.prod-alternador { background-image: url("../img/prod-alternador.jpg"); }
.producto .imagen.prod-motor-arranque { background-image: url("../img/prod-motor-arranque.jpg"); }
.producto .imagen.prod-bateria { background-image: url("../img/prod-bateria.jpg"); }
.producto .imagen.prod-bujias { background-image: url("../img/prod-bujias.jpg"); }
.producto .imagen.prod-correa { background-image: url("../img/prod-correa.jpg"); }
.producto .imagen.prod-embrague { background-image: url("../img/prod-embrague.jpg"); }
.producto .imagen.prod-escape { background-image: url("../img/prod-escape.jpg"); }
.producto .imagen.prod-faro { background-image: url("../img/prod-faro.jpg"); }

/* ---------- muro de marcas proveedoras ----------
   Nombres en la tipografía de HCS: uso nominativo, no reproducción de logotipos.
   Cada casilla acepta el logotipo real del fabricante cuando el cliente consiga su brand kit:
   basta poner la imagen de fondo en .marca-prov y el texto pasa a ser su alt visual. */

.muro-marcas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--gris-200);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  overflow: hidden;
}

.marca-prov {
  background: var(--blanco);
  min-height: 96px;
  display: flex;
  flex-direction: column;   /* el descriptor va bajo el nombre, no a su lado */
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--gris-400);
  text-align: center;
  line-height: 1.05;
  transition: color 0.18s, background 0.18s;
}

.marca-prov:hover { color: var(--tinta); background: var(--gris-100); }

/* Logotipo del fabricante: todos al mismo tamaño óptico y en escala de grises.
   Es la convención de un muro de marcas: sin esto, el logo más colorido se come
   a los demás y la fila se ve desordenada. Recuperan color al pasar el mouse. */
.marca-prov img {
  max-width: 130px;
  max-height: 44px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.55);
  transition: filter 0.18s;
}

.marca-prov:hover img { filter: grayscale(0%) opacity(1); }

/* con logotipo presente, el nombre en letra propia se retira */
.marca-prov img + .nombre { display: none; }

.marca-prov small {
  display: block;
  font-size: 0.58em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gris-400);
  margin-top: 3px;
}

.grupo-marcas + .grupo-marcas { margin-top: 28px; }

.grupo-marcas h3 {
  font-size: 0.85rem;
  font-style: normal;
  letter-spacing: 0.12em;
  color: var(--rojo);
  margin-bottom: 12px;
}

/* ---------- filtros ---------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 22px 0 26px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--gris-200);
}

.filtro {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  color: var(--tinta);
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filtro:hover { border-color: var(--tinta); }
.filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }

.buscador {
  flex: 1;
  min-width: 240px;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  color: var(--tinta);
  padding: 12px 16px;
  font-family: var(--fuente-texto);
  font-size: 0.95rem;
}

.buscador::placeholder { color: var(--gris-400); }
.buscador:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(230,43,30,0.12); }

/* ---------- listas ---------- */

.lista-marca { list-style: none; padding: 0; margin: 0; }
.lista-marca li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
}
.lista-marca li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 3px;
  background: var(--rojo);
  transform: skewX(-25deg);
}
.lista-marca.no li::before { background: var(--gris-400); }

/* ---------- destacado ---------- */

.destacado {
  background: var(--negro);
  color: rgba(255,255,255,0.82);
  border-radius: var(--radio);
  border-left: 6px solid var(--rojo);
  padding: 30px 32px;
}
/* variante con fotografía de fondo: el degradado protege la legibilidad del texto */
.destacado.con-foto {
  background:
    linear-gradient(100deg, rgba(21,21,30,0.96) 0%, rgba(21,21,30,0.88) 46%, rgba(21,21,30,0.62) 100%),
    url("../img/bloque-escaner.jpg") center/cover no-repeat,
    var(--negro);
}

.destacado h3 { color: var(--blanco); font-size: 1.4rem; }
.destacado p:last-child { margin-bottom: 0; }

.seccion.oscura .destacado { background: var(--gris-900); }

/* ---------- pasos ---------- */

.pasos { counter-reset: paso; display: grid; gap: 20px; }
.paso { position: relative; padding-left: 72px; min-height: 48px; }
.paso::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -6px;
  font-family: var(--fuente-titulo);
  font-size: 2.3rem;
  font-weight: 900;
  font-style: italic;
  color: var(--gris-200);
  line-height: 1;
}
.paso h3 { margin-bottom: 3px; }
.paso p { color: var(--gris-600); margin: 0; font-size: 0.95rem; }

/* ---------- pie ---------- */

.pie {
  background: var(--negro);
  color: rgba(255,255,255,0.62);
  padding: 56px 0 26px;
  font-size: 0.9rem;
}

.pie h4 { color: var(--blanco); margin-bottom: 14px; }
.pie a { color: rgba(255,255,255,0.62); }
.pie a:hover { color: var(--rojo); }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 8px; }
.pie .marca span { color: var(--blanco); }

.pie-legal {
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.42);
}

/* ---------- franja de servicio ---------- */

.franja-servicio {
  background: var(--rojo);
  color: var(--blanco);
  padding: 18px 0;
}
.franja-servicio .contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  justify-content: space-between;
  align-items: center;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.86rem;
}

/* ---------- nota de maqueta ---------- */

.nota-maqueta {
  background: #eef3fb;
  border: 1px dashed #9db6e0;
  color: #2c4a7c;
  font-size: 0.85rem;
  padding: 14px 18px;
  border-radius: var(--radio);
  margin: 26px auto;
  max-width: var(--ancho);
}

.nota-maqueta strong { color: #1b3560; }
.nota-maqueta code { background: #dde7f6; padding: 1px 5px; border-radius: 2px; }

/* ---------- marcas y chasis ----------
   Uso nominativo: nombramos las marcas para declarar compatibilidad, con letra propia.
   No se reproducen los logotipos de BMW, MINI ni Rolls-Royce: son marcas de terceros y su
   uso gráfico sugiere afiliación. El disclaimer del pie acompaña siempre este bloque. */

.marcas-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.marca-auto {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 26px 24px 22px;
  overflow: hidden;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}

.marca-auto:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); border-color: var(--tinta); }

.marca-auto::before {
  content: "";
  position: absolute;
  top: 0; right: -30px;
  width: 90px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(230,43,30,0.07));
  transform: skewX(-16deg);
}

/* espacio reservado para el logotipo del fabricante.
   Queda vacío hasta que el cliente aporte los archivos con su autorización de uso. */
.slot-logo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-style: italic;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  color: var(--tinta);
  background: var(--blanco);
  margin-bottom: 14px;
  position: relative;
  transition: background 0.15s, color 0.15s;
}

.marca-auto:hover .slot-logo { background: var(--tinta); color: var(--blanco); }

.marca-auto .nombre {
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-style: italic;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 4px;
}

.marca-auto .rol {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--rojo);
  margin-bottom: 14px;
}

.chasis { display: flex; flex-wrap: wrap; gap: 6px; position: relative; }

.chip-chasis {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  color: var(--gris-600);
}

.marca-auto:hover .chip-chasis { border-color: var(--gris-400); }

/* barra de cintas rojo/negro/blanco, remate gráfico de sección */
.cintas {
  display: flex;
  height: 8px;
  width: 100%;
}
.cintas span { flex: 1; }
.cintas span:nth-child(1) { background: var(--rojo); flex: 3; }
.cintas span:nth-child(2) { background: var(--negro); flex: 6; }
.cintas span:nth-child(3) { background: var(--gris-200); flex: 2; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .navegacion { display: none; }
  .encabezado .contenedor { min-height: 66px; }
  .marca img { width: 42px; height: 42px; }
  .franja-servicio .contenedor { justify-content: flex-start; font-size: 0.8rem; }
}

/* ==========================================================================
   Páginas Nosotros, Contacto y Agendar
   ========================================================================== */

/* ---------- enlace de salto (accesibilidad) ---------- */

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 20px;
}

.salto-contenido:focus { left: 0; }

/* foco visible en todo elemento interactivo: sin esto, quien navega con teclado
   queda perdido y es una falla de accesibilidad que además penaliza el SEO */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 2px;
}

/* ---------- portadas de las páginas nuevas ---------- */

.portada.nosotros {
  background:
    linear-gradient(100deg, rgba(21,21,30,0.95) 0%, rgba(21,21,30,0.82) 45%, rgba(21,21,30,0.55) 100%),
    url("../img/heroper-nosotros.jpg") center/cover no-repeat,
    linear-gradient(105deg, #15151e 0%, #1d1d28 55%, #24242f 100%);
}

.portada.contacto,
.portada.agendar {
  background:
    linear-gradient(100deg, rgba(21,21,30,0.95) 0%, rgba(21,21,30,0.82) 45%, rgba(21,21,30,0.55) 100%),
    url("../img/bloque-escaner.jpg") center/cover no-repeat,
    linear-gradient(105deg, #15151e 0%, #1d1d28 55%, #24242f 100%);
}

/* ---------- migas de pan ---------- */

.migas {
  background: var(--gris-100);
  border-bottom: 1px solid var(--gris-200);
  font-size: 0.85rem;
  color: var(--gris-600);
}

.migas .contenedor { padding-top: 12px; padding-bottom: 12px; }
.migas a { color: var(--gris-600); }
.migas a:hover { color: var(--rojo); }
.migas span[aria-current] { color: var(--tinta); font-weight: 600; }

/* ---------- formularios ---------- */

.formulario fieldset {
  border: none;
  border-top: 2px solid var(--gris-200);
  padding: 22px 0 6px;
  margin: 0 0 12px;
}

.formulario legend {
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--tinta);
  padding-right: 12px;
}

.campo { margin-bottom: 16px; }

.campo label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gris-600);
  margin-bottom: 6px;
}

.campo .buscador { width: 100%; }

.ayuda {
  display: block;
  font-size: 0.8rem;
  color: var(--gris-600);
  margin-top: 6px;
}

select.buscador {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gris-600) 50%),
    linear-gradient(135deg, var(--gris-600) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.dato-pendiente {
  color: var(--gris-400);
  font-style: italic;
}

/* ---------- panel de contacto ---------- */

.panel-contacto {
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  border-top: 4px solid var(--rojo);
  border-radius: var(--radio);
  padding: 28px;
}

.lista-contacto { list-style: none; padding: 0; margin: 0; }

.lista-contacto li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gris-200);
}

.lista-contacto li:last-child { border-bottom: none; }

.lista-contacto .rotulo {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rojo);
}

/* ---------- preguntas frecuentes ---------- */

.preguntas {
  border-top: 2px solid var(--gris-200);
  max-width: 860px;
}

.pregunta {
  border-bottom: 1px solid var(--gris-200);
  background: var(--blanco);
}

.pregunta summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 20px 48px 20px 20px;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tinta);
  transition: color 0.15s;
}

.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover { color: var(--rojo); }

.pregunta summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--rojo);
  border-bottom: 2px solid var(--rojo);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.pregunta[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.pregunta[open] summary { color: var(--rojo); }

.pregunta p {
  padding: 0 60px 22px 20px;
  margin: 0;
  color: var(--gris-600);
}

/* ---------- título de columna del pie ---------- */

.titulo-pie {
  font-family: var(--fuente-titulo);
  font-size: 0.95rem;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blanco);
  margin: 0 0 14px;
}

@media (max-width: 900px) {
  .panel-contacto { padding: 22px; }
  .pregunta summary { padding: 16px 44px 16px 14px; font-size: 0.98rem; }
  .pregunta p { padding: 0 44px 18px 14px; }
}

/* ==========================================================================
   Módulo de agendamiento
   ========================================================================== */

.pasos-agenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  counter-reset: none;
}

.paso-agenda {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 200px;
  padding: 14px 18px;
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-400);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.paso-agenda .num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gris-200);
  color: var(--gris-600);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.paso-agenda.activo {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}
.paso-agenda.activo .num { background: var(--rojo); color: var(--blanco); }

.paso-agenda.hecho { border-color: var(--rojo); color: var(--tinta); background: var(--blanco); }
.paso-agenda.hecho .num { background: var(--rojo); color: var(--blanco); }

.panel-paso { display: none; }
.panel-paso.activo { display: block; }

.panel-paso h2 { margin-bottom: 18px; }

.acciones-paso {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 2px solid var(--gris-200);
}

/* ---------- opciones de servicio ---------- */

.opciones-servicio { display: grid; gap: 12px; }

.opcion-servicio {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--blanco);
  border: 2px solid var(--gris-200);
  border-radius: var(--radio);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.opcion-servicio:hover { border-color: var(--gris-400); }

.opcion-servicio input {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--gris-400);
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.opcion-servicio input:checked {
  border-color: var(--rojo);
  box-shadow: inset 0 0 0 4px var(--blanco), inset 0 0 0 20px var(--rojo);
}

.opcion-servicio:has(input:checked) {
  border-color: var(--rojo);
  background: rgba(230, 43, 30, 0.04);
}

.cuerpo-opcion { display: flex; flex-direction: column; gap: 3px; }

.titulo-opcion {
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.05rem;
}

.detalle-opcion { font-size: 0.92rem; color: var(--gris-600); }

.duracion {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rojo);
  margin-top: 4px;
}

/* ---------- calendario ---------- */

.calendario {
  max-width: 420px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  overflow: hidden;
}

.cal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--negro);
  color: var(--blanco);
  padding: 12px 14px;
}

.cal-mes {
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cal-nav {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: var(--blanco);
  border-radius: var(--radio);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.cal-nav:hover:not(:disabled) { background: var(--rojo); border-color: var(--rojo); }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.cal-dias-semana,
.cal-grilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-dias-semana {
  background: var(--gris-100);
  border-bottom: 1px solid var(--gris-200);
}

.cal-dias-semana span {
  text-align: center;
  padding: 8px 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gris-600);
}

.cal-grilla { padding: 6px; gap: 2px; }

.cal-dia {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.cal-dia:hover:not(:disabled) { background: var(--gris-100); }
.cal-dia:disabled { color: var(--gris-200); cursor: not-allowed; }
.cal-dia.elegido { background: var(--rojo); color: var(--blanco); }

.cal-vacio { aspect-ratio: 1; }

/* ---------- bloques horarios ---------- */

.horas { display: flex; flex-wrap: wrap; gap: 10px; }

.hora {
  padding: 12px 22px;
  background: var(--blanco);
  border: 2px solid var(--gris-200);
  border-radius: var(--radio);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.hora:hover { border-color: var(--gris-400); }
.hora.elegida { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }

/* ---------- resumen ---------- */

.resumen {
  margin-top: 28px;
  padding: 24px 26px;
  background: var(--gris-100);
  border-left: 4px solid var(--rojo);
  border-radius: var(--radio);
}

.resumen h3 { margin-bottom: 14px; }

.resumen dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}

.resumen dt {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--rojo);
  margin-bottom: 3px;
}

.resumen dd { margin: 0; font-weight: 600; }

/* ---------- avisos y confirmación ---------- */

.alerta {
  background: rgba(230, 43, 30, 0.08);
  border: 1px solid var(--rojo);
  border-left: 4px solid var(--rojo);
  border-radius: var(--radio);
  padding: 14px 18px;
  margin: 0 0 22px;
  font-weight: 600;
  color: var(--tinta);
}

.panel-paso.confirmacion { text-align: center; padding: 20px 0; }
.panel-paso.confirmacion .acciones-paso { justify-content: center; border-top: none; }

.marca-ok {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  font-size: 2.4rem;
  line-height: 1;
}

@media (max-width: 700px) {
  .paso-agenda { flex-basis: 100%; }
  .calendario { max-width: 100%; }
}

/* llamado a la acción dentro de la navegación */
.navegacion .nav-cta {
  background: var(--rojo);
  color: var(--blanco);
  padding: 10px 20px;
  border-radius: var(--radio);
  margin-left: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, padding 0.25s ease;
}

.navegacion .nav-cta:hover { background: var(--rojo-oscuro); }
.navegacion .nav-cta::after { display: none; }

/* ==========================================================================
   Menú móvil
   ========================================================================== */

.abrir-menu {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  background: var(--blanco);
  cursor: pointer;
  padding: 0;
  position: relative;
}

.abrir-menu span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  background: var(--tinta);
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.abrir-menu span:nth-child(1) { top: 16px; }
.abrir-menu span:nth-child(2) { top: 22px; }
.abrir-menu span:nth-child(3) { top: 28px; }

.abrir-menu.abierto span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.abrir-menu.abierto span:nth-child(2) { opacity: 0; }
.abrir-menu.abierto span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--negro);
  padding: 96px 24px 32px;
  overflow-y: auto;
}

.menu-movil nav { display: flex; flex-direction: column; gap: 2px; }

.menu-movil a {
  display: block;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blanco);
}

.menu-movil a[aria-current="page"] { color: var(--rojo); }

.menu-movil a.destacado {
  margin-top: 18px;
  background: var(--rojo);
  border-bottom: none;
  border-radius: var(--radio);
  text-align: center;
  padding: 18px;
}

body.menu-abierto { overflow: hidden; }

@media (max-width: 900px) {
  .abrir-menu { display: block; }
}

@media (min-width: 901px) {
  .menu-movil { display: none !important; }
}

/* ---------- resultados del catálogo ---------- */

.conteo {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris-600);
  margin: -10px 0 18px;
}

.sin-resultados {
  padding: 40px 28px;
  background: var(--gris-100);
  border: 1px dashed var(--gris-400);
  border-radius: var(--radio);
  text-align: center;
  color: var(--gris-600);
}

.sin-resultados a {
  display: inline-block;
  margin-top: 10px;
  color: var(--rojo);
  font-weight: 700;
  border-bottom: 2px solid var(--rojo);
}

/* ---------- pasos de la visita ---------- */

.pasos-visita { gap: 18px; }

.paso-visita {
  margin: 0;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s, transform 0.18s;
}

.paso-visita:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }

.paso-visita img {
  width: 100%;
  /* height:auto es imprescindible: sin él, el atributo height del HTML gana
     y la imagen se estira a su alto original */
  height: auto;
  aspect-ratio: 16 / 10;
  max-height: 200px;
  object-fit: cover;
  border-bottom: 1px solid var(--gris-200);
}

.paso-visita figcaption { padding: 18px 20px 22px; position: relative; }

.paso-visita .orden {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--rojo);
  line-height: 1;
  margin-bottom: 6px;
}

.paso-visita h3 { font-size: 1.05rem; margin-bottom: 6px; }
.paso-visita p { font-size: 0.92rem; color: var(--gris-600); margin: 0; }

/* ==========================================================================
   Guía técnica y error 404
   ========================================================================== */

.portada.guia {
  background:
    linear-gradient(100deg, rgba(21,21,30,0.95) 0%, rgba(21,21,30,0.82) 45%, rgba(21,21,30,0.55) 100%),
    url("../img/blog-codificacion.jpg") center/cover no-repeat,
    linear-gradient(105deg, #15151e 0%, #1d1d28 55%, #24242f 100%);
}

.portada.error {
  background:
    linear-gradient(100deg, rgba(21,21,30,0.95) 0%, rgba(21,21,30,0.80) 45%, rgba(21,21,30,0.55) 100%),
    url("../img/amb-garage-ancho.jpg") center/cover no-repeat,
    linear-gradient(105deg, #15151e 0%, #1d1d28 55%, #24242f 100%);
}

.entradas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}

.entrada {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  overflow: hidden;
  transition: box-shadow 0.18s, transform 0.18s;
}

.entrada:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }

.entrada .cubierta { position: relative; display: block; }

.entrada .cubierta img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 230px;
  object-fit: cover;
  border-bottom: 1px solid var(--gris-200);
}

.entrada .categoria {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--fuente-titulo);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 4px 10px;
  border-radius: var(--radio);
}

.cuerpo-entrada { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.cuerpo-entrada h2 {
  font-size: 1.15rem;
  line-height: 1.15;
  margin: 0;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
}

.cuerpo-entrada h2 a { color: var(--tinta); }
.cuerpo-entrada h2 a:hover { color: var(--rojo); }
.cuerpo-entrada p { color: var(--gris-600); font-size: 0.93rem; margin: 0; }

.cuerpo-entrada .lectura {
  margin-top: auto;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gris-400);
}

a.tarjeta { display: block; color: inherit; }
a.tarjeta:hover h3 { color: var(--rojo); }

/* ---------- artículo ---------- */

.articulo { max-width: 760px; }
.articulo h2 { font-size: 1.6rem; margin-top: 36px; }
.articulo h3 { font-size: 1.15rem; margin-top: 26px; }
.articulo p { font-size: 1.05rem; line-height: 1.75; color: #33333c; }
.articulo ul { padding-left: 22px; color: #33333c; line-height: 1.75; }
.articulo li { margin-bottom: 8px; }
.articulo img { border-radius: var(--radio); margin: 28px 0; }

.ficha-articulo {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 14px 0 20px;
  border-bottom: 2px solid var(--gris-200);
  margin-bottom: 28px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris-600);
}

.ficha-articulo .cat { color: var(--rojo); }

.aviso-articulo {
  background: var(--gris-100);
  border-left: 4px solid var(--rojo);
  border-radius: var(--radio);
  padding: 22px 26px;
  margin: 32px 0;
}

.aviso-articulo p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Efectos de presentación
   Todo cuelga de .con-efectos, que solo se activa si el visitante no pidió
   menos movimiento. Sin JS, o con movimiento reducido, el sitio se ve completo
   y estático: ningún contenido depende de una animación para existir.
   ========================================================================== */

.con-efectos .revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.con-efectos .revelar.visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ---------- entrada de la portada ---------- */

@keyframes entrarPortada {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.con-efectos .entrada-portada {
  opacity: 0;
  animation: entrarPortada 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* ---------- travelling lento de la portada ----------
   20 segundos y 6% de escala: apenas perceptible de forma consciente, pero
   la imagen deja de sentirse congelada. Más rápido que esto marea. */

@keyframes travelling {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.con-efectos .portada::after { z-index: 2; }

.con-efectos .portada .capa-movil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: inherit;
  animation: travelling 20s ease-out forwards;
  pointer-events: none;
}

/* ---------- zoom de fotografía al pasar el mouse ---------- */

.producto .imagen,
.mundo,
.cat-banner,
.entrada .cubierta img,
.paso-visita img {
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.con-efectos .producto:hover .imagen { transform: scale(1.05); }
.con-efectos .entrada:hover .cubierta img { transform: scale(1.05); }
.con-efectos .paso-visita:hover img { transform: scale(1.05); }

/* el recorte tiene que contener el zoom, si no la imagen se sale de la tarjeta */
.producto .imagen,
.entrada .cubierta,
.paso-visita { overflow: hidden; }

/* ---------- barra de progreso de lectura ---------- */

.progreso-lectura {
  position: absolute;
  bottom: -1px;      /* cubre el borde inferior del encabezado */
  left: 0;
  right: 0;
  height: 3px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* el encabezado es el marco de referencia de la barra */
.encabezado { position: sticky; }

/* ---------- encabezado compacto ---------- */

.encabezado { transition: min-height 0.25s ease, box-shadow 0.25s ease; }
.encabezado .contenedor { transition: min-height 0.25s ease; }
.encabezado .marca img { transition: width 0.25s ease, height 0.25s ease; }

.con-efectos .encabezado.compacto { box-shadow: 0 2px 14px rgba(21,21,30,0.10); }
.con-efectos .encabezado.compacto .contenedor { min-height: 62px; }
.con-efectos .encabezado.compacto .marca img { width: 42px; height: 42px; }
.con-efectos .encabezado.compacto .navegacion a:not(.nav-cta) { padding: 19px 0; }
.con-efectos .encabezado.compacto .navegacion .nav-cta { padding: 9px 18px; }

/* ---------- cifras con contador ---------- */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
}

.cifra {
  padding: 26px 24px;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-top: 4px solid var(--rojo);
  border-radius: var(--radio);
}

.seccion.oscura .cifra { background: var(--gris-900); border-color: #3a3a46; }

.cifra .numero {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--rojo);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.cifra .rotulo {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.cifra p { font-size: 0.9rem; color: var(--gris-600); margin: 0; }
.seccion.oscura .cifra p { color: rgba(255,255,255,0.7); }

/* ---------- marquesina del muro de marcas ---------- */

@keyframes desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquesina {
  overflow: hidden;
  position: relative;
  border-block: 1px solid var(--gris-200);
  padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquesina .cinta {
  display: flex;
  gap: 56px;
  width: max-content;
}

.con-efectos .marquesina .cinta { animation: desplazar 38s linear infinite; }
.con-efectos .marquesina:hover .cinta { animation-play-state: paused; }

.marquesina .item {
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.35rem;
  color: var(--gris-400);
  white-space: nowrap;
  transition: color 0.2s;
}

.marquesina .item:hover { color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  .marquesina .cinta { animation: none; }
}

/* ---------- enlaces de comuna ---------- */

.comunas-enlaces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.chip-comuna {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--gris-200);
  border-radius: 999px;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--tinta);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.chip-comuna:hover { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }

.portada.llaves {
  background:
    /* la foto tiene la llave a la derecha y espacio negro a la izquierda:
       el degradado refuerza ese lado sin taparla */
    linear-gradient(100deg, rgba(21,21,30,0.92) 0%, rgba(21,21,30,0.70) 45%, rgba(21,21,30,0.30) 100%),
    url("../img/llave-hero.jpg") center/cover no-repeat,
    linear-gradient(105deg, #15151e 0%, #1d1d28 55%, #24242f 100%);
}


/* ---------- tarjeta con fotografía ---------- */

.tarjeta.con-imagen { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.tarjeta.con-imagen img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  max-height: 210px;
  object-fit: cover;
  border-bottom: 1px solid var(--gris-200);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.con-efectos .tarjeta.con-imagen:hover img { transform: scale(1.04); }

.tarjeta.con-imagen h3 { padding: 20px 24px 0; }
.tarjeta.con-imagen p { padding: 0 24px; }
.tarjeta.con-imagen p:last-child { padding-bottom: 24px; }

/* ---------- ajustes de alineación ---------- */

/* Columna que agrupa varios bloques destacados, para que no rompan la rejilla.
   Ocupa toda la altura y el último bloque crece: así el borde inferior queda a
   la misma altura que la columna vecina en vez de colgar a media página. */
.columna-destacados {
  display: flex;
  flex-direction: column;
  /* align-self anula el align-items:start del contenedor, que impedía que la
     columna se estirara y dejaba el height:100% sin referencia */
  align-self: stretch;
  height: 100%;
}

.columna-destacados > .destacado:last-child { flex: 1; }

/* Los logotipos de fabricantes tienen proporciones muy distintas entre sí.
   Sin una caja de altura fija, cada uno se centra sobre su propio alto y la
   fila queda con los logos a distinta altura. */
.marca-prov img {
  height: 44px;
  max-height: none;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}

/* en una rejilla de dos columnas, las cajas con borde deben ocupar toda la
   altura disponible: si no, quedan colgando y se lee como desalineado */
.rejilla.dos > .tarjeta,
.rejilla.dos > .destacado,
.rejilla.tres > .tarjeta,
.rejilla.tres > .destacado,
.rejilla.cuatro > .tarjeta { height: 100%; }

/* ---------- ajustes de alineación ---------- */

/* Columna que agrupa varios bloques destacados, para que no rompan la rejilla.
   Ocupa toda la altura y el último bloque crece: así el borde inferior queda a
   la misma altura que la columna vecina en vez de colgar a media página. */
.columna-destacados {
  display: flex;
  flex-direction: column;
  /* align-self anula el align-items:start del contenedor, que impedía que la
     columna se estirara y dejaba el height:100% sin referencia */
  align-self: stretch;
  height: 100%;
}

.columna-destacados > .destacado:last-child { flex: 1; }

/* Los logotipos de fabricantes tienen proporciones muy distintas entre sí.
   Sin una caja de altura fija, cada uno se centra sobre su propio alto y la
   fila queda con los logos a distinta altura. */
.marca-prov img {
  height: 44px;
  max-height: none;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}

/* en una rejilla, las cajas con borde deben ocupar toda la altura de su fila:
   si no, quedan colgando y se lee como desalineado */
.rejilla.dos > .tarjeta,
.rejilla.dos > .destacado,
.rejilla.tres > .tarjeta,
.rejilla.tres > .destacado,
.rejilla.cuatro > .tarjeta { height: 100%; }

/* ---------- cierre de la sección de requisitos ---------- */

.cierre-requisitos {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 36px;
  align-items: center;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 2px solid var(--gris-200);
}

.cierre-requisitos img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radio);
}

@media (max-width: 760px) {
  .cierre-requisitos { grid-template-columns: 1fr; }
}

/* ---------- resumen de pasos de la agenda ---------- */

.pasos-agenda-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  counter-reset: paso;
}

.pasos-agenda-resumen .paso { padding-left: 0; }

.pasos-agenda-resumen .paso::before {
  position: static;
  display: block;
  margin-bottom: 6px;
}

.opcional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gris-400);
}

/* ── Marca: "HELLCAT STORE" con bandera ──────────────────────────────
   El nombre pasó de 3 a 13 caracteres. A 1.6rem desbordaba sobre la
   navegación, así que escala con el ancho disponible. */
.marca span {
  font-size: clamp(0.95rem, 1.45vw, 1.35rem);
  white-space: nowrap;
  line-height: 1;
}

.marca .bandera-cl {
  /* tamaño emoji: acompaña al nombre sin competir con el isologo */
  width: 20px;
  height: 13px;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 1px;
  align-self: center;
  margin-left: -4px;
}

/* bajo 1100px la navegación aprieta: el logo sostiene la identidad */
@media (max-width: 1100px) and (min-width: 861px) {
  .marca span { font-size: 0.95rem; letter-spacing: 0; }
  .marca .bandera-cl { width: 17px; height: 11px; }
}

@media (max-width: 420px) {
  .encabezado .contenedor { gap: 12px; }
  .marca { gap: 8px; }
  .marca span { font-size: 1.05rem; }
}

/* ── Herramientas de diagnóstico ─────────────────────────────────────
   Los nombres van en tipografía propia, sin logotipos de terceros: HCS es
   taller independiente, no distribuidor autorizado. Ver docs/MARCAS_PROVEEDORAS.md */
.herramientas { align-items: stretch; }

.herramienta {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}

.herramienta:hover {
  box-shadow: var(--sombra-alta);
  transform: translateY(-2px);
  border-color: var(--tinta);
}

.herramienta:hover .herramienta h3 {
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-style: italic;
  font-size: 1.55rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0 0 4px;
}

.herr-rol {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--rojo);
  margin: 0 0 14px;
}

.herramienta p {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--gris-600);
  margin: 0;
}

.herr-valor {
  margin-top: auto !important;
  padding-top: 14px;
  color: var(--tinta) !important;
  font-weight: 600;
  border-top: 1px solid var(--gris-200);
}

.herr-nota {
  margin-top: 28px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--gris-400);
  max-width: 820px;
}

@media (max-width: 900px) {
  .herramienta { padding: 22px 18px 18px; }
  .herramienta h3 { font-size: 1.35rem; }
}

/* Slot de logotipo de herramienta: muestra el nombre en tipografía propia y
   admite el logo real en cuanto exista el archivo, igual que el muro de marcas
   del catálogo. Sin logotipos bajados de un buscador. */
.slot-logo-herr {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-style: italic;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
  margin-bottom: 6px;
  border-bottom: 3px solid var(--rojo);
  padding-bottom: 6px;
  transition: color 0.18s;
}

.herramienta:hover .slot-logo-herr { color: var(--rojo); }

/* cuando se agregue el archivo del logo, la etiqueta img lo reemplaza */
.slot-logo-herr img {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.slot-logo-herr img + span { display: none; }

/* el rol va justo bajo el nombre, sin el hueco que dejaba el h3 */
.herramienta .herr-rol { margin-top: 10px; }

/* Casilla de marca de auto con logotipo real: la sigla vive en un círculo,
   pero un logo horizontal (MINI, Rolls-Royce) no cabe ahí. Cuando hay imagen
   la casilla suelta el círculo y se adapta a la proporción del archivo. */
.slot-logo:has(img) {
  width: auto;
  min-width: 54px;
  max-width: 140px;
  border: 0;
  border-radius: 0;
  background: transparent;
  justify-content: flex-start;
}

.slot-logo img {
  max-height: 46px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* sin :has() el círculo se mantiene, pero el logo sigue entrando sin deformarse */
@supports not selector(:has(img)) {
  .slot-logo img { max-height: 38px; border-radius: 0; }
}