/* ==========================================================================
   MARCAS.CSS - ESTRUCTURA UNIFICADA Y ORDENADA
   ========================================================================== */

:root {
  --marcas-accent: #6425ef;
}

/* --- CONTENEDOR BASE --- */
.marcas-title {
  font-size: 38px;            /* tamaño del título */
  font-weight: bold;
  color: #333333;             /* color principal del título */
}

.txt-title-center {
  text-align: center !important;            /* color principal del título */
}

.marcas-description {
  font-size: 18px;          /* tamaño del texto */
  color: #555555;
  max-width: 600px;         /* ancho máximo del párrafo */
  margin: 20px auto;        /* centra el texto */
}

.marcas-banner {
  text-align: center; /* centra todo el contenido */
  margin: 40px 0;     /* espacio arriba y abajo */
}

.marcas-title {
  font-size: 38px; /* Sustituido 2rem por 32px */
  font-weight: bold;
  color: #333;
}

.marcas-line {
  width: 80px;          /* ancho de la línea */
  height: 4px;          /* grosor */
  background-color: #6425ef; /* morado */
  margin: 10px auto;    /* centra la línea */
  border-radius: 2px;   /* esquinas redondeadas */
}

.marcas-line-center {
  width: 60px;          
  height: 4px;          
  background-color: var(--marcas-accent); 
  border-radius: 2px;   
  border: none;
  opacity: 1;
  display: block;
  
  /* AJUSTE PARA SUBIR LA LÍNEA */
  margin: -25px auto 10px auto !important; 
  margin-bottom: 20px!important;
}

/* Título: eliminamos el margen inferior grande */
.marcas-title-section { 
  text-align: center;
  font-size: 38x; 
  font-weight: 300; 
  color: #ffffff; 
  margin-bottom: 0 !important; /* IMPORTANTE: quitamos el espacio abajo */
}
/* Línea: un margen superior pequeño es todo lo que necesitas */


.marcas-description {
  font-size: 18px; /* Sustituido 1rem por 16px */
  color: #555;
  max-width: 600px;         /* limita el ancho del párrafo */
  margin: 20px auto;        /* centra el texto */
}

.marcas-banner-icon svg {
  color: #6425ef;   /* azul corporativo */
}

.container-fluid {
  max-width: 1200px;
  margin: auto;
  padding: 0 40px;
}

/* --- 1. SECCIÓN PRINCIPAL HERO --- */
.marcas-section {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #000000;
}

.marcas-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.marcas-overlay { position: absolute; inset: 0; z-index: 1; }
.marcas-content { position: relative; z-index: 2; text-align: left; }


.marcas-title {
  font-size: 38x !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin-bottom: 12px !important;
}
.marcas-title span { 
  color: #6425ef; /* morado para la palabra DISTRIBUIMOS */
  color: var(--marcas-accent) !important; }

.marcas-line {
  margin-left: 0 !important;
  margin-right: auto !important;
  width: 60px;
  height: 4px;
  background-color: var(--marcas-accent);
  border: none;
  opacity: 1;
}



.marcas-description {
  font-size: 20px !important;
  color: #ffffff !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
}

