/*##########################################################################
Custom: 
    1.Agrega acá todos los estilos custom para el CMS
    2.Considere que estos estilos se carguen en layout.liquid.
############################################################################*/


.btn-light {
    color: blue;
    background-color: aqua;
    border-color: chartreuse;
}


/**********************************
    BLOG: CSS
***********************************/
.field-name-blog-post-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

/* Imagen de encabezado rectangular y responsive */
.field-name-blog-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem; /* bordes redondeados opcional */
    margin-bottom: 2rem;
}

.field-name-blog-image img {
    width: 100%;
    height: 350px; /* altura fija tipo banner */
    object-fit: cover; /* recorta sin deformar */
    display: block;
}

.card-img-top {
    height: 220px;
    object-fit: cover;
}

/*#region Blog post resumen view*/
  
.list-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */
    gap: 20px; /* espacio entre elementos */
    list-style: none;
    padding: 0;
    margin: 0;
}

/*Inicio estilos de cuadro*/

.list-group-item {
    background: #F1F1F1;
    border: none;
    border-radius: 8px;
    padding: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .list-group-item h2 {
        color: #0C3987;
        font-family: "Roboto";
        font-size: 20px;
    }


    .list-group-item span {
        color: #949494;
        font-family: "Poppins";
    }

    .list-group-item p {
        color: #000000;
        font-family: "Poppins";
        padding: 0px 0px 8px 0px;
        margin: 0px;
    }

    .list-group-item a:hover {
        color: #0C3987;
    }
    /*Fin estilos de cuadro*/


.content-blog-post img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

.content-blog-post h2 {
    font-size: 1.2rem;
    margin: 10px 0;
}

.content-blog-post a {
    text-decoration: none;
    color: #0077cc;
}

    .content-blog-post a:hover {
        text-decoration: underline;
    }

.field-name-blog-post-sub-titulo {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.4;
}

/*  Responsivo: 1 por fila en pantallas pequeñas */
@media (max-width: 768px) {
    .list-group {
        grid-template-columns: 1fr;
    }
}

.list-group-item .field-name-blog-post-imagen .name {
    display: none;
}

/*Ocultar el font-face-name d*/
.field-name-blog-image .name {
    display: none;
}
/*Ocultar el font-face-name d*/
.field-name-blog-post-imagen .name {
    display: none;
}
/*#endregion */








/* Contenedor de comentarios */
.comments-list {
    padding: 20px;
    background: transparent;
}

/* Cada comentario */
.comment-item {
    padding: 15px 5px;
    border-bottom: 1px solid #CAD4DF; /* línea gris-azulada igual a la imagen */
    margin-bottom: 15px;
}

/* Texto del comentario */
.comment-message {
    font-size: 0.95rem;
    color: #2F3A45; /* tono gris oscuro elegante */
    margin: 0 0 10px 0;
}

/* Nombre del autor alineado a la derecha */
.comment-author {
    font-size: 0.85rem;
    color: #6C7A86; /* gris medio */
    font-weight: 600;
    margin: 0;
    text-align: right !important;
}

/* Último comentario sin borde */
.comment-item:last-child {
    border-bottom: none;
}



/* Panel general (fondo gris claro, bordes suaves) */
.gti-comments-panel {
    background: #f4f6f9;
    border-radius: 16px;
    padding: 24px 28px;
    margin-top: 30px;
}

/* Etiquetas tipo azul oscuro */
.gti-label {
    color: #243E84;
    font-family: "Roboto";
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
}

/* Inputs del formulario */
.gti-comment-form .gti-input {
    background: #f3f5f8;
    border-radius: 150px;
    border: 1px solid #d4dde9;
    font-size: 0.9rem;
    padding: 0.55rem 1rem;
    color: #333;
}

    .gti-comment-form .gti-input:focus {
        outline: none;
        box-shadow: 0 0 0 0.15rem rgba(64,145,220,0.15);
        border-color: #a8b7d0;
    }

/* Textarea un poco más alto y con esquinas menos redondas */
.gti-input-comment {
    border-radius: 12px;
    min-height: 70px;
    resize: vertical;
}

/* Input de nombre en fila con botón */
.gti-name-row {
    gap: 8px;
}

.gti-input-name {
    flex: 1 1 auto;
}

/* Botón verde redondo con flecha */
.gti-submit-btn {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: #7cc625; /* verde similar al de la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    padding: 0;
}

    .gti-submit-btn:hover {
        background: #6ab11e;
    }

    /* Elimina estilos de btn bootstrap si los hubiera */
    .gti-submit-btn.btn {
        border: none;
        background: #7cc625;
    }

/* --- Lista de comentarios dentro del mismo recuadro --- */

.comments-list {
    margin-top: 10px;
}

/* Cada comentario: línea divisoria */
.comment-item {
    padding: 12px 4px;
    border-bottom: 1px solid #cad4df;
    margin-bottom: 8px;
}

/* Texto del comentario */
.comment-message {
    font-size: 0.95rem;
    color: #344154;
    margin: 0 0 6px 0;
}

/* Autor alineado a la derecha */
.comment-author {
    font-size: 0.85rem;
    color: #0C3987;
    font-weight: 600;
    margin: 0;
    text-align: right;
}

/* Quita el borde al último comentario */
.comment-item:last-child {
    border-bottom: none;
}



/* Botón redondo verde con sombra (idéntico a la imagen) */
.gti-submit-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #7cc625;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.15s ease-in-out;
}

    /* Hover */
    .gti-submit-btn:hover {
        background: #6ab11f;
        box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    }

    /* Icono centrado, color blanco */
    .gti-submit-btn i {
        font-size: 1.4rem;
        color: #ffffff;
    }

