/* =========================================================
   NATURIVA — ARTÍCULO
   articulo.css
   CSS EXCLUSIVO PARA articulo.php
   NO AFECTA index.php NI blog.css
========================================================= */

/* =========================================================
   1. VARIABLES Y BASE
========================================================= */

:root{
    --nat-verde-oscuro:#075f36;
    --nat-verde:#0b6b3a;
    --nat-verde-medio:#6fae4d;
    --nat-verde-claro:#a9d577;
    --nat-verde-suave:#edf5e4;
    --nat-verde-suave-2:#f5f9ef;
    --nat-crema:#fbfdf9;
    --nat-texto:#304038;
    --nat-texto-suave:#748078;
    --nat-linea:rgba(7,95,54,.14);
    --nat-blanco:#ffffff;
    --nat-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    --nat-sans:"Poppins",Arial,sans-serif;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body.pagina-articulo{
    margin:0;
    min-height:100vh;
    background:#fff;
    color:var(--nat-texto);
    font-family:var(--nat-sans);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

body.pagina-articulo a{
    color:inherit;
    text-decoration:none;
}

body.pagina-articulo img{
    max-width:100%;
}

body.pagina-articulo button{
    font-family:inherit;
}

body.pagina-articulo ::selection{
    color:#fff;
    background:var(--nat-verde);
}

/* =========================================================
   2. HEADER
========================================================= */

body.pagina-articulo .blog-header{
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    height:94px;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(7,95,54,.07);
    box-shadow:0 2px 18px rgba(7,95,54,.025);
}

body.pagina-articulo .blog-header-contenido{
    width:min(1210px,92%);
    height:100%;
    margin:0 auto;
    display:grid;
    grid-template-columns:210px 1fr 210px;
    align-items:center;
    column-gap:28px;
}

body.pagina-articulo .blog-logo{
    width:max-content;
    height:94px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

body.pagina-articulo .blog-logo img{
    display:block;
    width:128px;
    height:auto;
    max-height:86px;
    object-fit:contain;
}

body.pagina-articulo .blog-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:43px;
}

body.pagina-articulo .blog-nav a{
    position:relative;
    color:var(--nat-verde-oscuro);
    font-family:var(--nat-sans);
    font-size:15px;
    font-weight:500;
    white-space:nowrap;
    transition:color .25s ease;
}

body.pagina-articulo .blog-nav a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-9px;
    width:0;
    height:1.5px;
    border-radius:10px;
    background:var(--nat-verde-medio);
    transform:translateX(-50%);
    transition:width .25s ease;
}

body.pagina-articulo .blog-nav a:hover{
    color:var(--nat-verde-medio);
}

body.pagina-articulo .blog-nav a:hover::after{
    width:24px;
}

body.pagina-articulo .blog-volver{
    justify-self:end;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:142px;
    padding:12px 20px;
    border:1px solid rgba(7,95,54,.17);
    border-radius:999px;
    background:#fff;
    color:var(--nat-verde-oscuro);
    font-size:12px;
    font-weight:600;
    box-shadow:0 6px 20px rgba(7,95,54,.06);
    transition:all .25s ease;
}

body.pagina-articulo .blog-volver i{
    font-size:9px;
}

body.pagina-articulo .blog-volver:hover{
    background:var(--nat-verde-suave);
    border-color:rgba(7,95,54,.28);
    transform:translateY(-1px);
}

/* =========================================================
   3. ARTÍCULO — FONDO
========================================================= */

body.pagina-articulo .articulo{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
    isolation:isolate;
    padding:0 0 0;
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(175,211,132,.30) 0%,
            rgba(214,232,193,.18) 21%,
            rgba(248,251,244,0) 48%
        ),
        linear-gradient(
            180deg,
            #f1f7e9 0,
            #f7faf3 260px,
            #ffffff 590px,
            #ffffff 100%
        );
}

/* =========================================================
   4. RAMAS / HOJAS BOTÁNICAS
   Grandes, visibles y suaves.
   Se animan una sola vez al entrar en la página.
========================================================= */

body.pagina-articulo .articulo::before,
body.pagina-articulo .articulo::after{
    content:"";
    position:absolute;
    z-index:0;
    top:34px;
    width:330px;
    height:700px;
    pointer-events:none;
    background-repeat:no-repeat;
    background-size:100% 100%;
    opacity:.80;
    filter:drop-shadow(0 10px 18px rgba(78,132,54,.08));
}

body.pagina-articulo .articulo::before{
    left:-18px;
    transform-origin:left bottom;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 700'%3E%3Cg fill='none' stroke='%2378a95d' stroke-width='2.3' opacity='.70'%3E%3Cpath d='M55 680 C55 565 82 447 123 346 C158 259 184 151 163 28'/%3E%3Cpath d='M83 530 C48 493 27 447 22 390'/%3E%3Cpath d='M102 460 C151 426 176 384 188 334'/%3E%3Cpath d='M121 376 C77 349 52 310 48 260'/%3E%3Cpath d='M143 293 C190 260 213 214 215 161'/%3E%3Cpath d='M75 595 C111 574 135 542 149 506'/%3E%3C/g%3E%3Cg fill='%23a8d47d' opacity='.68'%3E%3Cellipse cx='32' cy='386' rx='31' ry='72' transform='rotate(-40 32 386)'/%3E%3Cellipse cx='66' cy='486' rx='30' ry='69' transform='rotate(-55 66 486)'/%3E%3Cellipse cx='59' cy='295' rx='28' ry='65' transform='rotate(-47 59 295)'/%3E%3Cellipse cx='105' cy='427' rx='32' ry='72' transform='rotate(48 105 427)'/%3E%3Cellipse cx='112' cy='235' rx='28' ry='65' transform='rotate(-42 112 235)'/%3E%3Cellipse cx='164' cy='326' rx='30' ry='69' transform='rotate(46 164 326)'/%3E%3Cellipse cx='153' cy='151' rx='27' ry='62' transform='rotate(-30 153 151)'/%3E%3Cellipse cx='52' cy='575' rx='29' ry='66' transform='rotate(-62 52 575)'/%3E%3C/g%3E%3Cg fill='%2396c46d' opacity='.38'%3E%3Cellipse cx='22' cy='522' rx='20' ry='47' transform='rotate(-65 22 522)'/%3E%3Cellipse cx='154' cy='451' rx='21' ry='49' transform='rotate(52 154 451)'/%3E%3Cellipse cx='198' cy='214' rx='20' ry='47' transform='rotate(50 198 214)'/%3E%3Cellipse cx='105' cy='105' rx='18' ry='43' transform='rotate(-31 105 105)'/%3E%3C/g%3E%3C/svg%3E");
}

body.pagina-articulo .articulo::after{
    right:-18px;
    transform:scaleX(-1);
    transform-origin:right bottom;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 700'%3E%3Cg fill='none' stroke='%2378a95d' stroke-width='2.3' opacity='.70'%3E%3Cpath d='M55 680 C55 565 82 447 123 346 C158 259 184 151 163 28'/%3E%3Cpath d='M83 530 C48 493 27 447 22 390'/%3E%3Cpath d='M102 460 C151 426 176 384 188 334'/%3E%3Cpath d='M121 376 C77 349 52 310 48 260'/%3E%3Cpath d='M143 293 C190 260 213 214 215 161'/%3E%3Cpath d='M75 595 C111 574 135 542 149 506'/%3E%3C/g%3E%3Cg fill='%23a8d47d' opacity='.68'%3E%3Cellipse cx='32' cy='386' rx='31' ry='72' transform='rotate(-40 32 386)'/%3E%3Cellipse cx='66' cy='486' rx='30' ry='69' transform='rotate(-55 66 486)'/%3E%3Cellipse cx='59' cy='295' rx='28' ry='65' transform='rotate(-47 59 295)'/%3E%3Cellipse cx='105' cy='427' rx='32' ry='72' transform='rotate(48 105 427)'/%3E%3Cellipse cx='112' cy='235' rx='28' ry='65' transform='rotate(-42 112 235)'/%3E%3Cellipse cx='164' cy='326' rx='30' ry='69' transform='rotate(46 164 326)'/%3E%3Cellipse cx='153' cy='151' rx='27' ry='62' transform='rotate(-30 153 151)'/%3E%3Cellipse cx='52' cy='575' rx='29' ry='66' transform='rotate(-62 52 575)'/%3E%3C/g%3E%3Cg fill='%2396c46d' opacity='.38'%3E%3Cellipse cx='22' cy='522' rx='20' ry='47' transform='rotate(-65 22 522)'/%3E%3Cellipse cx='154' cy='451' rx='21' ry='49' transform='rotate(52 154 451)'/%3E%3Cellipse cx='198' cy='214' rx='20' ry='47' transform='rotate(50 198 214)'/%3E%3Cellipse cx='105' cy='105' rx='18' ry='43' transform='rotate(-31 105 105)'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes naturiva-rama-izquierda{
    0%{
        opacity:0;
        transform:translateX(-48px) scale(.42);
    }
    55%{
        opacity:.52;
    }
    100%{
        opacity:.80;
        transform:translateX(0) scale(1);
    }
}

