/* ===== RESET SEGURO PARA PÁGINAS DE MARCAS/FABRICANTES ===== */
#oo-page-marcas {
  background: #E2E0E1;
  padding: 24px 0;
}

/* Nunca forzar ancho completo ni márgenes negativos */
#oo-page-marcas.oo-fullbleed,
#oo-page-marcas .oo-fullbleed,
#oo-page-marcas .oo-grid.oo-fullbleed {
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Bootstrap “normal”: grid dentro del container */
#oo-page-marcas .row {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
#oo-page-marcas .col-6,
#oo-page-marcas .col-md-4,
#oo-page-marcas .col-lg-3 {
  padding: 0.5rem;
}

/* Card uniforme */
#oo-page-marcas .oo-card{
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
#oo-page-marcas .oo-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Caja de logo fija y centrada */
#oo-page-marcas .oo-logo-box{
  width: 220px;      /* ajusta al gusto */
  height: 140px;     /* ajusta al gusto */
  display: flex;
  align-items: center;
  justify-content: center;
}
#oo-page-marcas .oo-logo-box img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Titulares por letra + separador DEBAJO de la letra */
#oo-page-marcas .oo-letter{
  font-weight: 600;
  font-size: 20px;
  color: #4a3f3f;
  margin: 20px 0 6px;
}
#oo-page-marcas .oo-sep{
  margin: 0 0 14px;
  border: 0;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Tipos y texto */
#oo-page-marcas .h6{ font-size: 16px; font-weight: 600; }
#oo-page-marcas .text-muted{ color: #6b6b6b !important; font-size: 13px; line-height: 1.45; }

/* Responsivo: 2/3/4 tarjetas por fila como antes */
@media (min-width: 576px){
  #oo-page-marcas .col-sm-6{ flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px){
  #oo-page-marcas .col-md-4{ flex: 0 0 33.3333%; max-width: 33.3333%; }
}
@media (min-width: 992px){
  #oo-page-marcas .col-lg-3{ flex: 0 0 25%; max-width: 25%; }
}

/* —— Mata cualquier cosa vieja que lo rompa —— */
#oo-page-marcas,
#oo-page-marcas .oo-grid,
#oo-page-marcas .oo-card img {
  min-height: unset !important;
  height: auto !important;      /* evita altos fijos que crean “baldosas” raras */
}



/* Fondo a todo el ancho solo en esta página, sin romper el container */
#oo-page-marcas{
  position: relative;
  z-index: 0;
}

#oo-page-marcas::before{
  content:"";
  position: absolute;
  z-index: -1;
  /* estirar a todo el viewport conservando el alto de la sección */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  top: 0;
  bottom: 0;
  width: 100vw;
  background: #E2E0E1; /* tu color */
}


/* ====== A-Z listing ====== */
#oo-listing { --oo-gap: 1.25rem; }

.oo-az{
  position: sticky; top: calc(var(--header-h, 76px) + 8px);
  z-index: 3;
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:.5rem .75rem; display:flex; flex-wrap:wrap; gap:.25rem .5rem;
  margin: 0 auto 1.25rem auto; max-width: 1100px;
}
.oo-az__link{
  padding:.25rem .6rem; border-radius:6px; font-weight:600;
  color:#6b6b6b; line-height:1.2; text-decoration:none;
}
.oo-az__link:hover{ background:#f4f4f4; color:#333; }
.oo-az__link.is-active{ background:#262626; color:#fff; }

.oo-letter-title{
  font-size:1rem; font-weight:700; margin:1rem auto .35rem auto;
  max-width:1100px; padding-bottom:.25rem; border-bottom:1px solid #eaeaea;
}

/* Lista multicolumna, fluida */
.oo-list{
  list-style:none; margin:0 auto 1rem auto; padding:0; max-width:1100px;
  column-gap: var(--oo-gap);
  columns: 4 260px;             /* hasta 4 columnas con ancho mínimo 260px */
}
.oo-list__item{ break-inside:avoid; padding:.15rem 0; }
.oo-list__item a{ color:inherit; text-decoration:none; }
.oo-list__item a:hover{ text-decoration:underline; }

/* Responsivo */
@media (max-width: 992px){
  .oo-list{ columns: 2 220px; }
  .oo-az{ position: static; }
}
@media (max-width: 576px){
  .oo-list{ columns: 1; }
}




/* ====== Fondo a ancho completo en el directorio ====== */
#oo-listing{
  position: relative;
  isolation: isolate;          /* garantiza que el ::before quede por detrás */
}

/* “full-bleed” para fondo completo */
#oo-listing::before{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;                /* ocupa todo el viewport */
  transform: translateX(-50%); /* centra el fondo con respecto al contenedor */
  background: #E2E0E1;         /* ← color de fondo */
  z-index: -1;                 /* por detrás del contenido */
}

/* ====== Título: un poco más separado del menú ====== */
#oo-listing .h1{
  padding-top: 18px;            /* separa del header */
  margin-bottom: 12px;
}

