@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    letter-spacing: normal;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    font-family:'Montserrat',sans-serif;
    width:100%;
    overflow-x:hidden;
}

body.no-scroll{
    overflow:hidden;
}

html,
body{
    width:100%;
    overflow-x:hidden;
}


body{
    position:relative;
}

.blog-extra,
.blog-header,
.blog,

footer{
    overflow:hidden;
}












.hero-general{
    min-height: auto;
    height: auto;
    background:#ffffff;
    padding:40px 8%;
    padding-top:clamp(80px, 8vw, 120px);

}

.blog-title {
    text-align: center;
    color: #000;
    margin: 70px;
    font-size: 3.8rem;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
}

.blog-title span {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.blog-title span::before {
    content: "";
    position: absolute;

    top: 50%;
    left: -99.5vw;       /* sale desde el borde izquierdo de la pantalla */
    width: calc(100vw + 100%);
    height: 65px;

    background: #F2EE00;

    transform: translateY(-50%) scaleX(0);
    transform-origin: left;

    z-index: -1;
    transition: transform .7s ease;
}

.blog-title.animar span::before {
    transform: translateY(-50%) scaleX(1);
}

.blog-header{
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 70px;   /* baja el bloque */
    padding-bottom: 40px;
}

/* 🔥 TÍTULO PERFECTAMENTE CENTRADO EN LA PANTALLA */
.blog-title{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

/* 🔥 FILTRO A LA DERECHA SIN AFECTAR CENTRO */
.blog-filter{
  
    margin-left: auto;
}









.blog-filter{
    position: relative;
    display: inline-block;
}

/* 🔥 SELECT LIMPIO */
.blog-filter select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background: transparent;
    border: none;
    outline: none;

    padding: 10px 35px 10px 10px;

    font-family: inherit;
    font-size: 14px;
    cursor: pointer;

    width: 200px;          /* ancho fijo */
    max-width: 200px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    transition: all 0.25s ease;
}

/* 🔥 HOVER SUAVE */
.blog-filter select:hover{
    transform: translateY(-2px);
}

/* 🔥 FLECHA PERSONALIZADA */
.blog-filter::after{
    content: "▾";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    color: #333;

    transition: transform 0.3s ease;
}

/* 🔥 EFECTO AL INTERACTUAR */
.blog-filter select:focus + .blog-filter::after,
.blog-filter:focus-within::after{
    transform: translateY(-50%) rotate(180deg);
}
.blog-filter{
    margin-left: auto;
    transform: translateX(-110px); /* 👈 micro ajuste a la izquierda */
}





.container-blog{
    margin: 8vw;
}
.blog-lista{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px;
}




.blog-card{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    text-decoration: none;
    color: inherit;

    background: #F2ee00;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    transition: .25s ease;
}

.blog-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

/* IMAGEN */
.blog-img{
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.blog-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.blog-card:hover .blog-img img{
    transform: scale(1.05);
}

/* SOLO EL TEXTO EN AMARILLO */
.blog-body{
    background: #F2EE00;
    padding: 28px;
}

.blog-body h3{
    margin: 0 0 12px;
    color: #111;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.0;
    text-align: center; /* 👈 centrado */
}
.blog-body p{
    margin: 0;
    color: #111;
    font-size: .95rem;
    line-height: 1.2;
    text-align: justify;
    hyphens: auto;
}

.blog-detalle{
    margin-top: -100px;
}

.blog-header-detalle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;

    padding: 15px 0;
}

.blog-title-col{
    flex: 1;
}

.blog-title-split{
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* TEXTO */
.titulo-resaltado{
    position: relative;
    display: inline-block;
    font-weight: 800;
    color: #111;
    z-index: 1;
}

/* FRANJA FIJA (SIEMPRE VISIBLE) */
.titulo-resaltado::before{
    content: "";
    position: absolute;

    top: 50%;
    left: -99.5vw;
    width: calc(100vw + 100%);
    height: 130%;

    background: #F2EE00;

    transform: translateY(-50%);
    z-index: -1;
}


/* parte normal */
.titulo-normal{
    color: #000000;
    font-weight: 800;
}

/* =========================
   DERECHA: META INFO
========================= */
.blog-meta-col{
    flex: 0.6;
    display: flex;
    justify-content: flex-end;
}

.blog-meta{
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
    font-size: 0.95rem;
    color: #444;
}

.blog-meta span strong{
    color: #111;
}



@media(max-width:768px){

    body{
        overflow-x:hidden;
    }


    .hero-general{
        padding:30px 20px;
        padding-top:clamp(80px, 8vw, 120px);
    }



    /* ==========================
    TITULO BLOG
    ========================== */

    .blog-header{

        display:flex;
        flex-direction:column;
        align-items:center;

        padding-top:40px;
        padding-bottom:30px;

    }


    .blog-title{

        position:relative;

        left:auto;
        transform:none;

        width:100%;

        margin:40px 0;

        text-align:center;

        font-size:2.2rem !important; /* 🔥 tamaño letra */

    }


   .blog-title span{

    font-size:2.2rem !important;

    position:relative;

    display:inline-block;

}


/* 🔥 FRANJA FULL WIDTH SIN ANIMACIÓN */

.blog-title span::before{

    content:"";

    position:absolute;

    top:50%;

    left:calc(var(--lado-franja) * -1);

    width:calc(103% + var(--lado-franja));

    transform:translateY(-50%);

    transition:none;

}


.blog-title.animar span::before{

    transform:translateY(-50%);

}

  /* =========================
       SELECT
    ========================= */

    .blog-filter{

        width:100%;

        margin:20px 0;

        padding:0 20px;

        display:flex;

        justify-content:center;

        transform:none;
    }



    .blog-filter select{

        width:100%;

        max-width:320px;

        height:44px;

        padding:10px 40px 10px 15px;


        border-radius:12px;

        background:#fff;
    }



    .blog-filter::after{

        right:35px;
    }







    /* ==========================
       LISTA BLOG
    ========================== */

    .container-blog{

        margin:30px 20px;

    }


    .blog-lista{

        grid-template-columns:1fr;

        gap:30px;

    }



    /* ==========================
       CARD
    ========================== */

    .blog-img{

        height:240px;

    }


    .blog-body{

        padding:28px;

    }



    /* ==========================
       DETALLE BLOG
    ========================== */

    .blog-detalle{

        margin-top:0;

    }


    .blog-header-detalle{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }


    .blog-title-col{

        width:100%;

    }


    .blog-meta-col{

        width:100%;

        justify-content:flex-start;

    }


    .blog-meta{

        text-align:left;

    }



    /* 🔥 FRANJA DETALLE FULL WIDTH */

    .titulo-resaltado::before{

        content:"" !important;

        position:absolute !important;

        left:50% !important;

        top:50% !important;

        width:100vw !important;

        height:var(--alto-franja) !important;

        transform:translate(-50%,-50%) !important;

        background:#F2ee00 !important;

        z-index:-1 !important;

    }


}




@media(max-width:480px){


    .container-blog{

        margin:25px 15px;

    }


    .blog-body{

        padding:25px;

    }


    .blog-header{

        padding-top:20px;

    }


    .blog-title span::before{

        height:65px;

    }


    .titulo-resaltado::before{

        height:65px;

    }


}





.blog-meta-col{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* título arriba */
.blog-meta-title{
    position: relative;
    display: inline-block;
    font-size: 1rem;
    font-weight: 800;
    color: #111;
    letter-spacing: 1px;
    z-index: 1;
}

/* FRANJA QUE SALE POR LA DERECHA */
.blog-meta-title::before{
    content: "";
    position: absolute;

    top: 50%;
    right: -99.5vw;  /* 👈 sale fuera por la derecha */
    width: calc(100vw + 100%);
    height: 35px;

    background: #F2ee00;

    transform: translateY(-50%);
    z-index: -1;
}
.blog-meta span{
    display: inline-block;
    margin-top: 30px;
}


.blog-body-detalle{
    width: 100%;
    display: flex;
    justify-content: center;

    padding-top: 60px; /* 👈 separación arriba */
}

.blog-contenido-grid{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.blog-autor{
    display: flex;
    align-items: center;
    justify-content: center;  /* 👈 CENTRADO EN LA COLUMNA */
    gap: 15px;

    width: 100%;
    padding: 15px 10px;
    margin-bottom: 25px;

    border-bottom: 1px solid #ddd;
}

/* imagen MÁS GRANDE */
.blog-autor img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;

    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* texto */
.autor-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* nombre más grande */
.autor-nombre{
    margin: 0;
    font-size: 1.1rem;
    color: #666;

    
}

/* cargo más legible */
.autor-cargo{
   

    font-weight: 700;
    margin: 0px 0 0; 
    font-size: 1.2rem;
    color: #111;
}

/* TEXTO */
.col p{
    line-height: 1.8;
    text-align: justify;
}
.blog-galeria{
    position: relative;
    width: 100%;

    /* 👇 altura automática según imágenes */
    min-height: 700px;
}

.blog-galeria{
    position: relative;
    width: 100%;

    /* 👇 altura suficiente para el stack */
    height: 700px;

    margin-top: 15px;
}

/* ===================== */
/* IMÁGENES STACK */
/* ===================== */
.blog-galeria img{
    position: absolute;
    width: 100%;

    height: 650px;          /* 👈 control real */
    object-fit: cover;      /* 👈 NO corta feo */
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);

    transition: transform .3s ease, z-index .3s ease;
}

/* ===================== */
/* 1ERA IMAGEN (FRONTAL) */
/* ===================== */
.blog-galeria img:nth-child(1){
    top: 0;
    left: 0;
    z-index: 3;
}

/* ===================== */
/* 2DA IMAGEN */
/* ===================== */
.blog-galeria img:nth-child(2){
    top: 25px;
    left: 12px;
    z-index: 2;
    transform: scale(0.97);
    opacity: 0.95;
}

/* ===================== */
/* 3RA IMAGEN */
/* ===================== */
.blog-galeria img:nth-child(3){
    top: 50px;
    left: 24px;
    z-index: 1;
    transform: scale(0.94);
    opacity: 0.85;
}

/* ===================== */
/* HOVER */
/* ===================== */
.blog-galeria img:hover{
    z-index: 10;
    transform: scale(1.05);
}














/* =========================
   AJUSTES BLOG DETALLE MOVIL
========================= */

@media(max-width:768px){


    /* FRANJA META MAS ALTA */
    .blog-meta-title::before{

        height:20px;

    }



    /* CONTENEDOR AUTOR CENTRADO */
    .blog-autor{

        justify-content:center;

        align-items:center;

        text-align:center;

        width:100%;

    }



    .autor-info{

        align-items:flex-start;

        text-align:left;

    }



    /* TEXTO EN UNA SOLA COLUMNA */
    .blog-contenido-grid{

        display:flex;

        flex-direction:column;

        gap:35px;

    }


    .col{

        width:100%;

    }


    .col p{

        width:100%;

        font-size:1rem;

        line-height:1.8;

        text-align:justify;

    }



    /* GALERIA MAS ALTA */
    .blog-galeria{

        height:520px;

        min-height:520px;

    }



    .blog-galeria img{

        height:480px;

    }

}





/* =========================
   CELULARES PEQUEÑOS
========================= */

@media(max-width:420px){


    .blog-meta-title::before{

        height:30px;

    }



    .blog-autor{

        justify-content:center;

    }

    .titulo-resaltado::before{

        height:85px;

    }



    .blog-galeria{

        height:430px;

        min-height:430px;

    }



    .blog-galeria img{

        height:400px;

    }



    .col p{

        font-size:.95rem;

        line-height:1.7;

    }

}


.d-none{
    display: none;
}
/* =========================
   SECCIÓN
========================= */
.blog-extra{
    width: 100%;
    margin-top: 90px;
    background: #E8EFEE;
    padding: 60px 0 80px;
}

/* =========================
   CONTENEDOR
========================= */
.container-extra{
    position: relative;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

.container-extra h2{
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    position: relative;

    margin: 0;
    text-align: center;

    font-size: 2rem;
    font-weight: 800;
    color: #111;

    background: #F2EE00;
    padding: 18px 0;
}

/* =========================
   SLIDER (MÁRGENES BIEN HECHOS)
========================= */
.blog-slider{
    position: relative;
    width: 100%;
    max-width: 1350px;

    margin: 25px auto 0 auto;

    padding: 0 100px; /* 👈 IGUALA izquierda y derecha */
    box-sizing: border-box;
}

/* =========================
   WRAPPER
========================= */
.slider-wrapper{
    overflow: hidden;
    width: 100%;
}

/* =========================
   TRACK
========================= */
.blog-extras{
    display: flex;
    flex-wrap: nowrap;
    gap: 28px; /* 👈 un poco más aire */

    transition: transform .45s ease;
    will-change: transform;
}

/* =========================
   CARD (MÁS GRANDE)
========================= */
.blog-card-extras{
    flex: 0 0 360px; /* 👈 MÁS CANCHA */

    background: #F2ee00;
    border-radius: 18px;
    overflow: hidden;

    box-shadow: 0 8px 22px rgba(0,0,0,.08);
    text-decoration: none;
    color: inherit;

    transition: .3s;
}

.blog-card-extras:hover{
    transform: translateY(-6px);
}

/* =========================
   IMAGEN (MÁS GRANDE)
========================= */
.blog-img-extras{
    width: 100%;
    height: 270px; /* 👈 más alto */
    overflow: hidden;
}

.blog-img-extras img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: .4s;
}

.blog-card-extras:hover .blog-img-extras img{
    transform: scale(1.05);
}

.blog-sin-imagen-extras{
    width: 100%;
    height: 270px;

    background: #f7f7f7;

    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-sin-imagen-extras i{
    font-size: 45px;
    color: #ccc;
}

/* =========================
   BODY
========================= */
.blog-body-extras{
    padding: 22px; /* 👈 más aire */
    background: #F2EE00;
}

.blog-body-extras h3{
    margin: 0 0 10px;
    color: #111;
    font-size: 1.25rem; /* 👈 más grande */
    font-weight: 800;
    text-align: center;
    line-height: 1.3;
}

.blog-body-extras p{
    margin: 0;
    color: #555;
    font-size: 0.95rem; /* 👈 más legible */
    line-height: 1.35;
    text-align: justify;
}

/* =========================
   BOTONES
========================= */
.slider-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 44px;
    height: 44px;

    border: none;
    border-radius: 50%;

    background: #F2EE00;
    color: #111;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 10;
}

.slider-btn.prev{
    left: 50px;
}

.slider-btn.next{
    right: 50px;
}

/* =========================
   PUNTOS
========================= */
.slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}

/* PUNTO BASE (NEGRO NO SE TOCA) */
.slider-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all .3s ease;
}

/* CÍRCULO NEGRO */
.slider-dots span::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000;
    transition: all .3s ease;
}