@keyframes naturiva-rama-derecha{
    0%{
        opacity:0;
        transform:translateX(48px) scale(.42) scaleX(-1);
    }
    55%{
        opacity:.52;
    }
    100%{
        opacity:.80;
        transform:translateX(0) scale(1) scaleX(-1);
    }
}

body.pagina-articulo .articulo::before{
    animation:naturiva-rama-izquierda 1.7s cubic-bezier(.22,.75,.22,1) both;
}

body.pagina-articulo .articulo::after{
    animation:naturiva-rama-derecha 1.7s cubic-bezier(.22,.75,.22,1) .08s both;
}

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

body.pagina-articulo .articulo-hero{
    position:relative;
    z-index:2;
    width:100%;
    padding:58px 20px 27px;
    text-align:center;
}

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

body.pagina-articulo .articulo-categoria{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:17px;
    margin:0 0 12px;
    color:var(--nat-verde-medio);
    font-family:var(--nat-sans);
    font-size:12px;
    font-weight:600;
    letter-spacing:4.5px;
    line-height:1;
    text-transform:uppercase;
}

body.pagina-articulo .articulo-categoria::before,
body.pagina-articulo .articulo-categoria::after{
    content:"";
    width:62px;
    height:1px;
    background:rgba(111,174,77,.36);
}

body.pagina-articulo .articulo-hero h1{
    width:min(850px,100%);
    margin:0 auto;
    color:var(--nat-verde-oscuro);
    font-family:var(--nat-serif);
    font-size:clamp(62px,7vw,104px);
    font-weight:700;
    line-height:.86;
    letter-spacing:-2px;
}

body.pagina-articulo .articulo-descripcion{
    width:min(700px,100%);
    margin:20px auto 0;
    color:#46554d;
    font-family:var(--nat-serif);
    font-size:20px;
    line-height:1.42;
}

body.pagina-articulo .articulo-meta{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    margin:20px auto 0;
    color:#718078;
    font-family:var(--nat-sans);
    font-size:12px;
}

body.pagina-articulo .articulo-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0 13px;
    line-height:1;
}

body.pagina-articulo .articulo-meta span + span{
    border-left:1px solid rgba(7,95,54,.16);
}

body.pagina-articulo .articulo-meta i{
    color:var(--nat-verde-medio);
}

body.pagina-articulo .articulo-vistas i{
    color:var(--nat-verde);
}

body.pagina-articulo .articulo-likes i{
    color:#7db654;
}

/* =========================================================
   6. ME GUSTA
========================================================= */

body.pagina-articulo .articulo-like-contenedor{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin:22px auto 30px;
}

body.pagina-articulo .articulo-like{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:170px;
    min-height:46px;
    padding:12px 24px;
    border:1px solid rgba(7,95,54,.17);
    border-radius:999px;
    background:#fff;
    color:var(--nat-verde-oscuro);
    font-family:var(--nat-sans);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 7px 20px rgba(7,95,54,.06);
    transition:all .25s ease;
}

body.pagina-articulo .articulo-like:hover{
    background:var(--nat-verde-suave);
    border-color:rgba(7,95,54,.28);
    transform:translateY(-1px);
}

body.pagina-articulo .articulo-like.activo{
    color:#fff;
    background:linear-gradient(135deg,#075f36,#17844c);
    border-color:#075f36;
    box-shadow:
        0 10px 28px rgba(7,95,54,.25),
        0 0 0 4px rgba(111,174,77,.10);
}

body.pagina-articulo .articulo-like.activo i{
    color:#fff;
    transform:scale(1.08);
}

body.pagina-articulo .articulo-like.activo:hover{
    background:linear-gradient(135deg,#064f2d,#126f40);
}

body.pagina-articulo .articulo-like:disabled{
    cursor:wait;
    opacity:.7;
}

body.pagina-articulo .articulo-like-contador{
    font-weight:600;
}


/* =========================================================
   7. REDES SOCIALES
========================================================= */

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

body.pagina-articulo .articulo-redes-titulo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    color:#5f7066;
    font-family:var(--nat-sans);
    font-size:16px;
    font-weight:500;
    line-height:1.4;
    letter-spacing:.3px;
}

body.pagina-articulo .articulo-redes-titulo::before,
body.pagina-articulo .articulo-redes-titulo::after{
    content:"";
    width:82px;
    height:1px;
    background:rgba(7,95,54,.14);
}

body.pagina-articulo .articulo-redes-botones{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:13px;
    margin-top:3px;
}

body.pagina-articulo .articulo-red{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:145px;
    padding:13px 24px;
    border:1px solid rgba(7,95,54,.10);
    border-radius:999px;
    background:linear-gradient(
        135deg,
        #e9f3dc,
        #dfedcf
    );
    color:var(--nat-verde-oscuro);
    font-family:var(--nat-sans);
    font-size:12px;
    font-weight:600;
    box-shadow:0 7px 18px rgba(7,95,54,.055);
    transition:all .25s ease;
}

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

body.pagina-articulo .articulo-red:hover{
    background:#dceacb;
    transform:translateY(-2px);
    box-shadow:0 9px 20px rgba(7,95,54,.08);
}


/* =========================================================
   8. IMAGEN PRINCIPAL
========================================================= */

body.pagina-articulo .articulo-imagen-principal{
    position:relative;
    z-index:3;
    width:min(760px,84%);
    margin:34px auto 0;
}

body.pagina-articulo .articulo-imagen-principal img{
    display:block;
    width:100%;
    height:auto;
    max-height:510px;
    object-fit:cover;
    border-radius:21px;
    box-shadow:
        0 21px 48px rgba(25,58,39,.13),
        0 3px 12px rgba(25,58,39,.05);
}

/* =========================================================
   9. CONTENIDO
========================================================= */

body.pagina-articulo .articulo-contenido{
    position:relative;
    z-index:3;
    width:min(650px,82%);
    margin:40px auto 0;
}

body.pagina-articulo .articulo-parrafo{
    width:100%;
    margin:0 auto 27px;
    color:#303e36;
    font-family:var(--nat-serif);
    font-size:17px;
    line-height:1.58;
    text-align:justify;
    text-justify:inter-word;
    overflow-wrap:anywhere;
}

body.pagina-articulo .articulo-parrafo:first-of-type::first-letter{
    float:left;
    margin:4px 8px -3px 0;
    color:var(--nat-verde-oscuro);
    font-family:var(--nat-serif);
    font-size:67px;
    font-weight:700;
    line-height:.72;
}

/* =========================================================
   10. MEDIA INTERNA
========================================================= */

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

body.pagina-articulo .articulo-foto{
    overflow:hidden;
    border-radius:17px;
    background:#fff;
    box-shadow:0 14px 32px rgba(25,58,39,.10);
}

body.pagina-articulo .articulo-foto img{
    display:block;
    width:100%;
    height:auto;
}

body.pagina-articulo .articulo-video{
    overflow:hidden;
    border-radius:17px;
    background:#061b11;
    box-shadow:0 14px 32px rgba(25,58,39,.12);
}

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

/* =========================================================
   11. FRASE / CITA NATURIVA
========================================================= */

body.pagina-articulo .articulo-frase{
    position:relative;
    z-index:3;
    width:min(680px,84%);
    min-height:72px;
    margin:32px auto 43px;
    padding:17px 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:19px;
    border:1px solid rgba(111,174,77,.24);
    border-radius:18px;
    background:
        linear-gradient(
            90deg,
            #f0f7e7,
            #f8fbf4
        );
    color:var(--nat-verde-oscuro);
    font-family:var(--nat-serif);
    font-size:20px;
    font-style:italic;
    line-height:1.18;
    text-align:center;
}

body.pagina-articulo .articulo-frase i{
    color:var(--nat-verde-medio);
    font-size:24px;
}

/* =========================================================
   12. RELACIONADOS
========================================================= */

body.pagina-articulo .articulo-relacionados{
    position:relative;
    z-index:3;
    width:min(780px,86%);
    margin:0 auto 55px;
}

body.pagina-articulo .articulo-relacionados-titulo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:17px;
    margin:0 0 20px;
    color:var(--nat-verde-oscuro);
    font-family:var(--nat-serif);
    font-size:24px;
    font-weight:600;
    text-align:center;
}

