/* =========== CORRECCIÓN FUNDAMENTAL ============= */
  /*
    Esta regla es una de las más importantes.
    Hace que el padding y el borde se incluyan en el ancho y alto total del elemento,
    en lugar de sumarse. Esto hace que los cálculos de porcentaje (ej. 50%)
    funcionen como se espera, incluso con padding y gaps.
  */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Estilos generales para el carrusel de cajas */
  .boxes {
    display: flex;
    flex-wrap: wrap; /* Permite que las cajas se envuelvan a la siguiente línea */
    gap: 15px; /* Aumenté un poco el gap para mejor separación */
    max-width: 1200px;
    margin: 0 auto; /* Centra el contenedor */
    /* CORRECCIÓN: Se elimina la altura fija (height: 500px) para que el contenedor
       pueda crecer y adaptarse al contenido cuando se apila. */
  }

  .boxes .box {
    background-color: #fff;
    /* CORRECCIÓN: Usamos calc() para un cálculo preciso.
       4 cajas por fila -> 100% / 4 = 25%. Restamos el gap. */
    flex: 1 1 calc(10% - 15px);
    display: flex;
    justify-content: center;
    min-height: 480px; /* Usamos min-height para más flexibilidad */
    font-family: "Poppins", sans-serif;
    font-size: 0.5em;
    font-weight: 100;
    transition: all 0.6s ease-in-out;
    position: relative;
    border-radius: 0px 0px 70px 70px;
    overflow: hidden; /* Evita que el contenido se desborde antes del hover */
  }

  .box:nth-child(1) {
      background: url("../img/resultados/2024/01_librogral.png") left/cover no-repeat;
    }

    .box:nth-child(2) {
      background: url("../img/resultados/2024/02_auditorias.png") left/cover no-repeat;
    }

    .box:nth-child(3) {
      background: url("../img/resultados/2024/03_revision.png") left/cover no-repeat;
    }

    .box:nth-child(4) {
      background: url("../img/resultados/2024/04_glosario.png") left/cover no-repeat;
    }

  /* Título de la caja (sin cambios) */
  .boxes .box__title {
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    /*background: #95134b;
    background: -webkit-linear-gradient(90deg, #94134a,#002526);/* Chrome 10-25, Safari 5.1-6     
     background: linear-gradient(90deg, #94134a,#002526);/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */                                             
    
    border-radius: 20px 0 0 20px;
    margin-bottom: 1em;
    margin-right: -15px;
    align-self: flex-end;
    padding: 8px 30px;
    transition: all 0.3s ease-out 0.1s;
    text-align: left;
    width: fit-content;
  }

  /* Contenido oculto de la caja */
  .boxes .box__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   /* background-image: url(../img/resultados/2024/fondo.png); */
    display: flex;
    flex-direction: column;
    box-shadow: 8px 8px 10px rgb(232, 231, 231);
    border-radius: 10px;
    opacity: 0;
    transition: all 0.3s ease-in;
    padding: 15px;
    z-index: 1;
  }

 

   /* Resumen del contenido */
  .boxes .box__summary {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    margin: 0 auto;
    width: 100%; /* Ocupa todo el ancho del padding del padre */
    text-align: left;
    padding: 0; /* Quitamos margen para controlar con el contenedor */
    list-style: none; /* Quitamos los bullets de la lista */
  }

  /* Efectos al pasar el mouse */
  .boxes .box:hover {
    /* El efecto de crecimiento del flex ya no es necesario en los media queries */
    flex-grow: 2; /* Hacemos que crezca un poco más en desktop */
  }

  .boxes .box:hover .box__content {
    opacity: 1;
  }

  /* Estilos de botones (se mantiene sin cambios) */
  .btn {
    padding: 3px 3px;
    display: inline;
  }
  .btn-primary {
    color: #5c5c5c;
    background-color: transparent;
    border-color: transparent;
    text-align: left;
  
    width: 100%;
  }
  .btn-primary:hover {
    color: #ffffff;
    background-color:#454545d7 /* #454444*/;
    border-color: #ffffff;
   
  }
  .btn-check:focus + .btn-primary,
  .btn-primary:focus {
    color: #fff;
    background-color: #9C9B94;
    border-color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(99, 99, 99, 0.5);
  }
  .btn-check:active + .btn-primary:focus,
  .btn-check:checked + .btn-primary:focus,
  .btn-primary.active:focus,
  .btn-primary:active:focus,
  .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(83, 3, 3, 0.5);
  }

   /*
    =======================================================
    MEDIA QUERIES - Estilos para dispositivos responsivos
    =======================================================
  */

  /* PARA TABLETAS Y PANTALLAS < 999px (2 cajas por fila) */
  @media (max-width: 999px) {
    .boxes .box {
      /* CORRECCIÓN: Cálculo para 2 cajas. 100% / 2 = 50% */
      flex-basis: calc(50% - 8px); /* 8px es aprox. la mitad del gap */
      min-height: 450px;
    }




    /* Anulamos el efecto de crecimiento en hover para no romper la rejilla */
    .boxes .box:hover {
      flex-grow: 1; /* Mantiene el mismo tamaño */
    }
  }




  
