/* ===========================================
   SECCIÓN: ALIADOS INTERNAS (versión 6 logos)
   =========================================== */

.aliados-internas {
  padding: 60px 0;
   background: var(--azul-10);
}

.aliados-container {
  max-width: 1284px;
  margin: 0 auto;
  position: relative;
}

/* PANEL AZUL */
.aliados-panel {
  position: relative;
  background: #0067c5;               /* Azul principal */
  height: 376px;
  border-radius: 24px;
  overflow: hidden;
  padding: 40px 48px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.aliados-panel::before,
.aliados-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 2;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Wave esquina superior izquierda */
.aliados-panel::before {
  left: -24px;
  top: -10px;
 width: 345px;
  height: 337px;
  background-image: url("../images/curva_aliados.svg"); /* tu svg */
  background-position: left top;
}

/* Wave esquina inferior derecha */
.aliados-panel::after {
right: -20px;
  bottom: -32px;
  width: 327px;
  height: 337px;
  background-image: url("../images/curva_aliados2.svg");
  background-position: right bottom;
}


/* ============================
   SVG decorativos internos
   ============================ */
.aliados-bg {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.ali-bg-top {
  top: 0;
  left: 0;
  width: 100%;
}

.ali-bg-bottom {
  bottom: 0;
  right: 0;
  width: 100%;
}

.aliados-bg img {
  width: 100%;
  height: auto;
  opacity: 0.35; /* ajustable según maqueta */
}

/* ============================
   CONTENIDO INTERNO
   ============================ */


.aliados-panel-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;   /* Centra verticalmente título + logos */
  gap: 48px;
  height: 100%;          /* Ocupa toda la altura del panel azul */
}

/* TITULO */
.aliados-title {
  
  color: #ffffff;
  margin: 0;
}
.aliados-col--title {
  display: flex;
  align-items: center;
}


/* ============================
   GRID DE LOGOS (6 logos: 3×2)
   ============================ */
.aliados-col--logos.aliados-logos--6 {
  display: grid;
  grid-template-columns: repeat(3, 273px);
  grid-template-rows: repeat(2, 100px);
  gap: 24px 32px; /* vertical / horizontal */
  justify-content: center;
}

/* CARD DEL LOGO */
.aliado-card {
  width: 273px;
  height: 100px;
  background: #ffffff;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.aliado-card img {
  max-width: 80%;
  max-height: 70%;
  object-fit: contain;
}



/* ============================
   GRID DE LOGOS — versión 4 logos
   ============================ */
.aliados-col--logos.aliados-logos--4 {
  display: grid;
  grid-template-columns: repeat(2, 418px);
  grid-template-rows: repeat(2, 100px);
  gap: 32px 40px;               /* vertical / horizontal */
  justify-content: center;      /* centra horizontalmente el grid */
  align-content: center;        /* centra verticalmente dentro del panel */
}

/* Card específica para la versión de 4 logos */
.aliado-card--4 {
  width: 418px;
  height: 100px;
  background: #ffffff;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.aliado-card--4 img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

/* ===========================================
   SECCIÓN: ALIADOS INTERNAS – VERSIÓN 2 LOGOS
   =========================================== */

.aliados-internas {
  padding: 60px 0 20px 0;
  background: var(--azul-10); /* tu fondo celeste general */
}

.aliados-container {
  max-width: 1284px;
  margin: 0 auto;
  position: relative;
}

/* PANEL AZUL */
.aliados-panel {
  position: relative;
  background: #0067c5;      /* Azul principal */
  height: 260px;            /* 🔹 ALTURA PARA ESTA VERSIÓN */
  border-radius: 24px;
  overflow: hidden;
  padding: 40px 48px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* Waves decorativos con pseudo-elementos */
.aliados-panel::before,
.aliados-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0.35;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Wave esquina superior izquierda */
.aliados-panel::before {
  left: -24px;
  top: -10px;
  width: 345px;
  height: 337px;
  background-image: url("../images/curva_aliados.svg");
  background-position: left top;
}

/* Wave esquina inferior derecha */
.aliados-panel::after {
  right: -20px;
  bottom: -32px;
  width: 327px;
  height: 337px;
  background-image: url("../images/curva_aliados2.svg");
  background-position: right bottom;
}

/* ============================
   CONTENIDO INTERNO
   ============================ */

.aliados-panel-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;   /* ✅ centra verticalmente título + logos */
  justify-content: center;
  gap: 48px;
  height: 100%;          /* ✅ ocupa toda la altura del panel azul */
}

/* Columna título */
.aliados-col--title {
  display: flex;
  align-items: center;
}



/* ============================
   GRID DE LOGOS – 2 LOGOS
   ============================ */

.aliados-col--logos.aliados-logos--2 {
  display: grid;
  grid-template-columns: repeat(2, 382px); /* 🔹 2 columnas de 382px */
  grid-template-rows: 100px;               /* 🔹 1 fila de 100px */
  gap: 32px;
  justify-content: center;   /* centra horizontalmente el bloque dentro de la columna */
  align-content: center;     /* centra verticalmente dentro del panel */
}

/* CARD DE LOGO PARA VERSIÓN 2 LOGOS */
.aliado-card--2 {
  width: 382px;    /* 🔹 ancho especial para esta versión */
  height: 100px;   /* 🔹 mismo alto */
  background: #ffffff;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.aliado-card--2 img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

/* ===========================================
   SECCIÓN: ALIADOS – VERSIÓN 1 LOGO
   =========================================== */

/* Panel azul mantiene la altura de 260px */
.aliados-panel--1 {
  height: 260px;
}

/* GRID para 1 logo → centrado total */
.aliados-col--logos.aliados-logos--1 {
  display: flex;
  justify-content: center;   /* 🔹 centra horizontalmente */
  align-items: center;        /* 🔹 centra verticalmente */
  width: 100%;
  height: 100%;
}

/* CARD DEL LOGO – versión 1 logo */
.aliado-card--1 {
  width: 484px;          /* 🔹 tamaño solicitado */
  height: 100px;
  background: #ffffff;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* Ajuste interno del logo */
.aliado-card--1 img {
  max-width: 75%;
  max-height: 70%;
  object-fit: contain;
}


@media (max-width: 992px) {

  /* El panel se hace más flexible en alto y padding */
  .aliados-panel {
    height: auto;
    padding: 32px 24px;
  }

  /* Contenido en columna: título arriba, logos abajo */
  .aliados-panel-inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    height: auto;
  }

  .aliados-col--title {
    justify-content: center;
    text-align: center;
  }

  /* 6 LOGOS → 2 columnas en tablet */
  .aliados-col--logos.aliados-logos--6 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    justify-content: center;
  }

  /* 4 LOGOS → 2 columnas fluidas */
  .aliados-col--logos.aliados-logos--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    justify-content: center;
  }

  /* 2 LOGOS → 2 columnas fluidas */
  .aliados-col--logos.aliados-logos--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    justify-content: center;
  }

  /* 1 LOGO → ya está centrado con flex, solo nos aseguramos */
  .aliados-col--logos.aliados-logos--1 {
    justify-content: center;
    align-items: center;
  }

  /* Todas las cards se vuelven flexibles en ancho en tablet */
  .aliado-card,
  .aliado-card--4,
  .aliado-card--2,
  .aliado-card--1 {
    width: 100%;
    max-width: 420px;  /* límite máximo agradable */
    margin: 0 auto;
  }
}

@media (max-width: 600px) {

  .aliados-internas {
    padding: 40px 0;
  }

  .aliados-panel {
    padding: 24px 16px;
  }

  .aliados-panel-inner {
    gap: 20px;
  }

  .aliados-title {
    font-size: 1.5rem;
  }

  /* TODOS los layouts de logos pasan a 1 columna */
  .aliados-col--logos.aliados-logos--6,
  .aliados-col--logos.aliados-logos--4,
  .aliados-col--logos.aliados-logos--2 {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 16px;
    width: 100%;
  }

  .aliados-col--logos.aliados-logos--1 {
    width: 100%;
  }

  /* Cards full width en mobile */
  .aliado-card,
  .aliado-card--4,
  .aliado-card--2,
  .aliado-card--1 {
    width: 100%;
    max-width: 100%;
    height: auto;              /* por si el alto necesita respirar */
    min-height: 80px;          /* para no quedar demasiado pequeñas */
  }

  .aliado-card img,
  .aliado-card--4 img,
  .aliado-card--2 img,
  .aliado-card--1 img {
    max-width: 80%;
    max-height: 60%;
  }
}