/*PAGER*/
.gti-pager-nav {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #cad4df;
}

/* ul.pagination */
.gti-pagination {
    margin-bottom: 0;
}

    /* li.page-item dentro del pager */
    .gti-pagination .page-item {
        margin: 0 3px;
    }

        /* enlace de la página */
        .gti-pagination .page-item .page-link {
            border-radius: 999px;
            min-width: 36px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            font-size: 0.9rem;
            font-weight: 600;
            color: #23324d;
            background: #e5ecf5;
            border: none;
            transition: all 0.15s ease-in-out;
        }

            /* hover */
            .gti-pagination .page-item .page-link:hover {
                background: #d5e0f0;
                color: #23324d;
            }

        /* página actual */
        .gti-pagination .page-item.active .page-link {
            background: #7cc625;
            color: #fff;
        }

        /* deshabilitados (cuando no hay prev/next) */
        .gti-pagination .page-item.disabled .page-link {
            opacity: 0.4;
            cursor: default;
        }



.field-name-blog-post-imagen-siguenos .name {
    display: none !important;
}



/*Inicio estilos*/

.tituloBlogLayout {
    font-family: "Roboto";
    color: #0C3987;
    margin: 0px;
    padding: 0px;
    font-size: 32px;
}

.inputBuscador {
    border-radius: 16px;
    background-color: #F1F1F1;
}

    .inputBuscador .botonBuscador {
        background-color: #dcdcdc;
        /*border-radius: 16px;*/
        border-end-end-radius: 0px;
        border-start-end-radius: 0px;
        border-end-start-radius: 16px;
        border-start-start-radius :16px;
        border: none;
        padding-right: 8px;
        padding-left: 8px;
        padding-top: 0px;
        padding-bottom:0px;
        width: 10%;
        margin: 0px;
        height: 40px;
        outline: none !important;
    }


        .inputBuscador .botonBuscador:hover {
            background-color: #0C3987;
        }

    .inputBuscador input {
        background-color: #F1F1F1;
        border-radius: 16px;
        border: none;
        padding-right: 16px;
        padding-left: 16px;
        padding-top: 0px;
        padding-bottom: 0px;
        width: 89%;
        margin: 0px;
        height: 40px;
        font-family: "Poppins";
        font-weight: 400;
        font-style: normal;
        outline: none !important;
    }

