/* ============================================================
   Dr. Víctor Pérez de Arenaza — sistema de diseño compartido
   Usado por index.html y por las páginas de /servicios/*
   ============================================================ */
:root{
  --verde:#224233;
  --verde-hover:#2E5A46;
  --verde-deep:#1A3428;
  --beige:#F7F4EE;
  --beige-border:#E7E1D3;
  --antracita:#282B2B;
  --blanco:#FFFFFF;
  --text-dark:#282B2B;
  --text-body:#565F58;
  --text-muted:#8A9089;
  --radius-pill:999px;
  --radius-card:18px;
  --shadow-card:0 10px 30px -12px rgba(34,66,51,0.18);
  --shadow-lg:0 24px 60px -20px rgba(26,52,40,.35);
  --max-w:1180px;
  --font-serif:"Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-sans:"Inter", -apple-system, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text-body);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}
body.modal-open{position:fixed; left:0; right:0; overflow:hidden;}
h1,h2,h3{
  font-family:var(--font-serif);
  color:var(--text-dark);
  margin:0 0 16px;
  line-height:1.15;
  font-weight:600;
  text-wrap:balance;
}
h1{font-size:50px; font-weight:700;}
h2{font-size:36px; font-weight:700;}
h3{font-size:20px; font-weight:600; font-family:var(--font-sans);}
p{line-height:1.65; margin:0 0 16px;}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%; display:block;}
ul{margin:0; padding:0;}
button{font-family:inherit;}
.wrap{max-width:var(--max-w); margin:0 auto; padding:0 28px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 34px;
  border-radius:var(--radius-pill);
  font-family:var(--font-sans);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-solid{background:var(--verde); color:var(--blanco);}
.btn-solid:hover{background:var(--verde-hover); box-shadow:0 10px 24px -8px rgba(34,66,51,.5);}
.btn-outline-light{background:transparent; color:var(--blanco); border-color:rgba(255,255,255,.65);}
.btn-outline-light:hover{background:rgba(255,255,255,.12);}
.btn-fill-light{background:var(--blanco); color:var(--verde);}
.btn-fill-light:hover{box-shadow:0 10px 24px -8px rgba(0,0,0,.25);}
.btn-outline-dark{background:transparent; color:var(--verde); border-color:var(--verde);}
.btn-outline-dark:hover{background:var(--verde); color:#fff;}
section{position:relative;}
.section-pad{padding:76px 0;}
.section-pad-sm{padding:48px 0;}
.eyebrow{
  font-family:var(--font-sans);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:12.5px;
  color:var(--verde);
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--verde); display:block;}
.center .eyebrow{justify-content:center;}
.center .eyebrow::before{display:none;}
.center{text-align:center;}
.lead{font-size:18px; color:var(--text-body); max-width:640px;}
.center .lead{margin-left:auto; margin-right:auto;}

.reveal{opacity:0; transform:translateY(14px) scale(.99); transition:opacity .4s ease, transform .4s ease;}
.reveal.in{opacity:1; transform:translateY(0) scale(1);}
/* Element stagger inside grids that reveal as one block: the grid itself
   still does the normal .reveal fade, and its items ease in a beat behind
   one another on top of that, purely via CSS (no markup/JS changes). */
.factor-grid.reveal .factor-chip,
.dashboard-grid.reveal .dashboard-item,
.resource-grid.reveal .resource-card,
.news-grid.reveal .news-card,
.path-grid.reveal .path-card,
.profile-grid.reveal .profile-chip,
.question-wall.reveal .question-line{
  opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease;
}
.factor-grid.reveal.in .factor-chip,
.dashboard-grid.reveal.in .dashboard-item,
.resource-grid.reveal.in .resource-card,
.news-grid.reveal.in .news-card,
.path-grid.reveal.in .path-card,
.profile-grid.reveal.in .profile-chip,
.question-wall.reveal.in .question-line{
  opacity:1; transform:translateY(0);
}
.factor-grid .factor-chip:nth-child(1), .dashboard-grid .dashboard-item:nth-child(1), .resource-grid .resource-card:nth-child(1), .news-grid .news-card:nth-child(1), .path-grid .path-card:nth-child(1), .profile-grid .profile-chip:nth-child(1), .question-wall .question-line:nth-child(1){transition-delay:0s;}
.factor-grid .factor-chip:nth-child(2), .dashboard-grid .dashboard-item:nth-child(2), .resource-grid .resource-card:nth-child(2), .news-grid .news-card:nth-child(2), .path-grid .path-card:nth-child(2), .profile-grid .profile-chip:nth-child(2), .question-wall .question-line:nth-child(2){transition-delay:.05s;}
.factor-grid .factor-chip:nth-child(3), .dashboard-grid .dashboard-item:nth-child(3), .resource-grid .resource-card:nth-child(3), .news-grid .news-card:nth-child(3), .path-grid .path-card:nth-child(3), .profile-grid .profile-chip:nth-child(3), .question-wall .question-line:nth-child(3){transition-delay:.1s;}
.factor-grid .factor-chip:nth-child(4), .dashboard-grid .dashboard-item:nth-child(4), .resource-grid .resource-card:nth-child(4), .news-grid .news-card:nth-child(4), .profile-grid .profile-chip:nth-child(4), .question-wall .question-line:nth-child(4){transition-delay:.15s;}
.factor-grid .factor-chip:nth-child(5), .dashboard-grid .dashboard-item:nth-child(5), .resource-grid .resource-card:nth-child(5), .profile-grid .profile-chip:nth-child(5), .question-wall .question-line:nth-child(5){transition-delay:.2s;}
.factor-grid .factor-chip:nth-child(6), .dashboard-grid .dashboard-item:nth-child(6), .resource-grid .resource-card:nth-child(6), .profile-grid .profile-chip:nth-child(6), .question-wall .question-line:nth-child(6){transition-delay:.25s;}
.factor-grid .factor-chip:nth-child(7), .dashboard-grid .dashboard-item:nth-child(7){transition-delay:.3s;}
.factor-grid .factor-chip:nth-child(8), .dashboard-grid .dashboard-item:nth-child(8){transition-delay:.35s;}
.factor-grid .factor-chip:nth-child(9){transition-delay:.4s;}
.factor-grid .factor-chip:nth-child(10){transition-delay:.45s;}
.factor-grid .factor-chip:nth-child(11){transition-delay:.5s;}
.factor-grid .factor-chip:nth-child(12){transition-delay:.55s;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .factor-grid .factor-chip, .dashboard-grid .dashboard-item, .resource-grid .resource-card, .news-grid .news-card, .path-grid .path-card, .profile-grid .profile-chip, .question-wall .question-line{opacity:1; transform:none; transition:none;}
  *{scroll-behavior:auto !important;}
}

/* ---------- SECTION-TO-SECTION VISUAL CONTINUITY ---------- */
/* Soft gradient seams that replace hard background cuts between full-bleed
   sections. Placed as a zero-height sibling right after the earlier
   section closes; the negative margin pulls it up to paint over that
   section's last 120px so the color shift reads as a gradual blend
   rather than a line. Purely decorative — no interactive content here. */
.blend{height:120px; margin-top:-120px; position:relative; z-index:1; pointer-events:none;}
.blend-w-b{background:linear-gradient(180deg, var(--blanco) 0%, var(--beige) 100%);}
.blend-b-w{background:linear-gradient(180deg, var(--beige) 0%, var(--blanco) 100%);}
.blend-w-d{background:linear-gradient(180deg, var(--blanco) 0%, var(--verde-deep) 100%);}
.blend-d-w{background:linear-gradient(180deg, var(--verde-deep) 0%, var(--blanco) 100%);}
.blend-b-d{background:linear-gradient(180deg, var(--beige) 0%, var(--verde-deep) 100%);}
.blend-d-b{background:linear-gradient(180deg, var(--verde-deep) 0%, var(--beige) 100%);}
.blend-w-v{background:linear-gradient(180deg, var(--blanco) 0%, var(--verde) 100%);}
.blend-v-w{background:linear-gradient(180deg, var(--verde) 0%, var(--blanco) 100%);}
.blend-b-v{background:linear-gradient(180deg, var(--beige) 0%, var(--verde) 100%);}
.blend-v-b{background:linear-gradient(180deg, var(--verde) 0%, var(--beige) 100%);}
.blend-v-d{background:linear-gradient(180deg, var(--verde) 0%, var(--verde-deep) 100%);}
.blend-d-v{background:linear-gradient(180deg, var(--verde-deep) 0%, var(--verde) 100%);}

/* Organic curved seam — an alternative to .blend for the page's single
   most important transition (hero into the content below). One large,
   flat arc; kept extremely subtle so it still reads as clinical/premium. */
.curve-seam{display:block; width:100%; height:64px; margin-bottom:-1px; position:relative; z-index:1;}
.curve-seam path{transition:fill .3s ease;}

/* Lets a photo card bleed a little past its own section into the next
   one, so the image is the element that visually introduces what follows
   instead of the section ending in a flat edge. */
.bleed-down{margin-bottom:-56px; position:relative; z-index:2;}
@media (max-width:768px){
  .blend{height:64px; margin-top:-64px;}
  .bleed-down{margin-bottom:-28px;}
}

/* ---------- TOP UTILITY BAR ---------- */
.top-bar{background:var(--verde-deep); color:rgba(255,255,255,.85); font-size:13px;}
.top-bar .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:9px 28px;}
.top-bar .top-left{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.top-bar .top-item{display:flex; align-items:center; gap:7px;}
.top-bar svg{width:14px; height:14px; flex-shrink:0;}
.top-bar .socials a{width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.28); display:flex; align-items:center; justify-content:center;}
.top-bar .socials{display:flex; gap:8px;}
.top-bar .socials svg{width:12px; height:12px;}

/* ---------- HEADER ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--beige-border);
  transition:box-shadow .3s ease;
}
header.site-header.scrolled{box-shadow:0 8px 24px -16px rgba(34,66,51,.3);}
/* Header runs wider than the page's own content column (var(--max-w)) and
   with tighter side padding than .wrap, on purpose: it pushes the logo and
   the "Agendar cita" button noticeably closer to the true viewport edges,
   giving the nav links more breathing room between them — shared chrome,
   so this applies to the header on every page. */
.header-inner{max-width:1340px; margin:0 auto; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo-img{height:60px; width:auto;}
/* ---------- HOME-ONLY: larger brand logos (Prompt 1, pt.10) ----------
   Scoped to body.page-home (set only on site/index.html) because
   .logo-img / .header-inner / .footer-brand are shared chrome rendered on
   every page of the site (site.css is loaded by all 5 pages) — this keeps
   the 4 service pages visually untouched while doubling the mark's
   presence on the Home page specifically, as requested. */
body.page-home .header-inner{padding:12px 28px;}
body.page-home .logo-img{height:104px;}
body.page-home .cta-copy .logo-img{height:96px; margin-bottom:24px;}
body.page-home .footer-brand .logo-img{height:132px; margin-bottom:20px;}
@media (max-width:768px){
  body.page-home .header-inner{padding:12px 28px;}
  body.page-home .logo-img{height:76px;}
  body.page-home .footer-brand .logo-img{height:104px;}
  body.page-home .cta-copy .logo-img{height:76px;}
}
nav.main-nav{display:flex; align-items:center; gap:26px;}
nav.main-nav a.nav-link{font-size:14.5px; font-weight:500; color:var(--text-dark); position:relative; padding:4px 0;}
nav.main-nav a.nav-link::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--verde); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
nav.main-nav a.nav-link:hover::after{transform:scaleX(1);}
.header-cta{display:flex; align-items:center; gap:18px;}
.header-cta .btn{padding:12px 26px; font-size:12.5px;}
.menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.menu-toggle span{width:26px; height:2px; background:var(--verde); display:block;}
.mobile-cta-link{display:none;}

