/* =========================================
   MÓDULO: BNVE-Acordeon-Imagen (bnvai)
   ========================================= */

.bnvai-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* --- COLUMNA 1: TEXTOS Y ACORDEÓN --- */
.bnvai-title { margin-bottom: 24px; }
.bnvai-description { margin-bottom: 32px; }

.bnvai-accordion-wrapper {
  margin-bottom: 32px;
  /* Eliminado el border-top */
}

/* Líneas divisorias solo en medio */
.bnvai-accordion-item {
  border-bottom: 1px solid #E5E5E5;
}

.bnvai-accordion-item:last-child {
  border-bottom: none; /* Quitamos la línea inferior del último */
}

.bnvai-accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* Títulos del acordeón: Más claros y con hover */
/* Aseguramos que el título tenga las transiciones correctas y origen de transformación */
.bnvai-accordion-title {
  font-size: 24px;
  color: #1E53BB; 
  padding-right: 16px;
  /* Transición fluida para color, opacidad y tamaño */
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  transform-origin: left center; /* Hace que escale hacia la derecha y no desde el centro */
  display: inline-block; /* Necesario para que el transform funcione en etiquetas span */
}

/* Efecto HOVER (cuando pasas el mouse) */
.bnvai-accordion-header:hover .bnvai-accordion-title {
  color: var(--color-secondary-blue); 
  opacity: 0.8;
  transform: scale(1.02); 
}


.bnvai-accordion-item.is-open .bnvai-accordion-title {
  opacity: 1;
  color: var(--color-secondary-blue);
  transform: scale(1.02); 
}

.bnvai-accordion-header:active .bnvai-accordion-title {
  /* Un ligero hundimiento al presionar da una excelente sensación táctil */
  transform: scale(0.98); 
  opacity: 1;
}
}

.bnvai-accordion-icon {
  flex-shrink: 0;
  transition: transform 0.35s ease-in-out;
}

.bnvai-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease-in-out;
}

.bnvai-accordion-inner {
  overflow: hidden;
  padding-bottom: 0;
  opacity: 0;
  transition: opacity 0.35s ease-in-out, padding 0.35s ease-in-out;
}

/* Estado Abierto */
.bnvai-accordion-item.is-open .bnvai-accordion-icon {
  transform: rotate(135deg); /* Giro a 135deg para formar la cruz X perfecta */
}

.bnvai-accordion-item.is-open .bnvai-accordion-content {
  grid-template-rows: 1fr;
}

.bnvai-accordion-item.is-open .bnvai-accordion-inner {
  padding-bottom: 24px;
  opacity: 1;
}

/* --- COLUMNA 2: IMÁGENES Y TRIÁNGULOS --- */
.bnvai-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

.bnvai-main-image {
  position: relative;
  z-index: 2; 
  width: 100%;
  display: block;
}

.bnvai-triangle {
  position: absolute;
  z-index: 1;
  width: auto;
  height: auto;
  aspect-ratio: 1;
  /* Colores solicitados */
  --c-blue-light: #CCF0F9;
  --c-green-light: #EAF7CC;
  --c-blue-muted: #718BBB;
  --c-green-pale: #E8F5E9; 
}

/* =========================================
   LAS 5 VARIANTES (Sharp = Grande / Soft = Pequeño / Cero traslapes)
   ========================================= */

/* Variante 1: Grande (Verde) derecha, Pequeño (Celeste) izq-abajo */
.variant-1 .bnvai-t-large { background: var(--c-green-light); width: 85%; top: 5%; right: -5%; transform: rotate(15deg); }
.variant-1 .bnvai-t-small { background: var(--c-blue-light); width: 35%; bottom: 10%; left: -5%; transform: rotate(-25deg); }

/* Variante 2: Grande (Celeste) izq-abajo, Pequeño (Verde pálido) der-arriba */
.variant-2 .bnvai-t-large { background: var(--c-blue-light); width: 80%; bottom: 0; left: -10%; transform: rotate(180deg); }
.variant-2 .bnvai-t-small { background: var(--c-green-pale); width: 35%; top: 5%; right: 5%; transform: rotate(45deg); }

/* Variante 3: Grande (Azul apagado) der-arriba, Pequeño (Verde) izq-abajo */
.variant-3 .bnvai-t-large { background: var(--c-blue-muted); width: 75%; top: 5%; right: -10%; transform: rotate(90deg); }
.variant-3 .bnvai-t-small { background: var(--c-green-light); width: 40%; bottom: 5%; left: 0; transform: rotate(-15deg); }

/* Variante 4: Grande (Verde pálido) izq-arriba, Pequeño (Azul apagado) der-abajo */
.variant-4 .bnvai-t-large { background: var(--c-green-pale); width: 85%; top: 15%; left: -5%; transform: rotate(-10deg); }
.variant-4 .bnvai-t-small { background: var(--c-blue-muted); width: 35%; bottom: 5%; right: -5%; transform: rotate(60deg); }

/* Variante 5: Grande (Verde) der-abajo, Pequeño (Celeste) izq-arriba */
.variant-5 .bnvai-t-large { background: var(--c-green-light); width: 80%; bottom: 10%; right: -5%; transform: rotate(-45deg); }
.variant-5 .bnvai-t-small { background: var(--c-blue-light); width: 35%; top: 5%; left: -5%; transform: rotate(20deg); }


.bnvai-module .bncr-cta-wrapper a{
  margin-bottom: 0;
}
.bnvai-module .bncr-cta-wrapper{
  margin: 0;
}

/* =========================================
   MEDIA QUERIES (DESKTOP)
   ========================================= */
@media (min-width: 992px) {
  .bnvai-grid {
    flex-direction: row;
    align-items: center;
    gap: 60px;
  }
  
  /* Ajuste 60/40 solicitado */
  .bnvai-col-text { width: 60%; }
  .bnvai-col-image { width: 40%; }

  /* MATEMÁTICA DEL DESBORDAMIENTO (100px a la derecha) */
  /* Aplicamos el margin-right negativo solo a los triángulos alineados a la derecha */
  .variant-1 .bnvai-t-large,
  .variant-2 .bnvai-t-small,
  .variant-3 .bnvai-t-large,
  .variant-4 .bnvai-t-small,
  .variant-5 .bnvai-t-large {
    margin-right: -100px;
  }
}