/* =========================================================
   NATURIVA BLOG
   CSS EXCLUSIVO DEL BLOG
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root{

    --verde-oscuro:#0b6b3a;

    --verde:#7fbf4d;

    --verde-claro:#a7d46b;

    --verde-suave:#eef7e8;

    --crema:#fbfdf8;

    --blanco:#ffffff;

    --texto:#314238;

    --gris:#718078;

    --sombra:
        0 20px 60px
        rgba(11,107,58,.10);

}


/* =========================================================
   RESET
========================================================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:
        'Poppins',
        sans-serif;

    color:var(--texto);

    background:var(--crema);

    overflow-x:hidden;

}


a{

    text-decoration:none;

    color:inherit;

}


button{

    font-family:inherit;

}


/* =========================================================
   HEADER
========================================================= */

.blog-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:92px;

    z-index:1000;

    background:
        rgba(255,255,255,.82);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid
        rgba(11,107,58,.08);

    transition:
        all .35s ease;

}


.blog-header-contenido{

    width:min(
        1200px,
        92%
    );

    height:100%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


/* =========================================================
   LOGO
========================================================= */

.blog-logo{

    display:flex;

    align-items:center;

}


.blog-logo img{

    width:115px;

    height:auto;

    display:block;

}


/* =========================================================
   NAV
========================================================= */

.blog-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:34px;

}


.blog-nav a{

    position:relative;

    color:var(--verde-oscuro);

    font-size:14px;

    font-weight:500;

    transition:
        color .25s ease;

}


.blog-nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            var(--verde-oscuro),
            var(--verde)
        );

    transition:
        width .3s ease;

}


.blog-nav a:hover{

    color:var(--verde);

}


.blog-nav a:hover::after{

    width:100%;

}


/* =========================================================
   VOLVER
========================================================= */

.blog-volver{

    display:flex;

    align-items:center;

    gap:8px;

    padding:
        10px 17px;

    border-radius:30px;

    color:var(--verde-oscuro);

    border:
        1px solid
        rgba(11,107,58,.15);

    background:
        rgba(255,255,255,.75);

    font-size:13px;

    transition:
        all .3s ease;

}


.blog-volver:hover{

    color:white;

    background:
        var(--verde-oscuro);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(11,107,58,.18);

}


/* =========================================================
   HERO
========================================================= */

.blog-hero{

    position:relative;

    min-height:
        720px;

    padding:
        170px 5% 110px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 15% 30%,
            rgba(167,212,107,.24),
            transparent 32%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(127,191,77,.18),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #ffffff,
            #f4faef
        );

}


/* decoración */

.blog-hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    right:-220px;

    top:-220px;

    border:
        1px solid
        rgba(127,191,77,.18);

}


.blog-hero::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    left:-150px;

    bottom:-150px;

    background:
        rgba(167,212,107,.10);

}


.blog-hero-contenido{

    position:relative;

    z-index:5;

    width:min(
        800px,
        100%
    );

}


.blog-etiqueta{

    display:inline-block;

    margin-bottom:18px;

    color:var(--verde-oscuro);

    font-size:12px;

    font-weight:600;

    letter-spacing:
        4px;

}


.blog-hero h1{

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(
            65px,
            9vw,
            120px
        );

    line-height:.85;

    font-weight:600;

    color:var(--verde-oscuro);

}


.blog-hero h1 span{

    display:block;

    color:var(--verde);

    font-style:italic;

}


.blog-hero p{

    max-width:650px;

    margin:
        35px auto 32px;

    color:var(--gris);

    font-size:
        clamp(
            15px,
            2vw,
            18px
        );

    line-height:1.8;

}


.blog-hero-boton{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:
        14px 25px;

    border-radius:40px;

    color:white;

    background:
        linear-gradient(
            135deg,
            var(--verde-oscuro),
            var(--verde)
        );

    font-size:14px;

    font-weight:500;

    box-shadow:
        0 12px 30px
        rgba(11,107,58,.20);

    transition:
        all .3s ease;

}


.blog-hero-boton:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 35px
        rgba(11,107,58,.25);

}


.blog-hero-boton i{

    transition:
        transform .3s ease;

}


.blog-hero-boton:hover i{

    transform:
        translateY(4px);

}


/* =========================================================
   HOJAS DECORATIVAS
========================================================= */

.blog-hoja{

    position:absolute;

    width:100px;

    height:55px;

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            rgba(127,191,77,.18),
            rgba(11,107,58,.08)
        );

    transform:
        rotate(-25deg);

}


.hoja-1{

    left:8%;

    top:25%;

}


.hoja-2{

    right:9%;

    top:32%;

    transform:
        rotate(155deg)
        scale(.7);

}


.hoja-3{

    right:18%;

    bottom:18%;

    transform:
        rotate(25deg)
        scale(.55);

}


/* =========================================================
   SECCIONES
========================================================= */

.blog-categorias,
.blog-articulos{

    padding:
        100px 5%;

}


.blog-seccion-cabecera{

    width:min(
        760px,
        100%
    );

    margin:
        0 auto 50px;

    text-align:center;

}


.blog-seccion-cabecera span{

    display:block;

    margin-bottom:10px;

    color:var(--verde);

    font-size:11px;

    font-weight:600;

    letter-spacing:3px;

}


.blog-seccion-cabecera h2{

    font-family:
        'Cormorant Garamond',
        serif;

    color:var(--verde-oscuro);

    font-size:
        clamp(
            38px,
            5vw,
            58px
        );

    line-height:1;

}


.blog-seccion-cabecera p{

    margin-top:16px;

    color:var(--gris);

    font-size:14px;

    line-height:1.7;

}


/* =========================================================
   CATEGORÍAS
========================================================= */

.blog-categorias{

    background:white;

}


.blog-categorias-lista{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

}


.blog-categoria{

    border:
        1px solid
        rgba(11,107,58,.14);

    background:white;

    color:var(--gris);

    padding:
        11px 20px;

    border-radius:30px;

    cursor:pointer;

    font-size:13px;

    transition:
        all .3s ease;

}