.enlace-con-linea {
  position: relative; /* Necesario para posicionar el pseudo-elemento */
  text-decoration: none; /* Quitamos el subrayado por defecto */
  color: #454545; /* Color del texto del enlace */
  padding-bottom: 2px; /* Espacio entre el texto y la línea */
  font-weight: 600;
  font-size: 16px;
  
}

.enlace-con-linea::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px; /* Grosor de la línea */
  bottom: 0;
  left: 0;
  background-color: #C29100; /* Color de la línea */
  color: #C29100; /* Color del texto del enlace */
  transform: scaleX(0); /* La línea está escalada a 0 inicialmente */
  transform-origin: bottom right; /* Origen de la transformación */
  transition: transform 0.3s ease-out; /* La transición que se aplicará */
}

.enlace-con-linea:hover::after {
  transform: scaleX(1); /* La línea se escala al 100% en hover */
  transform-origin: bottom left; /* Cambia el origen para un efecto diferente al salir */
}
/* --- Estilos para el Contenedor Principal --- */
.contenedor-flex {
    display: flex; 
    /* Alinea los hijos (columnas) verticalmente al centro. */
    align-items: center; 
    /* Crea un espacio de 20px entre las columnas. */
    gap: 20px; 
    /* Asegura que el texto dentro de este contenedor esté justificado. */
    text-align: justify;
    
    /* Estilos de presentación del contenedor */
    margin: 20px auto 5px;
    padding: 1px 0;
    border-radius: 0px 0px 80px 80px;
}

/* --- Estilos para el Contenedor Principal --- */
.contenedor-flex {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: center;
    margin: 20px auto 5px;
    padding: 1px 0;
    border-radius: 0px 0px 80px 80px;
}

/* --- Estilos para las Columnas --- */
.contenedor-imagen {
    display: block;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    height: 300px;           /* Solo para demostración */
    border: 1px solid #ccc;
}

.contenedor-imagen img {
    max-width: 100%;
}

.columna-texto {
    flex: 1; 
    font-size: 16px;
    text-align: justify;
}



.boton.learn-more {
    margin: 10px auto;
}

/* --- Estilos para la Placa del Contador --- */
.contenedor-flex-entidad {
    text-align: center;
    align-items: center; 
    gap: 0px; 
    margin: 0px auto 50px;
    padding: 10px 20px 10px 10px;
    border: 1px solid #d6d5d5;
    border-radius: 0px 80px 0px 70px;
    width: fit-content;
    background-color: #fff;
}

.counter {
    font-size: 50px;
    font-weight: 600;
    padding-bottom: 0px;
    margin-bottom: -15px;
    color: #ba935c;
}



@media (max-width: 400px) {.columna-imagen {display: none;}}


/*acordeon*/
@media (max-width: 768px) {
  .boxes {display: none;}
}

@media (min-width: 769px) {
  .accordion{display: none;}
}


.accordion-button {
     padding: 0px 2px 5px 0px;
     display: block;
     text-align: center;
}

 .accordion-button::after{ background-image: none;}

.accordion-body {
   /* background-image: url(../../img/resultados/2024/fondo.png);*/
    box-shadow: 8px 8px 10px rgb(232, 231, 231);
    border-radius: 0px 0px 20px 20px;
    margin-bottom: 50px;
}

.accordion-button:not(.collapsed) {
    background-color: #fff;
    color: #fff;
    box-shadow:  0 0px 0 rgb(250, 250, 250);

}
.accordion-button:focus {border-color: transparent;box-shadow: 0 0 0 0rem rgba(13,110,253,.25);}