/* ==========================================================================
   blog-style.css - Versión Optimizada para Servicios IGT
   Nota: Este archivo asume que Bootstrap 5 y blog.master están cargados.
   ========================================================================== */

/* Contenedor de lectura: Estrecho para evitar fatiga visual */
.blog-content-area {
    max-width: 850px;
    margin: 40px auto;
    padding: 0 20px;
}

/* --- Títulos y Encabezados --- */
.post-title {
    color: var(--igt-blue);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
}

.post-meta {
    font-size: 0.9rem;
    color: #6c757d;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.post-bajada {
    font-size: 1.25rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 30px;
    font-weight: 400;
}

/* --- Cuerpo del Artículo (Contenido de la BD) --- */
.post-body {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #333;
}

    .post-body h2,
    .post-body h3 {
        color: var(--igt-blue);
        margin-top: 2rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }

    .post-body p {
        margin-bottom: 1.6rem;
    }

    /* Ajuste automático de imágenes dentro del contenido */
    .post-body img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 2rem 0;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }

    /* Listas con mejor espaciado */
    .post-body ul,
    .post-body ol {
        margin-bottom: 1.6rem;
        padding-left: 1.5rem;
    }

    .post-body li {
        margin-bottom: 0.5rem;
    }

/* --- Caja de Conversión Final --- */
.post-footer-cta {
    background-color: #f8f9fa;
    border-radius: 15px;
    padding: 40px;
    margin-top: 60px;
    text-align: center;
    border: 1px dashed #ced4da;
}

    .post-footer-cta h3 {
        color: var(--igt-blue);
        margin-bottom: 15px;
    }

/* --- Breadcrumbs (Migas de pan) --- */
.breadcrumb-item a {
    color: var(--igt-blue);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: #6c757d;
}

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #FFF !important; /* Forzamos el color blanco del icono */
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.3);
    z-index: 9999; /* Aumentamos el z-index para que esté sobre todo */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .whatsapp-float:hover {
        transform: scale(1.1);
        background-color: #128c7e;
    }


/* Contenedor de la imagen para asegurar uniformidad */
.card-img-container {
    width: 100%;
    /*height: 200px;  Altura fija para todas las miniaturas */
    height: 300px;
    overflow: hidden;
    background-color: #f8f9fa; /* Fondo gris claro por si la imagen tarda en cargar */
}

.card-img-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La magia: recorta y centra la imagen automáticamente */
    object-position: center; /* Asegura que el centro de la foto sea lo visible */
    transition: transform 0.3s ease; /* Opcional: efecto visual al pasar el mouse */
}

/* Efecto opcional para dar dinamismo */
.card:hover .card-img-thumb {
    transform: scale(1.05);
}


/* =========================================================
   Inglotec - Centro de Conocimiento
   Componentes editoriales igt-*
   Archivo sugerido: inglotec-editorial-components.css
   ========================================================= */

:root {
    --igt-color-text: #1f2933;
    --igt-color-muted: #5f6b7a;
    --igt-color-border: #d9e2ec;
    --igt-color-surface: #ffffff;
    --igt-color-primary: #1f5f8b;
    --igt-color-primary-soft: #eef6fb;
    --igt-color-evidence: #2f7d57;
    --igt-color-evidence-soft: #eef8f2;
    --igt-color-question: #a66a00;
    --igt-color-question-soft: #fff7e6;
    --igt-color-reflection: #536471;
    --igt-color-reflection-soft: #f3f6f8;
    --igt-color-observation: #7a4b8f;
    --igt-color-observation-soft: #f7f0fa;
    --igt-color-concept: #8a5a00;
    --igt-color-concept-soft: #fff4d6;
    --igt-color-example: #3f5f7f;
    --igt-color-example-soft: #eef4fa;
    --igt-color-principle: #234f3a;
    --igt-color-principle-soft: #edf7f1;
    --igt-radius-sm: 8px;
    --igt-radius-md: 12px;
    --igt-spacing-block: 2.4rem;
    --igt-spacing-inner: 1.35rem 1.55rem;
    --igt-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.06);
}

article {
    color: var(--igt-color-text);
}

    article p {
        line-height: 1.75;
    }

    article strong {
        font-weight: 700;
        color: var(--igt-color-primary);
    }

    article ul,
    article ol {
        margin: 1.2rem 0 1.6rem 1.5rem;
        padding-left: 1rem;
    }

    article li {
        margin: 0.55rem 0;
        line-height: 1.7;
    }

    article blockquote {
        margin: 2.5rem 0;
        padding: 1.6rem 1.9rem;
        border-left: 5px solid var(--igt-color-primary);
        background: var(--igt-color-primary-soft);
        border-radius: 0 var(--igt-radius-md) var(--igt-radius-md) 0;
        color: var(--igt-color-text);
        box-shadow: var(--igt-shadow-soft);
    }

        article blockquote p {
            margin: 0;
            font-size: 1.08rem;
            line-height: 1.75;
            font-style: italic;
        }