/* ====== Barra A-Z, contraste y estado activo ====== */
.oo-az{
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}

/* color base de los links A-Z */
.oo-az__link{
  color: #666;
  font-weight: 600;
}

/* hover accesible */
.oo-az__link:hover{
  background: #f2f2f2;
  color: #222;
}

/* ACTIVO muy visible (naranja) */
.oo-az__link.is-active{
  background: #FF7A00;         /* usa tu naranja de marca si prefieres */
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) inset;
}

/* Mejor foco con teclado */
.oo-az__link:focus-visible{
  outline: 2px solid #FF7A00;
  outline-offset: 2px;
}

/* Subtítulo de letra y columnas, opcionalmente un poco más suave */
.oo-letter-title{
  color: #555;
}

/* opcional: un pelín de aire extra entre bloques */
.oo-letter-block{ margin-bottom: 1.25rem; }

/* Fuerza MAYÚSCULAS únicamente a las marcas del grid */
#oo-listing .content_gridbrands a,
#oo-listing .brandlist a,
#oo-listing .brands-list a {
  text-transform: uppercase;
  letter-spacing: .2px;
  font-size: 16px;           /* un poco más grande */
  display: inline-block;
  margin: 8px 0;             /* separación vertical entre marcas */
}

/* Si tus columnas son .col-*: un poquito más de “aire” por columna */
#oo-listing .content_gridbrands [class*="col-"] {
  padding-top: 4px;
  padding-bottom: 8px;
}

/* Encabezado de letra (A, B, C… encima de cada bloque) */
#oo-listing .content_gridbrands h4,
#oo-listing .content_gridbrands .letter-title {
  margin: 12px 0 6px;
  font-weight: 600;
}

/* Fuerza MAYÚSCULAS únicamente a las marcas del grid */
#oo-listing .content_gridbrands a,
#oo-listing .brandlist a,
#oo-listing .brands-list a {
  text-transform: uppercase;
  letter-spacing: .2px;
  font-size: 16px;           /* un poco más grande */
  display: inline-block;
  margin: 8px 0;             /* separación vertical entre marcas */
}

/* Si tus columnas son .col-*: un poquito más de “aire” por columna */
#oo-listing .content_gridbrands [class*="col-"] {
  padding-top: 4px;
  padding-bottom: 8px;
}

/* Encabezado de letra (A, B, C… encima de cada bloque) */
#oo-listing .content_gridbrands h4,
#oo-listing .content_gridbrands .letter-title {
  margin: 12px 0 6px;
  font-weight: 600;
}

/* ==== SOLO DIRECTORIOS (marcas/fabricantes) ==== */
:root { /* puedes retocar estas alturas si lo ves necesario */
  --oo-header-h: 140px;   /* alto aproximado del header/topbar */
  --oo-footer-h: 320px;   /* alto aproximado del footer */
}

/* Empuja el contenido para que el footer quede al fondo,
   sin tocar otras páginas del tema */
html:has(#oo-listing) main#main,
html:has(#oo-listing) .page-content,
html:has(#oo-listing) #content,
html:has(#oo-listing) .container-custom {

  padding-bottom: 2rem;              /* aire antes del footer */
}

/* Elimina la “raya blanca” que algunos temas pintan al final del contenido */
html:has(#oo-listing) .page-content,
html:has(#oo-listing) .page-content > .container,
html:has(#oo-listing) .page-content > .container::after {
  border: 0 !important;
}

/* Evita que el footer añada borde/offset arriba en el directorio */
html:has(#oo-listing) #footer,
html:has(#oo-listing) .page-footer,
html:has(#oo-listing) footer {
  margin-top: 0 !important;
  border-top: 0 !important;
}

#oo-page-marcas .h6 {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 1rem;
	padding-top: 1rem;
}

/* ====== SOLO DIRECTORIOS (páginas con #oo-listing) ====== */

/* 1) Fondo global gris para el directorio */
html:has(#oo-listing),
html:has(#oo-listing) body {
  background: #E2E0E1 !important;  /* tu gris */
}

/* 2) Hacemos la página flex para pegar el footer abajo sin huecos */
html:has(#oo-listing) body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 3) La zona de contenido ocupa todo el alto disponible */
html:has(#oo-listing) #wrapper,
html:has(#oo-listing) main,
html:has(#oo-listing) #content,
html:has(#oo-listing) .page-content,
html:has(#oo-listing) .container,
html:has(#oo-listing) .container-custom {
  flex: 1 0 auto;
  background: transparent !important; /* heredará el gris */
  border: 0 !important;                /* evita rayas */
}

/* 4) Footer al fondo, sin bordes/márgenes fantasma */
html:has(#oo-listing) footer,
html:has(#oo-listing) #footer,
html:has(#oo-listing) .page-footer {
  margin-top: auto !important;
  border-top: 0 !important;
}