/* ---------- NAV: "Servicios" hover dropdown ----------
   Desktop (>1200px, above the mobile-drawer breakpoints below): hovering or
   keyboard-focusing "Servicios" reveals a small panel with a direct link to
   each current service page. Evaluación integral is intentionally absent —
   it is no longer a service. Below the drawer breakpoints the panel is
   rendered inline/always-open as a short indented sub-list under
   "Servicios", since there is no hover on touch. */
.nav-item-dropdown{position:relative;}
.nav-link-dropdown{display:inline-flex; align-items:center; gap:5px;}
.nav-caret{display:inline-flex; width:11px; height:11px; transition:transform .2s ease;}
.nav-caret svg{width:100%; height:100%;}
.nav-item-dropdown:hover .nav-caret, .nav-item-dropdown:focus-within .nav-caret{transform:rotate(180deg);}
/* .nav-dropdown-menu is a pure positioning shell: it starts flush against the
   trigger (top:100%, no gap) and uses padding-top — not a margin/offset — to
   push the visible panel down. Because that padding is still part of the
   element's own box, it stays part of the :hover hit-region, so the cursor
   moving from "Servicios" down into the panel never crosses a dead zone and
   the menu never flickers shut mid-move. All visible chrome (background,
   border, shadow) lives on the inner .nav-dropdown-panel instead. */
.nav-dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:14px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
  z-index:60;
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto;
}
.nav-dropdown-panel{
  min-width:200px; background:#fff; border:1px solid var(--beige-border); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:8px; display:flex; flex-direction:column; gap:2px;
  transform:translateY(-6px); transition:transform .2s ease;
}
.nav-item-dropdown:hover .nav-dropdown-panel,
.nav-item-dropdown:focus-within .nav-dropdown-panel{
  transform:translateY(0);
}
.nav-dropdown-panel a{display:block; padding:10px 14px; border-radius:8px; font-size:14px; font-weight:500; color:var(--text-dark); white-space:nowrap;}
.nav-dropdown-panel a:hover, .nav-dropdown-panel a:focus{background:var(--beige); color:var(--verde-deep);}

/* ---------- HERO (compact split: text left, photo right) ---------- */
.hero{position:relative; overflow:hidden; background:var(--verde-deep); display:grid; grid-template-columns:1.34fr 1fr;}
/* Angle brought close to horizontal (was 120deg): at a steeper diagonal the
   color at the column's own right edge drifted noticeably between the top
   and bottom of the hero, which is what made the old photo-side blend read
   as an uneven "cloud" rather than a clean edge — this keeps the right edge
   (where it meets the photo) a flat, uniform var(--verde-hover) at every
   height, so the scrim below can match it exactly with no visible seam. */
.hero-copy-col{position:relative; display:flex; align-items:center; padding:68px 0; background:linear-gradient(95deg, var(--verde-deep) 0%, var(--verde) 62%, var(--verde-hover) 100%); z-index:2;}
.hero-copy-col .wrap{max-width:610px; margin:0; margin-left:auto; padding-right:56px;}
.hero-copy-col .eyebrow{color:#D9C9A8; margin-bottom:10px;}
.hero-copy-col .eyebrow::before{background:#D9C9A8;}
.hero h1{color:#fff; font-size:45px; margin-bottom:16px;}
.hero .lead{color:rgba(255,255,255,.88); font-size:18px; max-width:530px; margin-bottom:0;}
.hero .btn-row{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap;}
/* Photo column: intentionally a touch smaller/less dominant than before
   (narrower fr-share above, capped height here) so the copy column reads
   as the primary element and the portrait feels like an elegant support. */
.hero-photo-col{position:relative; overflow:hidden; background:var(--verde-deep); min-height:660px; max-height:78vh;}
.hero-photo-col img{width:100%; height:100%; object-fit:cover; object-position:center 68%; display:block; position:absolute; inset:0;}
/* Single, long, eased gradient (no blur pseudo-elements) carrying the photo
   from a flat var(--verde-hover) — matching the copy column's own right
   edge exactly, see above — down through nine stops to fully transparent.
   The extra stops approximate an ease-out curve (fast fade near the seam,
   long soft tail into the photo) instead of a straight linear ramp, which
   is what reads as "progressive" rather than a visible band. */
.hero-photo-col .photo-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--verde-hover) 0%,
    rgba(46,90,70,.94) 7%,
    rgba(46,90,70,.82) 15%,
    rgba(46,90,70,.65) 24%,
    rgba(46,90,70,.47) 33%,
    rgba(46,90,70,.31) 42%,
    rgba(46,90,70,.18) 51%,
    rgba(46,90,70,.08) 60%,
    rgba(46,90,70,.02) 69%,
    rgba(46,90,70,0) 78%);
}

