:root{--blog-ink:#17212b;--blog-muted:#687581;--blog-paper:#f7f3ef;--blog-accent:#d19a7b;--blog-navy:#06101b}
.blog-hero{padding:168px 0 86px;background:linear-gradient(105deg,rgba(6,16,27,.97),rgba(6,16,27,.78)),url('hero-clinic.webp') center/cover;color:#fff}
.blog-hero .eyebrow,.article-hero .eyebrow{color:#e0a07c;letter-spacing:.15em;text-transform:uppercase;font-weight:700;font-size:.78rem}
.blog-hero h1{font-family:var(--serif);font-size:clamp(3rem,6vw,5.7rem);line-height:.95;max-width:920px;margin:18px 0 22px;font-weight:400}
.blog-hero p{max-width:760px;font-size:1.12rem;line-height:1.7;color:rgba(255,255,255,.83)}
.blog-index{background:var(--blog-paper);padding:76px 0 96px}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.blog-card{background:#fff;border:1px solid rgba(6,16,27,.09);border-radius:22px;overflow:hidden;box-shadow:0 18px 50px rgba(16,24,32,.07);display:flex;flex-direction:column}
.blog-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.blog-card-body{padding:28px 30px 32px;display:flex;flex-direction:column;flex:1}
.blog-meta{font-size:.77rem;letter-spacing:.08em;text-transform:uppercase;color:#a26445;font-weight:700;margin-bottom:10px}
.blog-card h2{font-family:var(--serif);font-size:2rem;line-height:1.08;margin:0 0 14px;color:var(--blog-ink);font-weight:400}
.blog-card p{color:var(--blog-muted);line-height:1.65;margin:0 0 22px}
.blog-card .read-more{margin-top:auto;color:var(--blog-navy);font-weight:750;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.article-hero{padding:164px 0 58px;background:var(--blog-paper)}
.article-breadcrumbs{font-size:.84rem;color:#77818a;margin-bottom:28px}.article-breadcrumbs a{color:#4f5d68;text-decoration:none}.article-breadcrumbs span{margin:0 8px;color:#a8afb5}
.article-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:52px;align-items:center}
.article-hero h1{font-family:var(--serif);font-size:clamp(2.9rem,5.2vw,5rem);line-height:.98;margin:14px 0 22px;color:var(--blog-ink);font-weight:400}
.article-deck{font-size:1.13rem;line-height:1.7;color:var(--blog-muted);max-width:720px}
.article-byline{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:24px;font-size:.86rem;color:#6b7780}
.article-featured{border-radius:24px;overflow:hidden;box-shadow:0 22px 60px rgba(6,16,27,.12)}.article-featured img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.article-wrap{background:#fff;padding:72px 0 100px}.article-layout{display:grid;grid-template-columns:minmax(0,820px) 270px;gap:70px;align-items:start;justify-content:center}
.article-content{font-size:1.04rem;color:#33414b;line-height:1.82}.article-content h2{font-family:var(--serif);font-size:2.5rem;line-height:1.08;color:var(--blog-ink);font-weight:400;margin:58px 0 18px}.article-content h3{font-size:1.28rem;color:var(--blog-ink);margin:34px 0 12px}.article-content p{margin:0 0 22px}.article-content ul,.article-content ol{padding-left:1.4rem;margin:0 0 26px}.article-content li{margin:8px 0}.quick-answer{background:#f7f3ef;border-left:4px solid var(--blog-accent);padding:24px 28px;border-radius:0 16px 16px 0;margin:4px 0 34px}.quick-answer strong{display:block;color:var(--blog-ink);margin-bottom:8px}.article-callout{background:var(--blog-navy);color:#fff;border-radius:22px;padding:32px;margin:42px 0}.article-callout h2,.article-callout h3{color:#fff;margin-top:0}.article-callout p{color:rgba(255,255,255,.78)}.article-callout .btn{margin-top:6px}.faq-item{padding:22px 0;border-top:1px solid #e3e6e8}.faq-item h3{margin:0 0 8px;font-size:1.16rem}.source-list{font-size:.92rem;color:#64717b}.source-list a{color:#385469}.article-sidebar{position:sticky;top:120px}.toc{border:1px solid #e3dfdc;border-radius:18px;padding:24px;background:#faf8f6}.toc strong{display:block;margin-bottom:12px;color:var(--blog-ink)}.toc a{display:block;padding:7px 0;color:#596873;text-decoration:none;font-size:.91rem}.related-box{margin-top:20px;background:var(--blog-navy);border-radius:18px;padding:24px;color:#fff}.related-box a{color:#fff;text-decoration:none;font-weight:700}.related-articles{background:#f7f3ef;padding:68px 0}.related-articles h2{font-family:var(--serif);font-size:2.5rem;font-weight:400;color:var(--blog-ink);margin:0 0 28px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.related-card{background:#fff;border-radius:18px;padding:24px;text-decoration:none;color:var(--blog-ink);border:1px solid #e7e1dc}.related-card span{display:block;color:#a26445;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:8px}.related-card strong{font-family:var(--serif);font-size:1.45rem;line-height:1.15;font-weight:400}.medical-note{font-size:.88rem;background:#f5f7f8;border:1px solid #dfe5e8;border-radius:14px;padding:18px 20px;color:#5a6670;margin:30px 0}
@media(max-width:1100px){.article-hero-grid,.article-layout{grid-template-columns:1fr}.article-sidebar{position:static;max-width:820px}.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.blog-hero{padding:130px 0 64px}.blog-grid{grid-template-columns:1fr}.article-hero{padding:126px 0 42px}.article-hero-grid{gap:28px}.article-hero h1{font-size:clamp(2.5rem,12vw,3.7rem)}.article-content h2{font-size:2rem}.article-wrap{padding:48px 0 72px}.article-layout{gap:36px}.related-grid{grid-template-columns:1fr}.blog-card h2{font-size:1.8rem}}


/* =========================================================
   V61 — Sticky header del Blog
   ========================================================= */

/* El blog utiliza un encabezado oscuro permanente.
   Así el logo y la navegación nunca quedan sobre fondos claros. */
body[data-meta-page-type="blog_index"] .header,
body[data-meta-page-type="blog_article"] .header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:1000 !important;
  padding:8px 0 !important;
  background:rgba(6,16,27,.97) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.16) !important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

body[data-meta-page-type="blog_index"] .header.scrolled,
body[data-meta-page-type="blog_article"] .header.scrolled{
  padding:6px 0 !important;
  background:rgba(6,16,27,.985) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.22) !important;
}

/* Desktop amplio: logo a izquierda, navegación realmente centrada
   y acciones a la derecha. */
@media (min-width:1381px){
  body[data-meta-page-type="blog_index"] .header .container,
  body[data-meta-page-type="blog_article"] .header .container{
    width:min(1540px,calc(100% - 40px)) !important;
    max-width:none !important;
  }

  body[data-meta-page-type="blog_index"] .header .nav,
  body[data-meta-page-type="blog_article"] .header .nav{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:24px !important;
    min-height:64px !important;
    position:relative !important;
  }

  body[data-meta-page-type="blog_index"] .header .brand,
  body[data-meta-page-type="blog_article"] .header .brand{
    grid-column:1 !important;
    justify-self:start !important;
  }

  body[data-meta-page-type="blog_index"] .header .brand img,
  body[data-meta-page-type="blog_article"] .header .brand img{
    width:180px !important;
    max-width:180px !important;
    max-height:66px !important;
  }

  body[data-meta-page-type="blog_index"] .header .nav-links,
  body[data-meta-page-type="blog_article"] .header .nav-links{
    display:contents !important;
  }

  body[data-meta-page-type="blog_index"] .header .nav-primary,
  body[data-meta-page-type="blog_article"] .header .nav-primary{
    grid-column:2 !important;
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:25px !important;
    white-space:nowrap !important;
    margin:0 !important;
  }

  body[data-meta-page-type="blog_index"] .header .nav-primary > a,
  body[data-meta-page-type="blog_article"] .header .nav-primary > a,
  body[data-meta-page-type="blog_index"] .header .nav-primary .nav-dropdown-toggle,
  body[data-meta-page-type="blog_article"] .header .nav-primary .nav-dropdown-toggle{
    font-size:15px !important;
    font-weight:600 !important;
    letter-spacing:.055em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
  }

  body[data-meta-page-type="blog_index"] .header .nav-actions,
  body[data-meta-page-type="blog_article"] .header .nav-actions{
    grid-column:3 !important;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
    margin:0 !important;
    position:static !important;
    white-space:nowrap !important;
  }

  body[data-meta-page-type="blog_index"] .header .menu-toggle,
  body[data-meta-page-type="blog_article"] .header .menu-toggle{
    display:none !important;
  }
}

/* Notebook: usar el off-canvas antes de que Blog + CTAs puedan pisarse. */
@media (min-width:961px) and (max-width:1380px){
  body[data-meta-page-type="blog_index"] .header .nav,
  body[data-meta-page-type="blog_article"] .header .nav{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:62px !important;
  }

  body[data-meta-page-type="blog_index"] .header .nav-links,
  body[data-meta-page-type="blog_article"] .header .nav-links,
  body[data-meta-page-type="blog_index"] .header .nav-primary,
  body[data-meta-page-type="blog_article"] .header .nav-primary,
  body[data-meta-page-type="blog_index"] .header .nav-actions,
  body[data-meta-page-type="blog_article"] .header .nav-actions{
    display:none !important;
  }

  body[data-meta-page-type="blog_index"] .header .menu-toggle,
  body[data-meta-page-type="blog_article"] .header .menu-toggle{
    display:inline-flex !important;
  }
}

/* Mobile: encabezado oscuro compacto y estable. */
@media (max-width:960px){
  body[data-meta-page-type="blog_index"] .header,
  body[data-meta-page-type="blog_article"] .header{
    padding:7px 0 !important;
  }

  body[data-meta-page-type="blog_index"] .header .brand img,
  body[data-meta-page-type="blog_article"] .header .brand img{
    width:158px !important;
    max-width:158px !important;
  }
}


/* =========================================================
   V62 — Miniaturas horizontales y reestructura de artículos
   ========================================================= */

/* Listado del blog */
.blog-grid{gap:32px !important;align-items:stretch}
.blog-card{height:100%}
.blog-card .blog-card-media{display:block;overflow:hidden;background:#e9e6e2;aspect-ratio:16/9}
.blog-card .blog-card-media img{width:100% !important;height:100% !important;display:block;object-fit:cover !important;aspect-ratio:auto !important}
.blog-card-body{padding:24px 26px 30px !important}
.blog-meta{margin-bottom:12px !important}

/* Encabezado interno del artículo */
.article-hero{padding:164px 0 52px !important}
.article-hero-grid{grid-template-columns:1fr !important;gap:34px !important;align-items:start !important}
.article-hero-copy{max-width:980px}
.article-featured{width:100%;max-width:1120px;margin:0 auto;border-radius:24px;overflow:hidden}
.article-featured img{width:100% !important;height:auto !important;display:block;aspect-ratio:16/7 !important;object-fit:cover !important}
.article-byline{gap:10px 20px !important;margin-top:18px !important}

/* Sidebar CTA */
.related-box p{margin:0 0 12px !important;font-size:1.02rem;font-weight:700;color:#fff}
.related-box a{display:inline-flex;align-items:center;gap:6px}

/* También puede interesarle */
.related-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:28px !important}
.related-card{padding:0 !important;overflow:hidden;display:flex;flex-direction:column;min-height:100%}
.related-card .related-card-media{display:block;overflow:hidden;aspect-ratio:16/9;background:#e9e6e2}
.related-card .related-card-media img{width:100%;height:100%;display:block;object-fit:cover}
.related-card .related-card-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.related-card .related-card-body span{display:block;color:#a26445;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:10px}
.related-card .related-card-body strong{font-family:var(--serif);font-size:1.45rem;line-height:1.15;font-weight:400;color:var(--blog-ink)}

@media(max-width:1100px){
  .article-hero{padding:146px 0 46px !important}
  .article-featured{max-width:100%}
  .article-featured img{aspect-ratio:16/8 !important}
}

@media(max-width:760px){
  .blog-index{padding:58px 0 72px !important}
  .blog-card .blog-card-media{aspect-ratio:16/10 !important}
  .blog-card-body{padding:22px 22px 26px !important}
  .article-hero{padding:124px 0 34px !important}
  .article-featured img{aspect-ratio:16/10 !important}
  .related-articles{padding:54px 0 !important}
  .related-grid{grid-template-columns:1fr !important;gap:22px !important}
  .related-card .related-card-media{aspect-ratio:16/10 !important}
  .related-card .related-card-body{padding:20px 20px 24px !important}
}


/* =========================================================
   V66 — Revisión visual final del Blog
   Tipografía, espaciados y consistencia
   ========================================================= */

/* Hero general del Blog: menor escala y mejor proporción */
.blog-hero{
  padding:154px 0 74px !important;
}
.blog-hero h1{
  font-size:clamp(2.65rem,4.8vw,4.75rem) !important;
  line-height:1.01 !important;
  max-width:860px !important;
  margin:14px 0 18px !important;
}
.blog-hero p{
  font-size:1.05rem !important;
  line-height:1.65 !important;
  max-width:720px !important;
}

/* Índice del Blog */
.blog-index{
  padding:66px 0 88px !important;
}
.blog-index .section-title{
  font-size:clamp(2.15rem,3.3vw,3.05rem) !important;
  line-height:1.08 !important;
  margin-bottom:30px !important;
}
.blog-grid{
  gap:30px !important;
}
.blog-card-body{
  padding:22px 25px 28px !important;
}
.blog-card h2{
  font-size:1.72rem !important;
  line-height:1.12 !important;
  margin-bottom:12px !important;
}
.blog-card p{
  font-size:.97rem !important;
  line-height:1.62 !important;
  margin-bottom:19px !important;
}
.blog-meta{
  font-size:.72rem !important;
  margin-bottom:9px !important;
}
.blog-card .read-more{
  font-size:.94rem !important;
}

/* Encabezado interno de los artículos */
.article-hero{
  padding:146px 0 46px !important;
}
.article-breadcrumbs{
  margin-bottom:22px !important;
}
.article-hero-grid{
  gap:27px !important;
}
.article-hero-copy{
  max-width:940px !important;
}
.article-hero h1{
  font-size:clamp(2.45rem,4vw,4.05rem) !important;
  line-height:1.02 !important;
  margin:12px 0 17px !important;
  max-width:920px !important;
}
.article-deck{
  font-size:1.04rem !important;
  line-height:1.62 !important;
  max-width:760px !important;
}
.article-byline{
  font-size:.82rem !important;
  margin-top:17px !important;
}
.article-featured{
  max-width:1060px !important;
  border-radius:20px !important;
}

/* Cuerpo del artículo: jerarquía más contenida */
.article-wrap{
  padding:62px 0 88px !important;
}
.article-layout{
  gap:58px !important;
}
.article-content{
  font-size:1rem !important;
  line-height:1.78 !important;
}
.article-content h2{
  font-size:2.18rem !important;
  line-height:1.12 !important;
  margin:48px 0 16px !important;
}
.article-content h3{
  font-size:1.18rem !important;
  line-height:1.3 !important;
  margin:28px 0 10px !important;
}
.article-content p{
  margin-bottom:19px !important;
}
.quick-answer{
  padding:22px 25px !important;
  margin-bottom:30px !important;
}
.article-callout{
  padding:28px !important;
  margin:36px 0 !important;
}
.faq-item{
  padding:18px 0 !important;
}
.faq-item h3{
  font-size:1.1rem !important;
}

/* Sidebar */
.article-sidebar{
  top:110px !important;
}
.toc{
  padding:21px !important;
}
.toc a{
  font-size:.88rem !important;
  line-height:1.45 !important;
  padding:6px 0 !important;
}
.related-box{
  padding:21px !important;
}
.related-box p{
  font-size:.98rem !important;
}
.related-box a{
  font-size:.92rem !important;
}

/* Artículos relacionados */
.related-articles{
  padding:56px 0 64px !important;
}
.related-articles h2{
  font-size:2.18rem !important;
  line-height:1.1 !important;
  margin-bottom:24px !important;
}
.related-grid{
  gap:24px !important;
}
.related-card .related-card-body{
  padding:20px 21px 24px !important;
}
.related-card .related-card-body span{
  font-size:.69rem !important;
  margin-bottom:8px !important;
}
.related-card .related-card-body strong{
  font-size:1.28rem !important;
  line-height:1.18 !important;
}

/* Tablet */
@media (max-width:1100px){
  .blog-hero h1{font-size:clamp(2.55rem,6vw,4rem) !important}
  .article-hero h1{font-size:clamp(2.35rem,5.8vw,3.65rem) !important}
  .article-layout{gap:38px !important}
  .article-sidebar{max-width:100% !important}
  .related-grid{gap:20px !important}
}

/* Mobile */
@media (max-width:760px){
  .blog-hero{
    padding:116px 0 52px !important;
  }
  .blog-hero h1{
    font-size:clamp(2.25rem,10.5vw,3.15rem) !important;
    line-height:1.03 !important;
  }
  .blog-hero p{
    font-size:1rem !important;
  }
  .blog-index{
    padding:48px 0 66px !important;
  }
  .blog-index .section-title{
    font-size:2rem !important;
    margin-bottom:24px !important;
  }
  .blog-card-body{
    padding:20px 20px 24px !important;
  }
  .blog-card h2{
    font-size:1.55rem !important;
  }
  .article-hero{
    padding:112px 0 30px !important;
  }
  .article-breadcrumbs{
    margin-bottom:18px !important;
  }
  .article-hero h1{
    font-size:clamp(2.15rem,10vw,3rem) !important;
    line-height:1.04 !important;
  }
  .article-deck{
    font-size:1rem !important;
    line-height:1.58 !important;
  }
  .article-featured{
    border-radius:16px !important;
  }
  .article-wrap{
    padding:42px 0 64px !important;
  }
  .article-content{
    font-size:.98rem !important;
    line-height:1.72 !important;
  }
  .article-content h2{
    font-size:1.82rem !important;
    margin:38px 0 14px !important;
  }
  .article-content h3{
    font-size:1.12rem !important;
  }
  .quick-answer{
    padding:19px 20px !important;
  }
  .related-articles{
    padding:46px 0 54px !important;
  }
  .related-articles h2{
    font-size:1.9rem !important;
  }
  .related-card .related-card-body strong{
    font-size:1.22rem !important;
  }
}