body.pagina-articulo .articulo-relacionados-titulo::before,
body.pagina-articulo .articulo-relacionados-titulo::after{
    content:"";
    width:85px;
    height:1px;
    background:rgba(7,95,54,.16);
}

body.pagina-articulo .articulo-relacionados-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

body.pagina-articulo .articulo-relacionado{
    display:block;
    overflow:hidden;
    border:1px solid rgba(7,95,54,.08);
    border-radius:15px;
    background:#fff;
    box-shadow:0 8px 25px rgba(25,58,39,.06);
    transition:all .25s ease;
}

body.pagina-articulo .articulo-relacionado:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 32px rgba(25,58,39,.11);
}

body.pagina-articulo .articulo-relacionado-img{
    width:100%;
    aspect-ratio:1.55/1;
    overflow:hidden;
    background:#edf5e5;
}

body.pagina-articulo .articulo-relacionado-img img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

body.pagina-articulo .articulo-relacionado-cuerpo{
    padding:12px 14px 15px;
}

body.pagina-articulo .articulo-relacionado-categoria{
    display:block;
    margin-bottom:5px;
    color:#79ad5b;
    font-size:7px;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

body.pagina-articulo .articulo-relacionado h3{
    margin:0;
    color:var(--nat-verde-oscuro);
    font-family:var(--nat-serif);
    font-size:19px;
    line-height:1;
}

body.pagina-articulo .articulo-relacionado small{
    display:block;
    margin-top:8px;
    color:#89948d;
    font-size:8px;
}

/* =========================================================
   13. BOTÓN VOLVER AL BLOG
========================================================= */

body.pagina-articulo .articulo-final{
    position:relative;
    z-index:3;
    padding:5px 20px 72px;
    text-align:center;
}

body.pagina-articulo .articulo-final .articulo-volver{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:155px;
    padding:11px 22px;
    border:1px solid rgba(7,95,54,.18);
    border-radius:999px;
    background:#fff;
    color:var(--nat-verde-oscuro);
    font-family:var(--nat-sans);
    font-size:10px;
    font-weight:500;
    box-shadow:0 8px 23px rgba(7,95,54,.07);
    transition:all .25s ease;
}

body.pagina-articulo .articulo-final .articulo-volver i{
    font-size:9px;
}

body.pagina-articulo .articulo-final .articulo-volver:hover{
    background:var(--nat-verde-suave);
    border-color:rgba(7,95,54,.28);
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(7,95,54,.10);
}

/* =========================================================
   14. FOOTER
========================================================= */

body.pagina-articulo .blog-footer{
    position:relative;
    z-index:2;
    min-height:175px;
    padding:58px 20px 32px;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 48%),
        linear-gradient(
            180deg,
            #eaf5dd 0%,
            #dceccb 100%
        );
    border-top:1px solid rgba(7,95,54,.06);
    text-align:center;
}

body.pagina-articulo .blog-footer::before{
    content:"";
    position:absolute;
    z-index:1;
    left:-3%;
    top:-48px;
    width:106%;
    height:86px;
    background:#fff;
    border-radius:50% 50% 0 0 / 100% 100% 0 0;
}

body.pagina-articulo .blog-footer::after{
    content:"";
    position:absolute;
    z-index:1;
    right:-10px;
    bottom:-67px;
    width:230px;
    height:180px;
    opacity:.22;
    background-repeat:no-repeat;
    background-size:contain;
    transform:rotate(-7deg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 190'%3E%3Cg fill='%237da85e'%3E%3Cellipse cx='45' cy='120' rx='27' ry='58' transform='rotate(-35 45 120)'/%3E%3Cellipse cx='88' cy='80' rx='23' ry='51' transform='rotate(48 88 80)'/%3E%3Cellipse cx='130' cy='123' rx='27' ry='58' transform='rotate(-42 130 123)'/%3E%3Cellipse cx='171' cy='72' rx='23' ry='50' transform='rotate(45 171 72)'/%3E%3C/g%3E%3C/svg%3E");
}

body.pagina-articulo .blog-footer p{
    position:relative;
    z-index:2;
    margin:35px 0 0;
    color:#476455;
    font-family:var(--nat-sans);
    font-size:10px;
    font-weight:500;
    line-height:1.6;
}

/* =========================================================
   15. BARRA DE PROGRESO
========================================================= */

body.pagina-articulo .articulo-progreso{
    position:fixed;
    z-index:9999;
    top:0;
    left:0;
    width:0;
    height:3px;
    background:linear-gradient(
        90deg,
        var(--nat-verde-oscuro),
        var(--nat-verde-claro)
    );
}

/* =========================================================
   16. TABLET
========================================================= */

@media (max-width:1100px){

    body.pagina-articulo .blog-header-contenido{
        grid-template-columns:175px 1fr 175px;
        column-gap:18px;
    }

    body.pagina-articulo .blog-logo img{
        width:112px;
    }

    body.pagina-articulo .blog-nav{
        gap:28px;
    }

    body.pagina-articulo .blog-nav a{
        font-size:12px;
    }

    body.pagina-articulo .articulo::before,
    body.pagina-articulo .articulo::after{
        width:260px;
        height:590px;
        opacity:.67;
    }

    body.pagina-articulo .articulo-hero h1{
        font-size:clamp(60px,7.2vw,90px);
    }

    body.pagina-articulo .articulo-imagen-principal{
        width:min(740px,86%);
    }
}

/* =========================================================
   17. MÓVIL
========================================================= */

@media (max-width:768px){

    body.pagina-articulo .blog-header{
        height:74px;
    }

    body.pagina-articulo .blog-header-contenido{
        width:92%;
        height:74px;
        grid-template-columns:100px 1fr auto;
        column-gap:5px;
    }

    body.pagina-articulo .blog-logo{
        height:74px;
    }

    body.pagina-articulo .blog-logo img{
        width:89px;
        max-height:68px;
    }

    body.pagina-articulo .blog-nav{
        display:none;
    }

    body.pagina-articulo .blog-volver{
        min-width:auto;
        padding:8px 11px;
        font-size:8px;
    }

    body.pagina-articulo .articulo{
        background:
            radial-gradient(
                ellipse at 50% 0%,
                rgba(175,211,132,.25),
                rgba(248,251,244,0) 45%
            ),
            linear-gradient(
                180deg,
                #f3f8ed 0,
                #fafcf8 300px,
                #fff 570px,
                #fff 100%
            );
    }

    body.pagina-articulo .articulo::before,
    body.pagina-articulo .articulo::after{
        top:32px;
        width:160px;
        height:455px;
        opacity:.58;
    }

    body.pagina-articulo .articulo::before{
        left:-48px;
    }

    body.pagina-articulo .articulo::after{
        right:-48px;
    }

    body.pagina-articulo .articulo-hero{
        padding:45px 14px 21px;
    }

    body.pagina-articulo .articulo-categoria{
        gap:9px;
        margin-bottom:11px;
        font-size:7px;
        letter-spacing:2.7px;
    }

    body.pagina-articulo .articulo-categoria::before,
    body.pagina-articulo .articulo-categoria::after{
        width:31px;
    }

    body.pagina-articulo .articulo-hero h1{
        font-size:clamp(50px,15vw,70px);
        letter-spacing:-1px;
        line-height:.88;
    }

    body.pagina-articulo .articulo-descripcion{
        width:94%;
        margin-top:14px;
        font-size:14px;
        line-height:1.4;
    }

    body.pagina-articulo .articulo-meta{
        margin-top:16px;
        font-size:8px;
    }

    body.pagina-articulo .articulo-meta span{
        padding:0 7px;
    }

    body.pagina-articulo .articulo-like{
        min-width:132px;
        padding:10px 17px;
        font-size:10px;
    }

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

body.pagina-articulo .articulo-redes-titulo{
    font-size:15px !important;
    font-weight:500 !important;
    color:#5f7066 !important;
    letter-spacing:.2px;
}

    body.pagina-articulo .articulo-redes-titulo::before,
    body.pagina-articulo .articulo-redes-titulo::after{
        width:34px;
    }

    body.pagina-articulo .articulo-redes-botones{
        gap:7px;
        margin-top:9px;
    }

    body.pagina-articulo .articulo-red{
        min-width:88px;
        padding:8px 10px;
        font-size:8px;
    }

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

    body.pagina-articulo .articulo-imagen-principal{
        width:90%;
        margin-top:23px;
    }

    body.pagina-articulo .articulo-imagen-principal img{
        max-height:390px;
        border-radius:16px;
    }

    body.pagina-articulo .articulo-contenido{
        width:88%;
        margin-top:30px;
    }

    body.pagina-articulo .articulo-parrafo{
        font-size:15px;
        line-height:1.62;
        margin-bottom:24px;
    }

    body.pagina-articulo .articulo-parrafo:first-of-type::first-letter{
        font-size:58px;
    }

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

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

    body.pagina-articulo .articulo-frase{
        width:88%;
        padding:15px 18px;
        font-size:17px;
        gap:11px;
    }

    body.pagina-articulo .articulo-relacionados{
        width:90%;
    }

    body.pagina-articulo .articulo-relacionados-titulo{
        font-size:21px;
        gap:10px;
    }

    body.pagina-articulo .articulo-relacionados-titulo::before,
    body.pagina-articulo .articulo-relacionados-titulo::after{
        width:31px;
    }

    body.pagina-articulo .articulo-relacionados-grid{
        grid-template-columns:1fr;
        gap:13px;
    }

    body.pagina-articulo .articulo-relacionado{
        display:grid;
        grid-template-columns:120px 1fr;
    }

    body.pagina-articulo .articulo-relacionado-img{
        height:100%;
        min-height:92px;
        aspect-ratio:auto;
    }

    body.pagina-articulo .articulo-relacionado-cuerpo{
        padding:12px 13px;
    }

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

    body.pagina-articulo .articulo-final .articulo-volver{
        min-width:145px;
        padding:10px 17px;
        font-size:9px;
    }

    body.pagina-articulo .blog-footer{
        min-height:126px;
        padding-top:39px;
    }

    body.pagina-articulo .blog-footer p{
        margin-top:30px;
        font-size:8px;
    }
}

/* =========================================================
   18. REDUCIR MOVIMIENTO
========================================================= */

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

    html{
        scroll-behavior:auto;
    }

    body.pagina-articulo .articulo::before{
        animation:none;
        opacity:.80;
        transform:none;
    }

    body.pagina-articulo .articulo::after{
        animation:none;
        opacity:.80;
        transform:scaleX(-1);
    }

    *,
    *::before,
    *::after{
        transition:none!important;
    }
}