.igt-keyidea,
.igt-evidence,
.igt-question,
.igt-reflection,
.igt-observation,
.igt-concept,
.igt-example,
.igt-principle,
.igt-summary,
.igt-warning {
    margin: var(--igt-spacing-block) 0;
    padding: var(--igt-spacing-inner);
    border-radius: var(--igt-radius-md);
    border: 1px solid var(--igt-color-border);
    border-left-width: 6px;
    box-shadow: var(--igt-shadow-soft);
}

    .igt-keyidea h3,
    .igt-evidence h3,
    .igt-question h3,
    .igt-reflection h3,
    .igt-observation h3,
    .igt-concept h3,
    .igt-example h3,
    .igt-principle h3,
    .igt-summary h3,
    .igt-warning h3 {
        margin: 0 0 0.65rem 0;
        font-size: 0.92rem;
        line-height: 1.25;
        letter-spacing: 0.045em;
        text-transform: uppercase;
        font-weight: 800;
    }

    .igt-keyidea p,
    .igt-evidence p,
    .igt-question p,
    .igt-reflection p,
    .igt-observation p,
    .igt-concept p,
    .igt-example p,
    .igt-principle p,
    .igt-summary p,
    .igt-warning p {
        margin: 0;
    }

        .igt-keyidea p + p,
        .igt-evidence p + p,
        .igt-question p + p,
        .igt-reflection p + p,
        .igt-observation p + p,
        .igt-concept p + p,
        .igt-example p + p,
        .igt-principle p + p,
        .igt-summary p + p,
        .igt-warning p + p {
            margin-top: 0.9rem;
        }

.igt-keyidea {
    background: var(--igt-color-primary-soft);
    border-left-color: var(--igt-color-primary);
}

    .igt-keyidea h3 {
        color: var(--igt-color-primary);
    }

.igt-evidence {
    background: var(--igt-color-evidence-soft);
    border-left-color: var(--igt-color-evidence);
}

    .igt-evidence h3 {
        color: var(--igt-color-evidence);
    }

.igt-question {
    background: var(--igt-color-question-soft);
    border-left-color: var(--igt-color-question);
}

    .igt-question h3 {
        color: var(--igt-color-question);
    }

.igt-reflection {
    background: var(--igt-color-reflection-soft);
    border-left-color: var(--igt-color-reflection);
}

    .igt-reflection h3 {
        color: var(--igt-color-reflection);
    }

.igt-observation {
    background: var(--igt-color-observation-soft);
    border-left-color: var(--igt-color-observation);
}

    .igt-observation h3 {
        color: var(--igt-color-observation);
    }

.igt-concept {
    background: var(--igt-color-concept-soft);
    border-left-color: var(--igt-color-concept);
}

    .igt-concept h3 {
        color: var(--igt-color-concept);
    }

.igt-example {
    background: var(--igt-color-example-soft);
    border-left-color: var(--igt-color-example);
}

    .igt-example h3 {
        color: var(--igt-color-example);
    }

.igt-principle {
    background: var(--igt-color-principle-soft);
    border-left-color: var(--igt-color-principle);
}

    .igt-principle h3 {
        color: var(--igt-color-principle);
    }

.igt-summary {
    background: #f7f7f5;
    border-left-color: #6b7280;
}

    .igt-summary h3 {
        color: #4b5563;
    }

.igt-warning {
    background: #fff1f2;
    border-left-color: #be123c;
}

    .igt-warning h3 {
        color: #be123c;
    }

.igt-figure {
    margin: 2.8rem 0;
}

    .igt-figure img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--igt-radius-md);
        box-shadow: var(--igt-shadow-soft);
    }

    .igt-figure figcaption {
        margin-top: 0.75rem;
        color: var(--igt-color-muted);
        font-size: 0.92rem;
        line-height: 1.5;
    }

.igt-compact {
    padding: 1rem 1.2rem;
    margin: 1.6rem 0;
}

    .igt-compact h3 {
        margin-bottom: 0.4rem;
    }

/* ==========================================================
   Tabla Comparativa Editorial
   ========================================================== */