.blog-categoria:hover{

    color:var(--verde-oscuro);

    border-color:
        var(--verde);

    transform:
        translateY(-2px);

}


.blog-categoria.activo{

    color:white;

    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            var(--verde-oscuro),
            var(--verde)
        );

    box-shadow:
        0 8px 20px
        rgba(11,107,58,.18);

}


/* =========================================================
   GRID
========================================================= */

.blog-articulos{

    background:
        linear-gradient(
            180deg,
            #fbfdf8,
            #f2f8ed
        );

}


.blog-grid{

    width:min(
        1200px,
        100%
    );

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:28px;

}


/* =========================================================
   TARJETA
========================================================= */

.blog-card{

    background:white;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 12px 40px
        rgba(11,107,58,.08);

    border:
        1px solid
        rgba(11,107,58,.06);

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


.blog-card:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 60px
        rgba(11,107,58,.14);

}


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

.blog-card-imagen{

    position:relative;

    width:100%;

    aspect-ratio:
        16 / 10;

    overflow:hidden;

}


.blog-card-imagen img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .6s ease;

}


.blog-card:hover
.blog-card-imagen img{

    transform:
        scale(1.06);

}


.blog-card-placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        radial-gradient(
            circle at 30% 30%,
            rgba(167,212,107,.28),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #f2f9ec,
            #dfeeda
        );

}


.blog-card-placeholder i{

    font-size:42px;

    color:
        rgba(11,107,58,.25);

}


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

.blog-card-contenido{

    padding:
        25px 25px 28px;

}


.blog-card-categoria{

    color:var(--verde);

    font-size:10px;

    font-weight:600;

    letter-spacing:2px;

}


.blog-card h3{

    margin-top:10px;

    font-family:
        'Cormorant Garamond',
        serif;

    color:var(--verde-oscuro);

    font-size:28px;

    line-height:1.05;

}


.blog-card p{

    margin-top:13px;

    color:var(--gris);

    font-size:13px;

    line-height:1.7;

}


.blog-card-leer{

    display:inline-flex;

    align-items:center;

    gap:9px;

    margin-top:20px;

    color:var(--verde-oscuro);

    font-size:12px;

    font-weight:600;

}


.blog-card-leer i{

    transition:
        transform .25s ease;

}


.blog-card-leer:hover i{

    transform:
        translateX(5px);

}


/* =========================================================
   CTA
========================================================= */

.blog-cta{

    position:relative;

    padding:
        120px 5%;

    text-align:center;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(167,212,107,.20),
            transparent 45%
        ),

        var(--verde-oscuro);

}


.blog-cta-contenido{

    position:relative;

    z-index:2;

    width:min(
        700px,
        100%
    );

    margin:auto;

}


.blog-cta span{

    color:
        var(--verde-claro);

    font-size:11px;

    font-weight:600;

    letter-spacing:3px;

}


.blog-cta h2{

    margin-top:12px;

    font-family:
        'Cormorant Garamond',
        serif;

    color:white;

    font-size:
        clamp(
            40px,
            6vw,
            65px
        );

    line-height:1;

}


.blog-cta p{

    margin:
        22px auto 30px;

    max-width:540px;

    color:
        rgba(255,255,255,.72);

    font-size:14px;

    line-height:1.8;

}


.blog-cta-boton{

    display:inline-block;

    padding:
        13px 25px;

    border-radius:30px;

    color:var(--verde-oscuro);

    background:white;

    font-size:13px;

    font-weight:600;

    transition:
        all .3s ease;

}


.blog-cta-boton:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px
        rgba(0,0,0,.15);

}
/* =========================================================
   BOTÓN INICIO — SOLO CELULAR
========================================================= */

.blog-cta-inicio-mobile{
    display:none;
}

@media(max-width:768px){

    .blog-cta-inicio-mobile{
        display:flex !important;

        width:max-content;
        min-width:125px;

        height:auto;

        margin:12px auto 0 !important;

        padding:13px 25px;

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

        box-sizing:border-box;

        border-radius:30px;

        color:var(--verde-oscuro);
        background:#ffffff;

        font-family:'Poppins',sans-serif;
        font-size:13px;
        font-weight:600;

        line-height:1;

        text-align:center;
        text-decoration:none;

        border:0;

        box-shadow:
            0 8px 20px rgba(0,0,0,.10);

        transition:
            transform .3s ease,
            box-shadow .3s ease;
    }

    .blog-cta-inicio-mobile:hover{
        transform:translateY(-3px);

        box-shadow:
            0 12px 25px rgba(0,0,0,.15);
    }

}
/* =========================================================
   FOOTER
========================================================= */

.blog-footer{

    padding:
        25px 5%;

    text-align:center;

    background:
        #075b31;

    color:
        rgba(255,255,255,.60);

    font-size:11px;

}


