/* =========================================================
   QEEG - MAPEO DE ONDAS CEREBRALES
   Sicotecnologia 2026
========================================================= */


/* =========================================================
   PORTADA QEEG
========================================================= */

.qeeg-hero {
    background: #eef6fd;
    padding: 64px 24px;
}

.qeeg-hero-contenido {
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 55px;
    align-items: center;
}


/* TEXTO */

.qeeg-hero-texto {
    max-width: 600px;
}

.qeeg-etiqueta {
    display: inline-block;

    margin-bottom: 16px;

    color: #0758df;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.qeeg-hero h1 {
    margin: 0 0 22px;

    color: #12365b;
    font-size: 42px;
    line-height: 1.12;
    font-weight: 700;
}

.qeeg-hero p {
    margin: 0;

    color: #405b76;
    font-size: 17px;
    line-height: 1.75;
}





/* IMAGEN */

.qeeg-hero-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
}

.qeeg-hero-imagen img {
    display: block;

    width: 100%;
    max-width: 500px;
    height: auto;

    border-radius: 18px;

    box-shadow: 0 14px 35px rgba(21, 63, 102, 0.16);
}
/* =========================================================
   QUE INFORMACION OBTENEMOS
========================================================= */

.qeeg-informacion {
    background: #ffffff;
    padding: 68px 24px;
}

.qeeg-informacion-contenido {
    max-width: 1180px;
    margin: 0 auto;
}

.qeeg-informacion h2 {
    margin: 8px 0 14px;

    color: #12365b;
    font-size: 34px;
    line-height: 1.2;
}

.qeeg-intro {
    max-width: 760px;
    margin: 0 0 38px;

    color: #526b83;
    font-size: 17px;
    line-height: 1.7;
}

/* PARTE SUPERIOR - IMAGEN Y EXPLICACION */

.qeeg-info-superior {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 36px;
    align-items: center;

    margin-bottom: 42px;
}

.qeeg-info-imagen img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 14px;

    box-shadow: 0 10px 28px rgba(21, 63, 102, 0.12);
}

.qeeg-info-texto h2 {
    margin: 8px 0 18px;

    color: #12365b;
    font-size: 34px;
    line-height: 1.2;
}

.qeeg-info-texto p {
    margin: 0 0 16px;

    color: #526b83;
    font-size: 16px;
    line-height: 1.7;
}

/* TARJETAS */

.qeeg-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.qeeg-info-card {
    min-height: 190px;
    padding: 26px 24px;

    background: #f4f8fc;
    border: 1px solid #d7e5f2;
    border-radius: 12px;
}

.qeeg-info-numero {
    margin-bottom: 13px;

    color: #078b50;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.qeeg-info-card h3 {
    margin: 0 0 12px;

    color: #0758df;
    font-size: 20px;
}

.qeeg-info-card p {
    margin: 0;

    color: #526b83;
    font-size: 15px;
    line-height: 1.6;
}

/* =========================================================
   USO DEL QEEG EN SICOTECNOLOGIA
========================================================= */

.qeeg-usos {
    background: #eef6fd;
    padding: 68px 24px;
}

.qeeg-usos-contenido {
    max-width: 1180px;
    margin: 0 auto;
}

.qeeg-usos h2 {
    margin: 8px 0 14px;

    color: #12365b;
    font-size: 34px;
    line-height: 1.2;
}

.qeeg-usos-intro {
    max-width: 850px;
    margin: 0 0 38px;

    color: #526b83;
    font-size: 17px;
    line-height: 1.7;
}


/* TARJETAS */

.qeeg-usos-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.qeeg-uso-card {
    padding: 25px 22px;

    background: #ffffff;
    border: 1px solid #d5e4f1;
    border-radius: 12px;

    box-shadow: 0 5px 16px rgba(21, 63, 102, 0.05);
}

.qeeg-uso-numero {
    margin-bottom: 12px;

    color: #078b50;
    font-size: 13px;
    font-weight: 700;
}

.qeeg-uso-card h3 {
    margin: 0 0 12px;

    color: #0758df;
    font-size: 18px;
    line-height: 1.3;
}

.qeeg-uso-card p {
    margin: 0;

    color: #526b83;
    font-size: 14px;
    line-height: 1.6;
}


/* NOTA */

.qeeg-usos-nota {
    max-width: 900px;
    margin: 32px auto 0;

    color: #405b76;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

/* =========================================================
   DEL REGISTRO A LA INTERPRETACION
========================================================= */

.qeeg-ejemplos {
    background: #ffffff;
    padding: 72px 24px;
}

.qeeg-ejemplos-contenido {
    max-width: 1180px;
    margin: 0 auto;
}


/* ENCABEZADO */

.qeeg-ejemplos-encabezado {
    max-width: 850px;
    margin-bottom: 52px;
}

.qeeg-ejemplos-encabezado h2 {
    margin: 8px 0 16px;

    color: #12365b;
    font-size: 34px;
    line-height: 1.2;
}

.qeeg-ejemplos-encabezado p {
    margin: 0;

    color: #526b83;
    font-size: 17px;
    line-height: 1.7;
}


/* CADA EJEMPLO */

.qeeg-ejemplo {
    display: grid;
    grid-template-columns: 1.45fr 0.55fr;
    gap: 48px;
    align-items: center;

    padding: 38px 0;

    border-bottom: 1px solid #dbe7f1;
}


/* SEGUNDO EJEMPLO - ORDEN INVERTIDO */

.qeeg-ejemplo-inverso {
    grid-template-columns: 0.55fr 1.45fr;
}

.qeeg-ejemplo-inverso .qeeg-ejemplo-imagen {
    order: 2;
}

.qeeg-ejemplo-inverso .qeeg-ejemplo-texto {
    order: 1;
}


/* IMAGENES */

.qeeg-ejemplo-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
}

