/* =========================================
   ESTILOS SECCIÓN: COMIPEMS (HERO BLUE)
   ========================================= */

section.comipems {
    padding: 100px 0;
    background-color: var(--primary-blue);
    background-image: 
        radial-gradient(circle at 10% 20%, #2c3e50 0%, var(--primary-blue) 90%);
    position: relative;
    overflow: hidden;
    color: white;
}

section.comipems::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    border: 2px dashed rgba(255,255,255,0.05);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

section.comipems::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    border: 2px dashed rgba(255,255,255,0.1);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.contenido-comipems {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
        "header header header"
        "img img img"
        "card1 card2 card3"
        "footer footer footer";
    gap: 30px;
    align-items: stretch; /* Para que las tarjetas tengan la misma altura */
}

/* =========================================
   1. HEADER DE SECCIÓN
   ========================================= */
.texto-header-comipems {
    grid-area: header;
    text-align: center;
    margin-bottom: 40px;
}

.texto-header-comipems h1 {
    font-size: 4rem;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.texto-header-comipems p {
    font-size: 1.5rem;
    color: var(--primary-red);
    font-weight: 700;
    background: rgba(255,255,255,0.1);
    display: inline-block;
    padding: 10px 30px;
    border-radius: 50px;
    margin-top: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}

/* =========================================
   2. IMAGEN CENTRAL (HERO)
   ========================================= */
.imagen-header-comipems {
    grid-area: img;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.imagen-header-comipems img {
    height: 250px;
    width: auto;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.2));
    animation: floatExam 6s ease-in-out infinite;
}

/* =========================================
   3. TARJETAS DE BENEFICIOS (CORREGIDAS)
   ========================================= */
.back-comipems {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.3s, background 0.3s;
    height: 100%;
    
    /* LAYOUT INTERNO: FLEX ROW (Icono Izq - Texto Der) */
    display: flex;
    flex-direction: row; /* Icono a la izquierda, texto a la derecha */
    align-items: center; /* Centrado verticalmente */
    justify-content: flex-start;
    gap: 20px;
    text-align: left; /* Texto alineado a la izquierda */
}

.back-comipems:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
    border-color: var(--primary-red);
}

/* Contenedor virtual para los párrafos (si existiera) o estilo directo a P */
/* Estilizamos los párrafos para que parezcan una lista bonita */
.back-comipems p {
    font-size: 1.1rem;
    margin: 8px 0;
    color: #e0e0e0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre check y texto */
}

/* EL CHECKMARK (La "viñeta" bonita que faltaba) */
.back-comipems p::before {
    content: '✓'; /* Icono de check */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: var(--primary-red); /* Bolita roja */
    color: white;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: bold;
    flex-shrink: 0; /* Para que no se aplaste */
}

/* Iconos Grandes Principales (Usando ::before en el contenedor) */
/* Ahora los ponemos como pseudo-elementos pero controlados */
.back-comipems::before {
    font-size: 3.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.p1::before { content: '🧠'; } /* Cerebro */
.p2::before { content: '📅'; } /* Calendario */
.p3::before { content: '👨‍🏫'; } /* Profesor */

/* Envolvemos los p en un div virtual (no existe en HTML, así que usamos flex-wrap o display block en los p container si pudiéramos, 
   pero como son P directos, el flex row del padre los pone uno al lado del otro. 
   CORRECCIÓN: Necesitamos que los P se apilen verticalmente a la derecha del icono.
*/

/* Solución CSS sin tocar HTML: 
   Hacemos que el contenedor sea Grid o usamos un truco de display.
   Como no puedo agrupar los <p> en un div sin editar HTML, haré esto:
   El ::before es un flex-item. Los <p> son flex-items.
   Para que los <p> se vayan a una "columna" derecha, necesitamos envolverlos.
   PERO, como no editamos HTML, usaremos Display Grid en el padre.
*/

.back-comipems {
    display: grid;
    grid-template-columns: auto 1fr; /* Columna Auto (Icono) - Columna 1fr (Texto) */
    align-items: center;
    column-gap: 20px;
    row-gap: 5px; /* Espacio entre líneas de texto */
}

/* El icono ::before se va a la primera columna y abarca todas las filas */
.back-comipems::before {
    grid-column: 1;
    grid-row: 1 / span 10; /* Abarca varias filas por seguridad */
    align-self: center;
}

/* Los párrafos se van a la segunda columna */
.back-comipems p {
    grid-column: 2;
    margin: 5px 0; /* Margen reducido */
    width: 100%;
}

/* Grid Areas */
.p1 { grid-area: card1; }
.p2 { grid-area: card2; }
.p3 { grid-area: card3; }

/* =========================================
   4. FOOTER
   ========================================= */
.footer-comipems {
    grid-area: footer;
    text-align: center;
    margin-top: 40px;
}

.footer-comipems h1 {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    background: var(--primary-red);
    display: inline-block;
    padding: 20px 60px;
    transform: skew(-10deg);
    box-shadow: 10px 10px 0px rgba(0,0,0,0.3);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* =========================================
   ANIMACIONES
   ========================================= */
@keyframes floatExam {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (min-width: 1100px) {
    .contenido-comipems {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
            "header header"
            "img card1"
            "img card2"
            "img card3"
            "footer footer";
        column-gap: 60px;
    }

    .imagen-header-comipems img {
        height: 450px; /* Hero Image más grande */
    }
}

@media (max-width: 1100px) {
    .contenido-comipems {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
            "header header"
            "img img"
            "card1 card2"
            "card3 card3"
            "footer footer";
    }
}

@media (max-width: 768px) {
    .contenido-comipems {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "img"
            "card1"
            "card2"
            "card3"
            "footer";
        gap: 20px;
    }

    .texto-header-comipems h1 { font-size: 2.5rem; }
    .imagen-header-comipems img { height: 200px; }
    
    .footer-comipems h1 {
        font-size: 1.5rem;
        padding: 15px 30px;
        transform: skew(0deg);
        width: 100%;
    }
}