/* =========================
   PUNTOS
========================= */
.slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}

/* PUNTO BASE */
.slider-dots span {
    width: 25px;   /* 👈 SIEMPRE 18px */
    height: 25px;
    border-radius: 50%;

    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

/* CÍRCULO INTERNO (SIEMPRE PEQUEÑO) */
.slider-dots span::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000;
}

/* ACTIVO = BORDE AMARILLO */
.slider-dots span.active {
    border: 2px solid #F2EE00;
    background: #F2EE00;
}

/* ACTIVO = CÍRCULO INTERNO BLANCO */
.slider-dots span.active::before {
    background: #fff;
}




/* =========================
   RESPONSIVE CARDS BLOG EXTRA
========================= */

@media(max-width:768px){


    /* SLIDER */
    .blog-slider{

        padding:0 45px;

        margin-top:35px;

    }



    .blog-extras{

        gap:20px;

    }

    

    /* CARD CENTRADA */
    .blog-card-extras{

        flex:0 0 100%;

        max-width:300px;

        margin:0 auto;

    }



    /* IMAGEN */
    .blog-img-extras{

        height:240px;

    }



    .blog-sin-imagen-extras{

        height:240px;

    }



    /* CONTENIDO */
    .blog-body-extras{

        padding:18px;

    }



    .blog-body-extras h3{

        font-size:1.2rem;

    }



    .blog-body-extras p{

        font-size:.9rem;

        line-height:1.4;

    }



    /* FLECHAS */
    .slider-btn{

        width:34px;

        height:34px;

    }



    .slider-btn.prev{

        left:8px;

    }



    .slider-btn.next{

        right:8px;

    }

}





@media(max-width:420px){


    .blog-slider{

        padding:0 35px;

    }



    .blog-card-extras{

        max-width:280px;

    }



    .blog-img-extras,
    .blog-sin-imagen-extras{

        height:220px;

    }



    .blog-body-extras h3{

        font-size:1.1rem;

    }



    .blog-body-extras p{

        font-size:.85rem;

    }

}

/*==========================
    COMPARTIR BLOG
==========================*/

.blog-compartir{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:15px;
    margin-top:35px;
}

.blog-compartir span{
    font-size:17px;
    font-weight:700;
    color:#111;
    margin-right:5px;
}

.blog-compartir a{
    color:#111;
    font-size:22px;
    text-decoration:none;
    transition:.3s ease;
}

.blog-compartir a:hover{
    color:#F2EE00;
    transform:translateY(-2px);
}


/*==========================
    RESPONSIVE
==========================*/

@media(max-width:768px){

    .blog-compartir{
        justify-content:center;
        margin-top:30px;
        gap:12px;
    }

    .blog-compartir span{
        font-size:16px;
    }

    .blog-compartir a{
        font-size:20px;
    }

}

.titulo-normal {

    z-index:2;

}