.qeeg-ejemplo-imagen img {
    display: block;

    max-width: 100%;
    max-height: 480px;
    width: auto;
    height: auto;

    border-radius: 10px;

    box-shadow: 0 10px 28px rgba(21, 63, 102, 0.14);
}


/* TEXTO */

.qeeg-ejemplo-numero {
    margin-bottom: 10px;

    color: #078b50;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.qeeg-ejemplo-texto h3 {
    margin: 0 0 18px;

    color: #0758df;
    font-size: 24px;
    line-height: 1.25;
}

.qeeg-ejemplo-texto p {
    margin: 0 0 15px;

    color: #526b83;
    font-size: 16px;
    line-height: 1.7;
}

/* =========================================================
   CTA EVALUACION QEEG
========================================================= */

.qeeg-cta {
    background: #0758df;
    padding: 30px 24px;
}

.qeeg-cta-contenido {
    max-width: 1180px;
    margin: 0 auto;


}

.qeeg-cta-texto {
    max-width: 100%;
}

.qeeg-cta-texto {
    max-width: none;
    width: 100%;
}

.qeeg-cta-etiqueta {
    display: block;
    margin-bottom: 10px;

    color: #bfe0ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.qeeg-cta h2 {
    margin: 0 0 12px;

    color: #ffffff;
    font-size: 30px;
    line-height: 1.2;
}

.qeeg-cta p {
    margin: 0;

    color: #e6f1ff;
    font-size: 17px;
    line-height: 1.55;
}


/* BOTON */

.qeeg-cta-accion {
    min-width: 230px;
    text-align: center;
}

.qeeg-cta-boton {
    display: inline-block;

    padding: 13px 25px;

    background: #ffffff;
    color: #0758df;

    border-radius: 7px;

    font-size: 15px;
    font-weight: 700;
    text-decoration: none;

    transition: transform 0.2s ease,
                box-shadow 0.2s ease;
}

.qeeg-cta-boton:hover {
    transform: translateY(-2px);

    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18);

    text-decoration: none;
}

.qeeg-cta-accion span {
    display: block;
    margin-top: 10px;

    color: #d5e8ff;
    font-size: 12px;
}


/* RESPONSIVE */

@media (max-width: 760px) {

    .qeeg-cta-contenido {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .qeeg-cta-accion {
        text-align: left;
    }

}

@media (max-width: 600px) {

    .qeeg-cta {
        padding: 42px 18px;
    }

    .qeeg-cta h2 {
        font-size: 26px;
    }

}

/* CIERRE */

.qeeg-ejemplos-cierre {
    max-width: 820px;
    margin: 46px auto 0;

    text-align: center;
}

.qeeg-ejemplos-cierre strong {
    display: block;
    margin-bottom: 12px;

    color: #0758df;
    font-size: 18px;
    letter-spacing: 0.4px;
}

.qeeg-ejemplos-cierre p {
    margin: 0;

    color: #526b83;
    font-size: 15px;
    line-height: 1.7;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .qeeg-ejemplo,
    .qeeg-ejemplo-inverso {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .qeeg-ejemplo-inverso .qeeg-ejemplo-imagen,
    .qeeg-ejemplo-inverso .qeeg-ejemplo-texto {
        order: initial;
    }

    .qeeg-ejemplo-imagen img {
        max-height: none;
    }

}

@media (max-width: 600px) {

    .qeeg-ejemplos {
        padding: 50px 18px;
    }

    .qeeg-ejemplos-encabezado h2 {
        font-size: 29px;
    }

    .qeeg-ejemplo {
        padding: 30px 0;
    }

    .qeeg-ejemplo-texto h3 {
        font-size: 21px;
    }

}



/* RESPONSIVE */

@media (max-width: 1000px) {

    .qeeg-usos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .qeeg-usos {
        padding: 48px 18px;
    }

    .qeeg-usos h2 {
        font-size: 29px;
    }

    .qeeg-usos-grid {
        grid-template-columns: 1fr;
    }

}



/* RESPONSIVE DEL BLOQUE */

@media (max-width: 900px) {

    .qeeg-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
	.qeeg-info-superior {
    grid-template-columns: 1fr;
    gap: 30px;
}

}

@media (max-width: 600px) {

    .qeeg-informacion {
        padding: 48px 18px;
    }

    .qeeg-informacion h2 {
        font-size: 29px;
    }

    .qeeg-info-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .qeeg-hero {
        padding: 50px 22px;
    }

    .qeeg-hero-contenido {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .qeeg-hero-texto {
        max-width: 700px;
        margin: 0 auto;
    }

    .qeeg-hero-imagen {
        max-width: 600px;
        margin: 0 auto;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 600px) {

    .qeeg-hero {
        padding: 40px 18px;
    }

    .qeeg-hero h1 {
        font-size: 32px;
    }

    .qeeg-hero p {
        font-size: 16px;
        line-height: 1.65;
    }



}