/* ======================================================
   The Backyard — Blog
   (component system shared with estilos4.css / estilos2.css)
   ====================================================== */

:root{
    --dark: #1d273b;
    --text: #5d6678;
    --text-light: #8b93a6;
    --bg: #ffffff;
    --bg-alt: #f5f7fa;
    --accent: #1fde82;
    --accent-dark: #14b869;
    --accent-2: #2570ff;
    --cta: #E74C32;
    --radius: 16px;
    --shadow: 0 10px 30px rgba(15, 23, 42, .08);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, .18);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
    font-family:'Roboto', sans-serif;
    color:var(--text);
    background:var(--bg);
    overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{ color:var(--dark); font-weight:300; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

.skip-link{
    position:absolute; left:-999px; top:0;
    background:var(--dark); color:#fff;
    padding:12px 20px; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

.contenedor{ width:90%; max-width:1140px; margin:auto; }

.btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px; border-radius:50px; font-weight:700; font-size:14px;
    text-transform:uppercase; letter-spacing:.04em; text-decoration:none;
    border:2px solid transparent; cursor:pointer;
    transition:transform .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{ transform:translateY(-3px); }
.btn-primary{ background:var(--accent); color:#0c2015; box-shadow:0 14px 30px rgba(31,222,130,.35); }
.btn-primary:hover{ background:var(--accent-dark); color:#fff; }

/* ---------- Header / Nav ---------- */

nav{
    width:100%; height:84px;
    background:rgba(255,255,255,.97); backdrop-filter:blur(6px);
    box-shadow:0 2px 20px rgba(15,23,42,.08);
    position:fixed; top:0; z-index:200; transition:top .4s ease;
}
.nav{ display:flex; justify-content:space-between; align-items:center; height:84px; width:100%; padding:0 40px; }
.nav .logo img{ height:44px; object-fit:contain; }
.enlaces-header{ margin:0 auto; }
.enlaces-header ul{ list-style:none; }
.menu{ display:flex; align-items:center; gap:4px; }
.menu > li{ position:relative; }
.menu > li > a,
.menu > li > .submenu-trigger{
    display:block;
    background:none;
    border:none;
    font-family:inherit;
    cursor:pointer; padding:10px 14px; font-size:14px; font-weight:500;
    color:var(--dark); text-decoration:none; border-radius:8px;
    transition:color .25s ease, background .25s ease;
}
.menu li a:hover{ color:var(--accent-dark); background:rgba(31,222,130,.1); }
.menu li a.current{ color:var(--accent-dark); font-weight:700; }
.submenu{
    position:absolute; left:0; top:calc(100% + 8px);
    background:#fff; width:240px; border-radius:12px; box-shadow:var(--shadow-lg); padding:8px;
    visibility:hidden; opacity:0; transform:translateY(8px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.submenu li a{ display:block; padding:10px 14px; border-radius:8px; text-decoration:none; font-size:14px; }
.menu li:hover .submenu, .menu li.submenu-open .submenu{ visibility:visible; opacity:1; transform:translateY(0); }
.nav-flag img{ border-radius:3px; }
.mobile-menu-logo{ display:none; }

.hamburguer{
    width:44px; height:44px; display:none; align-items:center; justify-content:center;
    background:none; border:none; cursor:pointer; color:var(--dark); font-size:22px;
}

/* ---------- Page header ---------- */

.page-header{
    padding:170px 0 60px;
    background:var(--bg-alt);
    text-align:center;
}
.page-header .eyebrow{
    display:inline-block; text-transform:uppercase; letter-spacing:.14em;
    font-size:13px; font-weight:700; color:var(--accent-dark); margin-bottom:14px;
}
.page-header h1{ font-size:38px; font-weight:700; }

/* ---------- Legal content ---------- */

.legal{
    max-width:800px;
    margin:auto;
    padding:70px 0;
}
.legal h2{
    font-size:24px;
    font-weight:700;
    margin:40px 0 16px;
}
.legal h2:first-child{ margin-top:0; }
.legal p{
    font-size:15px;
    font-weight:300;
    line-height:1.75;
    margin-bottom:16px;
}

/* ---------- Blog hub ---------- */

.section{ padding:90px 0; }
.section-head{ text-align:center; max-width:680px; margin:0 auto 50px; }
.section-head h2{ font-size:34px; font-weight:700; line-height:1.2; }
.section-head p{ margin-top:14px; font-weight:300; font-size:16px; }
.eyebrow{
    display:inline-block; text-transform:uppercase; letter-spacing:.14em;
    font-size:13px; font-weight:700; color:var(--accent-dark); margin-bottom:14px;
}

.blog-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:28px;
}

.blog-card{
    display:block;
    background:#fff;
    border:1px solid #ecedf2;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    text-decoration:none;
    transition:transform .3s ease, box-shadow .3s ease;
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.blog-card img{ width:100%; height:190px; object-fit:cover; }
.blog-card .blog-card-body{ padding:26px; }
.blog-card .tag{
    display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em;
    padding:5px 12px; border-radius:20px; background:rgba(31,222,130,.14); color:var(--accent-dark);
    margin-bottom:14px; text-transform:uppercase;
}
.blog-card h3{ font-size:19px; font-weight:700; margin-bottom:10px; line-height:1.3; }
.blog-card p{ font-size:14px; font-weight:300; color:var(--text); line-height:1.6; }
.blog-card .read-more{ display:inline-block; margin-top:14px; font-size:13px; font-weight:700; color:var(--accent-dark); }

/* ---------- Article page ---------- */

.article-header{ padding:170px 0 40px; background:var(--bg-alt); }
.article-header .contenedor{ max-width:760px; }
.article-header h1{ font-size:36px; font-weight:700; line-height:1.25; text-align:left; }
.article-meta{
    display:flex; align-items:center; gap:14px; margin-top:20px;
    font-size:13px; color:var(--text-light); font-weight:300;
}
.article-meta .tag{
    font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    color:var(--accent-dark); background:rgba(31,222,130,.14); padding:5px 12px; border-radius:20px;
}

.article-hero-img{ width:100%; max-width:900px; margin:0 auto; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); transform:translateY(-40px); }
.article-hero-img img{ width:100%; height:340px; object-fit:cover; }

.article-body{ max-width:720px; margin:0 auto; padding:0 0 40px; }
.article-body h2{ font-size:24px; font-weight:700; margin:40px 0 16px; }
.article-body h2:first-child{ margin-top:0; }
.article-body p{ font-size:15.5px; font-weight:300; line-height:1.8; margin-bottom:18px; }
.article-body ul{ margin:0 0 20px 0; padding-left:0; list-style:none; }
.article-body ul li{
    font-size:15px; font-weight:300; line-height:1.7; padding:10px 0 10px 30px;
    border-top:1px solid #f0f1f5; position:relative;
}
.article-body ul li:first-child{ border-top:none; }
.article-body ul li::before{
    content:"\2713"; position:absolute; left:0; top:10px; color:var(--accent-dark); font-weight:700;
}
.article-body strong{ color:var(--dark); }

.related-box{
    background:var(--bg-alt);
    border-left:4px solid var(--accent);
    border-radius:0 var(--radius) var(--radius) 0;
    padding:22px 26px;
    margin:32px 0;
}
.related-box span{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-dark); margin-bottom:6px; }
.related-box a{ font-size:15px; font-weight:500; color:var(--dark); text-decoration:none; }
.related-box a:hover{ color:var(--accent-dark); }

.article-cta{
    background:var(--dark);
    background-image:radial-gradient(circle at 15% 20%, rgba(31,222,130,.18), transparent 45%),
                      radial-gradient(circle at 85% 80%, rgba(37,112,255,.18), transparent 45%);
    border-radius:var(--radius);
    padding:44px 36px;
    text-align:center;
    margin-top:44px;
}
.article-cta h3{ color:#fff; font-size:22px; font-weight:700; margin-bottom:10px; }
.article-cta p{ color:#c7cede; font-size:14.5px; font-weight:300; margin-bottom:22px; }

.article-nav{
    max-width:720px; margin:0 auto 60px;
    display:flex; justify-content:space-between; gap:20px;
    padding-top:24px; border-top:1px solid #ecedf2;
}
.article-nav a{ font-size:13px; font-weight:700; color:var(--accent-dark); text-decoration:none; }

/* ---------- Footer ---------- */

footer{ background:#101724; padding:70px 0 30px; }
.footer-grid{
    width:90%; max-width:1140px; margin:auto;
    display:grid; grid-template-columns:1.3fr 1fr 1.3fr 1fr; gap:30px;
}
.partFooter h4{ color:#fff; font-size:16px; font-weight:700; margin-bottom:20px; text-transform:uppercase; letter-spacing:.04em; }
.partFooter img{ width:150px; margin-bottom:10px; }
.partFooter a{
    display:block; text-decoration:none; color:#9aa3b7; font-weight:300; font-size:14px;
    line-height:1.7; transition:color .25s ease; margin-bottom:6px;
}
.partFooter a:hover{ color:var(--accent); }
.footer-badges{ display:flex; flex-wrap:wrap; }
.footer-badges img{ width:110px; display:inline-block; margin:0 8px 8px 0; background:#fff; border-radius:8px; padding:6px 8px; }
.footer-social{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-social a{
    width:38px; height:38px; border:1px solid #2a3348; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:#fff;
    transition:all .25s ease; margin:0;
}
.footer-social a:hover{ background:var(--accent); border-color:var(--accent); color:#0c2015; }

.footer-note{ font-size:12.5px; font-weight:300; color:#6b7488; margin-top:10px; line-height:1.6; }
.Seguridad{ background:#0a0e16; padding:18px 0; text-align:center; }
.Seguridad a{ color:#8b93a6; text-decoration:none; font-size:13px; font-weight:300; }
.Seguridad a:hover{ color:var(--accent); }

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

@media screen and (max-width: 1000px){
    .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media screen and (max-width: 860px){
    .enlaces-header{
        position:fixed; top:0; right:0; width:100%; height:100vh;
        background:linear-gradient(160deg, #101724, #163a2a);
        display:flex; align-items:center; flex-direction:column; justify-content:flex-start;
        padding:110px 0 40px; overflow-y:auto; -webkit-overflow-scrolling:touch;
        clip-path:circle(0% at 100% 0); transition:clip-path .5s ease;
    }
    .enlaces-header.menudos{ clip-path:circle(150% at 50% 50%); }

    .mobile-menu-logo{ display:block; width:130px; margin-bottom:28px; }
    .menu{ flex-direction:column; gap:6px; }
    .menu > li > a, .menu > li > .submenu-trigger{ color:#fff; font-size:18px; }
    .menu li a:hover{ background:rgba(255,255,255,.08); }
    .submenu{
        position:static; width:100%; text-align:center; opacity:1; visibility:visible;
        transform:none; box-shadow:none; background:none; display:none; margin-top:6px;
    }
    .menu li:hover .submenu, .menu li.submenu-open .submenu{ display:block; }
    .submenu li a{ color:#c7cede; }
    .hamburguer{ display:flex; }
    .nav{ padding:0 20px; }
    .nav .logo{ margin-left:0; }
    .page-header{ padding:150px 0 50px; }
    .page-header h1{ font-size:30px; }
    .article-header{ padding:150px 0 30px; }
    .article-header h1{ font-size:28px; }
    .article-hero-img img{ height:220px; }
    .article-hero-img{ transform:translateY(-24px); }
    .blog-grid{ grid-template-columns:1fr; }
}

@media screen and (max-width: 600px){
    .footer-grid{ grid-template-columns:1fr; text-align:center; }
    .footer-badges, .footer-social{ justify-content:center; }
    .legal{ padding:50px 0; }
    .article-cta{ padding:32px 22px; }
    .article-nav{ flex-direction:column; gap:10px; }
}