* { /* selector universal */
    box-sizing: border-box;
   }
   
/*Estilos de 3 Divisiones responsives*/

.wrapper {
    display: flex;
    flex-wrap: wrap; /* Permite que las columnas se ajusten al ancho de la pantalla */
    justify-content: flex-start; /* Alinea el inicio de las columnas a la izquierda */
}

.column {
    flex: 0 0 33.3%; /* Cada columna ocupa un tercio del ancho */
    max-width: 33.3%; /* Se establece un ancho m谩ximo para evitar que las columnas se expandan demasiado en pantallas grandes */
    box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
    padding: 20px; /* Espacio interno */
    border: 1px solid #ccc; /* Borde para visualizaci贸n */
    text-align: left; /* Centra el contenido */
    display: flex; /* Ayuda a controlar la alineación interna */
    flex-direction: column;
    align-items: flex-start; /* Fuerza contenido inyectado a la izquierda */
}


   /*estilos para los encabezamientos de los textos*/
.subcapitulo1{
  border: 1px solid black; 
  border-radius: 0px;
  background-color: #f0e9fd;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); /* Sombra ligera */
  padding: 10px; 
  color:black; 
  text-align: center; 
}
.subcapitulo2{
  border: 1px solid black; 
  background-color: #faf2fd;
  padding: 10px; 
  color:black; 
  text-align: center; 
  font-size:  14px; 
  font-weight:bold;
}
.subcapitulo3{
  border: 1px solid black; 
  background-color: #faf2fd;
  padding: 0px; 
  color:black; 
  text-align: left; 
  font-size:  12px; 
  font-weight:bold;
}
.articulo1 {
  color:rgb(2, 0, 0); 
  border: 2px solid crimson;
  font-size:  12px; 
  font-weight:300;
}
table {
  max-width: 300px; /* Ancho máximo de 300px */
  margin: 0 auto; /* Centrar horizontalmente */
  border-collapse: collapse; /* Opcional: Colapsar los bordes de la tabla */
}

.tabla-centro {
    margin: 0 auto;
    text-align: left;
}

   /* ENLACE INTERNO A LA PAGINA 11-05CLASS-WEBPACK.HTML*/
   .contenedor-enlace-resaltado {
            /* Estilos del contenedor */
            background-color: #f0f0f0; /* Fondo gris claro */
            border: 1px solid #ddd; /* Borde fino */
            border-radius: 8px; /* Bordes redondeados */
            padding: 15px; /* Espaciado interno */
            margin: 20px auto; /* Centrar y margen externo */
            max-width: 600px; /* Ancho máximo para el contenedor */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombreado sutil */
            z-index: 10; /* Elevar sobre otros elementos, si aplica en el contexto */
            position: relative; /* Necesario para que z-index tenga efecto */
            text-align: center; /* Centrar el texto */
            font-weight: bold; /* Poner el texto en negrita */
        }

   .enlace-cautivador {
            color: #007bff; /* Un azul vibrante */            
            text-decoration: none; /* Elimina el subrayado por defecto */
            position: relative; /* Necesario para el efecto de subrayado animado */
            transition: all 0.3s ease-in-out; /* Transición suave para todos los cambios */
        }

        .enlace-cautivador::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px; /* Grosor del subrayado */
            bottom: -3px; /* Posición debajo del texto */
            left: 0;
            background-color: #007bff; /* Color del subrayado */
            transition: width 0.3s ease-in-out; /* Animación del ancho */
        }

        .enlace-cautivador:hover {
            color: #0056b3; /* Un azul un poco más oscuro al pasar el mouse */
        }

        .enlace-cautivador:hover::after {
            width: 100%; /* El subrayado se extiende al 100% al pasar el mouse */
        }

        .enlace-cautivador:active {
            color: #004085; /* Color aún más oscuro al hacer clic */
        }
/* --- MEDIA QUERY PARA MÓVILES (APILAMIENTO) --- */
@media (max-width: 768px) {
    .column {
        flex: 0 0 100%; /* Ocupa todo el ancho disponible */
        max-width: 100%; /* Fuerza a que no haya más de una por fila */
        text-align: left; 
        align-items: flex-start; /* Mantiene la lógica de izquierda */
        border-bottom: 2px solid #eee; /* Opcional: separador visual entre bloques */
    }
    
    .wrapper {
        flex-direction: column; /* Refuerza el flujo vertical */
    }
}