.igt-comparison {
    width: 100%;
    margin: 2.5rem 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid var(--igt-color-border);
    border-radius: var(--igt-radius-md);
    overflow: hidden;
    box-shadow: var(--igt-shadow-soft);
    font-size: 1rem;
    line-height: 1.7;
}

    /* ---------- Caption ---------- */

    .igt-comparison caption {
        caption-side: bottom;
        padding-top: .85rem;
        color: var(--igt-color-muted);
        font-size: .90rem;
        font-style: italic;
        text-align: left;
    }

    /* ---------- Cabecera ---------- */

    .igt-comparison thead th {
        background: #f6f9fc;
        color: var(--igt-color-primary);
        text-align: left;
        padding: 1rem 1.25rem;
        font-weight: 700;
        border-bottom: 1px solid var(--igt-color-border);
    }

        .igt-comparison thead th:first-child {
            width: 30%;
        }

    /* ---------- Filas ---------- */

    .igt-comparison tbody td {
        padding: 1rem 1.25rem;
        vertical-align: top;
        border-bottom: 1px solid #edf2f7;
    }

    .igt-comparison tbody tr:last-child td {
        border-bottom: none;
    }

    /* ---------- Zebra ---------- */

    .igt-comparison tbody tr:nth-child(even) {
        background: #fafbfd;
    }

    /* ---------- Hover ---------- */

    .igt-comparison tbody tr:hover {
        background: var(--igt-color-primary-soft);
        transition: background .18s ease;
    }

    /* ---------- Primera columna ---------- */

    .igt-comparison tbody td:first-child {
        font-weight: 700;
        color: var(--igt-color-primary);
        white-space: nowrap;
    }

    /* ---------- Negritas dentro de la tabla ---------- */

    .igt-comparison strong {
        color: inherit;
        font-weight: 700;
    }
/* ==========================================================
   BLOQUE FINAL DE CIERRE
   ========================================================== */

.igt-closing {
    max-width: 760px;
    margin: 5rem auto 2rem;
    padding-top: 2.5rem;
    border-top: 1px solid #d9dee5;
    color: #3f4752;
    font-size: 1.08rem;
    line-height: 1.9;
}

    .igt-closing p {
        margin: 1.4rem 0;
    }

        .igt-closing p:last-child {
            margin-bottom: 0;
        }

    .igt-closing blockquote {
        margin: 2.8rem auto;
        padding: 1.4rem 2rem;
        border-left: 4px solid #2f6fab;
        background: #f7f9fc;
        color: #2e3d4f;
        font-style: italic;
        border-radius: 8px;
    }

        .igt-closing blockquote p {
            margin: .5rem 0;
        }

    .igt-closing strong {
        color: #1d4f91;
        font-weight: 600;
    }

.hero-investigacion {
    margin: 48px 0 64px 0;
    text-align: center;
}

/*    .hero-investigacion img {
        display: block;
        width: 100%;
        max-width: 1200px;
        height: auto;
        margin: 0 auto;
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(0,0,0,.08);
    }*/
    .hero-investigacion img {
        display: block;
        width: 100%;
        max-width: 1200px;
        height: auto;
        margin: auto;
        border-radius: 0;
        box-shadow: none;
    }


/* ---------- Responsive ---------- */

@media (max-width:768px) {

    .igt-comparison {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    :root {
        --igt-spacing-block: 2rem;
        --igt-spacing-inner: 1.15rem 1.2rem;
    }

    article blockquote {
        padding: 1.25rem 1.35rem;
    }

    .igt-keyidea,
    .igt-evidence,
    .igt-question,
    .igt-reflection,
    .igt-observation,
    .igt-concept,
    .igt-example,
    .igt-principle,
    .igt-summary,
    .igt-warning {
        border-left-width: 5px;
    }
}


/* =========================================================
   CTA EXPLORACIÓN GUIADA
   ========================================================= */

.exploration-cta-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 51, 102, .14);
    border-radius: 22px;
    background: radial-gradient( circle at top right, rgba(255, 204, 0, .22), transparent 34% ), linear-gradient( 135deg, #f5f9fd 0%, #ffffff 72% );
    box-shadow: 0 16px 38px rgba(0, 51, 102, .08);
}

    .exploration-cta-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
        background: var(--igt-yellow);
    }

.exploration-cta-content {
    position: relative;
    z-index: 1;
    padding: 2.4rem 2.6rem;
}

.exploration-cta-label {
    color: var(--igt-blue);
}

.exploration-cta-title {
    max-width: 720px;
    margin-bottom: 1rem;
    color: var(--igt-blue);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.3;
}

.exploration-cta-description {
    max-width: 720px;
    margin-bottom: 1.6rem;
    color: #475467;
    font-size: 1.04rem;
    line-height: 1.75;
}

.exploration-cta-button {
    border: 2px solid var(--igt-blue);
    background: var(--igt-blue);
    color: #ffffff !important;
}

    .exploration-cta-button:hover,
    .exploration-cta-button:focus {
        border-color: #00264d;
        background: #00264d;
        color: #ffffff !important;
    }

.exploration-cta-support {
    color: #667085;
    font-size: .86rem;
    line-height: 1.55;
}

    .exploration-cta-support i {
        color: #287a52;
    }

@media (max-width: 768px) {

    .exploration-cta-content {
        padding: 2rem 1.5rem;
    }

    .exploration-cta-title {
        font-size: 1.5rem;
    }

    .exploration-cta-button {
        display: block;
        width: 100%;
        text-align: center;
    }
}