.hero-badges{position:relative; z-index:3; margin-top:-40px;}
.hero-badges .wrap{background:#fff; border-radius:20px; box-shadow:var(--shadow-lg); display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden;}
.hero-badge{display:flex; align-items:center; gap:14px; padding:24px 28px; border-right:1px solid var(--beige-border);}
.hero-badge:last-child{border-right:none;}
.hero-badge .ic{width:44px; height:44px; border-radius:12px; background:var(--beige); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.hero-badge .ic svg{width:22px; height:22px; color:var(--verde);}
.hero-badge .txt{font-size:13.5px; color:var(--text-body); line-height:1.35;}
.hero-badge .txt strong{display:block; color:var(--text-dark); font-family:var(--font-serif); font-size:15.5px; font-weight:700;}

/* ---------- SERVICES (real links to detail pages) ---------- */
/* #servicios only exists on the Home page, so this bottom-padding override
   is scoped to Home and does not touch the shared .section-pad used by the
   service pages. Root cause of the "cards cut off" bug: the seam gradient
   right after this section (.blend, 120px / 64px tall) overlaps the
   section's last 120px, but .section-pad only reserves 76px there — so the
   last ~44px of real content (the "Más información" links) sat underneath
   the fade. Padding-bottom here is raised well past the blend's height so
   the cards always finish clear of it. */
#servicios{padding-bottom:150px;}
@media (max-width:768px){ #servicios{padding-bottom:104px;} }
/* 4 services now in a single row (was 3) — the extra column already takes
   each card from ~33% to 25% of the row's width, so the padding/type scale
   below is trimmed by a matching ~20% rather than stacked on top of it,
   keeping the smaller cards feeling proportioned instead of cramped. */
.services-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:56px;}
.services-cards .service-card:nth-child(1){transition-delay:0s;}
.services-cards .service-card:nth-child(2){transition-delay:.07s;}
.services-cards .service-card:nth-child(3){transition-delay:.14s;}
.services-cards .service-card:nth-child(4){transition-delay:.21s;}
.service-card{
  background:var(--beige); border:1px solid var(--beige-border); border-radius:var(--radius-card);
  padding:7px; overflow:hidden; text-align:left; display:block;
  transition:transform .3s ease, box-shadow .3s ease;
}
.service-card:hover, .service-card:focus-visible{transform:translateY(-6px); box-shadow:var(--shadow-card); outline:none;}
.service-card .thumb{aspect-ratio:16/12; border-radius:12px; background:var(--verde); overflow:hidden; margin-bottom:14px; position:relative;}
.service-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.service-card:hover .thumb img{transform:scale(1.06);}
/* Icon variant: for a service without a photo yet — same footprint as a
   photo thumb, centered line icon on the brand green instead. */
.service-card .thumb-icon{transform:translateZ(0); display:flex; align-items:center; justify-content:center;}
.service-card .thumb-ic{width:30%; max-width:52px; color:rgba(255,255,255,.92); transition:transform .5s ease;}
.service-card .thumb-ic svg{width:100%; height:100%;}
.service-card:hover .thumb-ic{transform:scale(1.08);}
.service-card .pill-label{position:absolute; bottom:-16px; left:16px; background:var(--verde-deep); color:#fff; font-family:var(--font-sans); font-weight:700; font-size:12px; padding:9px 16px; border-radius:var(--radius-pill); white-space:nowrap; box-shadow:0 8px 18px -8px rgba(26,52,40,.6);}
.service-card .card-body{padding:22px 14px 18px;}
.service-card .card-body h3{font-size:15px; margin-bottom:7px;}
.service-card .card-body p{font-size:12.5px; margin:0 0 11px;}
.service-card .more-link{font-size:11.5px; font-weight:700; color:var(--verde); text-transform:uppercase; letter-spacing:.03em; display:inline-flex; align-items:center; gap:4px;}

/* ---------- SOBRE MÍ ---------- */
/* Editorial rebalance: text column widened (was an even 1fr/1fr split) and
   made the primary element; the portrait shrinks, caps its own width, and
   sits right-aligned in its column as a supporting visual rather than an
   equal-weight block. */
.why-section{background:var(--beige);}
.why-section .wrap{display:grid; grid-template-columns:1.32fr .95fr; gap:70px; align-items:center;}
.why-copy .eyebrow{margin-bottom:20px;}
.why-copy h2{font-size:40px; line-height:1.14;}
.why-copy p{font-size:17.5px; line-height:1.75; color:var(--text-body);}
.why-list{margin-top:14px; display:flex; flex-direction:column; gap:20px;}
.why-check{display:flex; gap:14px; align-items:flex-start; font-size:16.5px; color:var(--text-dark); font-weight:500;}
.why-check .tick{width:26px; height:26px; border-radius:50%; background:var(--verde); flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px;}
.why-check .tick svg{width:14px; height:14px; color:#fff;}
.why-creds{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;}
.cred-pill{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--beige-border); border-radius:var(--radius-pill); padding:10px 18px; font-size:13px; font-weight:600; color:var(--text-dark);}
.cred-pill svg{width:15px; height:15px; color:var(--verde);}
.cred-pill.stat{background:rgba(34,66,51,0.08); border-color:rgba(34,66,51,0.2);}
.cred-pill.stat strong{font-family:var(--font-serif); font-weight:700; font-size:16px; color:var(--verde);}
.why-photo{position:relative; aspect-ratio:4/5; max-width:360px; margin-left:auto; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-card); background:#fff; border:1px solid var(--beige-border);}
.why-photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- EVOLVE ---------- */
/* position:relative + overflow:hidden here so the ::before watermark below
   (VP monogram, left half, barely-there opacity) stays clipped to this
   section and never bleeds into neighboring sections or causes horizontal
   scroll. Direct .wrap children get z-index:1 so all real content always
   paints above the watermark regardless of DOM order. */
.evolve{background:var(--blanco); position:relative; overflow:hidden;}
.evolve > .wrap{position:relative; z-index:1;}
.evolve::before{
  content:""; position:absolute; left:-8%; top:50%; transform:translateY(-50%);
  width:42%; max-width:600px; aspect-ratio:532/585;
  background:url("img/vp-monogram.png") no-repeat center/contain;
  opacity:.05; pointer-events:none; z-index:0;
}
@media (max-width:768px){
  .evolve::before{width:70%; left:-14%; opacity:.045;}
  /* Phone widths are narrow enough that even the shorter box shows a
     comfortable amount of the portrait photo, so drop back down from the
     taller tablet value above. */
  .cta-photo{min-height:280px;}
}
.evolve-intro{max-width:760px;}
/* Vertical rhythm tightened throughout (was 52/18/56/64px) so the whole
   EVOLVE composition reads as one compact, premium block rather than a
   loosely-spaced stack — per Prompt 1 point 4. #evolve-scoped so it never
   touches .evolve-lockup/.evolve-tagline as reused inside .evolve-teaser
   on the Obesidad service page. */
#evolve .evolve-lockup{
  display:flex; justify-content:center; align-items:flex-start; gap:clamp(10px,3vw,34px);
  margin:34px 0 14px; flex-wrap:wrap;
}
.evolve-lockup .lu{display:flex; flex-direction:column; align-items:center; gap:10px;}
.evolve-lockup .lu .letter{
  font-family:var(--font-serif); font-weight:700; font-size:clamp(38px,6vw,64px); color:var(--verde); line-height:1;
}
.evolve-lockup .lu .word{font-family:var(--font-sans); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);}
#evolve .evolve-tagline{text-align:center; font-size:15.5px; font-weight:600; color:var(--text-dark); margin:0 0 34px;}

#evolve .evolve-stepper{display:flex; align-items:flex-start; justify-content:space-between; position:relative; margin-bottom:40px;}
.evolve-stepper::before{content:""; position:absolute; top:19px; left:5%; right:5%; height:1.5px; background:var(--beige-border); z-index:0;}
.stepper-node{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; cursor:pointer; background:none; border:none; font-family:inherit;}
.stepper-node .dot{width:40px; height:40px; border-radius:50%; background:#fff; border:1.5px solid var(--verde); color:var(--verde); font-family:var(--font-serif); font-weight:700; font-size:17px; display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease;}
.stepper-node:hover .dot, .stepper-node.active .dot{background:var(--verde); color:#fff;}
.stepper-node .num{font-size:10.5px; color:var(--text-muted); font-weight:600; letter-spacing:.04em;}
.stepper-node .lbl{font-size:12.5px; font-weight:700; color:var(--text-dark); letter-spacing:.02em; text-align:center;}

.stage-grid{display:flex; flex-direction:column; gap:16px;}
.stage-card{
  background:var(--beige); border:1px solid var(--beige-border); border-radius:var(--radius-card);
  padding:30px 34px; transition:box-shadow .25s ease, border-color .25s ease;
}
.stage-card.open{box-shadow:var(--shadow-card); border-color:var(--verde);}
.stage-head{display:flex; align-items:flex-start; gap:22px; cursor:pointer;}
.stage-head .badge{
  flex-shrink:0; width:64px; height:64px; border-radius:16px; background:var(--verde); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
.stage-head .badge .n{font-size:10px; font-weight:700; opacity:.75; letter-spacing:.04em;}
.stage-head .badge .l{font-family:var(--font-serif); font-size:26px; font-weight:700;}
.stage-head .txt{flex:1;}
.stage-head h3{font-family:var(--font-serif); font-size:21px; margin-bottom:6px;}
.stage-head .strong-line{font-weight:700; color:var(--text-dark); font-size:15px; margin:0 0 4px;}
.stage-head .short-line{font-size:14.5px; margin:0; color:var(--text-body);}
.stage-toggle{
  flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--beige-border); background:#fff;
  display:flex; align-items:center; justify-content:center; transition:transform .25s ease, border-color .25s ease; margin-top:4px;
}
.stage-card.open .stage-toggle{transform:rotate(45deg); border-color:var(--verde);}
.stage-toggle svg{width:16px; height:16px; color:var(--verde);}
.stage-panel{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.stage-panel-inner{padding:22px 0 4px 86px;}
.stage-panel-inner p{font-size:13.5px; color:var(--text-muted); margin:0 0 10px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:11.5px;}
.stage-panel-inner ul{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;}
.stage-panel-inner li{font-size:13px; background:#fff; border:1px solid var(--beige-border); border-radius:var(--radius-pill); padding:7px 14px; color:var(--text-dark);}

.stage-philosophy{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px;}
.stage-philosophy li{font-size:13.5px; color:var(--text-dark); font-weight:500; padding-left:18px; position:relative;}
.stage-philosophy li::before{content:"—"; position:absolute; left:0; color:var(--verde);}
.stage-message{font-size:14.5px; font-weight:700; color:var(--verde-deep); margin:4px 0 16px; font-family:var(--font-serif); font-style:italic;}

/* ---------- EVOLVE: single dynamic content box under the letters ---------- */
.evolve-panel-box{
  position:relative; background:var(--beige); border:1px solid var(--beige-border); border-radius:var(--radius-card);
  padding:34px 48px; display:grid; box-shadow:var(--shadow-card);
}
.evolve-panel-content{
  grid-row:1; grid-column:1; opacity:0; visibility:hidden; transform:translateY(10px); filter:blur(3px);
  transition:opacity .4s ease, transform .4s ease, filter .4s ease; pointer-events:none;
}
.evolve-panel-content.active{opacity:1; visibility:visible; transform:translateY(0); filter:blur(0); pointer-events:auto;}
.epb-head{display:flex; align-items:flex-start; gap:22px; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--beige-border);}
.epb-head .badge{
  flex-shrink:0; width:64px; height:64px; border-radius:16px; background:var(--verde); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
.epb-head .badge .n{font-size:10px; font-weight:700; opacity:.75; letter-spacing:.04em;}
.epb-head .badge .l{font-family:var(--font-serif); font-size:26px; font-weight:700;}
.epb-head .txt{flex:1;}
.epb-head h3{font-family:var(--font-serif); font-size:23px; margin-bottom:8px;}
.epb-head .strong-line{font-weight:700; color:var(--text-dark); font-size:15.5px; margin:0 0 6px;}
.epb-head .short-line{font-size:14.5px; margin:0; color:var(--text-body); max-width:620px;}
.epb-label{display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:18px;}
.epb-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.epb-item{display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid var(--beige-border); border-radius:14px; padding:18px 16px; transition:transform .3s ease, box-shadow .3s ease;}
.epb-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-card);}
/* Icons made larger and more present (48px circular tile vs the former
   38px rounded square), with a soft inset ring and bolder stroke so each
   mark reads clearly at a glance rather than as a faint line-icon. */
.epb-ic{
  flex-shrink:0; width:48px; height:48px; border-radius:50%;
  background:linear-gradient(150deg,#EFEBDF,var(--beige));
  box-shadow:inset 0 0 0 1px var(--beige-border);
  display:flex; align-items:center; justify-content:center; color:var(--verde);
}
.epb-item:hover .epb-ic{background:var(--verde); color:#fff; box-shadow:inset 0 0 0 1px var(--verde); transition:background .3s ease, color .3s ease, box-shadow .3s ease;}
.epb-ic svg{width:24px; height:24px; stroke-width:1.9;}
.epb-item strong{display:block; font-family:var(--font-sans); font-size:13.5px; font-weight:700; color:var(--text-dark); margin-bottom:3px;}
.epb-item p{font-size:12.5px; color:var(--text-body); margin:0; line-height:1.4;}
@media (prefers-reduced-motion: reduce){
  .evolve-panel-content{transition:none; filter:none; transform:none;}
}

/* margin-bottom is the fix for a real bug: the section's own seam gradient
   right after </section> (.blend, 120px tall / 64px on mobile) overlaps
   this card's last 120px, but #evolve's bottom padding (from .section-pad)
   only reserves 76px — so the card's rounded bottom edge and CTA buttons
   were getting faded/covered by the incoming white→beige gradient. This
   margin, on top of that 76px, clears the blend zone with a safety
   margin at every breakpoint tested. */
.evolve-final-cta{margin-top:40px; margin-bottom:96px; background:var(--verde-deep); border-radius:24px; padding:40px 48px; text-align:center;}
.evolve-final-cta h3{color:#fff; font-family:var(--font-serif); font-size:26px; margin-bottom:10px;}
.evolve-final-cta p{color:rgba(255,255,255,.82); max-width:520px; margin:0 auto 26px; font-size:15px;}
.evolve-final-cta .cta-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ---------- TE LO EXPLICO / RECURSOS (shared card style) ---------- */
.explico{background:var(--beige);}
.explico-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:52px;}
.explico-card, .resource-card{
  background:#fff; border:1px solid var(--beige-border); border-radius:var(--radius-card);
  overflow:hidden; display:block; transition:transform .3s ease, box-shadow .3s ease;
}
.explico-card:hover, .resource-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card);}

/* ---- "Aprende más" resource cards: auto-scrolling single-row carousel ----
   Master-prompt adjustment (Obesidad/Diabetes/Tiroides only — Home's own
   "Te lo explico" cards above are a different, non-social-post section and
   keep the original grid). Cards shrink to roughly half their previous
   width and sit in one continuously, smoothly auto-scrolling row instead
   of wrapping across multiple rows; content is unchanged. The card set is
   duplicated once in the track (aria-hidden) purely so the CSS animation
   loops seamlessly — screen readers and search engines only see the real
   set via .resource-grid's own accessible copy. */
.resource-grid{
  overflow:hidden; margin-top:52px; padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.resource-track{display:flex; gap:18px; width:max-content; animation:resourceScroll 34s linear infinite;}
.resource-grid:hover .resource-track{animation-play-state:paused;}
.resource-card{width:150px; flex-shrink:0;}
@keyframes resourceScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  .resource-track{animation:none;}
}
.explico-card .ph, .resource-card .ph{aspect-ratio:4/5; overflow:hidden; position:relative;}
.explico-card .ph img, .resource-card .ph img{width:100%; height:100%; object-fit:cover;}
.explico-tag, .resource-tag{position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); backdrop-filter:blur(4px); color:var(--verde); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:6px 12px; border-radius:var(--radius-pill);}
.explico-example, .resource-example{position:absolute; top:12px; right:12px; background:rgba(40,43,43,.82); color:#fff; font-size:10px; font-weight:600; letter-spacing:.02em; padding:5px 10px; border-radius:8px;}
.explico-body, .resource-body{padding:18px 20px 22px;}
.explico-body h3, .resource-body h3{font-size:15px; margin-bottom:6px;}
.explico-body p, .resource-body p{font-size:13px; margin:0; color:var(--text-body);}
.explico-note, .resource-note{margin-top:28px; font-size:13px; color:var(--text-muted); text-align:center; background:#fff; border:1px dashed var(--beige-border); border-radius:12px; padding:14px 20px;}

/* ---------- CTA FINAL (photo left third + text, with fade) ---------- */
.cta-band{background:var(--verde); color:#fff; display:grid; grid-template-columns:1fr 2fr; align-items:stretch;}
.cta-photo{position:relative; min-height:420px; overflow:hidden; background:var(--verde-deep);}
.cta-photo img{width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; position:absolute; inset:0;}
/* Same eased, multi-stop technique as the hero photo scrim (see
   .hero-photo-col .photo-scrim), mirrored: this photo sits on the LEFT of
   the band with copy on the right, so it stays fully transparent through
   its first third, then eases up to a flat var(--verde) that exactly
   matches the band's own background — no visible seam. */
.cta-photo .photo-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(34,66,51,0) 0%,
    rgba(34,66,51,0) 22%,
    rgba(34,66,51,.02) 31%,
    rgba(34,66,51,.08) 40%,
    rgba(34,66,51,.18) 49%,
    rgba(34,66,51,.31) 58%,
    rgba(34,66,51,.47) 67%,
    rgba(34,66,51,.65) 76%,
    rgba(34,66,51,.82) 85%,
    rgba(34,66,51,.94) 93%,
    var(--verde) 100%);
}
/* padding-bottom fixes a real clipping bug: this section is immediately
   followed by a .blend seam gradient (120px tall, negative-margined to
   overlap this section's own last 120px). With the old symmetric 88px
   padding, the CTA buttons landed almost entirely inside that overlap and
   got visibly faded/cut by the incoming white gradient. Extra bottom
   padding pushes the whole block clear with margin to spare. */
.cta-copy{padding:88px 56px 190px; display:flex; align-items:center; justify-content:center;}
.cta-copy .inner{max-width:520px; text-align:center;}
.cta-copy .logo-img{margin:0 auto 26px; height:52px;}
.cta-copy h2{color:#fff;}
.cta-copy p.lead{color:rgba(255,255,255,.88); margin-left:auto; margin-right:auto;}
.cta-buttons{display:flex; gap:18px; justify-content:center; margin-top:32px; flex-wrap:wrap;}

/* ---------- TESTIMONIALS ---------- */
/* Slider: 3 cards visible at a time on desktop, native scroll-snap does the
   motion (buttery smooth, no JS animation loop needed) — the JS in site.js
   just nudges scrollLeft by one card-width per click. Kept deliberately
   light: two small round arrow buttons, no dots/heavy chrome. */
.testimonials{background:var(--blanco);}
.testimonial-slider{position:relative; display:flex; align-items:center; gap:14px; margin-top:52px;}
.testimonial-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; flex:1; padding-bottom:4px;
}
.testimonial-track::-webkit-scrollbar{display:none;}
.testimonial-card{
  background:var(--beige); border:1px solid var(--beige-border); border-radius:var(--radius-card);
  padding:30px; position:relative; transition:transform .35s ease, box-shadow .35s ease;
  scroll-snap-align:start; flex:0 0 calc((100% - 48px)/3); min-width:0;
}
.testimonial-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
.stars{color:#C69A3E; letter-spacing:2px; margin-bottom:16px; font-size:15px;}
.testimonial-card p{font-size:14.5px; color:var(--text-body);}
.testimonial-who{display:flex; align-items:center; gap:12px; margin-top:20px;}
.avatar-circle{width:40px; height:40px; border-radius:50%; background:var(--verde); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-sans); font-weight:700; font-size:13px;}
.testimonial-who .who-name{font-weight:700; color:var(--text-dark); font-size:13.5px;}
.testimonial-who .who-loc{font-size:12px; color:var(--text-muted);}
.ts-nav{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; background:#fff; border:1.5px solid var(--beige-border);
  color:var(--verde); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.ts-nav svg{width:18px; height:18px;}
.ts-nav:hover:not(:disabled){background:var(--verde); color:#fff; border-color:var(--verde);}
.ts-nav:disabled{opacity:.3; cursor:default;}
.placeholder-flag{display:inline-block; margin-top:32px; font-size:12.5px; color:var(--text-muted); background:var(--beige); border:1px dashed var(--beige-border); padding:10px 16px; border-radius:10px;}

/* ---------- FOOTER ---------- */
footer.site-footer{position:relative; overflow:hidden; background:var(--verde-deep); color:rgba(255,255,255,.85); padding:80px 0 26px;}
.footer-watermark{position:absolute; right:-4%; bottom:-12%; width:46%; max-width:520px; opacity:.07; pointer-events:none; user-select:none; z-index:0;}
footer.site-footer > .wrap{position:relative; z-index:1;}
.footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.14); align-items:start;}
.footer-brand .logo-img{height:70px; margin-bottom:22px;}
footer p{color:rgba(255,255,255,.68); font-size:14px;}
.footer-brand p{margin:0 0 6px;}
footer h3{color:#fff; font-size:14px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:18px; font-family:var(--font-sans);}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
footer ul a, footer ul li{font-size:14px; color:rgba(255,255,255,.75);}
footer ul a:hover{color:#fff;}
/* Contact list: icon + text rows, consistent with the pin/phone icon style
   already used in the top bar (Prompt 1, pt.11 — "use icons consistently"). */
.footer-contact-list li{display:flex; align-items:flex-start; gap:11px; line-height:1.4;}
.footer-contact-list svg{width:16px; height:16px; flex-shrink:0; margin-top:2px; color:rgba(255,255,255,.55);}
.footer-contact-list a{color:rgba(255,255,255,.75);}
.footer-contact-list a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:16px;}
.footer-bottom-left{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.footer-bottom p{margin:0; font-size:12.5px; color:rgba(255,255,255,.55);}
.footer-legal{display:flex; gap:16px; flex-wrap:wrap;}
.footer-legal a{font-size:12.5px; color:rgba(255,255,255,.55);}
.footer-legal a:hover{color:#fff;}
.socials{display:flex; gap:12px;}
.socials a{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;}
.socials a svg{width:16px; height:16px; color:#fff;}
.socials a:hover{background:rgba(255,255,255,.12);}

/* ---------- FLOATING CONTACT BUTTON ---------- */
.float-cta{position:fixed; right:24px; bottom:24px; z-index:60; background:var(--verde); color:#fff; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -8px rgba(26,52,40,.55); transition:transform .2s ease, background .2s ease;}
.float-cta:hover{transform:translateY(-3px) scale(1.04); background:var(--verde-hover);}
.float-cta svg{width:24px; height:24px;}

/* ---------- SECONDARY PAGE: hero banner ---------- */
.page-hero{position:relative; background:var(--verde-deep); overflow:hidden; padding-top:64px;}
.breadcrumb{position:relative; z-index:2; font-size:13px; color:rgba(255,255,255,.7); display:flex; gap:8px; align-items:center; margin-bottom:18px;}
.breadcrumb a{color:rgba(255,255,255,.85);}
.breadcrumb a:hover{color:#fff;}
.page-hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; padding-bottom:64px;}
.page-hero .eyebrow{color:#D9C9A8;}
.page-hero .eyebrow::before{background:#D9C9A8;}
.page-hero h1{color:#fff; font-size:42px;}
.page-hero .lead{color:rgba(255,255,255,.88); font-size:17px;}
.page-hero-photo{position:relative; aspect-ratio:4/3; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg);}
.page-hero-photo img{width:100%; height:100%; object-fit:cover;}
.page-hero-fade{position:absolute; left:0; right:0; bottom:0; height:120px; background:linear-gradient(0deg, var(--blanco) 0%, rgba(247,244,238,0) 100%); z-index:1;}

/* ---------- SECONDARY PAGE: content blocks ---------- */
.detail-section{padding:56px 0;}
.detail-section .wrap{max-width:820px;}
.detail-section h2{font-size:26px;}
.placeholder-box{
  background:var(--beige); border:1px dashed var(--beige-border); border-radius:14px;
  padding:22px 26px; color:var(--text-muted); font-size:14.5px; font-style:italic; line-height:1.6;
}
.detail-nav{background:var(--beige); border-bottom:1px solid var(--beige-border); position:sticky; top:87px; z-index:40;}
.detail-nav .wrap{display:flex; gap:26px; overflow-x:auto; padding:14px 28px;}
.detail-nav a{font-size:13px; font-weight:600; color:var(--text-body); white-space:nowrap; padding:4px 0; border-bottom:2px solid transparent;}
.detail-nav a:hover{color:var(--verde); border-color:var(--verde);}
.faq-item{border-bottom:1px solid var(--beige-border); padding:18px 0;}
.faq-item:first-child{padding-top:0;}
.faq-item:last-child{border-bottom:none;}
.faq-item h3{font-size:15.5px; margin-bottom:0;}

/* ---------- EDITORIAL CONDITION PAGES: shared building blocks ---------- */
/* Reframe / factor grid ("No es falta de voluntad.") */
.reframe-section{background:var(--beige);}
.factor-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:48px;}
.factor-chip{background:#fff; border:1px solid var(--beige-border); border-radius:14px; padding:22px 18px; text-align:center; font-family:var(--font-sans); font-weight:600; font-size:14px; color:var(--text-dark);}

/* Patient question wall ("¿Te suena?") */
.question-wall{display:flex; flex-direction:column; margin-top:8px;}
.question-line{font-family:var(--font-serif); font-size:clamp(18px,2.4vw,24px); font-weight:600; color:var(--text-dark); padding:18px 0; border-bottom:1px solid var(--beige-border); line-height:1.35;}
.question-line:first-child{padding-top:0;}
.question-line:last-child{border-bottom:none;}

/* Body composition breakdown ("La báscula no lo cuenta todo.") */
.composition-bar{display:flex; height:64px; border-radius:16px; overflow:hidden; margin:44px 0 22px; box-shadow:var(--shadow-card);}
.composition-bar > div{display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:12.5px; font-family:var(--font-sans); letter-spacing:.02em; text-align:center; padding:4px;}
.composition-legend{display:flex; flex-wrap:wrap; gap:20px; justify-content:center;}
.composition-legend span{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-body);}
.legend-dot{width:11px; height:11px; border-radius:50%; display:inline-block; flex-shrink:0;}

/* Metabolic health dashboard grid — sized down from the original (was
   22px/20px padding, 16px icon margin) so the eight cards read as a
   compact, scannable panel rather than a loosely spaced block. */
.dashboard-section{background:var(--beige);}
.dashboard-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px;}
.dashboard-item{background:#fff; border:1px solid var(--beige-border); border-radius:13px; padding:16px 16px; transition:background .35s ease, border-color .35s ease, transform .3s ease;}
.dashboard-item .label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--verde); font-weight:700; margin-bottom:6px; transition:color .35s ease;}
.dashboard-item .desc{font-size:13px; color:var(--text-dark); line-height:1.48; transition:color .35s ease;}
/* Hover only on devices with real hover (mouse/trackpad) — gating it this
   way means a tap on touch/mobile can never leave a card "stuck" dark
   green the way a plain :hover rule would. */
@media (hover:hover) and (pointer:fine){
  .dashboard-item:hover{background:var(--verde-deep); border-color:var(--verde-deep); transform:translateY(-3px);}
  .dashboard-item:hover .label{color:#fff;}
  .dashboard-item:hover .desc{color:rgba(255,255,255,.88);}
  .dashboard-item:hover .di-icon{background:rgba(255,255,255,.16);}
  .dashboard-item:hover .di-icon svg{color:#fff;}
}

/* Full-width editorial statement / quote */
.big-statement{padding:112px 0; text-align:center; background:var(--verde-deep);}
.big-statement blockquote{font-family:var(--font-serif); color:#fff; font-size:clamp(26px,4.2vw,44px); font-weight:600; line-height:1.3; max-width:880px; margin:0 auto; padding:0 28px;}

/* EVOLVE teaser embed (condensed, links back to the full EVOLVE section) */
.evolve-teaser{background:var(--verde-deep); border-radius:24px; padding:64px 48px; text-align:center;}
/* Pre-existing bug fix (found during Prompt 2 QA): .evolve-lockup's flex-row
   layout was only ever scoped to #evolve (the Home page section id), so on
   this page — which has no #evolve id — the six E-V-O-L-V-E letters were
   stacking vertically as plain blocks instead of laying out in a row.
   Page-exclusive selector, so this only touches the Obesidad teaser. */
.evolve-teaser .evolve-lockup{
  display:flex; justify-content:center; align-items:flex-start; gap:clamp(10px,3vw,34px);
  flex-wrap:wrap;
}
.evolve-teaser .eyebrow{color:#D9C9A8; justify-content:center;}
.evolve-teaser .eyebrow::before{display:none;}
.evolve-teaser h2{color:#fff;}
.evolve-teaser p.lead{color:rgba(255,255,255,.82); margin-left:auto; margin-right:auto;}
.evolve-teaser .evolve-lockup{margin:36px 0 8px;}
.evolve-teaser .evolve-lockup .lu .letter{color:#fff;}
.evolve-teaser .evolve-lockup .lu .word{color:rgba(255,255,255,.6);}
.evolve-teaser .evolve-tagline{color:rgba(255,255,255,.85); margin-bottom:36px;}
.evolve-teaser .cta-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* Profile chips ("¿Para quién es EVOLVE?") */
.profile-grid{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:44px;}
.profile-chip{background:#fff; border:1px solid var(--beige-border); border-radius:var(--radius-pill); padding:14px 26px; font-size:14px; font-weight:600; color:var(--text-dark);}

/* News / editorial cards ("Lo último en...") */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;}
.news-card{background:#fff; border:1px solid var(--beige-border); border-radius:var(--radius-card); padding:28px 26px; display:flex; flex-direction:column; gap:10px; transition:transform .3s ease, box-shadow .3s ease;}
.news-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-card);}
.news-cat{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--verde);}
.news-card h3{font-size:16.5px; margin:0; line-height:1.3;}
.news-card p{font-size:13.5px; color:var(--text-body); margin:0;}
.news-date{font-size:12px; color:var(--text-muted); margin-top:2px;}
.news-link{font-size:12.5px; font-weight:700; color:var(--verde); text-transform:uppercase; letter-spacing:.03em; margin-top:auto; padding-top:6px;}

/* Three-path intro grid (e.g. Hipotiroidismo / Hipertiroidismo / Nódulos) */
.path-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;}
.path-card{background:var(--beige); border:1px solid var(--beige-border); border-radius:var(--radius-card); padding:34px 30px; scroll-margin-top:100px;}
.path-card .path-num{font-family:var(--font-serif); font-weight:700; font-size:14px; color:var(--verde); margin-bottom:14px; display:block;}
.path-card h3{font-size:19px; margin-bottom:10px;}
.path-card p{font-size:14px; margin:0 0 18px; color:var(--text-body);}
.path-card .more-link{font-size:12.5px; font-weight:700; color:var(--verde); text-transform:uppercase; letter-spacing:.03em;}

/* Linear diagnostic pathway (e.g. nódulo → ecografía → ... → seguimiento) */
.flow-steps{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:2px; margin-top:48px;}
.flow-step{background:#fff; border:1px solid var(--beige-border); border-radius:12px; padding:16px 20px; font-size:13px; font-weight:700; color:var(--text-dark); text-align:center; max-width:150px;}
.flow-arrow{color:var(--text-muted); font-size:18px; padding:0 8px; flex-shrink:0;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .services-cards{grid-template-columns:repeat(2,1fr);}
  .why-section .wrap{grid-template-columns:1fr;}
  .why-photo{order:-1; max-width:340px; margin:0 auto;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .hero-badges .wrap{grid-template-columns:1fr; border-radius:18px;}
  .hero-badge{border-right:none; border-bottom:1px solid var(--beige-border);}
  .hero-badge:last-child{border-bottom:none;}
  .testimonial-card{flex-basis:calc((100% - 24px)/2);}
  .explico-grid{grid-template-columns:1fr 1fr;}
  .resource-card{width:130px;}
  .cta-band{grid-template-columns:1fr;}
  /* Taller than the phone value below: at tablet widths the box is wide
     enough relative to its height that a short crop pushes the sitter's
     face/glasses out of frame with a portrait source photo. */
  .cta-photo{min-height:360px;}
  .cta-photo .photo-scrim{
    background:linear-gradient(0deg,
      rgba(34,66,51,0) 0%,
      rgba(34,66,51,0) 22%,
      rgba(34,66,51,.02) 31%,
      rgba(34,66,51,.08) 40%,
      rgba(34,66,51,.18) 49%,
      rgba(34,66,51,.31) 58%,
      rgba(34,66,51,.47) 67%,
      rgba(34,66,51,.65) 76%,
      rgba(34,66,51,.82) 85%,
      rgba(34,66,51,.94) 93%,
      var(--verde) 100%);
  }
  .page-hero-grid{grid-template-columns:1fr; gap:32px;}
  .stage-head{gap:16px;}
  .stage-panel-inner{padding-left:0;}
  .factor-grid{grid-template-columns:repeat(3,1fr);}
  .dashboard-grid{grid-template-columns:1fr 1fr;}
  .news-grid{grid-template-columns:1fr 1fr;}
  .evolve-teaser{padding:48px 28px;}
  .path-grid{grid-template-columns:1fr;}
  .evolve-panel-box{padding:36px;}
  .epb-grid{grid-template-columns:1fr 1fr;}
}
/* Home-only: the bigger logo (pt.10) needs more horizontal room than the
   shared 60px mark, so the 1100px text-nav/hamburger threshold below —
   tuned for the smaller logo — left "Sobre mí" and "Te lo explico" wrapping
   onto two uneven lines between ~1101 and ~1179px. Extends the same drawer
   pattern up to 1200px for Home specifically, without moving the shared
   1100px breakpoint the service pages rely on. */
@media (min-width:1101px) and (max-width:1200px){
  body.page-home nav.main-nav{
    position:fixed; top:129px; left:0; right:0; background:#fff;
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--beige-border);
    transform:translateY(calc(-100% - 129px - 24px)); transition:transform .3s ease; padding:8px 28px 18px;
    max-height:calc(100vh - 129px); overflow-y:auto;
  }
  body.page-home nav.main-nav.open{transform:translateY(0);}
  body.page-home nav.main-nav a.nav-link{padding:12px 0; width:100%; border-bottom:1px solid var(--beige-border);}
  /* No hover on the drawer, so the services dropdown renders as an
     always-open, indented sub-list under "Servicios" instead. */
  body.page-home .nav-item-dropdown{width:100%;}
  body.page-home .nav-link-dropdown{width:100%; justify-content:space-between; border-bottom:none;}
  body.page-home .nav-dropdown-menu{position:static; padding-top:0; opacity:1; visibility:visible; pointer-events:auto;}
  body.page-home .nav-dropdown-panel{transform:none; box-shadow:none; border:none; background:none; padding:0 0 4px 16px; margin:0; border-radius:0; gap:0;}
  body.page-home .nav-dropdown-panel a{padding:10px 0; border-bottom:1px solid var(--beige-border); font-size:13.5px; color:var(--text-muted);}
  body.page-home .menu-toggle{display:flex;}
  body.page-home .header-cta .btn{display:none;}
  body.page-home .mobile-cta-link{display:block !important; color:var(--verde); font-weight:700;}
}
/* Small-laptop / tablet width: the full text nav (7 links + logo + CTA) no
   longer fits the header without wrapping onto two lines. Switch to the
   same mobile drawer menu used further down, just at a wider threshold
   than the general content breakpoints above. */
@media (max-width:1100px){
  nav.main-nav{
    position:fixed; top:82px; left:0; right:0; background:#fff;
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--beige-border);
    transform:translateY(-130%); transition:transform .3s ease; padding:8px 28px 18px;
    max-height:calc(100vh - 82px); overflow-y:auto;
  }
  nav.main-nav.open{transform:translateY(0);}
  nav.main-nav a.nav-link{padding:12px 0; width:100%; border-bottom:1px solid var(--beige-border);}
  .nav-item-dropdown{width:100%;}
  .nav-link-dropdown{width:100%; justify-content:space-between; border-bottom:none;}
  .nav-dropdown-menu{position:static; padding-top:0; opacity:1; visibility:visible; pointer-events:auto;}
  .nav-dropdown-panel{transform:none; box-shadow:none; border:none; background:none; padding:0 0 4px 16px; margin:0; border-radius:0; gap:0;}
  .nav-dropdown-panel a{padding:10px 0; border-bottom:1px solid var(--beige-border); font-size:13.5px; color:var(--text-muted);}
  .menu-toggle{display:flex;}
  .header-cta .btn{display:none;}
  .mobile-cta-link{display:block !important; color:var(--verde); font-weight:700;}
  /* Home's header is taller than the shared default (bigger logo, pt.10),
     so the fixed-position dropdown menu needs a matching offset here or it
     would sit with a gap / overlap the header instead of tucking right
     under it. */
  /* Home's sticky header uses backdrop-filter, which (per spec) makes it
     the containing block for its fixed-position descendants — so `top`
     here is relative to the HEADER's own box, not the viewport, and needs
     the top bar's 44px subtracted (173px absolute header-bottom - 44px
     top bar = 129px). transform is likewise overridden: the base rule
     hides the drawer with translateY(-130%), a percentage of the drawer's
     OWN height, not of `top` — so simply raising `top` to match Home's
     taller header left the drawer's tail peeking over the header instead
     of staying off-screen. This calc() anchors the hidden position to
     `top` itself, clearing the viewport regardless of content height. */
  body.page-home nav.main-nav{top:129px; max-height:calc(100vh - 129px); transform:translateY(calc(-100% - 129px - 24px));}
  /* Needed because "body.page-home nav.main-nav" is MORE specific than the
     plain ".open" rule above (2 type selectors vs 1) and was otherwise
     winning even when .open was applied, permanently keeping the drawer
     shut on Home at this breakpoint. */
  body.page-home nav.main-nav.open{transform:translateY(0);}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;}
  .hero-photo-col{min-height:min(118vw, 700px); order:-1;}
  .hero-copy-col{padding:52px 0;}
  .hero-copy-col .wrap{margin:0 auto; padding:0 28px; max-width:100%; text-align:center;}
  .hero .lead{margin-left:auto; margin-right:auto;}
  .hero .btn-row{justify-content:center;}
  .hero-photo-col .photo-scrim{
    background:linear-gradient(0deg,
      var(--verde-hover) 0%,
      rgba(46,90,70,.85) 8%,
      rgba(46,90,70,.6) 17%,
      rgba(46,90,70,.38) 26%,
      rgba(46,90,70,.2) 35%,
      rgba(46,90,70,.08) 44%,
      rgba(46,90,70,0) 54%);
  }
  /* Tablet-width range (~600-860px): height caps out before width does, which would
     crop the figure with object-fit:cover. Switch to contain so the complete photo
     (full figure, hands included) always stays visible, letterboxed on the dark
     green backdrop rather than cropped. */
  .hero-photo-col img{object-fit:contain; object-position:center top;}
}
@media (max-width:768px){
  h1{font-size:30px;} h2{font-size:25px;}
  .hero h1{font-size:29px;}
  .services-cards{grid-template-columns:1fr;}
  .section-pad{padding:52px 0;}
  .section-pad-sm{padding:36px 0;}
  .top-bar .top-left{gap:14px;}
  .top-bar .top-item.hide-mobile{display:none;}
  nav.main-nav{
    position:fixed; top:82px; left:0; right:0; background:#fff;
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--beige-border);
    transform:translateY(-130%); transition:transform .3s ease; padding:8px 28px 18px;
    max-height:calc(100vh - 82px); overflow-y:auto;
  }
  nav.main-nav.open{transform:translateY(0);}
  nav.main-nav a.nav-link{padding:12px 0; width:100%; border-bottom:1px solid var(--beige-border);}
  .menu-toggle{display:flex;}
  .header-cta .btn{display:none;}
  .mobile-cta-link{display:block !important; color:var(--verde); font-weight:700;}
  body.page-home nav.main-nav{top:101px; max-height:calc(100vh - 101px); transform:translateY(calc(-100% - 101px - 24px));}
  body.page-home nav.main-nav.open{transform:translateY(0);}
  .hero-badges{margin-top:-26px;}
  .footer-top{grid-template-columns:1fr; gap:32px;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .testimonial-card{flex-basis:88%;}
  .testimonial-slider{gap:8px;}
  .ts-nav{width:36px; height:36px;}
  .ts-nav svg{width:15px; height:15px;}
  .explico-grid{grid-template-columns:1fr 1fr;}
  .resource-card{width:118px;}
  .resource-track{gap:14px;}
  .resource-grid{-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);}
  .cta-copy{padding:56px 24px 140px;}
  .footer-watermark{width:70%; bottom:-6%;}
  .float-cta{width:50px; height:50px; right:16px; bottom:16px;}
  .evolve-stepper{flex-wrap:wrap; row-gap:28px;}
  .evolve-stepper::before{display:none;}
  .stepper-node{flex:0 0 30%;}
  .stage-head{flex-wrap:wrap;}
  .stage-head .badge{width:52px; height:52px;}
  .stage-head .badge .l{font-size:20px;}
  .evolve-final-cta{padding:36px 24px; margin-bottom:60px;}
  .evolve-panel-box{padding:28px 22px;}
  .epb-head{flex-wrap:wrap; gap:16px;}
  .epb-head .badge{width:52px; height:52px;}
  .epb-head .badge .l{font-size:20px;}
  .epb-grid{grid-template-columns:1fr;}
  .page-hero h1{font-size:30px;}
  .detail-nav{top:70px;}
  .factor-grid{grid-template-columns:1fr 1fr;}
  .question-line{font-size:19px; padding:14px 0;}
  .composition-bar{height:auto; flex-direction:column; border-radius:14px;}
  .composition-bar > div{padding:14px;}
  .dashboard-grid{grid-template-columns:1fr;}
  .big-statement{padding:72px 0;}
  .news-grid{grid-template-columns:1fr;}
  .profile-chip{font-size:13px; padding:12px 20px;}
  .flow-steps{flex-direction:column;}
  .flow-arrow{transform:rotate(90deg); padding:4px 0;}
  .flow-step{max-width:none; width:100%;}
}
@media (max-width:480px){
  .explico-grid{grid-template-columns:1fr;}
  .resource-card{width:104px;}
  .evolve-lockup{gap:14px;}
  .factor-grid{grid-template-columns:1fr;}
}

/* =====================================================================
   OBESIDAD PAGE — Prompt 2
   Everything below is scoped either to a brand-new, page-exclusive class
   name (safe unscoped — no other page's markup contains these classes),
   or explicitly prefixed with body.page-obesidad when it touches a class
   shared with the Diabetes/Tiroides/Evaluación-integral pages (.factor-chip,
   .reframe-section, .dashboard-section, .big-statement, .detail-section).
   ===================================================================== */

/* ---- 0. Hero: organic photo→text edge (master-prompt image-transition
   pass) — same technique already used on the Diabetes/Tiroides heroes,
   applied here so Obesidad's full-bleed hero photo matches. ---- */
body.page-obesidad .page-hero-photo{position:relative;}
body.page-obesidad .page-hero-photo::before{
  content:""; position:absolute; inset:-46px; z-index:-1;
  background:radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.09), rgba(255,255,255,0) 68%);
  filter:blur(6px); pointer-events:none;
}
body.page-obesidad .page-hero-photo img{
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%);
}
@media (max-width:1000px){
  body.page-obesidad .page-hero-photo img{
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
  }
}

/* ---- 1. Factor chips: icon layout (shared .factor-chip → scoped) ---- */
body.page-obesidad .factor-chip{display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px 16px 20px;}
.fc-icon{width:34px; height:34px; border-radius:10px; background:var(--beige); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.fc-icon svg{width:18px; height:18px; color:var(--verde);}

/* ---- 1b. Factor chips: compact "5+6" desktop grid + green hover ----
   Master-prompt adjustment: smaller boxes, laid out as 2 rows of 6 (all
   12 existing factors kept, none removed/added) on desktop, with a
   smooth dark-green hover state. Kept as an override on top of the base
   .factor-grid / .factor-chip rules above rather than replacing them. */
body.page-obesidad .factor-grid{grid-template-columns:repeat(6,1fr); gap:10px; margin-top:36px;}
body.page-obesidad .factor-chip{padding:16px 10px 14px; gap:8px; border-radius:12px; font-size:12.5px; transition:background .25s ease, border-color .25s ease, color .25s ease;}
body.page-obesidad .fc-icon{width:28px; height:28px; transition:background .25s ease;}
body.page-obesidad .fc-icon svg{width:15px; height:15px; transition:color .25s ease;}
body.page-obesidad .factor-chip:hover{background:var(--verde-deep); border-color:var(--verde-deep); color:#fff;}
body.page-obesidad .factor-chip:hover .fc-icon{background:rgba(255,255,255,.16);}
body.page-obesidad .factor-chip:hover .fc-icon svg{color:#fff;}
@media (max-width:1000px){ body.page-obesidad .factor-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:768px){
  body.page-obesidad .factor-grid{grid-template-columns:1fr 1fr; gap:8px; margin-top:28px;}
  body.page-obesidad .factor-chip{padding:14px 8px;}
  body.page-obesidad .fc-icon{display:none;}
}

/* ---- Clipping fix: reframe-section bottom padding (shared → scoped) ----
   The .blend that follows this section (blend-b-w) overlaps its last
   120px/64px — same root cause documented for #servicios in the Home
   page CSS above. .section-pad only reserves 76px/52px there, so the
   last factor-chip row was getting faded by the incoming seam. */
body.page-obesidad .reframe-section{padding-bottom:150px;}
@media (max-width:768px){ body.page-obesidad .reframe-section{padding-bottom:104px;} }

/* ---- 2 / 3-6 / 37-41. Patient questions → interactive story panel ---- */
.patient-panel-wrap{max-width:980px;}
.patient-panel{margin-top:56px;}
.patient-disclaimer{text-align:center; font-size:12px; color:var(--text-muted); margin-top:22px;}

.patient-questions{display:flex; flex-direction:column;}
.patient-item{border-bottom:1px solid var(--beige-border);}
.patient-item:first-child{border-top:1px solid var(--beige-border);}
.patient-q{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; background:none; border:none; cursor:pointer; text-align:left; padding:20px 4px; font-family:inherit;}
.pq-text{font-family:var(--font-serif); font-size:clamp(17px,2.1vw,21px); font-weight:600; color:var(--text-dark); line-height:1.35; transition:color .25s ease;}
.patient-item.active .pq-text{color:var(--verde-deep);}
.pq-chevron{flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--beige); display:flex; align-items:center; justify-content:center; color:var(--verde); transition:transform .3s ease, background .25s ease;}
.pq-chevron svg{width:13px; height:13px;}
.patient-item.active .pq-chevron{background:var(--verde-deep); color:#fff;}

/* Desktop shared panel: one story visible at a time, smooth crossfade —
   same calm transition language as the EVOLVE stage panels on Home. */
.patient-desktop-panel{display:none;}
.patient-story{display:none; gap:20px;}
.patient-story.active{display:flex;}
.patient-story .ps-body{flex:1; min-width:0;}
.ps-avatar{width:56px; height:56px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-serif); font-size:20px; font-weight:700;}
.ps-name{font-family:var(--font-sans); font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--verde); margin-bottom:8px;}
.ps-text{font-size:15.5px; color:var(--text-dark); line-height:1.55; margin-bottom:10px;}
.ps-note{font-size:14px; color:var(--text-body); line-height:1.55; padding-top:10px; border-top:1px solid var(--beige-border);}

/* Mobile accordion body: hidden by default via a bounded max-height,
   revealed with a subtle ease — no bounce/flash, per the "calm/premium"
   requirement. */
.patient-q-mobile-body{max-height:0; overflow:hidden; opacity:0; transition:max-height .45s ease, opacity .3s ease; display:flex; gap:16px; padding:0 4px;}
.patient-item.open .patient-q-mobile-body{max-height:640px; opacity:1; padding-bottom:26px;}
.patient-q-mobile-body .ps-avatar{width:44px; height:44px; font-size:16px;}
.patient-q-mobile-body .ps-body{flex:1; min-width:0;}

@media (min-width:901px){
  .patient-panel{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
  .patient-desktop-panel{display:block; position:sticky; top:110px; background:var(--beige); border-radius:20px; padding:36px;}
  .patient-q-mobile-body{display:none !important;}
  .pq-chevron{display:none;}
  .patient-q{cursor:default;}
}
@media (max-width:900px){
  .patient-panel{margin-top:36px;}
  .patient-q{padding:18px 2px;}
}

/* ---- 7-8. Composición corporal → interactive body figure + hotspots ---- */
.body-comp-wrap{margin-top:48px; display:flex; flex-direction:column; align-items:center; gap:40px;}
.body-comp-figure{position:relative; width:100%; max-width:280px; flex-shrink:0;}
.body-figure-svg{width:100%; height:auto; display:block;}
/* Body-composition duo figures: illustrative pencil-sketch-style outlines
   (per reference artwork), recolored into the site's own green palette.
   Each limb/torso/head is painted with a shared vertical gradient
   (.bandstop-1..4, tied to userSpaceOnUse so all body parts line up into
   four consistent horizontal bands regardless of which shape they paint)
   instead of the reference's literal pink/tan tones — light near the
   shoulders, deepening toward the feet. Fine sketch-linework (shoulder
   line, center line, head crosshair, finger/toe hints) sits on top. */
.bandstop-1{stop-color:var(--verde); stop-opacity:.1;}
.bandstop-2{stop-color:var(--verde); stop-opacity:.26;}
.bandstop-3{stop-color:var(--verde-hover); stop-opacity:.4;}
.bandstop-4{stop-color:var(--verde-deep); stop-opacity:.62;}
.bf-arm-upper, .bf-arm-fore, .bf-thigh, .bf-calf{fill:none; stroke-linecap:round;}
.bf-arm-upper{stroke-width:18;}
.bf-arm-fore{stroke-width:13;}
.bf-thigh{stroke-width:26;}
.bf-calf{stroke-width:17;}
/* Heavier-build silhouette: thicker limb segments than the lean figure's
   base .bf-arm-upper/.bf-arm-fore/.bf-thigh/.bf-calf widths — used only
   on the wider left-hand figure. */
.bf-arm-upper-heavy{stroke-width:30;}
.bf-arm-fore-heavy{stroke-width:22;}
.bf-thigh-heavy{stroke-width:42;}
.bf-calf-heavy{stroke-width:28;}
.bf-hand, .bf-foot{stroke:var(--verde-deep); stroke-opacity:.35; stroke-width:1.5;}
.bf-torso{stroke:var(--verde-deep); stroke-opacity:.35; stroke-width:2;}
.bf-head{stroke:var(--verde-deep); stroke-opacity:.35; stroke-width:2;}
.bf-shoulder-line, .bf-center-line, .bf-crosshair{fill:none; stroke:var(--verde-deep); stroke-opacity:.28; stroke-width:1.4; stroke-linecap:round;}
.bf-digits{fill:none; stroke:var(--verde-deep); stroke-opacity:.3; stroke-width:2; stroke-linecap:round;}
/* Grasa visceral: a literal circular measurement zone on the abdomen
   rather than just a hotspot dot — reads as "this is what's being
   measured here," not a generic label. Brightens on hover/active. */
.bf-visceral-ring{fill:rgba(34,66,51,.07); stroke:var(--verde); stroke-width:1.6; stroke-dasharray:3 3; opacity:.55; transition:opacity .3s ease, stroke-width .3s ease, fill .3s ease;}
.bf-visceral-ring.active{opacity:1; stroke-width:2.2; stroke-dasharray:none; fill:rgba(34,66,51,.14); stroke:var(--verde-deep);}
/* Tasa metabólica basal: a soft rounded frame around the whole figure,
   suggesting the energy/heat the body radiates at rest. Subtle at idle,
   a gentle glow when active — never literal flames or cartoon heat lines. */
.bf-tasa-rect{fill:none; stroke:var(--verde); stroke-width:1.4; stroke-dasharray:1 7; stroke-linecap:round; opacity:.28; transition:opacity .3s ease, stroke-width .3s ease, filter .3s ease;}
.bf-tasa-rect.active{opacity:.8; stroke-width:2; filter:drop-shadow(0 0 7px rgba(46,90,70,.4));}
.body-hotspot{position:absolute; transform:translate(-50%,-50%); width:26px; height:26px; border-radius:50%; background:none; border:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.bh-dot{width:13px; height:13px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 5px rgba(58,92,66,.16); transition:background .25s ease, box-shadow .25s ease, transform .25s ease;}
.body-hotspot:hover .bh-dot, .body-hotspot:focus-visible .bh-dot{transform:scale(1.15);}
.body-hotspot.active .bh-dot{background:var(--verde-deep); box-shadow:0 0 0 6px rgba(34,66,51,.22);}
.body-comp-panel{width:100%; max-width:420px;}
.bc-info{display:none;}
.bc-info.active{display:block; animation:bcFade .35s ease;}
@keyframes bcFade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.bc-label{display:block; font-family:var(--font-sans); font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--verde); margin-bottom:10px;}
.bc-info p{font-family:var(--font-serif); font-size:19px; color:var(--text-dark); line-height:1.5; margin:0;}
.body-comp-disclaimer{text-align:center; font-size:12.5px; color:var(--text-muted); margin-top:22px;}
/* Reusable, deliberately low-key style for "how to interact with this"
   hints (e.g. "toca cada punto de la figura..."). Always its own
   paragraph, smaller and lower-contrast than surrounding copy so it reads
   as a quiet aside rather than part of the main explanation. */
.interaction-hint{font-size:13px; color:var(--text-muted); margin-top:10px; letter-spacing:.01em;}
.center .interaction-hint{text-align:center;}

@media (min-width:769px){
  .body-comp-wrap{flex-direction:row; align-items:center; justify-content:center; gap:64px;}
  .body-comp-figure{max-width:300px;}
}
/* The duo figures (two 190px columns + gap) and the info panel (up to
   420px) genuinely don't fit side by side until well past tablet width —
   forcing the row layout there squeezed the panel into a sliver and
   collided it with the header. Stay stacked through the tablet range and
   only go side-by-side once there is room. */
@media (min-width:769px) and (max-width:1040px){
  .body-comp-duo-wrap{flex-direction:column; align-items:center; gap:40px;}
}

/* ---- 8b. Composición corporal: dos figuras (masculina / femenina) ----
   Master-prompt rebuild: same 6 existing parameters and same existing
   descriptions as the single-figure version above (nothing invented),
   mirrored across a male and a female figure with matching hotspots.
   Labels are visible from the start; hovering (desktop) / tapping
   (mobile) reveals the description in the shared panel, which sits
   beside/below the figures — so nothing in the composition itself moves
   when a description appears. */
.body-comp-duo-wrap{align-items:flex-start;}
.bc-duo-figures{display:flex; align-items:flex-start; justify-content:center; gap:76px; flex-wrap:wrap; width:100%;}
.bc-duo-col{display:flex; flex-direction:column; align-items:center; gap:14px; width:190px;}
.bc-duo-figure{width:100%; max-width:190px; margin:0 40px;}
.bc-duo-caption{font-family:var(--font-sans); font-size:12px; font-weight:600; color:var(--text-muted); letter-spacing:.02em;}
.bh-line{position:absolute; top:50%; height:1.5px; background:var(--verde); opacity:.5; pointer-events:none; transition:opacity .25s ease, background .25s ease;}
.bh-label{position:absolute; top:50%; transform:translateY(-50%); font-family:var(--font-sans); font-size:10.5px; font-weight:700; color:var(--text-dark); background:#fff; border:1px solid var(--beige-border); padding:4px 9px; border-radius:20px; white-space:nowrap; pointer-events:none; transition:background .25s ease, color .25s ease, border-color .25s ease; box-shadow:0 1px 5px rgba(34,66,51,.06); z-index:2;}
.bh-out-l .bh-line{right:100%; width:16px;}
.bh-out-l .bh-label{right:calc(100% + 16px);}
.bh-out-r .bh-line{left:100%; width:16px;}
.bh-out-r .bh-label{left:calc(100% + 16px);}
.body-hotspot.active .bh-label, .body-hotspot:hover .bh-label, .body-hotspot:focus-visible .bh-label{background:var(--verde-deep); color:#fff; border-color:var(--verde-deep);}
.body-hotspot.active .bh-line, .body-hotspot:hover .bh-line, .body-hotspot:focus-visible .bh-line{opacity:.9; background:var(--verde-deep);}
@media (max-width:640px){
  .bc-duo-figures{gap:14px; padding:0 60px;}
  .bc-duo-col{width:118px;}
  .bc-duo-figure{max-width:118px;}
  .bh-label{font-size:8.5px; line-height:1.25; padding:3px 6px; letter-spacing:0; white-space:normal; max-width:56px; text-align:center;}
  .bh-out-l .bh-line, .bh-out-r .bh-line{width:7px;}
  .bh-out-l .bh-label{right:calc(100% + 7px);}
  .bh-out-r .bh-label{left:calc(100% + 7px);}
}
@media (max-width:380px){
  .bc-duo-figures{gap:6px; padding:0 50px;}
  .bc-duo-col{width:100px;}
  .bc-duo-figure{max-width:100px;}
  .bh-label{max-width:46px;}
}

/* ---- Dashboard items ("Más allá del peso"): icons ---- */
.di-icon{width:32px; height:32px; border-radius:10px; background:var(--beige); display:flex; align-items:center; justify-content:center; margin-bottom:10px; transition:background .35s ease;}
.di-icon svg{width:16px; height:16px; color:var(--verde); transition:color .35s ease;}

/* ---- Clipping fixes (shared classes → scoped to Obesidad) ----
   Same root cause each time: a .blend seam (120px desktop / 64px mobile)
   sits right after these sections and overlaps their last 120/64px of
   height, but their own bottom padding doesn't reserve that much space. */
body.page-obesidad .dashboard-section{padding-bottom:150px;}
@media (max-width:768px){ body.page-obesidad .dashboard-section{padding-bottom:104px;} }
body.page-obesidad .big-statement{padding-bottom:150px;}
@media (max-width:768px){ body.page-obesidad .big-statement{padding-bottom:104px;} }

/* evolve-teaser + news + faq + doctor-teaser sections: page-exclusive
   wrapper sections, safe to target with a dedicated unique class rather
   than scoping (added directly on the relevant <section> in the HTML). */
.evolve-teaser-section{padding-bottom:150px;}
@media (max-width:768px){ .evolve-teaser-section{padding-bottom:104px;} }
.obesidad-news-section{padding-bottom:150px;}
@media (max-width:768px){ .obesidad-news-section{padding-bottom:104px;} }
.obesidad-faq-section{padding-bottom:150px;}
@media (max-width:768px){ .obesidad-faq-section{padding-bottom:104px;} }
.obesidad-doctor-teaser{padding-bottom:150px;}
@media (max-width:768px){ .obesidad-doctor-teaser{padding-bottom:104px;} }
.obesidad-final-cta{padding-bottom:96px;}
@media (max-width:768px){ .obesidad-final-cta{padding-bottom:80px;} }
.body-comp-section{padding-bottom:150px;}
@media (max-width:768px){ .body-comp-section{padding-bottom:104px;} }
.obesidad-profile-section{padding-bottom:150px;}
@media (max-width:768px){ .obesidad-profile-section{padding-bottom:104px;} }
@media (max-width:400px){
  .obesidad-profile-section .btn{white-space:normal; text-align:center; line-height:1.3;}
}

/* =====================================================================
   DIABETES PAGE — Prompt 3
   Same scoping discipline as Obesidad: shared classes (.page-hero,
   .big-statement, .reframe-section, .factor-chip, .dashboard-section)
   get a "body.page-diabetes " prefix; brand-new components reuse the
   generic .patient-* / .fc-icon / .di-icon system built for Obesidad
   (those are plain, unscoped class names already, so no prefix needed —
   they simply do nothing on pages that don't contain the markup).
   ===================================================================== */

/* ---- 1. Hero: organic photo→text edge instead of a hard rectangle ---- */
body.page-diabetes .page-hero-photo{position:relative;}
body.page-diabetes .page-hero-photo::before{
  content:""; position:absolute; inset:-46px; z-index:-1;
  background:radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.09), rgba(255,255,255,0) 68%);
  filter:blur(6px); pointer-events:none;
}
body.page-diabetes .page-hero-photo img{
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%);
}
@media (max-width:1000px){
  /* Stacked layout on narrower widths (matches .page-hero-grid's own
     1000px breakpoint): fade the top edge instead of the left edge, so
     the photo still blends into what's above it rather than showing a
     hard top border. */
  body.page-diabetes .page-hero-photo img{
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
  }
}

/* ---- 9. Entender tu diabetes: factor-chip icon layout (shared → scoped) ---- */
body.page-diabetes .factor-chip{display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px 16px 20px;}

/* ---- 9b. Factor chips: compact 2-row grid (master-prompt adjustment) ----
   Smaller boxes, grouped into 2 balanced rows (6+6 — all 12 existing
   factors kept, none added/removed), same compact treatment used on the
   Obesidad page's own factor grid. */
body.page-diabetes .factor-grid{grid-template-columns:repeat(6,1fr); gap:10px; margin-top:36px;}
body.page-diabetes .factor-chip{padding:16px 10px 14px; gap:8px; border-radius:12px; font-size:12.5px; transition:background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;}
body.page-diabetes .fc-icon{width:28px; height:28px; transition:background .3s ease;}
body.page-diabetes .fc-icon svg{width:15px; height:15px; transition:color .3s ease;}
@media (max-width:1000px){ body.page-diabetes .factor-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:768px){
  body.page-diabetes .factor-grid{grid-template-columns:1fr 1fr; gap:8px; margin-top:28px;}
  body.page-diabetes .factor-chip{padding:14px 8px;}
}
/* Hover: elegant dark-green illumination, gated to real hover-capable
   pointers so tapping a chip on touch devices never leaves it "stuck"
   highlighted (same technique used for .dashboard-item on Obesidad). */
@media (hover:hover) and (pointer:fine){
  body.page-diabetes .factor-chip:hover{background:var(--verde-deep); border-color:var(--verde-deep); color:#fff; transform:translateY(-2px);}
  body.page-diabetes .factor-chip:hover .fc-icon{background:rgba(255,255,255,.16);}
  body.page-diabetes .factor-chip:hover .fc-icon svg{color:#fff;}
}

/* ---- 8. La diabetes no es una cifra: force symmetric top/bottom on the
   shared .big-statement box for this page (kept independent from the
   Obesidad .big-statement clipping-fix above, which only adds bottom
   padding — here both sides match so the quote reads as centered). ---- */
body.page-diabetes .big-statement{padding-top:130px; padding-bottom:130px;}
@media (max-width:768px){ body.page-diabetes .big-statement{padding-top:84px; padding-bottom:84px;} }

/* ---- 11/12. Más allá de la glucosa: statement gets a touch more
   editorial weight now that the mini-description under it is gone. ---- */
body.page-diabetes #dashboard-statement{max-width:760px; margin-left:auto; margin-right:auto;}

/* ---- 14. Tecnología en diabetes: clipping fix (page-exclusive wrapper) ---- */
.diabetes-tech-section{padding-bottom:150px;}
@media (max-width:768px){ .diabetes-tech-section{padding-bottom:104px;} }

/* ---- Más allá de la glucosa: clipping fix (shared .dashboard-section → scoped) ---- */
body.page-diabetes .dashboard-section{padding-bottom:150px;}
@media (max-width:768px){ body.page-diabetes .dashboard-section{padding-bottom:104px;} }

/* ---- Más allá de la glucosa: circular "wheel" (master-prompt rebuild) ----
   Same 8 existing objectives and descriptions as the flat dashboard-grid
   version used elsewhere (nothing invented) — rearranged into a circle,
   evocative of a "pasapalabra" wheel but kept minimalist/medical: a thin
   ring, small icon+label nodes around the perimeter (always visible), and
   a single round hub in the center whose description swaps on hover/tap
   without hiding or moving any of the other nodes. The existing green "VP"
   watermark mark sits large and faint behind the whole composition. */
.diabetes-wheel-section{position:relative; overflow:hidden;}
.dash-watermark{position:absolute; left:-10%; top:50%; transform:translateY(-50%); width:52%; max-width:560px; opacity:.07; pointer-events:none; user-select:none; z-index:0;}
/* Two-column composition: title + explanatory text on the left, the
   circular wheel (with its own descriptions) on the right. Stacked
   (text, then wheel) below 1000px — same breakpoint as .page-hero-grid,
   the site's other major two-column split — so tablet and mobile both
   get the simple, centered single-column reading order. */
.dash-split{position:relative; z-index:1;}
.dash-split-text{margin-bottom:40px;}
.dash-split-text .lead{max-width:520px; margin-top:16px;}
.dash-split-wheel{display:flex; justify-content:center;}
@media (min-width:1000px){
  .dash-split{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:64px;}
  .dash-split-text{margin-bottom:0;}
  .dash-split-text .lead{max-width:460px;}
  .dash-split-wheel{justify-content:flex-start;}
}
.dash-wheel{width:100%; max-width:600px; aspect-ratio:1/1; margin:56px auto 0; z-index:1;}
@media (min-width:1000px){ .dash-wheel{margin-top:0;} }
.dash-ring{position:absolute; inset:9%; border:1.5px dashed var(--beige-border); border-radius:50%; pointer-events:none;}
.dash-hub{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48%; aspect-ratio:1/1; border-radius:50%; background:#fff; box-shadow:0 24px 50px -22px rgba(34,66,51,.28); display:flex; align-items:center; justify-content:center; text-align:center; padding:9%; z-index:2;}
.dh-info{display:none;}
.dh-info.active{display:block; animation:bcFade .35s ease;}
.dh-label{display:block; font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--verde); margin-bottom:9px;}
.dh-info p{font-family:var(--font-serif); font-size:16.5px; color:var(--text-dark); line-height:1.45; margin:0;}
.dash-node{position:absolute; transform:translate(-50%,-50%); width:112px; display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:none; padding:0; cursor:pointer; z-index:3;}
.dash-node .dn-icon{width:38px; height:38px; border-radius:11px; background:#fff; border:1px solid var(--beige-border); box-shadow:0 4px 14px -6px rgba(34,66,51,.18); display:flex; align-items:center; justify-content:center; transition:background .25s ease, border-color .25s ease;}
.dash-node .dn-icon svg{width:19px; height:19px; color:var(--verde); transition:color .25s ease;}
.dash-node .dn-label{font-family:var(--font-sans); font-size:11.5px; font-weight:700; color:var(--text-dark); line-height:1.2;}
.dash-node:hover .dn-icon, .dash-node:focus-visible .dn-icon, .dash-node.active .dn-icon{background:var(--verde-deep); border-color:var(--verde-deep);}
.dash-node:hover .dn-icon svg, .dash-node:focus-visible .dn-icon svg, .dash-node.active .dn-icon svg{color:#fff;}
@media (max-width:640px){
  .dash-wheel{max-width:400px; margin-top:40px;}
  .dash-node{width:84px;}
  .dash-node .dn-icon{width:32px; height:32px;}
  .dash-node .dn-icon svg{width:16px; height:16px;}
  .dash-node .dn-label{font-size:10px;}
  .dash-hub{padding:7%;}
  .dh-label{font-size:11px;}
  .dh-info p{font-size:14px;}
  .dash-watermark{width:74%; left:-16%;}
}
@media (max-width:400px){
  .dash-wheel{max-width:320px;}
  .dash-node{width:70px;}
  .dash-node .dn-label{font-size:9px;}
}
/* ---- Entender tu diabetes: clipping fix (shared .reframe-section → scoped) ---- */
body.page-diabetes .reframe-section{padding-bottom:130px;}
@media (max-width:768px){ body.page-diabetes .reframe-section{padding-bottom:90px;} }
/* ---- 15. ¿De qué quieres que hablemos?: clipping fix (page-exclusive wrapper) ---- */
.diabetes-faq-section{padding-bottom:150px;}
@media (max-width:768px){ .diabetes-faq-section{padding-bottom:104px;} }
/* ---- Sobre el doctor teaser + CTA final: clipping fix (page-exclusive wrappers) ---- */
.diabetes-doctor-teaser{padding-bottom:150px;}
@media (max-width:768px){ .diabetes-doctor-teaser{padding-bottom:104px;} }
/* ---- ¿Te resulta familiar?: clipping fix — the interactive panel section
   itself needs the same bottom-padding buffer as the .blend that follows it. ---- */
.diabetes-questions-section{padding-bottom:150px;}
@media (max-width:768px){ .diabetes-questions-section{padding-bottom:104px;} }
/* ---- Diabetes tipo 2: clipping fix (page-exclusive wrapper) ---- */
.diabetes-type2-section{padding-bottom:150px;}
@media (max-width:768px){ .diabetes-type2-section{padding-bottom:104px;} }
/* ---- Lo último en diabetes: clipping fix (page-exclusive wrapper) ---- */
.diabetes-news-section{padding-bottom:150px;}
@media (max-width:768px){ .diabetes-news-section{padding-bottom:104px;} }

/* =====================================================================
   TIROIDES PAGE — Prompt 4
   Same scoping discipline as Obesidad/Diabetes: shared classes get a
   "body.page-tiroides " prefix; brand-new components (pathology cards,
   thyroid evaluation diagram) use plain, page-exclusive class names, so
   no prefix is needed for those — they simply don't exist on any other
   page's markup.
   ===================================================================== */

/* ---- 0. Pathology section intro: small subordinate interaction hint ---- */
.path-hint{font-family:var(--font-sans); font-size:12.5px; color:var(--text-muted); margin-top:10px;}

/* ---- 1. Hero: organic photo→text edge instead of a hard rectangle
   (same technique as Diabetes: a soft mask-image fade + blurred glow,
   switching from a left-edge fade to a top-edge fade once the hero
   grid stacks at ≤1000px). ---- */
body.page-tiroides .page-hero-photo{position:relative;}
body.page-tiroides .page-hero-photo::before{
  content:""; position:absolute; inset:-46px; z-index:-1;
  background:radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.09), rgba(255,255,255,0) 68%);
  filter:blur(6px); pointer-events:none;
}
body.page-tiroides .page-hero-photo img{
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%);
}
@media (max-width:1000px){
  body.page-tiroides .page-hero-photo img{
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%);
  }
}

/* ---- 9-13. Pathology cards ("No toda alteración tiroidea es igual"):
   hover/tap-to-expand interactive cards. Selected card grows, gains
   shadow and reveals a detail panel (image + 2-3 short paragraphs);
   siblings recede slightly. Subtle scale/opacity only — no layout jumps
   across the grid, so it stays calm and works the same on every
   breakpoint. ---- */
.path-grid-rich{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start;}
.path-card-rich{background:var(--blanco); border-radius:var(--radius-card); padding:28px 26px; box-shadow:var(--shadow-card); cursor:pointer; transition:transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s ease, opacity .4s ease; outline:none;}
.path-card-rich:focus-visible{box-shadow:0 0 0 3px var(--verde-hover), var(--shadow-card);}
.path-card-rich .path-num{display:block; font-family:var(--font-serif); font-size:14px; color:var(--verde); margin-bottom:6px;}
.path-card-rich h3{margin:0 0 8px; font-size:19px;}
.path-teaser{margin:0; font-size:14.5px; color:var(--text-body); line-height:1.5;}
.path-detail{max-height:0; overflow:hidden; opacity:0; margin-top:0; transition:max-height .55s ease, opacity .4s ease, margin-top .55s ease;}
.path-card-rich.active{transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-lg); z-index:2; position:relative;}
.path-card-rich.active .path-detail{max-height:1000px; opacity:1; margin-top:20px;}
.path-grid-rich.has-active .path-card-rich:not(.active){opacity:.6; transform:scale(.97);}
.path-detail-img img{width:100%; max-height:200px; object-fit:cover; border-radius:14px; display:block; margin-bottom:16px;}
.path-detail-text p{font-size:14.5px; line-height:1.62; color:var(--text-body); margin:0 0 12px;}
.path-detail-text p:last-child{margin-bottom:0;}

@media (max-width:900px){
  .path-grid-rich{grid-template-columns:1fr;}
  .path-card-rich.active{transform:none;}
}

/* ---- 16-20. "Evaluación completa": central thyroid diagram with the 8
   diagnostic components distributed evenly around it in a circle (same
   equidistant-node technique as the Diabetes "Más allá de la glucosa"
   wheel: a thin dashed ring, a centered figure, and 8 nodes placed at
   the same 45°-apart perimeter coordinates), one info panel active at a
   time (reuses the same hover/tap-single-panel logic as the Obesidad
   body-composition figure, generic in site.js). Analytic/lab values
   (TSH, T4, T3, Anticuerpos) sit on the right half of the ring, moving
   clockwise from the top; clinical/exam items (Ecografía, Volumen,
   Síntomas, Historia) sit on the left half — the same left/right
   grouping the old two-column layout used, just bent into a circle. ---- */
.thyroid-eval-wrap{margin-top:8px;}
.thyroid-wheel{position:relative; width:100%; max-width:520px; aspect-ratio:1/1; margin:48px auto 0;}
.thyroid-diagram-figure{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34%; z-index:2;}
.thyroid-diagram-img{width:100%; height:100%; object-fit:contain; display:block;}
.thyroid-hotspot{position:absolute; transform:translate(-50%,-50%); width:112px; display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:none; padding:0; cursor:pointer; font-family:var(--font-sans); z-index:3;}
.th-label{font-size:12.5px; font-weight:600; color:var(--text-dark); text-align:center; line-height:1.25; transition:color .25s ease;}
.th-dot{width:10px; height:10px; border-radius:50%; background:var(--verde); flex-shrink:0; box-shadow:0 0 0 5px rgba(58,92,66,.14); transition:background .25s ease, box-shadow .25s ease, transform .25s ease;}
.thyroid-hotspot:hover .th-dot, .thyroid-hotspot:focus-visible .th-dot{transform:scale(1.18);}
.thyroid-hotspot.active .th-dot{background:var(--verde-deep); box-shadow:0 0 0 6px rgba(34,66,51,.2); transform:scale(1.2);}
.thyroid-hotspot.active .th-label{color:var(--verde-deep);}
.thyroid-info-panel{max-width:560px; margin:40px auto 0; text-align:center;}
.ti-info{display:none;}
.ti-info.active{display:block; animation:bcFade .35s ease;}
.ti-label{display:block; font-family:var(--font-sans); font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--verde); margin-bottom:10px;}
.ti-info p{font-family:var(--font-serif); font-size:18px; color:var(--text-dark); line-height:1.55; margin:0;}

@media (max-width:640px){
  .thyroid-wheel{max-width:380px; margin-top:40px;}
  .thyroid-hotspot{width:84px; gap:6px;}
  .th-label{font-size:10px;}
  .th-dot{width:8px; height:8px; box-shadow:0 0 0 4px rgba(58,92,66,.14);}
}
@media (max-width:400px){
  .thyroid-wheel{max-width:320px;}
  .thyroid-hotspot{width:72px;}
  .th-label{font-size:9px;}
}

/* ---- Clipping fixes (page-exclusive wrapper sections) — same root
   cause each time: a .blend seam (120px desktop / 64px mobile) overlaps
   the last 120/64px of the PRECEDING section, which doesn't reserve
   enough bottom padding by default. ---- */
.tiroides-questions-section{padding-bottom:150px;}
@media (max-width:768px){ .tiroides-questions-section{padding-bottom:104px;} }
.tiroides-eval-section{padding-bottom:150px;}
@media (max-width:768px){ .tiroides-eval-section{padding-bottom:104px;} }
/* ---- 21. Tratamiento individualizado: clipping fix ---- */
.tiroides-treatment-section{padding-bottom:150px;}
@media (max-width:768px){ .tiroides-treatment-section{padding-bottom:104px;} }
.tiroides-news-section{padding-bottom:150px;}
@media (max-width:768px){ .tiroides-news-section{padding-bottom:104px;} }
/* ---- 22-24. ¿De qué quieres que hablemos?: clipping fix ---- */
.tiroides-faq-section{padding-bottom:150px;}
@media (max-width:768px){ .tiroides-faq-section{padding-bottom:104px;} }
/* ---- 25. Sobre el doctor (cita final): clipping fix ---- */
.tiroides-doctor-teaser{padding-bottom:150px;}
@media (max-width:768px){ .tiroides-doctor-teaser{padding-bottom:104px;} }
/* ---- Big statement: clipping fix (the closing quote's own bottom
   padding didn't leave room for the .blend seam right after it) ---- */
body.page-tiroides .big-statement{padding-bottom:150px;}
@media (max-width:768px){ body.page-tiroides .big-statement{padding-bottom:104px;} }