/* =========================================================
   VERSIÓN FINAL — AJUSTES VISUALES
========================================================= */

/* Header que acompaña el desplazamiento */
body.pagina-articulo .blog-header{
    transition:
        height .32s ease,
        background .32s ease,
        box-shadow .32s ease,
        transform .32s ease;
}

body.pagina-articulo .blog-header.scrolled{
    background:rgba(255,255,255,.94);
    box-shadow:0 8px 28px rgba(7,95,54,.10);
}

body.pagina-articulo .blog-header.scrolled-up{
    transform:translateY(0);
}

body.pagina-articulo .blog-header.scrolled-down{
    transform:translateY(-105%);
}

/* El botón superior ahora tiene presencia de botón Naturiva */
body.pagina-articulo .blog-volver{
    color:#fff;
    background:linear-gradient(135deg,#075f36,#16814a);
    border-color:#075f36;
    box-shadow:0 8px 22px rgba(7,95,54,.18);
}

body.pagina-articulo .blog-volver:hover{
    color:#fff;
    background:linear-gradient(135deg,#064f2d,#0f703f);
    border-color:#064f2d;
    transform:translateY(-2px);
    box-shadow:0 12px 27px rgba(7,95,54,.25);
}

/* Descripción: bloque centrado, texto alineado/justificado a la izquierda */
body.pagina-articulo .articulo-descripcion{
    width:min(720px,88%);
    margin:20px auto 0;
    text-align:left;
    text-justify:inter-word;
}

/* Rama derecha: se fuerza a una capa visible detrás del contenido */
body.pagina-articulo .articulo::before,
body.pagina-articulo .articulo::after{
    z-index:0 !important;
    pointer-events:none !important;
}

body.pagina-articulo .articulo-hero,
body.pagina-articulo .articulo-imagen-principal,
body.pagina-articulo .articulo-contenido,
body.pagina-articulo .articulo-frase,
body.pagina-articulo .articulo-relacionados,
body.pagina-articulo .articulo-final{
    position:relative;
    z-index:2;
}

/* Metadatos más elegantes */
body.pagina-articulo .articulo-meta{
    font-size:13px;
    margin-top:22px;
}

body.pagina-articulo .articulo-meta span{
    padding:0 16px;
}

body.pagina-articulo .articulo-meta i{
    font-size:12px;
}

/* Botón Me gusta: activo claramente encendido */
body.pagina-articulo .articulo-like{
    min-width:170px;
    min-height:46px;
    font-size:13px;
}

body.pagina-articulo .articulo-like.activo{
    color:#fff !important;
    background:linear-gradient(135deg,#075f36 0%,#14934f 100%);
    border-color:#075f36;
    box-shadow:
        0 10px 28px rgba(7,95,54,.25),
        0 0 0 4px rgba(111,174,77,.10);
}

/* Botón final: igual de protagonista que Me gusta */
body.pagina-articulo .articulo-final .articulo-volver{
    min-width:178px;
    min-height:48px;
    padding:13px 24px;
    color:#fff;
    background:linear-gradient(135deg,#075f36 0%,#14934f 100%);
    border:1px solid #075f36;
    border-radius:999px;
    font-size:18px;
    font-weight:600;
    box-shadow:0 10px 27px rgba(7,95,54,.20);
    transition:all .25s ease;
}

body.pagina-articulo .articulo-final .articulo-volver:hover{
    color:#fff;
    background:linear-gradient(135deg,#064f2d,#0f703f);
    transform:translateY(-3px);
    box-shadow:0 14px 32px rgba(7,95,54,.27);
}

/* Footer más vivo, con identidad Naturiva */
body.pagina-articulo .blog-footer{
    min-height:190px;
    padding:64px 20px 34px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,.88) 0,
            rgba(255,255,255,.20) 34%,
            transparent 62%
        ),
        linear-gradient(
            135deg,
            #e9f5dc 0%,
            #d9ebc8 52%,
            #cde5b9 100%
        );
    border-top:1px solid rgba(7,95,54,.12);
    box-shadow:inset 0 12px 35px rgba(7,95,54,.035);
}

body.pagina-articulo .blog-footer::before{
    background:#fff;
    box-shadow:0 -1px 0 rgba(111,174,77,.15);
}

body.pagina-articulo .blog-footer p{
    margin:38px 0 0;
    color:#3d624c;
    font-size:16px;
    font-weight:500;
    letter-spacing:.15px;
}

/* Segunda decoración botánica del footer */
body.pagina-articulo .blog-footer::after{
    opacity:.30;
}

/* Móvil */
@media(max-width:768px){

    body.pagina-articulo .blog-header{
        height:76px;
        background:rgba(255,255,255,.78);
    }

    body.pagina-articulo .blog-header.scrolled-down{
        transform:translateY(-82px);
    }

    body.pagina-articulo .blog-volver{
        min-width:126px;
        padding:10px 14px;
        font-size:9px;
    }

    body.pagina-articulo .articulo-descripcion{
        width:91%;
        text-align:left;
    }

    body.pagina-articulo .articulo-meta{
        font-size:10px;
    }

    body.pagina-articulo .articulo-meta span{
        padding:0 8px;
    }

    body.pagina-articulo .articulo-like{
        min-width:145px;
        min-height:43px;
        font-size:11px;
    }

    body.pagina-articulo .articulo-final .articulo-volver{
        min-width:158px;
        min-height:44px;
        font-size:10px;
    }

    body.pagina-articulo .blog-footer{
        min-height:150px;
        padding:50px 20px 25px;
    }

    body.pagina-articulo .blog-footer p{
        margin-top:30px;
        font-size:9px;
    }
}


/* =========================================================
   CORRECCIÓN DEFINITIVA — RAMAS + DESCRIPCIÓN
========================================================= */

/*
   Las ramas anteriores estaban parcialmente fuera del
   contenedor (.articulo tiene overflow:hidden). Por eso
   la izquierda aparecía y la derecha podía quedar cortada.
   Ahora ambas viven completamente dentro de los extremos.
*/

body.pagina-articulo .articulo::before,
body.pagina-articulo .articulo::after{
    content:"";
    position:absolute;
    top:105px;
    width:245px;
    height:570px;
    z-index:0 !important;
    pointer-events:none;
    opacity:.42;
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-position:center;
}

/* rama izquierda */
body.pagina-articulo .articulo::before{
    left:0;
    right:auto;
    transform:none;
}

/* rama derecha — espejo de la izquierda */
body.pagina-articulo .articulo::after{
    right:0;
    left:auto;
    transform:scaleX(-1);
}

/*
   La ilustración SVG ya existente se conserva, pero se
   amplía dentro de un área visible. Estas reglas hacen
   que no dependa de valores negativos fuera del artículo.
*/
body.pagina-articulo .articulo::before,
body.pagina-articulo .articulo::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 440'%3E%3Cg fill='none' stroke='%237fbf4d' stroke-width='1.6' stroke-opacity='.42'%3E%3Cpath d='M20 430 C42 320 91 210 170 20'/%3E%3Cpath d='M48 340 C17 322 10 293 21 267 C48 272 65 299 48 340Z' fill='%237fbf4d' fill-opacity='.24'/%3E%3Cpath d='M76 277 C48 258 45 230 58 207 C84 216 97 242 76 277Z' fill='%237fbf4d' fill-opacity='.24'/%3E%3Cpath d='M106 211 C80 192 80 163 93 142 C119 152 128 178 106 211Z' fill='%237fbf4d' fill-opacity='.24'/%3E%3Cpath d='M137 148 C118 130 121 103 136 83 C158 95 158 121 137 148Z' fill='%237fbf4d' fill-opacity='.24'/%3E%3Cpath d='M62 381 C94 364 112 339 108 315 C81 323 64 346 62 381Z' fill='%237fbf4d' fill-opacity='.20'/%3E%3Cpath d='M94 311 C126 296 145 271 140 248 C113 257 96 280 94 311Z' fill='%237fbf4d' fill-opacity='.20'/%3E%3C/g%3E%3C/svg%3E");
}

/*
   La descripción del artículo NO debe dejar que una palabra
   larguísima empuje el layout hacia la derecha.
*/
body.pagina-articulo .articulo-descripcion{
    width:min(720px, calc(100% - 40px)) !important;
    max-width:720px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    box-sizing:border-box !important;

    text-align:left !important;
    text-align-last:left !important;

    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    hyphens:auto;

    white-space:normal !important;
}

/* Evita que el contenido del hero pueda provocar scroll horizontal */
body.pagina-articulo .articulo-hero-contenido{
    width:min(820px, calc(100% - 40px)) !important;
    max-width:820px !important;
    overflow:visible;
    box-sizing:border-box;
}

body.pagina-articulo .articulo-hero{
    overflow:visible;
}

/* En escritorio las ramas acompañan todo el encabezado */
@media(min-width:769px){
    body.pagina-articulo .articulo::before,
    body.pagina-articulo .articulo::after{
        top:90px;
        width:245px;
        height:590px;
    }
}

/* En móvil las dos ramas siguen visibles sin invadir el texto */
@media(max-width:768px){
    body.pagina-articulo .articulo::before,
    body.pagina-articulo .articulo::after{
        top:78px;
        width:115px;
        height:360px;
        opacity:.30;
    }

    body.pagina-articulo .articulo::before{
        left:0;
    }

    body.pagina-articulo .articulo::after{
        right:0;
    }

    body.pagina-articulo .articulo-descripcion{
        width:calc(100% - 32px) !important;
        max-width:none !important;
        font-size:11px;
        line-height:1.75;
    }
}


/* =========================================================
   CORRECCIÓN FINAL — HEADER DINÁMICO
   Se mantiene visible al desplazarse, se vuelve translúcido
   y recupera su aspecto original al volver arriba.
========================================================= */

body.pagina-articulo .blog-header{
    position:sticky !important;
    top:0 !important;
    z-index:10000 !important;

    background:rgba(255,255,255,.78) !important;
    backdrop-filter:blur(12px) saturate(115%) !important;
    -webkit-backdrop-filter:blur(12px) saturate(115%) !important;

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

/* Al bajar: header sigue visible y se vuelve más transparente */
body.pagina-articulo .blog-header.scrolled{
    background:rgba(255,255,255,.48) !important;
    backdrop-filter:blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
    box-shadow:0 7px 28px rgba(7,95,54,.08) !important;
    border-bottom-color:rgba(7,95,54,.10) !important;
}

/*
   IMPORTANTE:
   El JavaScript actual agrega .scrolled-down al bajar.
   No ocultamos el header; permanece visible mientras
   acompaña el desplazamiento.
*/
body.pagina-articulo .blog-header.scrolled-down{
    transform:translateY(0) !important;
}

/* Al volver arriba recupera la posición normal */
body.pagina-articulo .blog-header.scrolled-up{
    transform:translateY(0) !important;
    background:rgba(255,255,255,.78) !important;
    backdrop-filter:blur(12px) saturate(115%) !important;
    -webkit-backdrop-filter:blur(12px) saturate(115%) !important;
}

/* El contenido del header también suaviza el cambio */
body.pagina-articulo .blog-header-contenido{
    transition:
        height .35s ease,
        padding .35s ease !important;
}

/* Botón del header también se integra con el efecto vidrio */
body.pagina-articulo .blog-header.scrolled .blog-volver{
    background:rgba(255,255,255,.72) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
    box-shadow:0 6px 20px rgba(7,95,54,.10) !important;
}

@media(max-width:768px){
    body.pagina-articulo .blog-header.scrolled{
        background:rgba(255,255,255,.52) !important;
        backdrop-filter:blur(16px) !important;
        -webkit-backdrop-filter:blur(16px) !important;
    }

    body.pagina-articulo .blog-header.scrolled-down{
        transform:translateY(0) !important;
    }
}

/* =========================================================
   AJUSTE VISUAL — REDES + RAMAS
   Último ajuste: ramas más visibles y botones con efecto
   luminoso al pasar/activar el cursor.
========================================================= */

/* Ramas: más presencia, sin tapar el contenido */
body.pagina-articulo .articulo::before,
body.pagina-articulo .articulo::after{
    z-index:1 !important;
    opacity:.82 !important;
    filter:drop-shadow(0 5px 12px rgba(111,174,77,.10));
}

/* Mantener las ramas dentro de ambos extremos */
@media(min-width:769px){
    body.pagina-articulo .articulo::before,
    body.pagina-articulo .articulo::after{
        width:270px !important;
        height:620px !important;
        top:70px !important;
    }

    body.pagina-articulo .articulo::before{ left:0 !important; }
    body.pagina-articulo .articulo::after{ right:0 !important; }
}

/* La derecha queda realmente en espejo de la izquierda */
body.pagina-articulo .articulo::after{
    transform:scaleX(-1) !important;
    transform-origin:center center !important;
}

/* El contenido queda por encima de las ramas */
body.pagina-articulo .articulo-hero,
body.pagina-articulo .articulo-imagen-principal,
body.pagina-articulo .articulo-contenido,
body.pagina-articulo .articulo-final{
    position:relative;
    z-index:3 !important;
}

/* =========================================================
   REDES SOCIALES — EFECTO DE ENCENDIDO
========================================================= */

body.pagina-articulo .articulo-red{
    position:relative;
    overflow:hidden;
    cursor:pointer;

    border:1px solid rgba(7,95,54,.12) !important;

    background:linear-gradient(
        135deg,
        #e9f3dc,
        #dfedcf
    ) !important;

    color:var(--nat-verde-oscuro);

    box-shadow:
        0 7px 18px rgba(7,95,54,.06) !important;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease !important;
}


/* =========================================================
   BRILLO QUE RECORRE EL BOTÓN
========================================================= */

body.pagina-articulo .articulo-red::before{
    content:"";
    position:absolute;
    inset:0;

    border-radius:inherit;

    background:linear-gradient(
        110deg,
        transparent 15%,
        rgba(255,255,255,.15) 35%,
        rgba(255,255,255,.85) 50%,
        rgba(255,255,255,.15) 65%,
        transparent 85%
    );

    transform:translateX(-130%);
    transition:transform .65s ease;

    pointer-events:none;
}


/* =========================================================
   AL PASAR EL MOUSE
========================================================= */

body.pagina-articulo .articulo-red:hover{

    background:linear-gradient(
        135deg,
        #0b6b3a,
        #159451
    ) !important;

    color:#fff !important;

    border-color:#0b6b3a !important;

    transform:
        translateY(-4px)
        scale(1.035);

    box-shadow:
        0 12px 30px rgba(7,95,54,.25),
        0 0 0 4px rgba(111,174,77,.14),
        0 0 22px rgba(111,174,77,.25) !important;
}


/* =========================================================
   RECORRIDO DEL BRILLO
========================================================= */

body.pagina-articulo .articulo-red:hover::before{
    transform:translateX(130%);
}


/* =========================================================
   ICONO AL ILUMINARSE
========================================================= */

body.pagina-articulo .articulo-red:hover i{
    color:#fff !important;

    transform:
        scale(1.18)
        rotate(-4deg);
}


/* =========================================================
   ICONO NORMAL
========================================================= */

body.pagina-articulo .articulo-red i{
    transition:
        transform .25s ease,
        color .25s ease,
        filter .25s ease;
}


/* =========================================================
   EFECTO AL HACER CLIC / TOCAR
========================================================= */

body.pagina-articulo .articulo-red:active{

    transform:
        translateY(-1px)
        scale(.98);

    box-shadow:
        0 5px 15px rgba(7,95,54,.18),
        0 0 0 5px rgba(111,174,77,.18) !important;
}


/* =========================================================
   ACCESIBILIDAD — TECLADO
========================================================= */

body.pagina-articulo .articulo-red:focus-visible{

    outline:none;

    background:linear-gradient(
        135deg,
        #0b6b3a,
        #159451
    ) !important;

    color:#fff !important;

    box-shadow:
        0 10px 28px rgba(7,95,54,.24),
        0 0 0 4px rgba(111,174,77,.22) !important;
}


body.pagina-articulo .articulo-red:focus-visible i{
    color:#fff !important;
}


/* =========================================================
   MÓVIL — AL TOCAR
========================================================= */

@media(max-width:768px){

    body.pagina-articulo .articulo-red:active{

        background:linear-gradient(
            135deg,
            #0b6b3a,
            #159451
        ) !important;

        color:#fff !important;

        border-color:#0b6b3a !important;

        box-shadow:
            0 8px 22px rgba(7,95,54,.25),
            0 0 0 4px rgba(111,174,77,.15) !important;
    }

    body.pagina-articulo .articulo-red:active i{
        color:#fff !important;
        transform:scale(1.15);
    }

}

body.pagina-articulo .articulo-red:hover i,
body.pagina-articulo .articulo-red:focus-visible i,
body.pagina-articulo .articulo-red:active i{
    color:#fff !important;
    transform:scale(1.15);
}

body.pagina-articulo .articulo-red i{
    transition:transform .22s ease,color .22s ease;
}

/* Cuando el cursor sale, vuelve suavemente a su estado normal */
body.pagina-articulo .articulo-red:not(:hover){
    transform:none;
}

/* =========================================================
   MÓVIL
========================================================= */
@media(max-width:768px){
    body.pagina-articulo .articulo::before,
    body.pagina-articulo .articulo::after{
        width:145px !important;
        height:390px !important;
        top:75px !important;
        opacity:.68 !important;
    }
}


/* =========================================================
   AJUSTE AISLADO — BOTÓN "VOLVER AL BLOG" DEL HEADER
   No modifica ramas, contenido, redes, footer ni likes.
========================================================= */

body.pagina-articulo .blog-header .blog-volver{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    min-width:142px !important;
    min-height:44px !important;
    padding:11px 20px !important;

    color:#075f36 !important;
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(7,95,54,.28) !important;
    border-radius:999px !important;

    font-family:var(--nat-sans, Arial, sans-serif) !important;
    font-size:12px !important;
    font-weight:600 !important;
    line-height:1 !important;
    text-decoration:none !important;

    opacity:1 !important;
    visibility:visible !important;
    box-shadow:0 5px 18px rgba(7,95,54,.08) !important;

    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease !important;
}

/* Si el botón contiene icono, también queda visible */
body.pagina-articulo .blog-header .blog-volver i,
body.pagina-articulo .blog-header .blog-volver svg,
body.pagina-articulo .blog-volver .icono{
    color:#075f36 !important;
    fill:currentColor !important;
}

/* Hover: se enciende, pero sin cambiar nada de lo demás */
body.pagina-articulo .blog-header .blog-volver:hover{
    color:#ffffff !important;
    background:linear-gradient(135deg,#075f36,#14934f) !important;
    border-color:#075f36 !important;
    box-shadow:0 10px 24px rgba(7,95,54,.20) !important;
    transform:translateY(-2px) !important;
}

body.pagina-articulo .blog-header .blog-volver:hover i,
body.pagina-articulo .blog-header .blog-volver:hover svg,
body.pagina-articulo .blog-volver:hover .icono{
    color:#ffffff !important;
    fill:currentColor !important;
}

/* Cuando el header está translúcido al desplazarse,
   el botón continúa visible */
body.pagina-articulo .blog-header.scrolled .blog-volver{
    color:#075f36 !important;
    background:rgba(255,255,255,.86) !important;
    border-color:rgba(7,95,54,.30) !important;
    opacity:1 !important;
    visibility:visible !important;
}

body.pagina-articulo .blog-header.scrolled .blog-volver:hover{
    color:#ffffff !important;
    background:linear-gradient(135deg,#075f36,#14934f) !important;
}

/* Móvil */
@media(max-width:768px){
    body.pagina-articulo .blog-header .blog-volver{
        min-width:126px !important;
        min-height:40px !important;
        padding:10px 15px !important;
        font-size:10px !important;
    }
}


/* =========================================================
   CORRECCIÓN FINAL AISLADA
   1) RAMA DERECHA: crecimiento real sin romper el espejo
   2) BOTÓN HEADER: texto "Volver al Blog" siempre visible
========================================================= */

/* Ramas más vivas */
body.pagina-articulo .articulo::before,
body.pagina-articulo .articulo::after{
    opacity:1 !important;
    filter:
        drop-shadow(0 8px 18px rgba(83,145,49,.14))
        drop-shadow(0 0 5px rgba(127,191,77,.10)) !important;
    background-size:100% 100% !important;
}

/*
   NO animamos transform porque una regla anterior usa
   transform:scaleX(-1)!important en la rama derecha.
   En su lugar usamos clip-path: la rama aparece creciendo
   desde abajo hacia arriba y conserva el espejo.
*/
@keyframes naturiva-rama-crecimiento-izquierda-final{
    0%{
        clip-path:inset(100% 0 0 0);
        opacity:0;
    }
    35%{
        opacity:.65;
    }
    100%{
        clip-path:inset(0 0 0 0);
        opacity:1;
    }
}

@keyframes naturiva-rama-crecimiento-derecha-final{
    0%{
        clip-path:inset(100% 0 0 0);
        opacity:0;
    }
    35%{
        opacity:.65;
    }
    100%{
        clip-path:inset(0 0 0 0);
        opacity:1;
    }
}

body.pagina-articulo .articulo::before{
    animation:
        naturiva-rama-crecimiento-izquierda-final
        1.9s
        cubic-bezier(.22,.75,.22,1)
        both !important;
}

body.pagina-articulo .articulo::after{
    transform:scaleX(-1) !important;
    animation:
        naturiva-rama-crecimiento-derecha-final
        1.9s
        cubic-bezier(.22,.75,.22,1)
        .12s
        both !important;
}

/* =========================================================
   BOTÓN HEADER — EL TEXTO NO PUEDE DESAPARECER
========================================================= */

body.pagina-articulo header.blog-header a.blog-volver{
    display:inline-flex !important;
    position:relative !important;
    z-index:10002 !important;

    color:#075f36 !important;
    -webkit-text-fill-color:#075f36 !important;

    background:rgba(255,255,255,.94) !important;
    border:1px solid rgba(7,95,54,.35) !important;

    opacity:1 !important;
    visibility:visible !important;

    min-width:142px !important;
    min-height:44px !important;

    font-family:'Poppins', Arial, sans-serif !important;
    font-size:12px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    text-indent:0 !important;

    overflow:visible !important;
    white-space:nowrap !important;
}

body.pagina-articulo header.blog-header a.blog-volver::before,
body.pagina-articulo header.blog-header a.blog-volver::after{
    display:none !important;
    content:none !important;
}

body.pagina-articulo header.blog-header a.blog-volver i{
    display:inline-block !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#075f36 !important;
    -webkit-text-fill-color:#075f36 !important;
}

body.pagina-articulo header.blog-header a.blog-volver:hover{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    background:linear-gradient(135deg,#075f36,#14934f) !important;
    border-color:#075f36 !important;
}

body.pagina-articulo header.blog-header a.blog-volver:hover i{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}

/* Al bajar el header, el botón continúa visible */
body.pagina-articulo header.blog-header.scrolled a.blog-volver{
    color:#075f36 !important;
    -webkit-text-fill-color:#075f36 !important;
    background:rgba(255,255,255,.88) !important;
    opacity:1 !important;
    visibility:visible !important;
}

/* Si la clase scrolled-down existe, NO ocultar el botón */
body.pagina-articulo header.blog-header.scrolled-down{
    transform:translateY(0) !important;
}

body.pagina-articulo header.blog-header.scrolled-down a.blog-volver{
    opacity:1 !important;
    visibility:visible !important;
}


/* =========================================================
   AJUSTE FINAL — META DEL ARTÍCULO Y RAMAS
   No modifica la estructura ni el funcionamiento existente.
========================================================= */

/* 🌿 Ramas: más vivas, verdes y visibles */
body.pagina-articulo .articulo::before,
body.pagina-articulo .articulo::after{
    opacity:1 !important;
    filter:
        saturate(1.45)
        brightness(.98)
        drop-shadow(0 8px 18px rgba(83,145,49,.18))
        drop-shadow(0 0 7px rgba(127,191,77,.12)) !important;
}

/* Mantener el crecimiento que ya funciona */
body.pagina-articulo .articulo::before,
body.pagina-articulo .articulo::after{
    border-color:rgba(117,184,65,.60) !important;
}

/* 📅 👁 ❤️ Fecha, vistas y likes superiores */
body.pagina-articulo .articulo-meta{
    margin-top:24px !important;
    gap:0 !important;

    font-size:15px !important;
    font-weight:500 !important;

    color:#4f6f5d !important;
}

body.pagina-articulo .articulo-meta span{
    gap:8px !important;
    padding:0 17px !important;
    min-height:24px !important;

    color:#4f6f5d !important;
}

body.pagina-articulo .articulo-meta i{
    font-size:15px !important;
    color:#5aa63c !important;
}

/* Fecha */
body.pagina-articulo .articulo-meta .articulo-fecha{
    color:#496b56 !important;
    font-weight:500 !important;
}

body.pagina-articulo .articulo-meta .articulo-fecha i{
    color:#68b943 !important;
}

/* Vistas */
body.pagina-articulo .articulo-meta .articulo-vistas{
    color:#496b56 !important;
    font-weight:500 !important;
}

body.pagina-articulo .articulo-meta .articulo-vistas i{
    color:#3e9b58 !important;
}

/* Me gusta mostrado en la información superior */
body.pagina-articulo .articulo-meta .articulo-likes{
    color:#496b56 !important;
    font-weight:600 !important;
}

body.pagina-articulo .articulo-meta .articulo-likes i{
    color:#78b84b !important;
    font-size:15px !important;
}

/* Separadores un poco más elegantes */
body.pagina-articulo .articulo-meta span + span{
    border-left:1px solid rgba(67,137,70,.25) !important;
}

/* ❤️ Botón inferior: conservar funcionamiento pero hacerlo
   ligeramente más elegante sin cambiar su estado activo */
body.pagina-articulo .articulo-like{
    min-width:172px !important;
    min-height:48px !important;
    padding:13px 27px !important;

    font-size:13px !important;
    gap:9px !important;

    box-shadow:
        0 8px 24px rgba(7,95,54,.10) !important;
}

body.pagina-articulo .articulo-like i{
    font-size:14px !important;
}

body.pagina-articulo .articulo-like.activo{
    background:
        linear-gradient(
            135deg,
            #075f36,
            #0b8145,
            #159653
        ) !important;

    box-shadow:
        0 10px 27px rgba(7,95,54,.28) !important;
}


/* =========================================================
   ÚLTIMO DETALLE — HEADER TRANSLÚCIDO
========================================================= */

body.pagina-articulo header.blog-header.scrolled a.blog-volver,
body.pagina-articulo header.blog-header.scrolled-down a.blog-volver{
    color:#075f36 !important;
    -webkit-text-fill-color:#075f36 !important;
}

body.pagina-articulo header.blog-header.scrolled a.blog-volver i,
body.pagina-articulo header.blog-header.scrolled-down a.blog-volver i{
    color:#075f36 !important;
    -webkit-text-fill-color:#075f36 !important;
}

/* Al pasar el cursor, flecha Y texto se vuelven blancos */
body.pagina-articulo header.blog-header.scrolled a.blog-volver:hover,
body.pagina-articulo header.blog-header.scrolled-down a.blog-volver:hover{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    background:linear-gradient(135deg,#075f36,#14934f) !important;
}

body.pagina-articulo header.blog-header.scrolled a.blog-volver:hover i,
body.pagina-articulo header.blog-header.scrolled-down a.blog-volver:hover i{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}


/* =========================================================
   ÚLTIMO AJUSTE — RAMA DERECHA DEL FOOTER
   (no modifica el resto del diseño)
========================================================= */

body.pagina-articulo .blog-footer::after{
    content:"" !important;
    position:absolute !important;
    right:-5px !important;
    bottom:-18px !important;
    width:310px !important;
    height:245px !important;
    z-index:1 !important;
    pointer-events:none !important;
    opacity:.72 !important;

    background-repeat:no-repeat !important;
    background-position:center bottom !important;
    background-size:100% 100% !important;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 240'%3E%3Cg fill='none' stroke='%237fbf4d' stroke-width='2.2' stroke-opacity='.72' stroke-linecap='round'%3E%3Cpath d='M282 238 C274 197 251 159 214 128 C178 98 139 72 83 35'/%3E%3Cpath d='M260 198 C281 188 293 169 290 147 C268 151 254 169 260 198Z' fill='%237fbf4d' fill-opacity='.36'/%3E%3Cpath d='M231 165 C255 154 265 134 260 113 C238 118 226 137 231 165Z' fill='%237fbf4d' fill-opacity='.36'/%3E%3Cpath d='M201 137 C224 126 233 107 227 87 C207 92 196 110 201 137Z' fill='%237fbf4d' fill-opacity='.36'/%3E%3Cpath d='M169 111 C192 99 200 81 194 61 C174 66 164 85 169 111Z' fill='%237fbf4d' fill-opacity='.34'/%3E%3Cpath d='M137 88 C158 77 166 59 160 41 C141 46 132 64 137 88Z' fill='%237fbf4d' fill-opacity='.32'/%3E%3Cpath d='M105 65 C125 55 132 40 126 24 C109 28 100 44 105 65Z' fill='%237fbf4d' fill-opacity='.30'/%3E%3C/g%3E%3C/svg%3E") !important;
}

@media(max-width:768px){
    body.pagina-articulo .blog-footer::after{
        width:190px !important;
        height:155px !important;
        right:-8px !important;
        bottom:-15px !important;
        opacity:.64 !important;
    }
}


/* =========================================================
   FOOTER — RAMA IZQUIERDA
   Mantiene intacta la rama derecha ya corregida.
========================================================= */

body.pagina-articulo .blog-footer::before{
    content:"" !important;
    position:absolute !important;
    left:-8px !important;
    bottom:-38px !important;
    width:245px !important;
    height:190px !important;
    z-index:1 !important;
    pointer-events:none !important;
    opacity:.58 !important;

    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:100% 100% !important;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 150'%3E%3Cg fill='none' stroke='%237fbf4d' stroke-width='1.8' stroke-opacity='.55'%3E%3Cpath d='M12 150 C24 116 53 81 165 8'/%3E%3Cpath d='M47 118 C23 112 11 95 13 78 C33 80 47 95 47 118Z' fill='%237fbf4d' fill-opacity='.28'/%3E%3Cpath d='M74 94 C50 87 39 70 42 54 C62 57 75 71 74 94Z' fill='%237fbf4d' fill-opacity='.28'/%3E%3Cpath d='M101 72 C78 65 69 50 72 36 C91 39 102 51 101 72Z' fill='%237fbf4d' fill-opacity='.28'/%3E%3Cpath d='M128 51 C109 44 101 31 105 19 C121 21 129 33 128 51Z' fill='%237fbf4d' fill-opacity='.24'/%3E%3C/g%3E%3C/svg%3E") !important;

    transform:none !important;
}

@media(max-width:768px){
    body.pagina-articulo .blog-footer::before{
        width:150px !important;
        height:125px !important;
        left:-12px !important;
        bottom:-28px !important;
        opacity:.48 !important;
    }
}
/* =========================================================
   HEADER — BLOQUE ÚNICO Y DEFINITIVO
   No duplicar estas reglas más abajo.
========================================================= */

body.pagina-articulo .blog-header{
    position:sticky !important;
    top:0 !important;
    z-index:10000 !important;
    width:100% !important;
    height:94px !important;
    background:rgba(255,255,255,.96) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    border-bottom:1px solid rgba(7,95,54,.08) !important;
    box-shadow:0 2px 18px rgba(7,95,54,.025) !important;
}

body.pagina-articulo .blog-header-contenido{
    width:min(1250px,94%) !important;
    height:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:190px auto 1fr 135px !important;
    column-gap:24px !important;
    align-items:center !important;
    box-sizing:border-box !important;
}

body.pagina-articulo .blog-logo{
    width:190px !important;
    height:94px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
}

body.pagina-articulo .blog-logo img{
    display:block !important;
    width:128px !important;
    max-width:128px !important;
    height:auto !important;
    max-height:86px !important;
    object-fit:contain !important;
}

body.pagina-articulo .blog-idioma-header{
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    white-space:nowrap !important;
    flex-shrink:0 !important;
}

body.pagina-articulo .blog-idioma-opcion{
    appearance:none !important;
    -webkit-appearance:none !important;
    width:auto !important;
    min-width:70px !important;
    height:36px !important;
    margin:0 !important;
    padding:7px 11px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    border:1px solid rgba(11,107,58,.16) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.82) !important;
    color:#0b6b3a !important;
    font-family:'Poppins',sans-serif !important;
    font-size:10px !important;
    font-weight:500 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    box-sizing:border-box !important;
}

body.pagina-articulo .blog-idioma-opcion:hover{
    background:#e8f4dd !important;
    border-color:#8fc96b !important;
}

body.pagina-articulo .blog-idioma-opcion.activo{
    background:#0b6b3a !important;
    color:#fff !important;
    border-color:#0b6b3a !important;
    box-shadow:0 5px 15px rgba(11,107,58,.18) !important;
}

body.pagina-articulo .blog-idioma-hoja{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:9px !important;
    color:#7fbf4d !important;
    flex:0 0 auto !important;
}

body.pagina-articulo .blog-idioma-opcion.activo .blog-idioma-hoja{
    color:#a7d46b !important;
}

body.pagina-articulo .blog-idioma-codigo{
    font-size:9px !important;
    font-weight:600 !important;
    flex:0 0 auto !important;
}

body.pagina-articulo .blog-idioma-separador{
    display:inline-block !important;
    margin:0 !important;
    color:rgba(11,107,58,.28) !important;
    font-size:14px !important;
}

body.pagina-articulo .blog-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:38px !important;
    margin:0 !important;
    white-space:nowrap !important;
}

body.pagina-articulo .blog-nav a{
    position:relative !important;
    color:#075f36 !important;
    font-family:'Poppins',sans-serif !important;
    font-size:13px !important;
    font-weight:500 !important;
    white-space:nowrap !important;
}

body.pagina-articulo .blog-header .blog-volver{
    justify-self:end !important;
    width:135px !important;
    min-width:135px !important;
    max-width:135px !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:10px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    box-sizing:border-box !important;
    border:1px solid #075f36 !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#075f36 !important;
    font-family:'Poppins',sans-serif !important;
    font-size:10px !important;
    font-weight:600 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-decoration:none !important;
    transform:none !important;
}

body.pagina-articulo .blog-header .blog-volver i{
    display:inline-block !important;
    font-size:8px !important;
    color:currentColor !important;
    flex:0 0 auto !important;
}

body.pagina-articulo .blog-header .blog-volver-text{
    display:inline-block !important;
    flex:0 0 auto !important;
}

body.pagina-articulo .blog-header.scrolled{
    background:rgba(255,255,255,.72) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    box-shadow:0 5px 20px rgba(7,95,54,.08) !important;
}

body.pagina-articulo .blog-header.scrolled-down,
body.pagina-articulo .blog-header.scrolled-up{
    transform:none !important;
}

/* =========================
   TABLET
========================= */
@media (min-width:769px) and (max-width:1100px){
    body.pagina-articulo .blog-header{height:82px !important;}
    body.pagina-articulo .blog-header-contenido{
        width:94% !important;
        grid-template-columns:125px auto 1fr 105px !important;
        column-gap:14px !important;
    }
    body.pagina-articulo .blog-logo{width:125px !important;height:82px !important;}
    body.pagina-articulo .blog-logo img{width:92px !important;max-width:92px !important;max-height:70px !important;}
    body.pagina-articulo .blog-nav{gap:17px !important;}
    body.pagina-articulo .blog-nav a{font-size:10px !important;}
    body.pagina-articulo .blog-header .blog-volver{
        width:105px !important;min-width:105px !important;max-width:105px !important;
        height:36px !important;font-size:9px !important;
    }
}

/* =========================
   CELULAR — 4 ELEMENTOS, SIN SUPERPOSICIÓN
   LOGO | ES | EN | BLOG
========================= */
@media (max-width:768px){
    body.pagina-articulo .blog-header{
        height:64px !important;
        min-height:64px !important;
        overflow:visible !important;
        background:rgba(255,255,255,.96) !important;
    }

    body.pagina-articulo .blog-header-contenido{
        position:relative !important;
        width:100% !important;
        max-width:none !important;
        height:64px !important;
        margin:0 !important;
        padding:0 8px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:0 !important;
        overflow:visible !important;
    }

    /* Logo: solo ocupa su espacio de la izquierda */
    body.pagina-articulo .blog-logo{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:42px !important;
        height:50px !important;
        margin:0 !important;
        padding:0 !important;
        flex:0 0 42px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        transform:none !important;
        z-index:10 !important;
    }

    body.pagina-articulo .blog-logo img{
        width:42px !important;
        max-width:42px !important;
        max-height:50px !important;
        height:auto !important;
    }

    /* Menú de navegación: oculto */
    body.pagina-articulo .blog-nav{display:none !important;}

    /* Idiomas: ya NO son position:absolute.
       Se colocan en el espacio flexible entre logo y Blog. */
    body.pagina-articulo .blog-idioma-header{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        transform:none !important;
        width:auto !important;
        height:34px !important;
        margin:0 auto !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:4px !important;
        flex:0 1 auto !important;
        min-width:0 !important;
        z-index:20 !important;
        white-space:nowrap !important;
    }

    /* Los tres botones tienen EXACTAMENTE el mismo tamaño */
    body.pagina-articulo .blog-idioma-opcion,
    body.pagina-articulo .blog-header .blog-volver{
        width:60px !important;
        min-width:60px !important;
        max-width:60px !important;
        height:32px !important;
        min-height:32px !important;
        max-height:32px !important;
        padding:4px 3px !important;
        box-sizing:border-box !important;
        border-radius:999px !important;
        font-size:8px !important;
        line-height:1 !important;
    }

    body.pagina-articulo .blog-idioma-opcion{
        gap:2px !important;
        flex:0 0 60px !important;
        overflow:hidden !important;
    }

    body.pagina-articulo .blog-idioma-hoja{font-size:7px !important;}
    body.pagina-articulo .blog-idioma-codigo{font-size:8px !important;}
    body.pagina-articulo .blog-idioma-opcion > span:last-child{font-size:8px !important;}
    body.pagina-articulo .blog-idioma-separador{display:none !important;}

    /* Blog queda dentro del mismo flex, separado de los idiomas.
       Ya NO usa right/left/absolute, por lo que no puede tapar el logo. */
    body.pagina-articulo .blog-header .blog-volver{
        position:relative !important;
        top:auto !important;
        right:auto !important;
        left:auto !important;
        transform:none !important;
        margin:0 0 0 8px !important;
        padding:4px 3px !important;
        display:flex !important;
        flex:0 0 60px !important;
        align-items:center !important;
        justify-content:center !important;
        gap:3px !important;
        z-index:30 !important;
        overflow:hidden !important;
        text-overflow:clip !important;
    }

    body.pagina-articulo .blog-header .blog-volver i{font-size:7px !important;}
    body.pagina-articulo .blog-header .blog-volver-text{font-size:8px !important;}
}

/* Teléfonos pequeños: los tres botones siguen iguales,
   pero reducimos solo el ancho del espacio central si hace falta. */
@media (max-width:360px){
    body.pagina-articulo .blog-header-contenido{padding:0 5px !important;}
    body.pagina-articulo .blog-logo,
    body.pagina-articulo .blog-logo img{
        width:38px !important;
        max-width:38px !important;
    }
    body.pagina-articulo .blog-logo{flex-basis:38px !important;}
    body.pagina-articulo .blog-idioma-header{gap:3px !important;}
    body.pagina-articulo .blog-idioma-opcion,
    body.pagina-articulo .blog-header .blog-volver{
        width:56px !important;
        min-width:56px !important;
        max-width:56px !important;
        flex-basis:56px !important;
        font-size:7px !important;
    }
    body.pagina-articulo .blog-idioma-opcion > span:last-child,
    body.pagina-articulo .blog-header .blog-volver-text{font-size:7px !important;}
}