/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Tipografías */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f5f5f5;
    color: #333;
}

/* Encabezado (SE DEJA IGUAL, solo lo estilizo por si no tenías nada) */
header {
    background-color: #1e3a8a; /* azul */
    color: white;
    text-align: center;
    padding: 40px 20px;
}

header h1 {
    color: white;
    font-family: 'Playfair Display', serif;
}


/* Contenedor de cajas */
.contenedor-cajas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    padding: 40px;

}

/* CAJA BASE */
.caja-imagen {
    padding: 25px;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;

    min-height:350px;        /* 🔑 ajusta este valor si quieres más altas */
    display: flex;
    align-items: flex-start;     /*  el texto arriba */
}

/* El texto ocupa todo el ancho */
.texto-caja {
    width: 100%;
}

/* Texto */
.texto-caja p {
    font-size: 0.95rem;
    line-height: 1.5;
}

.texto-caja a {
    font-weight: bold;
    text-decoration: underline;
    color: inherit;
}

/* ---------- COLORES INDIVIDUALES ---------- */

/* ---------- COLORES INTENSOS INDIVIDUALES ---------- */

/* Caja 1 - Rojo intenso */
.caja-imagen:nth-child(1) {
    background-color: #ffb3b3;
    color: #b30000;
}
.caja-imagen:nth-child(1):hover {
    background-color: #b30000;
    color: white;
}

/* Caja 2 - Azul intenso */
.caja-imagen:nth-child(2) {
    background-color: #b3d1ff;
    color: #003d99;
}
.caja-imagen:nth-child(2):hover {
    background-color: #003d99;
    color: white;
}

/* Caja 3 - Verde intenso */
.caja-imagen:nth-child(3) {
    background-color: #b7ead1;
    color: #006644;
}
.caja-imagen:nth-child(3):hover {
    background-color: #006644;
    color: white;
}

/* Caja 4 - Morado intenso */
.caja-imagen:nth-child(4) {
    background-color: #d2b7ff;
    color: #5a189a;
}
.caja-imagen:nth-child(4):hover {
    background-color: #5a189a;
    color: white;
}

/* Caja 5 - Naranja intenso */
.caja-imagen:nth-child(5) {
    background-color: #ffc299;
    color: #cc5200;
}
.caja-imagen:nth-child(5):hover {
    background-color: #cc5200;
    color: white;
}

/* Caja 6 - Turquesa intenso */
.caja-imagen:nth-child(6) {
    background-color: #9fe3e7;
    color: #007f86;
}
.caja-imagen:nth-child(6):hover {
    background-color: #007f86;
    color: white;
}

/* Caja 7 - Gris profundo */
.caja-imagen:nth-child(7) {
    background-color: #cfcfcf;
    color: #2b2b2b;
}
.caja-imagen:nth-child(7):hover {
    background-color: #2b2b2b;
    color: white;
}

/* Caja 8 - Fucsia intenso */
.caja-imagen:nth-child(8) {
    background-color: #ffc1d9;
    color: #9b004f;
}
.caja-imagen:nth-child(8):hover {
    background-color: #9b004f;
    color: white;
}

/* Caja 9 - Marrón rojizo intenso */
.caja-imagen:nth-child(9) {
    background-color: #f2c4a9;
    color: #7a1f00;
}
.caja-imagen:nth-child(9):hover {
    background-color: #7a1f00;
    color: white;
}

/* Caja 10 - Dorado intenso */
.caja-imagen:nth-child(10) {
    background-color: #ffe066;
    color: #8f6b00;
}
.caja-imagen:nth-child(10):hover {
    background-color: #8f6b00;
    color: white;
}