.marcas-features { display: flex; flex-wrap: wrap; gap: 20px; }
.feature-item { display: flex; align-items: center; gap: 36px; color: #ffffff; }
.feature-icon { font-size: 24px !important; color: var(--marcas-accent) !important; margin-top: 1px; line-height: 1; }
.feature-text { margin: 0 !important; text-transform: uppercase; font-size: 17px !important; }

/* --- 2. SECCIÓN LOGOS --- */
.marcas-logos-section { padding: 10px 0 !important; background-color: #0a0c12; } 
.marcas-title-section { text-align: left; font-size: 38px; font-weight: 300; color: #ffffff; margin-bottom: 10px; }
.marcas-title-section span { color: var(--marcas-accent); }

.marcas-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

/********
.brand-card { background: #1b1d22; padding: 30px 20px; border: 1px solid #2a2d35; border-radius: 4px; display: flex; flex-direction: column; align-items: flex-start; }
.brand-logo { height: 150px; width: auto; object-fit: contain; margin-bottom: 25px; }
******/

.brand-card { 
  background: #1b1d22; 
  padding: 30px 20px; 
  border: 1px solid #2a2d35; 
  border-radius: 4px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; /* ESTO CENTRA TODO EL CONTENIDO HORIZONTALMENTE */
  text-align: center;  /* ESTO CENTRA EL TEXTO QUE ESTÉ DENTRO */
}
.brand-logo { 
  height: 150px; 
  width: auto; 
  object-fit: contain; 
  margin-bottom: 25px; 
  display: block; /* IMPORTANTE: Hace que la imagen se comporte como un bloque */
  margin-left: auto;  /* Centrado */
  margin-right: auto; /* Centrado */
}


.brand-name { font-size: 17px; font-weight: 700; color: #ffffff; margin-bottom: 12px; text-transform: uppercase; }
.brand-desc { font-size: 15px; color: #a0a0a0; line-height: 1.5; margin: 0; text-align: left; }

/* --- 3. SECCIÓN BANNER (Unificada) --- */
.marcas-banner-section { padding: 10px 0 !important; background-color: #0a0c12; }
.marcas-banner-card { 
  background: #1b1d22; 
  border: 1px solid #2a2d35; 
  border-radius: 8px; 
  padding: 30px 40px; 
  display: flex; 
  align-items: center; 
  gap: 30px; 
  width: 100%;
}
.marcas-banner-icon { 
  font-size: 40px; 
  min-width: 50px; 
  height: 60px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: var(--marcas-accent); 
  line-height: 1; 
}
.marcas-banner-text { flex-grow: 1; }
.marcas-banner-text h3 { color: #ffffff; font-size: 20px; margin-bottom: 5px; font-weight: 600; }
.marcas-banner-text p { color: #a0a0a0; font-size: 15px; margin: 0; }
.marcas-banner-action { margin-left: auto; }

.btn-primary { 
  display: flex !important; 
  align-items: center; 
  gap: 10px; 
  background-color: var(--marcas-accent) !important; 
  border: none !important; 
  padding: 12px 25px !important; 
  font-weight: 600; 
  white-space: nowrap; 
  font-size: 14px;
}
.btn-primary i { font-size: 18px; }

/* --- 4. SECCIÓN WHY (Por qué elegir) --- */
.marcas-why-section { padding: 10px 0 !important; background-color: #0a0c12; } 
.marcas-why-card { 
  background: #1b1d22; 
  border: 1px solid #2a2d35; 
  border-top: 3px solid var(--marcas-accent); 
  border-radius: 8px; 
  padding: 40px; 
}
.marcas-why-title { color: #ffffff; font-size: 24px; margin-bottom: 10px; text-align: left; }
.marcas-why-title span { color: var(--marcas-accent); }

.why-container { display: flex; justify-content: space-between; gap: 20px; }
.why-item { display: flex; align-items: flex-start; gap: 15px; flex: 1; }
.why-item i { font-size: 32px; color: var(--marcas-accent); margin-top: 5px; flex-shrink: 0; }
.why-text h4 { color: #ffffff; font-size: 17px; margin: 0 0 5px 0; }
.why-text p { color: #a0a0a0; font-size: 15px; margin: 0; line-height: 1.4; }

/* --- RESPONSIVO --- */
@media (max-width: 992px) {
  .marcas-section { height: auto; padding: 120px 0 60px 0; }
  .marcas-title { font-size: 38px !important; }
  .marcas-features { flex-direction: column; align-items: flex-start; }
  .marcas-grid { grid-template-columns: repeat(2, 1fr); }
  .why-container { flex-direction: column; gap: 30px; }
  .marcas-why-card { padding: 30px; }
  
  .marcas-banner-card { flex-direction: column; text-align: center; gap: 20px; }
  .marcas-banner-action { margin-left: 0; width: 100%; }
  .marcas-banner-icon { margin-bottom: 10px; }
}

@media (max-width: 768px) {
  .marcas-section { padding: 80px 20px; }
  .marcas-line-center {
    margin-top: 0px;    
    margin-bottom: 10px; 
  }
}

@media (max-width: 576px) {
  .marcas-grid { grid-template-columns: 1fr; }
  .marcas-logos-section { padding: 10px 20px !important; }
  .marcas-title-section {
    font-size: 28px !important;  /* Reducimos de 40px a 28px en móvil */
    line-height: 1.2;            /* Mejoramos la legibilidad */
    margin-bottom: 5px !important;
  }
}