/* =========================================================
   V62 · Blogs: dropdown/accordion global + páginas de blog
   Studio Contable GAEL
   ========================================================= */

/* ---------- Dropdown Blogs global ---------- */
.blogs-nav-item{position:relative}
.blogs-trigger{display:flex;align-items:center;gap:4px}
.blogs-trigger>button{
  appearance:none;border:0;background:transparent;color:var(--verde-oscuro,#0a4f45);
  font:inherit;font-weight:700;display:inline-flex;align-items:center;gap:5px;padding:8px 4px;cursor:pointer
}
.blogs-trigger>button.active{color:var(--amarillo,#ffc323)}
.blogs-trigger>button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .22s ease}
.blogs-nav-item.blogs-open .blogs-trigger>button.active{color:var(--amarillo,#ffc323)}
.blogs-trigger>button svg{transform:none}
.blogs-nav-item.blogs-open .blogs-trigger>button svg{transform:rotate(180deg)}
.blogs-mega{
  display:none;position:absolute;z-index:1200;top:calc(100% - 1px);left:50%;transform:translateX(-50%);
  width:min(520px,calc(100vw - 40px));padding:9px;background:#fff;border:1px solid #dce8e4;border-radius:14px;
  box-shadow:0 18px 45px rgba(4,62,53,.16)
}
.blogs-nav-item.blogs-open .blogs-mega{display:grid;gap:8px}
.blogs-mega-card{
  display:grid;grid-template-columns:50px minmax(0,1fr) 24px;align-items:center;gap:12px;
  padding:12px 13px;border:1px solid #d9e5e1;border-left:4px solid var(--amarillo,#ffc323);border-radius:11px;
  color:var(--verde-oscuro,#0a4f45);text-decoration:none;background:#fff;transition:background .2s,border-color .2s,transform .2s
}
.blogs-mega-card:hover,.blogs-mega-card:focus-visible{background:#f4faf7;border-color:#bcd4cc;transform:translateY(-1px)}
.blogs-mega-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#eef8f3;color:#086858}
.blogs-mega-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.blogs-mega-copy strong{display:block;margin-bottom:3px;font:800 14px/1.2 "Montserrat",sans-serif;color:#073f39}
.blogs-mega-copy small{display:block;font:600 12px/1.35 "Nunito Sans",sans-serif;color:#647772}
.blogs-mega-arrow{font-size:22px;font-weight:800;text-align:center;color:#0a5c50}

/* ---------- Páginas Blog ---------- */
.pagina-blog{background:#fff;color:#123f39}
.blog-page{padding-top:0}
.blog-breadcrumb{width:min(1220px,calc(100% - 48px));margin:20px auto 14px;font:700 13px/1.3 "Nunito Sans",sans-serif;color:#61736e}
.blog-breadcrumb a{color:#0b5e52;text-decoration:none}
.blog-breadcrumb span{margin:0 8px;color:#a8b5b2}
.blog-hero{width:min(1280px,calc(100% - 32px));margin:0 auto 24px;border-radius:18px;overflow:hidden;box-shadow:0 14px 35px rgba(0,60,50,.10);background:#f5f8f7}
.blog-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.blog-hero--updates{aspect-ratio:16/7}
.blog-hero--education{aspect-ratio:16/9}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.blog-shell{width:min(1220px,calc(100% - 48px));margin:0 auto}
.blog-filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px;padding:14px;border:1px solid #e1ebe8;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(8,61,53,.06)}
.blog-filter{border:1px solid #dbe6e2;border-radius:9px;background:#fff;color:#164b43;padding:10px 15px;font:800 13px/1 "Nunito Sans",sans-serif;cursor:pointer;transition:.2s}
.blog-filter:hover,.blog-filter:focus-visible{border-color:#0d6a5b}
.blog-filter.active{background:#084d43;color:#fff;border-color:#084d43}
.blog-section{margin:0 0 52px}
.blog-section-title{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:800 clamp(22px,2vw,30px)/1.18 "Montserrat",sans-serif;color:#073f39}
.blog-section-title:before{content:"";width:9px;height:9px;border-radius:50%;background:#ffc323;flex:0 0 9px}
.blog-featured-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:22px;align-items:stretch}
.blog-card{border:1px solid #dfe8e5;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 7px 20px rgba(6,62,52,.06);display:flex;flex-direction:column;min-width:0}
.blog-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.blog-card-body{padding:17px 18px 19px;display:flex;flex-direction:column;gap:9px;flex:1}
.blog-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#6b7b77;font-size:12px;font-weight:700}
.blog-chip{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:#fff1b9;color:#785d00;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
.blog-card h2,.blog-card h3{margin:0;color:#083f38;font-family:"Montserrat",sans-serif;line-height:1.23}
.blog-card h2{font-size:clamp(22px,2vw,30px)}
.blog-card h3{font-size:17px}
.blog-card p{margin:0;color:#526a64;font-size:14px;line-height:1.55}
.blog-card a{margin-top:auto;color:#08705f;font-weight:800;text-decoration:none;font-size:13px}
.blog-secondary-list{display:grid;gap:12px}
.blog-mini-card{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;padding:12px;border:1px solid #e1e9e6;border-radius:12px;background:#fff;color:#073f39;text-decoration:none;box-shadow:0 6px 18px rgba(6,62,52,.05)}
.blog-mini-card img{width:140px;height:92px;object-fit:cover;border-radius:8px}
.blog-mini-card strong{display:block;margin:6px 0 3px;font:800 14px/1.3 "Montserrat",sans-serif}
.blog-mini-card small{color:#6d7e79;font-weight:700}
.blog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.blog-grid .blog-card[hidden]{display:none!important}
.blog-more-wrap{text-align:center;margin-top:24px}
.blog-more-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:9px;background:#064f45;color:#fff!important;text-decoration:none;font-weight:800}

/* Educación */
.blog-guide-featured{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:22px}
.blog-guide-main{position:relative;min-height:390px;border-radius:15px;overflow:hidden;background:#eef5f2;border:1px solid #dce8e4}
.blog-guide-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.blog-guide-overlay{position:relative;z-index:1;padding:48px;max-width:620px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.blog-guide-overlay h2{margin:0;font:800 clamp(27px,3vw,42px)/1.08 "Montserrat",sans-serif;color:#073f39}
.blog-guide-overlay p{margin:0;color:#385d55;font-size:16px;line-height:1.55}
.blog-popular{border:1px solid #dce7e3;border-radius:14px;padding:20px;background:#fff;box-shadow:0 7px 20px rgba(6,62,52,.05)}
.blog-popular h2{margin:0 0 15px;font:800 20px/1.2 "Montserrat",sans-serif}
.blog-popular ol{counter-reset:popular;margin:0;padding:0;list-style:none;display:grid;gap:11px}
.blog-popular li{counter-increment:popular;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.blog-popular li:before{content:counter(popular,decimal-leading-zero);width:34px;height:30px;border-radius:7px;display:grid;place-items:center;background:#075247;color:#fff;font-size:11px;font-weight:900}
.blog-popular a{color:#174d44;text-decoration:none;font-size:13px;font-weight:800;line-height:1.35}
.blog-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.blog-guide-card{border:1px solid #dfe8e5;border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 7px 20px rgba(6,62,52,.05)}
.blog-guide-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.blog-guide-card>div{padding:15px;display:flex;flex-direction:column;gap:8px}
.blog-guide-card h3{margin:0;font:800 16px/1.28 "Montserrat",sans-serif;color:#073f39}
.blog-guide-card p{margin:0;color:#5d706b;font-size:13px;line-height:1.5}
.blog-guide-card a{color:#08705f;text-decoration:none;font-size:13px;font-weight:800}
.blog-cms-note{margin:10px 0 38px;padding:12px 15px;border-left:4px solid #ffc323;background:#fff9e5;border-radius:8px;color:#536a64;font-size:12px}


@media (max-width:1120px){
  .blogs-nav-item{width:100%}
  .blogs-trigger{width:100%;justify-content:center;border-bottom:1px solid #e9eeec}
  .blogs-trigger>button{width:100%;justify-content:center;padding:17px 10px;font-size:18px}
  .blogs-mega{position:static!important;transform:none!important;width:100%!important;max-width:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:0 8px 10px!important;background:transparent!important}
  .blogs-nav-item:not(.blogs-open) .blogs-mega{display:none!important}
  .blogs-nav-item.blogs-open .blogs-mega{display:grid!important;gap:7px!important}
  .blogs-mega-card{grid-template-columns:46px minmax(0,1fr) 20px;padding:11px 12px;background:#fbfdfc}
  .blogs-mega-icon{width:46px;height:46px}
  .blogs-mega-icon svg{width:24px;height:24px}
  .blogs-mega-copy strong{font-size:14px}
  .blogs-mega-copy small{font-size:12px}
}
@media (max-width:1024px){
  .blog-grid,.blog-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-featured-layout,.blog-guide-featured{grid-template-columns:1fr}
  .blog-secondary-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-guide-main{min-height:340px}
}
@media (max-width:760px){
  .blog-breadcrumb,.blog-shell{width:min(100% - 32px,620px)}
  .blog-hero{width:calc(100% - 24px);border-radius:13px}
  .blog-hero--updates,.blog-hero--education{aspect-ratio:auto}
  .blog-hero img{height:auto;object-fit:contain}
  .blog-filter-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding:10px;margin-bottom:28px}
  .blog-filter{white-space:nowrap;flex:0 0 auto}
  .blog-secondary-list{grid-template-columns:1fr}
  .blog-mini-card{grid-template-columns:110px minmax(0,1fr)}
  .blog-mini-card img{width:110px;height:82px}
  .blog-guide-overlay{padding:30px 24px}
  .blog-section{margin-bottom:40px}
}
@media (max-width:520px){
  .blog-grid,.blog-guide-grid{grid-template-columns:1fr}
  .blog-card h2{font-size:24px}
  .blog-guide-main{min-height:320px}
  .blog-guide-overlay h2{font-size:28px}
}

/* V63 · dropdown Blogs estable y alineado al estilo de Servicios */
@media (min-width:1121px){
  .blogs-nav-item{padding-bottom:1px}
  .blogs-mega{pointer-events:auto}
  .blogs-mega-card{min-height:74px}
}


/* =========================================================
   V64 · Blogs con el mismo lenguaje visual del menú Servicios
   + miga de pan visible en ambas páginas de Blog
   ========================================================= */
@media (min-width:1121px){
  .blogs-mega{
    width:min(520px,calc(100vw - 40px))!important;
    padding:8px!important;
    gap:6px!important;
    background:#fff!important;
    border:1px solid #dce5e2!important;
    border-radius:12px!important;
    box-shadow:0 12px 28px rgba(4,62,53,.14)!important;
  }
  .blogs-nav-item.blogs-open .blogs-mega{display:grid!important;gap:6px!important}
  .blogs-mega-card{
    min-height:64px!important;
    grid-template-columns:44px minmax(0,1fr) 24px!important;
    gap:10px!important;
    padding:9px 12px!important;
    border:1px solid #d9e5e1!important;
    border-left:4px solid var(--amarillo,#ffc323)!important;
    border-radius:9px!important;
    background:#fff!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .blogs-mega-card:hover,.blogs-mega-card:focus-visible{
    background:#f7fbf9!important;
    border-color:#c7dcd5!important;
    border-left-color:var(--amarillo,#ffc323)!important;
  }
  .blogs-mega-icon{
    width:42px!important;height:42px!important;border-radius:8px!important;
    background:#f3f8f6!important;color:#0a6154!important;
  }
  .blogs-mega-icon svg{width:25px!important;height:25px!important}
  .blogs-mega-copy strong{font:800 14px/1.2 "Montserrat",sans-serif!important;margin:0 0 2px!important}
  .blogs-mega-copy small{font:600 11.5px/1.3 "Nunito Sans",sans-serif!important;color:#687a75!important}
  .blogs-mega-arrow{font-size:20px!important}
}

/* El mismo patrón visual en tablet/móvil, pero dentro del flujo normal */
@media (max-width:1120px){
  .blogs-mega{padding:6px 8px 10px!important}
  .blogs-nav-item.blogs-open .blogs-mega{gap:6px!important}
  .blogs-mega-card{
    min-height:60px!important;
    grid-template-columns:42px minmax(0,1fr) 20px!important;
    gap:9px!important;
    padding:9px 11px!important;
    border:1px solid #d9e5e1!important;
    border-left:4px solid var(--amarillo,#ffc323)!important;
    border-radius:9px!important;
    background:#fff!important;
  }
  .blogs-mega-icon{width:40px!important;height:40px!important;border-radius:8px!important;background:#f3f8f6!important}
  .blogs-mega-icon svg{width:23px!important;height:23px!important}
  .blogs-mega-copy strong{font-size:13.5px!important}
  .blogs-mega-copy small{font-size:11.5px!important}
}

/* Miga de pan visible, uniforme y separada del header */
.pagina-blog .blog-page{padding-top:1px!important}
.pagina-blog .blog-breadcrumb{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  width:min(1220px,calc(100% - 48px))!important;
  margin:18px auto 14px!important;
  padding:0!important;
  position:relative!important;
  z-index:2!important;
  color:#687a75!important;
  font:700 13px/1.35 "Nunito Sans",sans-serif!important;
}
.pagina-blog .blog-breadcrumb a{color:#075b50!important;font-weight:800!important;text-decoration:none!important}
.pagina-blog .blog-breadcrumb span{margin:0!important;color:#aab8b4!important}
.pagina-blog .blog-breadcrumb strong{color:#6d7e79!important;font-weight:700!important}
@media (max-width:760px){
  .pagina-blog .blog-breadcrumb{
    width:calc(100% - 32px)!important;
    margin:14px auto 12px!important;
    font-size:12px!important;
    gap:6px!important;
  }
}


/* V65 · afinado del desplegable Blogs */
@media (min-width:1121px){
  .blogs-mega{
    width:min(472px,calc(100vw - 40px))!important;
    padding:8px!important;
  }
  .blogs-mega-card{
    grid-template-columns:46px minmax(0,1fr) 18px!important;
    gap:10px!important;
    padding:11px 11px!important;
  }
  .blogs-mega-icon{width:46px!important;height:46px!important;}
  .blogs-mega-icon svg{width:26px!important;height:26px!important;}
  .blogs-mega-arrow{font-size:20px!important;}
}
@media (max-width:1120px){
  .blogs-trigger{
    position:relative!important;
    display:block!important;
    width:100%!important;
    border-bottom:1px solid #e5eeeb!important;
  }
  .blogs-trigger>button{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:54px!important;
    padding:15px 48px!important;
    border-bottom:0!important;
    font-size:17px!important;
    line-height:1.3!important;
  }
  .blogs-trigger>button svg{
    position:absolute!important;
    right:16px!important;
    top:50%!important;
    width:16px!important;
    height:16px!important;
    transform:translateY(-50%)!important;
  }
  .blogs-nav-item.blogs-open .blogs-trigger>button svg{
    transform:translateY(-50%) rotate(180deg)!important;
  }
  .blogs-mega{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    padding:7px 0 10px!important;
    overflow:hidden!important;
  }
  .blogs-nav-item.blogs-open .blogs-mega{gap:7px!important;}
  .blogs-mega-card{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    grid-template-columns:40px minmax(0,1fr) 16px!important;
    gap:9px!important;
    padding:10px 9px!important;
    margin:0!important;
    overflow:hidden!important;
  }
  .blogs-mega-icon{width:40px!important;height:40px!important;}
  .blogs-mega-icon svg{width:22px!important;height:22px!important;}
  .blogs-mega-copy{min-width:0!important;overflow:hidden!important;}
  .blogs-mega-copy strong,
  .blogs-mega-copy small{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .blogs-mega-copy strong{font-size:13.5px!important;line-height:1.25!important;}
  .blogs-mega-copy small{font-size:11.5px!important;line-height:1.3!important;}
  .blogs-mega-arrow{font-size:18px!important;}
}
@media (max-width:430px){
  .blogs-mega-card{grid-template-columns:38px minmax(0,1fr) 14px!important;gap:8px!important;padding:9px 8px!important;}
  .blogs-mega-icon{width:38px!important;height:38px!important;}
  .blogs-mega-copy strong{font-size:13px!important;}
  .blogs-mega-copy small{font-size:10.8px!important;}
}

/* Breadcrumbs de Blog: siempre visibles */
.pagina-blog .blog-breadcrumb{
  width:min(1220px,calc(100% - 48px))!important;
  min-height:48px!important;
  margin:0 auto 16px!important;
  padding:0 2px!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  border-bottom:1px solid #e7eeeb!important;
  color:#6a7c77!important;
  font:700 13px/1.3 "Nunito Sans",sans-serif!important;
}
@media (max-width:760px){
  .pagina-blog .blog-breadcrumb{width:calc(100% - 30px)!important;min-height:44px!important;margin-bottom:12px!important;font-size:12px!important;}
}

/* V65 · altura del encabezado: override final después de responsive.css */
@media (min-width:1541px){
  .menu-principal{min-height:102px!important;}
  .encabezado.fijo{padding-bottom:102px!important;}
}
@media (min-width:1121px) and (max-width:1540px){
  .menu-principal{min-height:96px!important;}
  .encabezado.fijo{padding-bottom:96px!important;}
}