/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes blogEntrada{

    from{

        opacity:0;

        transform:
            translateY(25px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


.blog-hero-contenido{

    animation:
        blogEntrada
        .9s ease both;

}


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

@media(max-width:900px){

    .blog-grid{

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .blog-nav{

        gap:18px;

    }

}


@media(max-width:768px){

    .blog-header{

        height:82px;

    }


    .blog-header-contenido{

        width:92%;

        gap:10px;

    }


    .blog-logo img{

        width:92px;

    }


    .blog-nav{

        display:none;

    }


    .blog-volver{

        padding:
            9px 13px;

        font-size:11px;

    }


    .blog-hero{

        min-height:
            650px;

        padding:
            145px 20px 80px;

    }


    .blog-hero h1{

        font-size:
            clamp(
                65px,
                20vw,
                95px
            );

    }


    .blog-hero p{

        margin-top:28px;

        font-size:14px;

    }


    .blog-categorias,
    .blog-articulos{

        padding:
            75px 20px;

    }


    .blog-seccion-cabecera{

        margin-bottom:35px;

    }


    .blog-seccion-cabecera h2{

        font-size:42px;

    }


    .blog-categorias-lista{

        gap:7px;

    }


    .blog-categoria{

        padding:
            9px 14px;

        font-size:11px;

    }


    .blog-grid{

        grid-template-columns:
            1fr;

        gap:22px;

    }


    .blog-card{

        border-radius:20px;

    }


    .blog-card-contenido{

        padding:
            22px;

    }


    .blog-card h3{

        font-size:27px;

    }


    .blog-cta{

        padding:
            90px 20px;

    }


    .hoja-1{

        left:-25px;

    }


    .hoja-2{

        right:-30px;

    }

}


/* =========================================================
   REDUCIR MOVIMIENTO
========================================================= */

@media(
    prefers-reduced-motion:
    reduce
){

    *{

        scroll-behavior:auto !important;

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;

    }

}
/* =========================================================
   NATURIVA — PÁGINA INTERNA DEL ARTÍCULO
========================================================= */

.articulo{

    background:
        #fbfdf8;

    padding-top:
        92px;

}


/* =========================================================
   HERO ARTÍCULO
========================================================= */

.articulo-hero{

    padding:
        110px 20px 70px;

    text-align:center;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(167,212,107,.18),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(127,191,77,.13),
            transparent 32%
        ),

        #f8fbf5;

}


.articulo-hero-contenido{

    width:
        min(
            900px,
            100%
        );

    margin:auto;

}


.articulo-categoria{

    color:
        var(--verde);

    font-size:11px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}


.articulo-hero h1{

    margin-top:18px;

    color:
        var(--verde-oscuro);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(
            48px,
            7vw,
            82px
        );

    line-height:.95;

}


.articulo-descripcion{

    width:
        min(
            700px,
            100%
        );

    margin:
        25px auto 0;

    color:
        var(--gris);

    font-size:
        15px;

    line-height:
        1.8;

}


.articulo-fecha{

    margin-top:0px;

    color:
        var(--gris);

    font-size:11px;

}


.articulo-fecha i{

    margin-right:5px;

    color:
        var(--verde);

}


/* =========================================================
   IMAGEN PRINCIPAL
========================================================= */

.articulo-imagen-principal{

    width:
        min(
            1000px,
            90%
        );

    margin:
        10px auto 0;

    border-radius:
        28px;

    overflow:hidden;

    background:
        #f4f8ef;

    box-shadow:
        0 20px 55px
        rgba(11,107,58,.10);

    display:flex;

    align-items:center;

    justify-content:center;

}


.articulo-imagen-principal img{

    width:100%;

    height:auto;

    max-height:420px;

    object-fit:contain;

}


/* =========================================================
   CONTENIDO
========================================================= */

.articulo-contenido{

    width:
        min(
            800px,
            90%
        );

    margin:
        80px auto;

}


.articulo-parrafo{
    
    text-align:
    justify;

    margin:
        0 0 30px;

    color:
        #42564b;

    font-size:
        17px;

    line-height:
        2;

    letter-spacing:
        .1px;

}


/* =========================================================
   MULTIMEDIA
========================================================= */

.articulo-media{

    width:100%;

    margin:
        45px 0;

}


.articulo-foto{

    border-radius:
        22px;

    overflow:hidden;

    box-shadow:
        0 18px 45px
        rgba(11,107,58,.10);

}


.articulo-foto img{

    width:100%;

    height:auto;

    display:block;

}


.articulo-video{

    overflow:hidden;

    border-radius:
        22px;

    background:
        #071f13;

    box-shadow:
        0 18px 45px
        rgba(11,107,58,.12);

}


.articulo-video video{

    width:100%;

    height:auto;

    display:block;

    max-height:
        650px;

}


/* =========================================================
   FINAL
========================================================= */

.articulo-final{

    padding:
        10px 20px 100px;

    text-align:center;

}


.articulo-volver{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:
        13px 23px;

    border-radius:
        30px;

    color:white;

    background:
        linear-gradient(
            135deg,
            var(--verde-oscuro),
            var(--verde)
        );

    font-size:12px;

    font-weight:600;

    box-shadow:
        0 10px 25px
        rgba(11,107,58,.18);

    transition:
        transform .25s ease;

}


.articulo-volver:hover{

    transform:
        translateY(-3px);

}


/* =========================================================
   PROGRESO DE LECTURA
========================================================= */

.articulo-progreso{

    position:fixed;

    top:0;
    left:0;

    width:0;

    height:3px;

    z-index:2000;

    background:
        linear-gradient(
            90deg,
            var(--verde-oscuro),
            var(--verde-claro)
        );

    transition:
        width .05s linear;

}


/* =========================================================
   MÓVIL
========================================================= */

@media(max-width:768px){

    .articulo{

        padding-top:
            82px;

    }


    .articulo-hero{

        padding:
            75px 20px 55px;

    }


    .articulo-hero h1{

        font-size:
            clamp(
                42px,
                13vw,
                62px
            );

        line-height:
            .98;

    }


    .articulo-descripcion{

        font-size:13px;

        line-height:1.7;

    }
    

.articulo-imagen-principal{

    width:
        94%;

    margin-top:
        5px;

    border-radius:
        18px;

    background:
        #f4f8ef;

}


    .articulo-imagen-principal img{

        max-height:
            480px;

    }


    .articulo-contenido{

        width:
            90%;

        margin:
            55px auto;

    }


    .articulo-parrafo{

        font-size:
            15px;

        line-height:
            1.9;

        margin-bottom:
            25px;

    }


    .articulo-media{

        margin:
            35px 0;

    }


    .articulo-foto,
    .articulo-video{

        border-radius:
            17px;

    }


    .articulo-final{

        padding:
            0 20px 70px;

    }

}
/* =========================================================
   FECHA Y VISTAS — TARJETAS DEL BLOG
========================================================= */

.blog-card-meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-top:18px;

    margin-bottom:13px;

    padding-top:12px;

    border-top:1px solid
        rgba(11,107,58,.10);

    font-family:
        'Poppins',
        sans-serif;

    font-size:10px;

    color:#718078;

}


.blog-card-meta span{

    display:inline-flex;

    align-items:center;

    gap:5px;

    white-space:nowrap;

}


.blog-card-meta i{

    color:#7fbf4d;

    font-size:10px;

}


.blog-card-vistas i{

    color:#0b6b3a;

}


.blog-card-leer{

    display:inline-flex;

    align-items:center;

    gap:8px;

}


/* =========================================================
   MÓVIL
========================================================= */

@media(max-width:768px){

    .blog-card-meta{

        gap:10px;

        margin-top:14px;

        margin-bottom:11px;

        padding-top:10px;

        font-size:9px;

    }


    .blog-card-meta i{

        font-size:9px;

    }

}
/* =========================================================
   NATURIVA — BOTÓN ME GUSTA
========================================================= */

.articulo-like-contenedor{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:25px auto 35px;

}


.articulo-like{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-width:155px;

    padding:12px 22px;

    border:1px solid rgba(
        11,
        107,
        58,
        .18
    );

    border-radius:40px;

    background:#ffffff;

    color:#0b6b3a;

    font-family:
        'Poppins',
        sans-serif;

    font-size:13px;

    font-weight:500;

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        color .25s ease;

    box-shadow:
        0 8px 25px
        rgba(
            11,
            107,
            58,
            .08
        );

}


.articulo-like:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(
            11,
            107,
            58,
            .14
        );

}


.articulo-like i{

    font-size:18px;

}


.articulo-like-contador{

    font-weight:600;

}


.articulo-like.activo{

    background:#0b6b3a;

    color:#ffffff;

    border-color:#0b6b3a;

}


.articulo-like.activo i{

    color:#ffffff;

}


@media(max-width:768px){

    .articulo-like{

        min-width:140px;

        padding:11px 19px;

        font-size:12px;

    }

}
/* =========================================================
   NATURIVA — ESPACIADO DE INFORMACIÓN DEL ARTÍCULO
========================================================= */

.articulo-meta{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:nowrap;

    column-gap:28px;

    row-gap:0;

    margin-top:22px;

    padding:0 15px;

    color:#718078;

    font-family:'Poppins', sans-serif;

    font-size:12px;

}


.articulo-meta span{

    display:inline-flex;

    align-items:center;

    gap:7px;

    white-space:nowrap;

}


.articulo-meta i{

    font-size:13px;

    color:#7fbf4d;

}


.articulo-vistas i{

    color:#0b6b3a;

}


.articulo-likes i{

    color:#7fbf4d;

}


/* =========================================================
   DESCRIPCIÓN DEL ARTÍCULO
========================================================= */

.articulo-descripcion{

    margin-top:18px;

    margin-bottom:4px;

}


/* =========================================================
   BOTÓN ME GUSTA
========================================================= */

.articulo-like-contenedor{

    margin-top:30px;

    margin-bottom:35px;

}


/* =========================================================
   MÓVIL
========================================================= */
@media(max-width:768px){

    .articulo-meta{

        column-gap:14px;

        row-gap:0;

        margin-top:20px;

        font-size:10px;

    }


    .articulo-meta span{

        gap:5px;

    }


    .articulo-meta i{

        font-size:11px;

    }


    .articulo-like-contenedor{

        margin-top:26px;

        margin-bottom:30px;

    }

}
/* =========================================================
   NATURIVA — REDES SOCIALES DEL ARTÍCULO
========================================================= */

.articulo-redes{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin:32px auto 42px;

    text-align:center;

}


.articulo-redes-titulo{

    font-family:
        'Poppins',
        sans-serif;

    font-size:13px;

    font-weight:500;

    color:#718078;

}


.articulo-redes-botones{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

}


.articulo-red{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:120px;

    padding:10px 17px;

    border:1px solid
        rgba(11,107,58,.15);

    border-radius:30px;

    background:#ffffff;

    color:#0b6b3a;

    text-decoration:none;

    font-family:
        'Poppins',
        sans-serif;

    font-size:12px;

    font-weight:500;

    box-shadow:
        0 6px 20px
        rgba(11,107,58,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.articulo-red i{

    font-size:15px;

}


.articulo-red:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(11,107,58,.12);

    background:#f8fcf5;

}


@media(max-width:768px){

    .articulo-redes{

        margin:
            28px auto
            36px;

        padding:
            0 18px;

    }


    .articulo-red-botones{

        gap:10px;

    }


    .articulo-red{

        min-width:110px;

        padding:
            9px 14px;

        font-size:11px;

    }

}
/* =========================================================
   NATURIVA — DISEÑO FINAL DE LA PÁGINA INTERNA DEL ARTÍCULO
   Editorial / Wellness / Natural
========================================================= */

.pagina-articulo{
    background:#fbfdf8;
    color:#314238;
}

.pagina-articulo .articulo{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(180deg,#f7fbf3 0%,#ffffff 34%,#fbfdf8 100%);
    padding-top:92px;
}

/* =========================================================
   HOJAS DECORATIVAS
========================================================= */

.pagina-articulo .articulo::before,
.pagina-articulo .articulo::after{
    content:"";
    position:absolute;
    top:90px;
    width:230px;
    height:410px;
    opacity:.24;
    pointer-events:none;
    z-index:0;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 430'%3E%3Cg fill='none' stroke='%237fbf4d' stroke-opacity='.55' stroke-width='2'%3E%3Cpath d='M25 400 C45 300 100 180 205 35'/%3E%3Cpath d='M55 315 C20 300 12 270 22 245 C50 250 68 270 55 315Z' fill='%237fbf4d' fill-opacity='.22'/%3E%3Cpath d='M88 250 C55 230 52 198 65 177 C95 185 108 212 88 250Z' fill='%237fbf4d' fill-opacity='.22'/%3E%3Cpath d='M125 185 C95 165 94 137 108 118 C137 130 146 153 125 185Z' fill='%237fbf4d' fill-opacity='.22'/%3E%3Cpath d='M160 125 C140 105 143 78 159 62 C184 76 185 101 160 125Z' fill='%237fbf4d' fill-opacity='.22'/%3E%3Cpath d='M72 355 C105 340 125 315 122 292 C92 300 73 321 72 355Z' fill='%237fbf4d' fill-opacity='.22'/%3E%3Cpath d='M110 285 C145 270 164 245 160 221 C130 230 112 251 110 285Z' fill='%237fbf4d' fill-opacity='.22'/%3E%3Cpath d='M145 215 C177 200 196 177 192 155 C164 162 147 184 145 215Z' fill='%237fbf4d' fill-opacity='.22'/%3E%3C/g%3E%3C/svg%3E");
}

.pagina-articulo .articulo::before{left:-42px;}
.pagina-articulo .articulo::after{right:-42px;transform:scaleX(-1);}

.pagina-articulo .articulo > *{
    position:relative;
    z-index:1;
}

/* =========================================================
   HERO DEL ARTÍCULO
========================================================= */

.pagina-articulo .articulo-hero{
    min-height:0;
    padding:72px 20px 34px;
    background:transparent;
    text-align:center;
}

.pagina-articulo .articulo-hero-contenido{
    width:min(900px,92%);
    margin:0 auto;
}

.pagina-articulo .articulo-categoria{
    display:inline-block;
    margin:0 0 13px;
    color:#7fbf4d;
    font-family:'Poppins',sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;
}

.pagina-articulo .articulo-hero h1{
    max-width:900px;
    margin:0 auto;
    color:#0b6b3a;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(54px,7vw,88px);
    font-weight:600;
    line-height:.94;
    letter-spacing:-.7px;
}

/* Descripción corta: centrada */
.pagina-articulo .articulo-descripcion{
    width:min(720px,100%);
    margin:22px auto 0;
    color:#52635a;
    font-family:'Poppins',sans-serif;
    font-size:15px;
    line-height:1.8;
    text-align:center;
}

/* =========================================================
   FECHA / VISTAS / ME GUSTA
========================================================= */

.pagina-articulo .articulo-meta{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:24px;
    margin:24px auto 0;
    padding:0 10px;
    color:#66766d;
    font-family:'Poppins',sans-serif;
    font-size:12px;
}

.pagina-articulo .articulo-meta span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    white-space:nowrap;
}

.pagina-articulo .articulo-meta i{color:#7fbf4d;}
.pagina-articulo .articulo-vistas i{color:#0b6b3a;}
.pagina-articulo .articulo-likes i{color:#7fbf4d;}

/* =========================================================
   BOTÓN ME GUSTA
========================================================= */

.pagina-articulo .articulo-like-contenedor{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:20px auto 20px;
}

.pagina-articulo .articulo-like{
    min-width:130px;
    padding:10px 22px;
    border:1px solid rgba(11,107,58,.16);
    border-radius:40px;
    background:#ffffff;
    color:#0b6b3a;
    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:500;
    box-shadow:0 8px 24px rgba(11,107,58,.08);
}

.pagina-articulo .articulo-like:hover{
    background:#0b6b3a;
    color:#ffffff;
}

.pagina-articulo .articulo-like.activo{
    background:#0b6b3a;
    color:#ffffff;
    border-color:#0b6b3a;
}

/* =========================================================
   REDES SOCIALES
========================================================= */

.pagina-articulo .articulo-redes{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:14px auto 0;
    text-align:center;
}

.pagina-articulo .articulo-redes-titulo{
    color:#66766d;
    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:500;
}

.pagina-articulo .articulo-redes-botones{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
}

.pagina-articulo .articulo-red{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:125px;
    padding:10px 18px;
    border:0;
    border-radius:30px;
    background:linear-gradient(135deg,#0b6b3a,#7fbf4d);
    color:#ffffff;
    font-family:'Poppins',sans-serif;
    font-size:11px;
    font-weight:500;
    box-shadow:0 8px 20px rgba(11,107,58,.13);
    transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}

.pagina-articulo .articulo-red:hover{
    transform:translateY(-2px);
    filter:brightness(1.04);
    box-shadow:0 12px 26px rgba(11,107,58,.18);
}

.pagina-articulo .articulo-red i{font-size:15px;}

/* =========================================================
   IMAGEN PRINCIPAL
========================================================= */

.pagina-articulo .articulo-imagen-principal{
    width:min(820px,88%);
    margin:42px auto 0;
    border-radius:24px;
    overflow:hidden;
    background:#f1f6eb;
    box-shadow:0 18px 48px rgba(11,107,58,.10);
}

.pagina-articulo .articulo-imagen-principal img{
    display:block;
    width:100%;
    height:auto;
    max-height:500px;
    object-fit:contain;
}

/* =========================================================
   CONTENIDO DEL ARTÍCULO
   Centrado respecto a la imagen
========================================================= */

.pagina-articulo .articulo-contenido{
    width:min(820px,88%);
    margin:58px auto 80px;
}

/* Párrafos: centrados como bloque y texto justificado */
.pagina-articulo .articulo-parrafo{
    width:100%;
    margin:0 0 32px;
    color:#394b41;
    font-family:'Poppins',sans-serif;
    font-size:17px;
    line-height:1.9;
    letter-spacing:.05px;
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
}

/* Sin letra gigante inicial: evita que aparezca una letra suelta */
.pagina-articulo .articulo-parrafo:first-child::first-letter{
    float:none;
    margin:0;
    color:inherit;
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
}

/* =========================================================
   IMÁGENES Y VIDEO DEL CONTENIDO
========================================================= */

.pagina-articulo .articulo-media{
    width:min(720px,100%);
    margin:46px auto;
}

.pagina-articulo .articulo-foto{
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 18px 45px rgba(11,107,58,.10);
}

.pagina-articulo .articulo-foto img{
    display:block;
    width:100%;
    height:auto;
    max-height:560px;
    object-fit:contain;
}

.pagina-articulo .articulo-video{
    width:min(760px,100%);
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    border-radius:20px;
    background:#071f13;
    box-shadow:0 18px 45px rgba(11,107,58,.12);
}

.pagina-articulo .articulo-video video{
    display:block;
    width:100%;
    height:auto;
    max-height:560px;
}

/* =========================================================
   BOTÓN FINAL
========================================================= */

.pagina-articulo .articulo-final{
    padding:10px 20px 90px;
    text-align:center;
}

.pagina-articulo .articulo-volver{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:12px 24px;
    border-radius:30px;
    color:#ffffff;
    background:linear-gradient(135deg,#0b6b3a,#7fbf4d);
    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:600;
    box-shadow:0 10px 25px rgba(11,107,58,.18);
    transition:transform .25s ease,box-shadow .25s ease;
}

.pagina-articulo .articulo-volver:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(11,107,58,.22);
}

/* =========================================================
   PROGRESO DE LECTURA
========================================================= */

.pagina-articulo .articulo-progreso{
    position:fixed;
    top:0;
    left:0;
    width:0;
    height:3px;
    z-index:2000;
    background:linear-gradient(90deg,#0b6b3a,#a7d46b);
    transition:width .05s linear;
}

/* =========================================================
   MÓVIL
========================================================= */

@media(max-width:768px){

    .pagina-articulo .articulo{
        padding-top:82px;
    }

    .pagina-articulo .articulo::before,
    .pagina-articulo .articulo::after{
        width:145px;
        height:290px;
        opacity:.17;
        top:75px;
    }

    .pagina-articulo .articulo::before{left:-58px;}
    .pagina-articulo .articulo::after{right:-58px;}

    .pagina-articulo .articulo-hero{
        padding:58px 18px 28px;
    }

    .pagina-articulo .articulo-categoria{
        margin-bottom:11px;
        font-size:10px;
        letter-spacing:3px;
    }

    .pagina-articulo .articulo-hero h1{
        font-size:clamp(45px,13vw,68px);
        line-height:.96;
    }

    .pagina-articulo .articulo-descripcion{
        width:94%;
        margin-top:18px;
        font-size:13px;
        line-height:1.75;
        text-align:center;
    }

    .pagina-articulo .articulo-meta{
        gap:12px 18px;
        margin-top:20px;
        font-size:10px;
    }

    .pagina-articulo .articulo-like-contenedor{
        margin:18px auto 18px;
    }

    .pagina-articulo .articulo-redes{
        margin-top:12px;
    }

    .pagina-articulo .articulo-redes-titulo{
        font-size:11px;
    }

    .pagina-articulo .articulo-redes-botones{
        gap:8px;
    }

    .pagina-articulo .articulo-red{
        min-width:105px;
        padding:9px 13px;
        font-size:10px;
    }

    .pagina-articulo .articulo-imagen-principal{
        width:92%;
        margin-top:32px;
        border-radius:19px;
    }

    .pagina-articulo .articulo-imagen-principal img{
        max-height:360px;
    }

    .pagina-articulo .articulo-contenido{
        width:88%;
        margin:44px auto 62px;
    }

    .pagina-articulo .articulo-parrafo{
        font-size:16px;
        line-height:1.85;
        margin-bottom:27px;
        text-align:justify;
    }

    .pagina-articulo .articulo-media{
        width:100%;
        margin:36px auto;
    }

    .pagina-articulo .articulo-foto,
    .pagina-articulo .articulo-video{
        border-radius:17px;
    }

    .pagina-articulo .articulo-foto img{
        max-height:420px;
    }

    .pagina-articulo .articulo-video video{
        max-height:420px;
    }

    .pagina-articulo .articulo-final{
        padding:0 20px 70px;
    }
}

/* =========================================================
   NATURIVA — REDISEÑO FINAL DEL ARTÍCULO
   Compatible aunque articulo.php tenga <body> sin clase
========================================================= */

body:has(.articulo){
    background:#fbfdf8;
}

.articulo{
    position:relative;
    overflow:hidden;
    padding-top:92px !important;
    background:
        linear-gradient(180deg,#f7fbf2 0%,#ffffff 34%,#fbfdf8 100%) !important;
}

/* Hojas laterales, suaves y discretas */
.articulo::before,
.articulo::after{
    content:"";
    position:absolute;
    top:125px;
    width:190px;
    height:430px;
    opacity:.34;
    pointer-events:none;
    z-index:0;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 430'%3E%3Cg fill='none' stroke='%237fbf4d' stroke-width='1.5' stroke-opacity='.32'%3E%3Cpath d='M22 410 C42 315 92 205 168 30'/%3E%3Cpath d='M50 325 C18 306 12 278 22 253 C51 260 66 285 50 325Z' fill='%237fbf4d' fill-opacity='.16'/%3E%3Cpath d='M79 263 C51 243 48 216 60 194 C87 201 101 228 79 263Z' fill='%237fbf4d' fill-opacity='.16'/%3E%3Cpath d='M109 201 C82 181 81 153 93 132 C119 141 131 168 109 201Z' fill='%237fbf4d' fill-opacity='.16'/%3E%3Cpath d='M139 140 C119 122 121 96 136 78 C158 90 160 114 139 140Z' fill='%237fbf4d' fill-opacity='.16'/%3E%3Cpath d='M65 367 C95 351 112 329 109 306 C82 313 66 335 65 367Z' fill='%237fbf4d' fill-opacity='.13'/%3E%3Cpath d='M95 302 C125 288 143 265 139 243 C113 250 97 273 95 302Z' fill='%237fbf4d' fill-opacity='.13'/%3E%3C/g%3E%3C/svg%3E");
}

.articulo::before{left:-38px;}
.articulo::after{right:-38px;transform:scaleX(-1);}

.articulo > *{position:relative;z-index:1;}

/* Cabecera editorial */
.articulo .articulo-hero{
    min-height:0 !important;
    padding:54px 20px 30px !important;
    background:transparent !important;
    text-align:center;
}

.articulo .articulo-hero-contenido{
    width:min(760px,92%);
    margin:0 auto;
}

.articulo .articulo-categoria{
    display:block;
    margin:0 0 10px;
    color:#7fbf4d;
    font-family:'Poppins',sans-serif;
    font-size:9px;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;
}

.articulo .articulo-hero h1{
    max-width:760px;
    margin:0 auto;
    color:#0b6b3a;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(48px,6.3vw,76px) !important;
    font-weight:600;
    line-height:.92;
    letter-spacing:-.5px;
}

.articulo .articulo-descripcion{
    width:min(650px,94%);
    margin:18px auto 0 !important;
    color:#68766f;
    font-family:'Poppins',sans-serif;
    font-size:12px;
    line-height:1.7;
    text-align:center !important;
}

.articulo .articulo-meta{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin:18px auto 0;
    color:#6b7770;
    font-family:'Poppins',sans-serif;
    font-size:10px;
}

.articulo .articulo-meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.articulo .articulo-meta i{color:#7fbf4d;}
.articulo .articulo-vistas i{color:#0b6b3a;}
.articulo .articulo-likes i{color:#7fbf4d;}

/* Like */
.articulo .articulo-like-contenedor{
    display:flex;
    justify-content:center;
    margin:18px auto 15px;
}

.articulo .articulo-like{
    min-width:112px;
    padding:8px 18px;
    border:1px solid rgba(11,107,58,.16);
    border-radius:28px;
    background:#fff;
    color:#0b6b3a;
    font-family:'Poppins',sans-serif;
    font-size:10px;
    box-shadow:0 6px 18px rgba(11,107,58,.07);
}

.articulo .articulo-like.activo{background:#0b6b3a;color:#fff;border-color:#0b6b3a;}

/* Redes */
.articulo .articulo-redes{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    margin:8px auto 0;
    text-align:center;
}

.articulo .articulo-redes-titulo{
    color:#7a847e;
    font-family:'Poppins',sans-serif;
    font-size:9px;
}

.articulo .articulo-redes-botones{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;}

.articulo .articulo-red{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:92px;
    padding:7px 12px;
    border:0;
    border-radius:20px;
    background:#e8f3df;
    color:#0b6b3a;
    font-family:'Poppins',sans-serif;
    font-size:9px;
    font-weight:500;
    box-shadow:0 4px 12px rgba(11,107,58,.06);
}

.articulo .articulo-red:hover{background:#dceccc;transform:translateY(-1px);}
.articulo .articulo-red i{font-size:12px;}

/* Imagen principal tipo portada editorial */
.articulo .articulo-imagen-principal{
    width:min(760px,84%);
    margin:34px auto 0 !important;
    border-radius:18px;
    overflow:hidden;
    background:#f0f6e9;
    box-shadow:0 14px 38px rgba(11,107,58,.10);
}

.articulo .articulo-imagen-principal img{
    display:block;
    width:100%;
    height:auto;
    max-height:410px !important;
    object-fit:cover;
}

/* Columna de lectura */
.articulo .articulo-contenido{
    width:min(760px,84%);
    margin:34px auto 65px !important;
}

.articulo .articulo-parrafo{
    width:100%;
    margin:0 0 27px;
    color:#3f5147;
    font-family:'Poppins',sans-serif;
    font-size:13px;
    line-height:1.85;
    letter-spacing:.01px;
    text-align:justify !important;
    text-justify:inter-word;
    hyphens:auto;
}

/* IMPORTANTE: sin letra gigante */
.articulo .articulo-parrafo:first-child::first-letter{
    float:none !important;
    margin:0 !important;
    color:inherit !important;
    font-family:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
}

/* Multimedia */
.articulo .articulo-media{
    width:min(610px,100%);
    margin:34px auto;
}

.articulo .articulo-foto{
    overflow:hidden;
    border-radius:16px;
    box-shadow:0 12px 32px rgba(11,107,58,.09);
}

.articulo .articulo-foto img{display:block;width:100%;height:auto;max-height:430px;object-fit:cover;}

.articulo .articulo-video{
    width:min(650px,100%);
    overflow:hidden;
    border-radius:16px;
    background:#071f13;
    box-shadow:0 12px 32px rgba(11,107,58,.11);
}

.articulo .articulo-video video{display:block;width:100%;height:auto;max-height:470px;}

.articulo .articulo-final{padding:5px 20px 70px;text-align:center;}

.articulo .articulo-volver{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 17px;
    border-radius:22px;
    color:#fff;
    background:linear-gradient(135deg,#0b6b3a,#7fbf4d);
    font-family:'Poppins',sans-serif;
    font-size:9px;
    font-weight:600;
    box-shadow:0 8px 20px rgba(11,107,58,.15);
}

@media(max-width:768px){
    .articulo{padding-top:82px !important;}
    .articulo::before,.articulo::after{width:115px;height:280px;opacity:.18;top:95px;}
    .articulo::before{left:-55px;}.articulo::after{right:-55px;}
    .articulo .articulo-hero{padding:42px 17px 25px !important;}
    .articulo .articulo-hero h1{font-size:clamp(42px,13vw,62px) !important;line-height:.95;}
    .articulo .articulo-descripcion{width:94%;font-size:12px;line-height:1.7;}
    .articulo .articulo-meta{gap:11px 15px;font-size:9px;}
    .articulo .articulo-redes-botones{gap:7px;}
    .articulo .articulo-red{min-width:86px;padding:7px 10px;font-size:9px;}
    .articulo .articulo-imagen-principal{width:92%;margin-top:27px !important;border-radius:15px;}
    .articulo .articulo-imagen-principal img{max-height:340px !important;}
    .articulo .articulo-contenido{width:88%;margin:35px auto 55px !important;}
    .articulo .articulo-parrafo{font-size:14px;line-height:1.85;text-align:justify !important;}
    .articulo .articulo-media{width:100%;margin:30px auto;}
    .articulo .articulo-foto,.articulo .articulo-video{border-radius:14px;}
}
/* =========================================================
   META DE TARJETAS — MÁS VISIBLE
========================================================= */

.blog-card-meta{
    font-size:12px;
    gap:16px;
    margin-top:18px;
    margin-bottom:14px;
    padding-top:13px;
}

.blog-card-meta span{
    gap:6px;
    font-weight:500;
}

.blog-card-meta i{
    font-size:12px;
}

.blog-card-fecha i{
    color:#7fbf4d;
}

.blog-card-vistas i{
    color:#0b6b3a;
}

.blog-card-likes i{
    color:#7fbf4d;
}


/* En celular */
@media(max-width:768px){

    .blog-card-meta{
        font-size:11px;
        gap:12px;
        margin-top:15px;
        margin-bottom:12px;
        padding-top:11px;
    }

    .blog-card-meta i{
        font-size:11px;
    }

}
/* =========================================================
   NATURIVA — HEADER + SELECTOR DE IDIOMA
   AJUSTE FINAL
========================================================= */


/* =========================================================
   HEADER
========================================================= */

.blog-header{
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:92px;

    z-index:1000;

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border-bottom:
        1px solid
        rgba(11,107,58,.08);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease,
        -webkit-backdrop-filter .35s ease;
}


/* =========================================================
   HEADER AL BAJAR
   MÁS TRANSPARENTE
========================================================= */

.blog-header.scrolled{

    background:rgba(255,255,255,.42) !important;

    backdrop-filter:blur(18px) saturate(120%);
    -webkit-backdrop-filter:blur(18px) saturate(120%);

    border-bottom-color:
        rgba(11,107,58,.055);

    box-shadow:
        0 5px 24px
        rgba(11,107,58,.045);
}


/* =========================================================
   LOGO
   NO SE SALE DEL HEADER
========================================================= */

.blog-logo{

    height:100%;

    display:flex;

    align-items:center;

    overflow:hidden;

    flex:0 0 auto;
}


.blog-logo img{

    width:115px;

    height:auto;

    max-height:82px;

    object-fit:contain;

    display:block;
}


/* =========================================================
   INICIO
========================================================= */

#inicio{

    scroll-margin-top:92px;
}

/* =========================================================
   NATURIVA — SELECTOR DE IDIOMA JUNTO AL LOGO
========================================================= */

.blog-idioma-header{

    display:flex;

    align-items:center;

    gap:5px;

    padding:4px 6px;

    margin-left:12px;

    border-radius:28px;

    background:rgba(255,255,255,.78);

    border:1px solid rgba(11,107,58,.10);

    box-shadow:
        0 5px 16px
        rgba(11,107,58,.06);

    flex:0 0 auto;

    transition:
        background .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* BOTONES ES / EN */

.blog-idioma-header .blog-idioma-opcion{

    appearance:none;
    -webkit-appearance:none;

    border:0;

    background:transparent;

    color:#63756b;

    min-height:34px;

    padding:6px 11px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    font-family:'Poppins',sans-serif;

    font-size:10px;

    font-weight:500;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


/* HOVER */

.blog-idioma-header .blog-idioma-opcion:hover{

    color:#0b6b3a;

    background:rgba(127,191,77,.10);

    transform:translateY(-1px);
}


/* ACTIVO */

.blog-idioma-header
.blog-idioma-opcion.activo{

    background:#0b6b3a;

    color:#fff;

    box-shadow:
        0 5px 13px
        rgba(11,107,58,.18);
}


/* HOJA */

.blog-idioma-header .blog-idioma-hoja{

    color:#7fbf4d;

    display:flex;

    align-items:center;

    font-size:10px;
}


.blog-idioma-header
.blog-idioma-opcion.activo
.blog-idioma-hoja{

    color:#a7d46b;
}


/* ES / EN */

.blog-idioma-header .blog-idioma-codigo{

    font-weight:600;

    letter-spacing:.2px;
}


/* SEPARADOR */

.blog-idioma-header
.blog-idioma-separador{

    color:rgba(11,107,58,.25);

    font-size:15px;
}


/* =========================================================
   HEADER AL HACER SCROLL
========================================================= */

.blog-header.scrolled
.blog-idioma-header{

    background:rgba(255,255,255,.48);

    border-color:
        rgba(11,107,58,.07);

    box-shadow:
        0 4px 13px
        rgba(11,107,58,.035);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);
}


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

@media(max-width:768px){

    .blog-header-contenido{

        gap:8px;
    }


    .blog-idioma-header{

        margin-left:4px;

        padding:3px 4px;

        gap:2px;
    }


    .blog-idioma-header
    .blog-idioma-opcion{

        min-height:30px;

        padding:5px 7px;

        font-size:8px;

        gap:3px;
    }


    .blog-idioma-header
    .blog-idioma-hoja{

        font-size:8px;
    }


    .blog-idioma-header
    .blog-idioma-separador{

        font-size:12px;
    }
}


/* =========================================================
   CELULAR MUY PEQUEÑO
========================================================= */

@media(max-width:400px){

    .blog-idioma-header
    .blog-idioma-opcion{

        padding:4px 5px;

        font-size:7px;
    }

}
/* =========================================================
   GOOGLE TRANSLATE — OCULTAR BARRA SUPERIOR
========================================================= */

.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate{
    display:none !important;
}

body{
    top:0 !important;
}

body > .skiptranslate{
    display:none !important;
}

.goog-te-gadget{
    display:none !important;
}

.goog-tooltip,
.goog-te-balloon-frame{
    display:none !important;
}
/* =========================================================
   NATURIVA — AJUSTES MÓVIL
========================================================= */

@media (max-width: 600px) {

    /* HEADER */
    .blog-header-contenido {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 14px;
        padding-right: 14px;
        gap: 8px;
    }

    .blog-logo {
        flex-shrink: 0;
    }

    .blog-logo img {
        max-width: 70px;
        height: auto;
    }

    .blog-idioma-header {
        flex-shrink: 1;
        min-width: 0;
    }

    .blog-nav {
        display: none;
    }

 .blog-volver {
    flex-shrink: 0 !important;
    white-space: nowrap !important;

    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;

    height: 30px !important;

    padding: 0 5px !important;
    gap: 3px !important;

    font-size: 9px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
}


    /* =====================================================
       TARJETAS
    ===================================================== */

    .blog-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .blog-card-contenido {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .blog-card-contenido p {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
        word-break: normal;
        display: block;
        width: 100%;
        max-width: 100%;
        line-height: 1.5;
    }

}