/* ==========================================================================
   Seccion Marcas - Layout Alternado Fiel al Diseño (Centrales Telefonicas)
   ========================================================================== */

.ejemplo {
  padding: 10px 1rem; /* 1rem de margen/padding a los lados */
  max-width: 100%; /* Ocupa todo el ancho disponible */
  margin: 0 auto;
}

.marcas-lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Dos ítems por fila */
  gap: 5px; /* Separación reducida */
}

.par-marcas {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
  background: #fff;
}

.par-marcas:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.11);
  transform: translateY(-2px);
}

.fila-marca {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1; /* Esto hace que ocupe todo el alto del contenedor padre */
}

.fila-izquierda {
  border-bottom: 1px solid #e8e8e8;
}

.fila-derecha {
  background: #fafafa;
}

/* ── Elementos compartidos ──────────────────────────── */

.fila-nombre-marca {
  min-width: 150px;
  max-width: 180px;
  padding: 6px 10px; /* Reducido 30% extra */
  font-weight: 800;
  font-size: 0.95rem; /* Reducido 30% extra */
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #ddd;
  background: #f8f9fa;
  line-height: 1.2;
  flex-shrink: 0;
}

/* Evitar que etiquetas como h2 agreguen espacio extra invisible */
.fila-nombre-marca h1,
.fila-nombre-marca h2,
.fila-nombre-marca h3,
.fila-nombre-marca p,
.fila-nombre-marca-grande h1,
.fila-nombre-marca-grande h2,
.fila-nombre-marca-grande h3,
.fila-nombre-marca-grande p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

.fila-nombre-marca small {
  font-size: 0.65rem;
  font-weight: 400;
  color: #777;
  margin-top: 2px;
}

.fila-nombre-marca-grande {
  min-width: 200px;
  padding: 6px 12px; /* Reducido 30% extra */
  font-weight: 800;
  font-size: 1rem; /* Reducido 30% extra */
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid #ddd;
  background: #f0f0f0;
  line-height: 1.35;
  flex-shrink: 0;
}

.fila-nombre-marca-grande small {
  font-size: 0.65rem;
  font-weight: 400;
  color: #777;
  margin-top: 2px;
}

.fila-categorias {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Animación de apertura */
  max-width: 0;
  min-width: 0;
  padding: 8px 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.fila-marca:hover .fila-categorias {
  max-width: 250px;
  padding: 8px 12px;
  opacity: 1;
}

.fila-categorias ul {
  list-style: none;
  padding: 0;
  margin: 0 0 4px 0;
}

.fila-categorias li {
  font-size: 0.75rem;
  color: #333;
  padding: 2px 0;
  border-bottom: 1px solid #eee;
  text-transform: capitalize;
}

/* Efecto hover estilo enlace-menu-pie para las categorías */
.item-categoria a {
  text-decoration: none;
  color: inherit;
  position: relative;
  display: inline-block;
  transition: color 0.3s;
}

.item-categoria a:before {
  content: "";
  width: 0%;
  height: 0.125rem;
  background: var(--color-primario, #ff0000); /* Color primario o fallback rojo */
  opacity: 1;
  position: absolute;
  display: block;
  bottom: -0.125rem;
  left: 0;
  transition: width 0.3s;
}

.item-categoria a:hover {
  color: var(--color-primario, #ff0000);
}

.item-categoria a:hover:before {
  width: 100%;
}

.fila-categorias li:last-child {
  border-bottom: none;
}

.fila-categorias span {
  font-size: 0.7rem;
  color: #666;
  display: block;
  margin-top: 2px;
  font-weight: 600;
}

.fila-logo {
  flex: 1; /* Ocupa todo el resto del espacio disponible */
  padding: 0; /* Sin padding para que la imagen toque los bordes */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdfdfd;
  font-size: 0.75rem;
  color: #aaa;
  font-weight: bold;
  text-transform: uppercase;
  position: relative; /* Para las imágenes absolutas superpuestas */
  overflow: hidden;
  aspect-ratio: 735 / 130; /* Proporción del banner panorámico normal */
  transition: flex 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), aspect-ratio 0.5s ease;
}

.fila-marca:hover .fila-logo {
  aspect-ratio: 735 / 200; /* Proporción del banner al hacer hover */
}

/* Reglas para asegurar que la imagen ocupe TODO el bloque sin empujar la altura */
.fila-logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Cambiado a contain para evitar recortes severos con SVGs */
  display: block;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

/* La segunda imagen de hover, oculta por defecto */
.fila-logo .img-hover {
  opacity: 0;
}

/* Efecto hover en la imagen: mostramos img-hover y ocultamos img-normal */
.fila-marca:hover .fila-logo .img-hover {
  opacity: 1;
}

.fila-marca:hover .fila-logo .img-normal {
  opacity: 0;
}

.fila-izquierda .fila-categorias {
  border-right: 1px solid #ddd;
}
.fila-izquierda .fila-logo {
  border-right: 1px solid #ddd;
}

.fila-derecha .fila-categorias {
  border-right: 1px solid #ddd;
}
.fila-derecha .fila-logo {
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

.fila-celda-vacia {
  flex: 1; /* Esto hace que ocupe todo el espacio sobrante */
  background: transparent;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 992px) {
  .marcas-lista {
    grid-template-columns: 1fr; /* Volver a 1 columna en pantallas medianas/pequeñas */
  }
}

@media (max-width: 768px) {
  .fila-marca {
    flex-wrap: wrap;
  }
  .fila-celda-vacia {
    display: none;
  }
  .fila-nombre-marca,
  .fila-nombre-marca-grande,
  .fila-categorias {
    min-width: 100%;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid #ddd;
  }
  .fila-logo {
    display: none; /* Opcional: ocultar logo en móviles para ahorrar espacio */
  }
  .fila-derecha {
    flex-direction: column-reverse; /* Para que el título grande quede arriba en móvil */
  }
}