/* === Franja de LOGOS: igualar exactamente la tonalidad objetivo === */
/* Ajustes finos (si necesitas mover el tono, toca estas variables) */
:root{
  /* Tonos base (aprox. de la zona de referencia) */
  --base-top: rgba(22, 60, 53, 0.4);   /* verde oscuro más claro arriba */
  --base-bottom: rgba(15, 38, 35, 0.4);   /* verde muy oscuro abajo */
  --pattern-opacity: 0.15;  /* fuerza del patrón diagonal */
  --bottom-shade: 0.15;     /* sombreadito inferior para igualar la banda */
  --logos-gap:110px;
  --logos-h:64px;
  --logos-vel:25s;
}

/* Fondo: degradado sólido + patrón encima (idéntico al resto del sitio) */
.logos-strip{
  position:relative;
  z-index:2;
  padding:16px 0 16px;
  overflow:hidden;
  background: linear-gradient(180deg, var(--base-top) 0%, var(--base-bottom) 100%);
}

/* Patrón diagonal por encima con opacidad controlada */
.logos-strip::before{
  content:"";
  position:absolute;
  inset:0;
  background: url('assets/img/bg/area_bg03.png') center/cover no-repeat;
  opacity: var(--pattern-opacity);
  pointer-events:none;
  z-index:0;
}

/* Sombreado inferior para igualar la banda que se aprecia en la referencia */
.logos-strip::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,var(--bottom-shade)) 100%);
  pointer-events:none;
  z-index:0;
}

/* Logos encima de las capas */
.logos-track{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:var(--logos-gap);
  height: calc(var(--logos-h) + 8px);
  padding:0 4vw;
  will-change:transform;
  animation:logos-marquee var(--logos-vel) linear infinite;
}
.logos-track img{
  height: var(--logos-h);
  width:auto;
  flex:0 0 auto;
  image-rendering:-webkit-optimize-contrast;
}
@keyframes logos-marquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Responsivo */
@media (max-width:1200px){ :root{ --logos-gap:90px; --logos-h:84px; } }
@media (max-width:992px){ :root{ --logos-gap:80px; --logos-h:72px; } }
@media (max-width:768px){ :root{ --logos-gap:64px; --logos-h:64px; } }
@media (max-width:576px){ :root{ --logos-gap:52px; --logos-h:56px; } }
/* === Fondo de "nuestras redes" igual al de la franja de logos === */
.social__area.social-bg{
  position:relative;
  background: linear-gradient(180deg, var(--base-top) 0%, var(--base-bottom) 100%) !important;
  z-index:2;
}
.social__area.social-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: url('assets/img/bg/area_bg03.png') center/cover no-repeat;
  opacity: var(--pattern-opacity);
  pointer-events:none;
  z-index:0;
}
.social__area.social-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,var(--bottom-shade)) 100%);
  pointer-events:none;
  z-index:0;
}
.social__area.social-bg > *{
  position:relative;
  z-index:1;
}

/* === Sección "NUESTRAS REDES" con la misma tonalidad que la franja de logos === */
.social__area.social-bg{
  position: relative;
  background: linear-gradient(180deg, var(--base-top), var(--base-bottom)) !important;
  /* anulamos posibles imágenes aplicadas por data-background via JS */
  background-image: linear-gradient(180deg, var(--base-top), var(--base-bottom)) !important;
  overflow: hidden;
}
/* Patrón diagonal por encima con misma opacidad */
.social__area.social-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/img/bg/area_bg03.png') center/cover no-repeat;
  opacity: var(--pattern-opacity);
  pointer-events: none;
  z-index: 0;
}
/* Sombreado inferior igual que la franja */
.social__area.social-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,var(--bottom-shade)) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Asegurar que el contenido quede por encima de las capas */
.social__area.social-bg > *{
  position: relative;
  z-index: 1;
}


/* === Franja de LOGOS igual a NUESTRAS REDES === */
.logos-strip{
  position: relative;
  z-index: 2;
  padding: 16px 0 22px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--base-top), var(--base-bottom)) !important;
  background-image: linear-gradient(180deg, var(--base-top), var(--base-bottom)) !important;
}

/* Patrón diagonal igual */
.logos-strip::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/img/bg/area_bg03.png') center/cover no-repeat;
  opacity: var(--pattern-opacity);
  pointer-events: none;
  z-index: 0;
}

/* Sombra inferior igual */
.logos-strip::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,var(--bottom-shade)) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Logos encima */
.logos-track{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--logos-gap);
  padding: 0 4vw;
  will-change: transform;
  animation: logos-marquee var(--logos-vel) linear infinite;
}

/* === Overrides SOLO para la franja de logos (local a .logos-strip) === */
.logos-strip{
  padding: 72px 0 36px;
  --base-top:    rgba(22, 60, 53, 0.25);
  --base-bottom: rgba(15, 38, 35, 0.25);
  --pattern-opacity: 0.10;
  --bottom-shade:    0.08;
  --logos-h: 96px;
  --logos-gap: 130px;
  --logos-vel: 28s;
}
@media (max-width: 768px){
  .logos-strip{ --logos-h: 72px; --logos-gap: 80px; }
}


/* === Ajustes solicitados: centrar logos y fondo IDENTICO al tramo inferior (#172425) === */
.logos-strip{
  /* altura visual equilibrada */
  padding: 56px 0 56px;
  /* color exacto del fondo inferior (muestreo de imagen): rgb(23,36,37) */
  background: rgb(23,36,37) !important;
  /* neutralizar posibles degradados/patrones previos locales */
  --pattern-opacity: 0;
  --bottom-shade: 0;
}
/* Desactivar overlays/pseudo-elementos si existieran en esta sección */
.logos-strip::before,
.logos-strip::after{
  background: none !important;
  opacity: 0 !important;
}

/* Centrado vertical real de los logos dentro del track */
.logos-track{
  display: flex;
  align-items: center;
  gap: var(--logos-gap);
  height: calc(var(--logos-h) + 8px);
}

/* Mantener los logos proporcionados y centrados */
.logos-track img{
  display: block;
  height: var(--logos-h);
  width: auto;
}