@media (max-width: 470px) {

    .inputBuscador .botonBuscador {
        width: 15%;
    }

    .inputBuscador input {
        width: 77%;
    }
}

@media (max-width:350px) {

    .inputBuscador .botonBuscador {
        width: 20%;
    }

    .inputBuscador input {
        width: 78%;
    }
}

.centrarContenido {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.centrarContenidoConGrid {
    display: grid;
    justify-content: center;
    align-items: center;
}

.centrarVertical {
    display: flex !important;
    align-items: center !important;
}

.centrarVerticalConGrid {
    display: grid;
    align-items: center !important;
}


.centrarFinal{
    display: grid;
    justify-content: flex-end;
}


.botonLeerMas {
    font-family: "Poppins";
    font-weight: 400;
    font-style: normal;
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #0C3987;
    padding-right: 16px;
    padding-left: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-decoration: none;
    color: #0C3987;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .botonLeerMas:hover {
        font-family: "Poppins";
        font-weight: 400;
        font-style: normal;
        background-color: #000000;
        border-radius: 16px;
        border: 1px solid #0C3987;
        padding-right: 16px;
        padding-left: 16px;
        padding-top: 4px;
        padding-bottom: 4px;
        text-decoration: none;
        color: #ffffff !important;
        font-size: 14px;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

    .botonPaginacion{
        background-color:orangered;
    }


.contenedorSuscribirse {
    background-color: #E7EBF3;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-right: 2%;
    padding-left: 2%;
}

        .contenedorSuscribirse h1 {
            font-family: "Roboto";
            font-weight: 500;
            font-style: normal;
            color: #0C3987;
            text-align:center;
            font-size: 30px;
            padding-top:8px;
        }

    .contenedorSuscribirse p {
        color: #0C3987;
        font-family: "Poppins";
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
    }

        .contenedorSuscribirse .botonSuscribirse {
            background-color: #0C3987;
            border-radius: 50px;
            padding: 8px;
            border: none;
            color:#ffffff;
        }

            .contenedorSuscribirse .botonSuscribirse:hover {
                background-color: #000000;
                color: #0C3987;
            }

        .contenedorSuscribirse .inputSuscribirse {
            min-height: 32px !important;
            height: 32px;
            border: none;
            font-family: "Roboto";
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #212229 !important;
            display: flex;
            align-items: center;
            line-height: normal !important;
            background-color: #ffffff;
            width: 100%;
            padding-right: 32px;
            padding-left: 32px;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            outline: none;
            border-radius: 40px;
            margin-right: 2%;
        }

.contenedorNav {
    background-color: #FFFFFF;
    border-bottom: 2px solid #F1F1F1;
}


.contenedorFooter {
    background-color: #212E55;
    padding-top: 4%;
    padding-bottom: 4%;
}

    .contenedorFooter h1 {
        font-family: "Roboto";
        font-weight: 500;
        font-style: normal;
        font-size:16px;
        color: #ffffff;
        margin:0px;
        padding-top:8px;
    }

    .contenedorFooter p, .contenedorFooter a {
        font-family: "Poppins";
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #ffffff !important;
        margin: 0px;
    }

    .contenedorFooter .footer_ul_amrc {
        margin: 0px;
        list-style-type: none;
        padding: 0px 0px 0px 0px;
    }

    .contenedorFooter li {
        padding-bottom:4px;
    }

    .contenedorFooter i {
        color: #84a62d !important;
    }

.botonRegresar {
    color: #243E84;
    font-family: "Roboto";
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
}

.contenedorDetalle {
}

.contenedorImagenBanner {
    height: 350px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom:16px;
}

    .contenedorImagenBanner img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ajusta y recorta */
        object-position: top;
    }

.contenedorDetalle h1 {
    color: #243E84;
    font-family: "Roboto";
    font-weight: 500;
    font-style: normal;
    font-size: 30px;
    color: #0C3987;
    margin: 0px;
    letter-spacing: -1px;
}

.contenedorDetalle span {
    font-family: "Poppins";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    margin: 0px;
    color: #243E84;
}


.contenedorDetalle p {
    font-family: "Poppins";
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #000000;
}

.contenedorDetalle li {
    font-family: "Poppins";
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #000000;
}
.contenedorDetalle .iconoAutor {
    color: #243E84;
    padding-right:8px;
}

.contenedorDetalle hr {
    border: none;
    border-top: 2px solid #0C3987;
    margin: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.contenedorDetalle .contenedorImagen {
    height: 500px;
    width:100%;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 16px;
}


    .contenedorDetalle .contenedorImagen img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ajusta y recorta */
        object-position: top;
    }

.contenedorDetalle .contenedorRedes {
    background-color: #E7EBF3;
    padding: 8%;
    border-radius: 16px;
}

    .contenedorDetalle .contenedorRedes a {
        padding-right: 4px;
        padding-left: 4px;
    }

    .contenedorDetalle .contenedorRedes svg {
        fill: #E7EBF3;
    }

        .contenedorDetalle .contenedorRedes svg:hover {
            fill: #0C3987;
            stroke: #E7EBF3;
        }

    .contenedorDetalle h3 {
    font-family: "Poppins";
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #0C3987;
    text-align:center;
}

.contenedorDetalle .contenedorComentarios {
    background: #f4f6f9;
    border-radius: 16px;
    padding: 24px 28px;
    margin-top: 30px;
}

    .contenedorDetalle .contenedorComentarios label {
        color: #243E84;
        font-family: "Roboto";
        font-weight: 500;
        font-style: normal;
        font-size: 16px;
    }

    .contenedorDetalle .contenedorComentarios textarea {
        color: #000000;
        font-family: Poppins;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        border-radius: 16px;
        line-height: 1;
        outline: none;
        height:100px;
    }

        .contenedorDetalle .contenedorComentarios textarea:focus {
            outline: none;
            box-shadow: none; 
            border-color: #ccc; 
        }

    .contenedorDetalle .contenedorComentarios input {
        color: #000000;
        font-family: Poppins;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        border-radius: 16px;
        line-height: 1;
        outline: none;
        height: 32px;
        display: block;
        width: 100%;
        padding: 0.375rem 0.75rem;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .contenedorDetalle .contenedorComentarios button {
        width:32px;
        height:32px;
    }
    .contenedorDetalle .contenedorComentarios i {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 16px;
    }
    .contenedorDetalle .contenedorComentarios h5 {
        color: #243E84;
        font-family: "Roboto";
        font-weight: 500;
        font-style: normal;
        font-size: 16px;
        margin:0px;
    }

    .contenedorDetalle .contenedorComentarios p{
        color: #000000;
        font-family: "Poppins";
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        margin: 0px;
    }

    .contenedorDetalle .contenedorComentarios h4 {
        color: #243E84;
        font-family: "Roboto";
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        margin: 0px;
    }


.pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 40px;
    margin-top:16px;
}

.pagination ul {
    padding-right: 12px;
    padding-left: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    margin: 0px;
    height:100%;
}


.pagination a {
    background-color: #F2F2F2;
    padding-right: 12px;
    padding-left: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 8px;
    border: 1px solid #0C3987;
    color: #0C3987;
    text-decoration: none;
    margin-right: 8px;
    margin-left: 8px;
}


    .pagination a:hover {
        background-color: #0C3987;
        color: #F2F2F2;
    }


  /*inicio contenedor recaptcha*/ 
 .g-recaptcha iframe {
    }

@media (max-width: 350px) {

    .g-recaptcha iframe {
        transform: scale(0.8);
    }
}

@media (max-width: 340px) {

    .g-recaptcha iframe {
        transform: scale(0.6);
    }
}
/*Fin contenedor recaptcha*/


.textoNoResultados {
    font-family: "Poppins";
    font-weight: 400;
    font-style: normal;
    padding-top: 16px;
}



.linkNavegador {
    color: #244060;
    font-family: "Roboto";
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    margin-left: 16px;
    line-height: 0.2;
}


.linkNavegadorActivo {
    color: #7FA841;
    font-family: "Roboto";
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    margin-left: 16px;
    line-height: 0.2;
}

    .linkNavegadorActivo:hover, .linkNavegador:hover {
        color: #7FA841;
    }



.dropdown {
    position: relative;
}



    .dropdown-content li {
        list-style-type: none;
        height:100%;
    }


    .dropdown-content li a{
       margin:0px;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

.contenedorUlNavegador {
    justify-content: flex-end;
}

.botonNavegador {
    background-color: #7FA841 !important;
    text-decoration: none;
    outline: none;
    border:none;
}

    .botonNavegador:hover, .botonNavegador:focus, .botonNavegador:active {
        background-color: #0C3987 !important;
        outline: none;
        border: none;
    }

                .contenedorOpcionesNavegador {
                    width: 100%;
                }


        .contenedorOpcionesNavegador nav {
            display: grid;
            align-items: center !important;
        }


            .contenedorOpcionesNavegador  nav ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex; 
                justify-content: center; 
            }

                .contenedorOpcionesNavegador nav ul li {
                    position: relative; 
                    padding: 0 8px;
                    border-left: 1px solid #7FA841;
                }

                    .contenedorOpcionesNavegador nav ul li a {
                        color: #244060;
                        font-family: "Roboto";
                        font-weight: 500;
                        font-style: normal;
                        font-size: 14px;
                        line-height: 0.2;
                    }

                    @media (max-width: 1100px) {
                        .contenedorOpcionesNavegador nav ul li a {
                            font-size: 12px;
                        }
                    }

                        @media (max-width: 992px) {
                            .contenedorOpcionesNavegador nav ul li a {
                                font-size: 14px;
                            }
                        }

                        .contenedorOpcionesNavegador nav ul li a:hover {
                            color: #7FA841;
                        }

                    .contenedorOpcionesNavegador nav ul li ul {
                        display: none;
                        position: absolute;
                        top: 100%;
                        left: 0;
                        background-color: white;
                        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
                        padding: 16px;
                        width: 200px;
                        z-index: 9999; 
                    }

                    .contenedorOpcionesNavegador  nav ul li:hover > ul {
                        display: block; 
                    }

                .contenedorOpcionesNavegador nav ul li ul li {
                    margin: 0;
                    border-bottom: 1px solid #7FA841;
                    padding-top: 4px;
                    padding-bottom: 4px;
                    border-left: none;
                }

                        .contenedorOpcionesNavegador nav ul li ul li a {
                            color: #244060;
                            font-family: "Roboto";
                            font-weight: 500;
                            font-style: normal;
                            font-size: 14px;
                            line-height: 0.2;
                        }

                            .contenedorOpcionesNavegador nav ul li ul li a:hover {
                                color: #7FA841;
                            }

                        .contenedorOpcionesNavegador nav ul li:has(ul) > a::after {
                            content: " ▼";
                            font-size: 0.8em;
                            margin-left: 5px;
                        }

                        .contenedorOpcionesNavegador nav ul li:has(ul):hover > a::after {
                            content: " ▲";
                        }


                        .contenedorOpcionesNavegador .list-group {
                            flex-direction: unset !important;
                            display: flex !important;
                            gap:0px !important;
                        }

                        @media (max-width: 992px) {
                            .contenedorOpcionesNavegador .list-group {
                                flex-direction: unset !important;
                                display: grid !important;
                            }
                        }

        /*Fin estilos*/