/* ============================================================
   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;
  --meta-m:#1A3428;
  --meta-e:#2E5A46;
  --meta-t:#6C967C;
  --meta-a:#B7D0BC;
  --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;}
/* Pedido 2026-09-22 (4ª pasada): menos hueco entre secciones en desktop
   (~35% menos que antes: 76→50 / 48→32). La versión móvil (media query
   más abajo) se deja igual, no se ha pedido para móvil. */
.section-pad{padding:50px 0;}
.section-pad-sm{padding:32px 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;}
}

/* Pedido 2026-09-22 (3ª pasada): el .blend que sigue a un .hero es una
   franja de degradado SÓLIDA y a todo el ancho — al superponerse a la
   última franja de la sección, tapaba con un color oscuro la parte de
   abajo de la foto (columna derecha), como si la foto no llegara hasta
   el borde. Solo en desktop (donde .hero es de 2 columnas, foto a la
   derecha) se recorta ese degradado con una máscara horizontal para que
   se quede dentro de la columna de texto (a la izquierda/centro) y se
   desvanezca del todo ANTES de tocar la columna de la foto — así la
   transición de color se sigue viendo bien "en el centro" y la foto
   queda intacta y visible de arriba a abajo. En móvil no hace falta:
   ahí la foto no es a sangre completa (ver .hero-photo-col img más abajo,
   object-fit:contain), así que el .blend de siempre no la tapa. */
@media (min-width:861px){
  .hero + .blend{
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 56%);
    mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 56%);
  }
}

/* ---------- 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;}
/* Fixed height + the site-wide `img{max-width:100%}` reset were fighting
   each other here: the .footer-brand column is only ~304px wide, so at a
   pinned height:132px the browser had to clamp the width down to fit,
   which — because height never budged — stretched the mark noticeably
   taller/narrower than its true proportions. An explicit width with
   height:auto instead lets the browser derive an undistorted size from
   the image's own aspect ratio, sized to sit comfortably inside the
   column rather than crowding its edges. */
body.page-home .footer-brand .logo-img{width:230px; height:auto; 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{width:170px; height:auto;}
  body.page-home .cta-copy .logo-img{height:76px;}
}
nav.main-nav{display:flex; align-items:center; gap:19px;}
nav.main-nav a.nav-link{font-size:13.5px; font-weight:500; color:var(--text-dark); position:relative; padding:4px 0; white-space:nowrap;}
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;
  /* Closing is intentionally delayed (see below): none of these three
     properties starts to change until .3s after the cursor truly leaves
     both the trigger and the panel, so a fast or slightly diagonal cursor
     path between them — which can drop :hover for a single frame at the
     boundary — never reads as a close. Opening has no delay so the menu
     still feels instant on the way in. */
  transition:opacity .22s ease .3s, visibility .22s ease .3s, pointer-events .22s ease .3s;
  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;
  transition:opacity .18s ease, visibility 0s, pointer-events 0s;
}
.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 to exactly horizontal (was 95deg, then 120deg before that):
   even a few degrees of diagonal here made the color at the column's own
   right edge drift between the top and bottom of the hero, which is what
   the previous 95deg version still showed as a faint vertical crease where
   it met the photo's scrim — the scrim below is a pure 90deg gradient, so
   this must match it exactly, not just approximately, for the seam to
   disappear completely at every height. */
.hero-copy-col{position:relative; display:flex; align-items:center; padding:68px 0; background:linear-gradient(90deg, 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;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.hero .btn-row{margin-top:22px;}
/* 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;}
/* Embarazo's hero photo (wide 3-person scene) needs Dr. Víctor — on the
   right-hand edge of the source photo — to stay comfortably in frame
   instead of being cropped by the default centered position. Desktop only:
   the mobile "contain" layout already shows the whole photo (see the
   860px media query below), so no crop to correct there. */
.hero-embarazo-photo{object-position:85% 68%;}
/* Two stacked eased gradients (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.
   A second, vertical layer fades the BOTTOM edge of the photo into
   var(--verde-deep) — the hero's own background and the exact color the
   .blend seam (or the big-statement section) right after the hero starts
   from. Without it, the photograph's real content (window light, contrast,
   a bright white coat) just stops in a straight line at the hero's bottom
   edge — a hard visual cut even though the flat color underneath matches
   perfectly. The ramp has to run over a good third of the photo's height
   (not just the last few px) and follow an eased curve (t^1.8) with no
   single jump anywhere in it: against a bright subject like a white coat,
   a short/steep fade still reads as a hard edge even though it is
   mathematically a gradient. Mobile already had its own equivalent
   single-layer fade (below); this brings desktop in line with it. */
.hero-photo-col .photo-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(26,52,40,0) 0%,
      rgba(26,52,40,0) 30%,
      rgba(26,52,40,.03) 40%,
      rgba(26,52,40,.1) 50%,
      rgba(26,52,40,.22) 60%,
      rgba(26,52,40,.37) 70%,
      rgba(26,52,40,.55) 80%,
      rgba(26,52,40,.71) 88%,
      rgba(26,52,40,.85) 94%,
      rgba(26,52,40,.95) 98%,
      var(--verde-deep) 100%),
    linear-gradient(90deg,
      var(--verde-hover) 0%,
      rgba(46,90,70,.97) 3.6%,
      rgba(46,90,70,.9) 7.1%,
      rgba(46,90,70,.78) 10.7%,
      rgba(46,90,70,.63) 14.3%,
      rgba(46,90,70,.45) 17.9%,
      rgba(46,90,70,.29) 20.7%,
      rgba(46,90,70,.15) 22.9%,
      rgba(46,90,70,.05) 24.3%,
      rgba(46,90,70,0) 25%);
}

.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;}
/* Desktop only (matches the 1000px breakpoint below, where the grid is
   still a single row of 4): capping the grid itself to 80% of .wrap's
   width — rather than shrinking each card's own padding/type scale —
   takes every card down ~20% in one proportional step and keeps them
   perfectly centered, with the same balanced gap between them. */
@media (min-width:1001px){
  .services-cards{max-width:910px; margin-left:auto; margin-right:auto;}
}
.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. */
/* Pedido 2026-09-22 (4ª pasada, solo desktop): 150px de espacio de sobra
   bajado al mínimo real que necesita el .blend que sigue (120px) — sigue
   sin tapar nada, solo con menos aire. Móvil no se toca (no se pidió). */
.why-section{background:var(--beige); padding-bottom:120px;}
@media (max-width:768px){ .why-section{padding-bottom:104px;} }
/* Pedido 2026-09-22: en Sobre mí, "Preguntas frecuentes" (#faq) tenía
   76px arriba (de .section-pad) y 150/120px abajo (de .why-section, por
   el .blend que la sigue) — se notaba descentrada. Un id gana a ambas
   clases, así que aquí se igualan los dos lados; abajo no baja de 120px/
   64px porque ahí sigue el .blend. */
#faq{padding-top:120px; padding-bottom:120px;}
@media (max-width:768px){ #faq{padding-top:64px; padding-bottom:64px;} }
/* NOTE: .why-section .wrap used to force a 2-col 1.32fr/.95fr grid for an
   image+text layout that no longer exists on any page — every remaining
   .why-section (the META sections, the Sobre mí CV/FAQ sections) just wants
   the beige background + padding, so that grid override was removed: it was
   silently squashing their .wrap into a narrow left column instead. */
.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);}
/* Unified into one 6-item list (was a 3-item .why-check column plus a
   separate row of 3 .cred-pill badges below it, two different visual
   treatments for what is really one list of qualities) — same green
   circle-tick icon throughout for a single consistent treatment, laid out
   as a balanced 2-column grid on wider screens and one column on narrow
   ones, so it reads as one deliberate list rather than two components. */
.why-list{margin-top:22px; display:grid; grid-template-columns:1fr 1fr; column-gap:28px; row-gap:20px;}
.why-check{display:flex; gap:14px; align-items:flex-start; font-size:15.5px; color:var(--text-dark); font-weight:500; line-height:1.4;}
.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-check strong{font-family:var(--font-serif); font-weight:700; color:var(--verde);}
@media (max-width:640px){
  .why-list{grid-template-columns:1fr;}
}
.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;}


/* 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);}
/* Auto-rotating carousel (same continuous-scroll technique as the
   "Aprende más" resource cards below): the 4 example cards are duplicated
   once in the track (aria-hidden) so the CSS animation loops seamlessly,
   pauses on hover so it can be read, and stops entirely for
   prefers-reduced-motion. */
.explico-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%);
}
.explico-track{display:flex; gap:22px; width:max-content; animation:explicoScroll 32s linear infinite;}
.explico-grid:hover .explico-track{animation-play-state:paused;}
.explico-card{width:270px; flex-shrink:0;}
@keyframes explicoScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  .explico-track{animation:none;}
}
.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;}

/* ---------- INSTAGRAM FEED ---------- */
/* Small, self-playing strip of square cards (see index.html for the setup
   comment explaining how to swap the placeholder for a real live widget).
   Pure CSS marquee: the track holds the card set twice back-to-back and
   scrolls exactly half its own width, so the loop point is invisible.
   site.js only pauses it on hover/focus and disables it for
   prefers-reduced-motion — the motion itself needs no JS. */
.instagram-feed{background:var(--blanco);}
.instagram-feed .lead{max-width:560px; margin-left:auto; margin-right:auto;}
/* margin-bottom matters here: the .blend transition right after this
   section overlaps its own previous section by 120px (negative margin,
   see .blend), painted on top (z-index:1). With the bigger 6.5cm-tall
   cards, the space below the wrap (the "Ver perfil…" link + the section's
   own bottom padding) is no longer enough on its own to keep that 120px
   overlap clear of the cards — without this margin the blend's gradient
   paints over the bottom of the card titles. */
.ig-feed-wrap{margin-top:44px; margin-bottom:40px; overflow:hidden; -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%);}
.ig-feed-track{display:flex; width:max-content; gap:16px; animation:ig-scroll 26s linear infinite;}
@keyframes ig-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
/* Tarjeta más grande que la versión inicial (4.5x6.5cm — el navegador
   convierte cm a píxeles de forma exacta, 1cm = 37.8px a 96dpi) para que
   el título se lea con comodidad y la foto no quede tan apretada. Foto
   arriba, título de la publicación debajo, igual que una tarjeta de
   Reel/publicación de Instagram. object-position:center top en la miniatura
   prioriza que el titular de cada publicación (arriba de la imagen
   original) quede siempre dentro del recorte en vez de cortarse. */
.ig-feed-card{
  flex:0 0 auto; width:4.5cm; height:6.5cm; border-radius:14px; overflow:hidden;
  background:var(--beige); border:1px solid var(--beige-border);
  display:flex; flex-direction:column; color:var(--verde);
  transition:transform .3s ease, box-shadow .3s ease, color .3s ease;
}
.ig-feed-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card); color:var(--verde-deep);}
.ig-feed-card-thumb{
  flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--beige-border), var(--beige));
}
.ig-feed-card-thumb img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block;}
.ig-feed-card-thumb svg{width:34px; height:34px; flex-shrink:0;}
.ig-feed-card-title{
  flex:0 0 50px; height:50px; padding:4px 9px; font-size:13.5px; line-height:1.25; font-weight:600; text-align:center;
  color:var(--verde-deep); background:var(--blanco);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
/* Reserved for the real widget iframe once connected (see the setup
   comment in index.html) — same footprint/rounding as the placeholder
   strip so the swap is visually seamless. */
.ig-feed-embed{width:100%; border:0; border-radius:16px;}
.ig-feed-link{display:inline-block; margin-top:30px; font-weight:700; color:var(--verde); font-size:14.5px; transition:color .2s ease;}
.ig-feed-link:hover{color:var(--verde-deep);}
@media (prefers-reduced-motion:reduce){.ig-feed-track{animation:none;}}

/* ---------- 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 ----------
   Pedido 2026-09-22: interior-page heroes (servicios/*, sobre-mi) now reuse
   the exact same .hero / .hero-copy-col / .hero-photo-col component Home
   uses (see "HERO (compact split: text left, photo right)" above), instead
   of the old, smaller .page-hero-grid + rounded floating-card photo. This
   guarantees pixel-identical proportions, gradient blend and responsive
   behaviour with Home's hero rather than a similar-but-different one.
   .page-hero-interior only adds what's specific to the interior pages:
   the breadcrumb and (below) the mobile stacking order. */
.page-hero-interior .breadcrumb{margin-bottom:14px;}
.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;}
/* Pedido 2026-09-22: se quitó el .page-hero-fade (una franja blanca que
   difuminaba los últimos 120px de la foto) — cada cabecera interior ya
   tiene su propio .blend justo después de </section> (mismo mecanismo que
   el resto del sitio) que resuelve la transición al siguiente bloque, así
   que la franja extra era redundante y la foto no llegaba a tocar el
   borde inferior de la sección. Ahora la foto ocupa la sección entera de
   arriba a abajo, igual que en Inicio. */

/* ---------- 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:80px 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-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;}
  .explico-card{width:230px;}
  .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%);
  }
  .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;}
}
/* 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);
    /* +44px: mismo ajuste que en el bloque de abajo (max-width:1100px) —
       el backdrop-filter del header hace que este "top" sea relativo al
       propio header, no al viewport, y se queda corto por la barra
       superior (44px) si no se suma aquí también. */
    transform:translateY(calc(-100% - 129px - 24px - 44px)); 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;}
  /* left:50%+transform:translateX(-50%) es del posicionamiento absoluto de
     escritorio (centrar el desplegable bajo "Servicios") — al pasar a
     position:static en móvil ese transform se queda aplicado igual (no
     depende de position) y desplaza todo el submenú ~medio ancho hacia la
     izquierda, dejando "Obesidad/Diabetes/Salud tiroidea" fuera de la
     pantalla y "Endocrinología del embarazo" cortada por la izquierda.
     Se resetea aquí junto con left. */
  body.page-home .nav-dropdown-menu{position:static; left:auto; transform:none; 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;}
  /* Mismo motivo que el bloque body.page-home de arriba: hay que resetear
     también left/transform, no solo position, o el submenú de Servicios
     se desplaza fuera de la pantalla en móvil. */
  .nav-dropdown-menu{position:static; left:auto; transform:none; 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. */
  /* Pedido 2026-09-22: el cálculo de abajo solo sube el menú 129px, pero
     como backdrop-filter en <header> lo convierte en el "contenedor" del
     menú fixed, ese 129px es relativo al PROPIO header (no al viewport) —
     así que se queda corto exactamente por los 44px de la barra superior
     y una punta del menú se queda asomando en la parte de arriba de la
     página. Se suman esos 44px para que despeje del todo el viewport. */
  body.page-home nav.main-nav{top:129px; max-height:calc(100vh - 129px); transform:translateY(calc(-100% - 129px - 24px - 44px));}
  /* 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;}
  /* .hero-embarazo-photo (below, desktop only) sets a custom horizontal
     crop; on this "contain" mobile layout the whole photo is always
     visible anyway, so it's reset back to the shared "center top". */
  .hero-embarazo-photo{object-position:center top !important;}
  /* Interior pages (.page-hero-interior) keep the photo BELOW the text on
     mobile (undoing Home's order:-1) so the .blend that follows the
     section (120px/64px, negative-margined over the section's own last
     120px/64px — same technique used site-wide) always overlaps the
     photo, never the CTA buttons. */
  .page-hero-interior .hero-photo-col{order:0; min-height:min(90vw, 460px);}
  .page-hero-interior .breadcrumb{justify-content:center;}
}
@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;}
  /* Mismo motivo que el bloque de arriba (1101-1200px): +44px de la barra
     superior, que el cálculo original no tenía en cuenta. */
  body.page-home nav.main-nav{top:101px; max-height:calc(100vh - 101px); transform:translateY(calc(-100% - 101px - 24px - 44px));}
  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;}
  .explico-card{width:200px;}
  .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;}
  .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-card{width:190px;}
  .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 photo: the top hero now reuses .hero-photo-col directly,
   same as Home (see "SECONDARY PAGE: hero banner" near the top of this
   file), so Obesidad's hero matches every other page pixel-for-pixel. ---- */

/* ---- 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);}
/* Tiroides' questions are phrased as longer full quotes than the other
   pages' shorter phrases — a slightly smaller size keeps the left-hand
   question list from taking up as much of the section's height. */
body.page-tiroides .pq-text{font-size:clamp(15px,1.8vw,17.5px);}
.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:.18;}
.bandstop-2{stop-color:var(--verde); stop-opacity:.36;}
.bandstop-3{stop-color:var(--verde-hover); stop-opacity:.54;}
.bandstop-4{stop-color:var(--verde-deep); stop-opacity:.76;}
.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:.5; stroke-width:1.5;}
.bf-torso{stroke:var(--verde-deep); stroke-opacity:.5; stroke-width:2;}
.bf-head{stroke:var(--verde-deep); stroke-opacity:.5; stroke-width:2;}
.bf-shoulder-line, .bf-center-line, .bf-crosshair{fill:none; stroke:var(--verde-deep); stroke-opacity:.4; stroke-width:1.4; stroke-linecap:round;}
.bf-digits{fill:none; stroke:var(--verde-deep); stroke-opacity:.42; 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-photo-wrap{flex-direction:column; align-items:center; gap:40px;}
}

/* ---- 8b. Composición corporal: imagen de referencia con puntos ----
   The two-body reference photo supplied for this section, used as-is
   (not redrawn), with the same 6 hotspots/parameters as before overlaid
   on top via absolute positioning — one pair of hotspots per body,
   sharing data-comp keys so hovering either side highlights both. */
.body-comp-photo-wrap{align-items:center;}
.body-comp-photo-frame{position:relative; width:100%; max-width:420px; margin:0 auto;}
.body-comp-photo{width:100%; height:auto; display:block; border-radius:18px;}
.bc-photo-caption-row{display:flex; justify-content:space-between; gap:12px; margin-top:16px; padding:0 2%;}
.bc-photo-caption-row span{font-family:var(--font-sans); font-size:12px; font-weight:600; color:var(--text-muted); letter-spacing:.02em; text-align:center; flex:1;}
.bh-line{position:absolute; top:50%; height:1.5px; background:var(--verde); opacity:.5; pointer-events:none; transition:opacity .25s ease, background .25s ease;}
/* pointer-events left enabled (unlike .bh-line) so hovering the label pill
   itself — not just the small dot — also counts as hovering this hotspot;
   the label sits outside the button's own 26px box, so with events
   disabled here the hover would never reach the button at all. */
.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; cursor:pointer; 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){
  .body-comp-photo-frame{max-width:320px;}
  .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);}
  .bc-photo-caption-row span{font-size:11px;}
}
@media (max-width:380px){
  .body-comp-photo-frame{max-width:270px;}
  .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:122px;}
@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 photo: the top hero now reuses .hero-photo-col directly,
   same as Home (see "SECONDARY PAGE: hero banner" near the top of this
   file). ---- */

/* ---- 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:80px; padding-bottom:122px;}
@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:minmax(0,1fr) minmax(0,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 photo: the top hero now reuses .hero-photo-col directly
   (pedido 2026-09-22, see "SECONDARY PAGE: hero banner" above) — this
   page-scoped .page-hero-photo-integrated treatment is no longer used. ---- */

/* ---- 9-13. Pathology tabs ("No toda alteración tiroidea es igual"):
   the 3 conditions sit in one horizontal row so all three read in a
   single line with nothing to scroll past; hovering/tapping a tab swaps
   its detail (image + 2-3 short paragraphs) into the one shared panel
   below instead of expanding a card in place. ---- */
.path-tabs-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.path-tab{background:var(--blanco); border:1.5px solid var(--beige-border); border-radius:var(--radius-card); padding:22px 24px; cursor:pointer; text-align:left; font-family:inherit; transition:border-color .3s ease, box-shadow .3s ease, background .3s ease; outline:none;}
.path-tab:focus-visible{box-shadow:0 0 0 3px var(--verde-hover);}
.path-tab:hover, .path-tab:focus-visible{border-color:var(--verde);}
.path-tab .path-num{display:block; font-family:var(--font-serif); font-size:14px; color:var(--verde); margin-bottom:6px; transition:color .3s ease;}
.path-tab h3{margin:0 0 8px; font-size:19px; transition:color .3s ease;}
.path-teaser{margin:0; font-size:14.5px; color:var(--text-body); line-height:1.5; transition:color .3s ease;}
.path-tab.active{border-color:var(--verde-deep); background:var(--verde-deep); box-shadow:var(--shadow-card);}
.path-tab.active .path-num{color:rgba(255,255,255,.75);}
.path-tab.active h3{color:#fff;}
.path-tab.active .path-teaser{color:rgba(255,255,255,.85);}
.path-detail-panel{margin-top:28px;}
.path-detail-item{display:none;}
.path-detail-item.active{display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:start; animation:bcFade .35s ease;}
.path-detail-img img{width:100%; max-height:200px; object-fit:cover; border-radius:14px; display:block;}
.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-tabs-row{grid-template-columns:1fr;}
  .path-detail-item.active{grid-template-columns:1fr;}
  .path-detail-img img{max-height:220px;}
}

/* ---- 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. ---- */
/* Explicit width so the wheel's own width:100% has something definite
   to resolve against — this wrap is now the sole child of the flex
   column (.thyroid-split-wheel), and a lone flex item without an
   explicit size shrinks to fit its content, which collapses a
   width:100% descendant to 0 (a classic flex/percentage circularity). */
.thyroid-eval-wrap{margin-top:8px; width:100%;}
.thyroid-wheel{position:relative; width:100%; max-width:520px; aspect-ratio:1/1; margin:48px auto 0;}
/* Inside the "Más allá de la glucosa"-style split (.dash-split), the
   diagram sits directly beside the intro text rather than below a large
   centered heading, so it doesn't need that top margin; and since this
   column (diagram + its own info panel) runs taller than the text
   column, top-align the two instead of the shared component's default
   vertical centering. */
.thyroid-split-wheel .thyroid-wheel{margin-top:0;}
@media (min-width:1000px){
  body.page-tiroides .dash-split{align-items:start;}
}
.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:128px; 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:15px; 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);}
/* Associated text now lives in the left text column (below the
   interaction-hint) instead of centered under the wheel, so the right
   column stays just the diagram + icons and the whole section fits one
   screen without scrolling past the fold. */
.thyroid-info-panel{margin-top:22px; max-width:480px;}
.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:8px;}
.ti-info p{font-family:var(--font-serif); font-size:16.5px; 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:96px; gap:6px;}
  .th-label{font-size:12.5px;}
  .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:82px;}
  .th-label{font-size:11px;}
}

/* ---- 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:122px;}
@media (max-width:768px){ body.page-tiroides .big-statement{padding-bottom:104px;} }

/* =====================================================================
   ENDOCRINOLOGÍA DEL EMBARAZO PAGE — Prompt 5
   Fourth service page. Same scoping discipline as Obesidad/Diabetes/
   Tiroides: shared classes get a "body.page-embarazo " prefix; brand-new
   components (the stage timeline + stage panels, the step-words strip)
   use plain, page-exclusive class names.
   ===================================================================== */

/* ---- Hero photo: the top hero now reuses .hero-photo-col directly,
   same as Home (see "SECONDARY PAGE: hero banner" near the top of this
   file). ---- */
.embarazo-questions-section{padding-bottom:150px;}
@media (max-width:768px){ .embarazo-questions-section{padding-bottom:104px;} }
body.page-embarazo .big-statement{padding-bottom:122px;}
@media (max-width:768px){ body.page-embarazo .big-statement{padding-bottom:104px;} }

/* ---- Intro ("Una etapa de grandes cambios hormonales"): text + small
   supporting photo, two columns on desktop, stacked on mobile — same
   1000px breakpoint used by every other two-column split on the site. ---- */
.embarazo-intro-section{padding-bottom:150px;}
@media (max-width:768px){ .embarazo-intro-section{padding-bottom:104px;} }
.intro-split{display:flex; flex-direction:column; gap:36px; align-items:center;}
.intro-split-photo{width:100%; max-width:320px; border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card);}
.intro-split-photo img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5;}
@media (min-width:1000px){
  .intro-split{flex-direction:row; align-items:center; gap:64px; text-align:left;}
  .intro-split-text{flex:1;}
  .intro-split-text .eyebrow, .intro-split-text .center{text-align:left;}
  .intro-split-photo{max-width:300px; flex-shrink:0;}
}
/* Detectar · Interpretar · Ajustar · Acompañar — a quiet visual cadence,
   not a repeat of the .dashboard-grid/.factor-chip language used
   elsewhere, so this reads as its own small beat in the page. */
.step-words{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 0; margin-top:32px;}
.intro-split-text .step-words{justify-content:flex-start;}
.step-words span{font-family:var(--font-sans); font-weight:700; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--verde-deep); padding:0 16px; opacity:0; transform:translateY(6px); animation:stepWordIn .5s ease forwards;}
.step-words span:nth-child(1){animation-delay:.05s;}
.step-words span:nth-child(2){animation-delay:.2s;}
.step-words span:nth-child(3){animation-delay:.35s;}
.step-words span:nth-child(4){animation-delay:.5s;}
.step-words span:not(:last-child){border-right:1px solid var(--beige-border);}
@keyframes stepWordIn{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){ .step-words span{opacity:1; transform:none; animation:none;} }
@media (max-width:480px){
  .step-words span{font-size:11.5px; padding:0 10px;}
}

/* ---- Stage timeline: ANTES → 1º TRIMESTRE → 2º-3º TRIMESTRE → POSPARTO.
   A thin horizontal track with a green fill that grows as later stages
   are selected, four round nodes on top of it (numbered 01-04), and a
   single detail panel below that swaps content — same single-active-
   panel idiom used everywhere else on the site (dash-wheel, thyroid
   wheel, patient stories), just laid out as a line instead of a circle. ---- */
.stage-timeline-wrap{margin-top:8px;}
.stage-timeline{position:relative; display:flex; justify-content:space-between; align-items:flex-start; max-width:820px; margin:0 auto; padding:0 6px;}
.stage-track{position:absolute; top:21px; left:26px; right:26px; height:2px; background:var(--beige-border); z-index:0; border-radius:2px; overflow:hidden;}
.stage-track-fill{height:100%; width:0%; background:var(--verde-deep); transition:width .5s cubic-bezier(.4,0,.2,1);}
.stage-node{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; background:none; border:none; padding:0; cursor:pointer; width:25%; font-family:var(--font-sans);}
.stage-node-dot{width:42px; height:42px; border-radius:50%; background:#fff; border:2px solid var(--beige-border); display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-weight:700; font-size:15px; color:var(--verde); transition:background .35s ease, border-color .35s ease, color .35s ease, transform .3s ease;}
.stage-node-label{font-size:12.5px; font-weight:600; color:var(--text-dark); text-align:center; line-height:1.3; transition:color .3s ease; max-width:120px;}
.stage-node:hover .stage-node-dot, .stage-node:focus-visible .stage-node-dot, .stage-node.active .stage-node-dot{background:var(--verde-deep); border-color:var(--verde-deep); color:#fff; transform:scale(1.08);}
.stage-node.active .stage-node-label{color:var(--verde-deep); font-weight:700;}
.stage-tagline{text-align:center; font-family:var(--font-serif); font-size:clamp(18px,2.2vw,22px); color:var(--text-dark); font-style:italic; margin:40px auto 0; max-width:640px;}

/* Detail panel: single-active-panel, same crossfade as .dh-info/.ti-info. */
.stage-detail{margin-top:52px;}
.preg-panel{display:none;}
.preg-panel.active{display:block; animation:bcFade .4s ease;}
.preg-panel-grid{display:grid; grid-template-columns:1fr; gap:28px;}
.preg-panel-tag{display:block; font-family:var(--font-sans); font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--verde); margin-bottom:10px;}
.preg-panel-left h3{font-size:26px; margin-bottom:14px;}
.preg-panel-lead{font-size:15.5px; color:var(--text-body); line-height:1.6; margin-bottom:22px;}
.stage-objective{background:var(--beige); border-left:3px solid var(--verde-deep); border-radius:0 12px 12px 0; padding:18px 22px; margin-top:24px;}
.so-label{display:block; font-family:var(--font-sans); font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--verde-deep); margin-bottom:6px;}
.stage-objective p{margin:0; font-family:var(--font-serif); font-size:16px; color:var(--text-dark); line-height:1.5;}
.stage-chip-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.stage-chip{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--beige-border); border-radius:12px; padding:14px 16px; font-size:13.5px; font-weight:600; color:var(--text-dark); line-height:1.35;}
.sc-icon{width:32px; height:32px; border-radius:10px; background:var(--beige); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.sc-icon svg{width:16px; height:16px; color:var(--verde);}

@media (min-width:900px){
  .preg-panel-grid{grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
}

@media (max-width:640px){
  .stage-timeline{flex-direction:column; gap:22px; padding:0; max-width:340px;}
  .stage-track{top:0; bottom:0; left:20px; right:auto; width:2px; height:auto;}
  .stage-track-fill{width:100%; height:0%;}
  .stage-node{flex-direction:row; align-items:center; gap:16px; width:100%; text-align:left;}
  .stage-node-label{text-align:left; max-width:none;}
  .preg-panel-left h3{font-size:22px;}
  .stage-chip-grid{grid-template-columns:1fr;}
}

.embarazo-timeline-section{padding-bottom:150px;}
@media (max-width:768px){ .embarazo-timeline-section{padding-bottom:104px;} }

/* ---- Final follow-up section clipping fix (page-exclusive wrapper) ---- */
.embarazo-followup-section{padding-bottom:150px;}
@media (max-width:768px){ .embarazo-followup-section{padding-bottom:104px;} }
.embarazo-news-section{padding-bottom:150px;}
@media (max-width:768px){ .embarazo-news-section{padding-bottom:104px;} }
.embarazo-faq-section{padding-bottom:150px;}
@media (max-width:768px){ .embarazo-faq-section{padding-bottom:104px;} }

/* ============================================================
   COMUNIDAD DE PACIENTES — password gate + newspaper-style
   article feed. Reuses the site's existing card/button/eyebrow
   language rather than introducing a new visual system.
   ============================================================ */

/* While locked, the page underneath is hidden behind the gate and
   can't scroll (prevents peeking at content behind the overlay). */
body.cdp-locked{overflow:hidden;}

.cdp-gate{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center;
  justify-content:center; padding:24px;
  background:rgba(26,52,40,.6); backdrop-filter:blur(4px);
  transition:opacity .35s ease, visibility .35s ease;
}
.cdp-gate.is-hidden{opacity:0; visibility:hidden; pointer-events:none;}
.cdp-gate-card{
  background:var(--blanco); border-radius:var(--radius-card); box-shadow:var(--shadow-lg);
  padding:44px 38px; max-width:400px; width:100%; text-align:center;
}
.cdp-gate-card .eyebrow{display:block;}
.cdp-gate-card h2{margin:10px 0 12px; font-size:26px;}
.cdp-gate-card > p{font-size:14.5px; color:var(--text-body); line-height:1.55; margin:0 0 24px;}
.cdp-gate-form{display:flex; flex-direction:column; gap:10px;}
.cdp-gate-form label{font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; text-align:left; color:var(--text-dark);}
.cdp-gate-form input{
  padding:13px 15px; border-radius:10px; border:1.5px solid var(--beige-border);
  font-family:inherit; font-size:15px; color:var(--text-dark); background:var(--blanco);
}
.cdp-gate-form input:focus{outline:none; border-color:var(--verde);}
.cdp-gate-form .btn{margin-top:8px; width:100%; text-align:center; justify-content:center;}
.cdp-error{font-size:13px; color:#a8443a; margin:0; min-height:0; display:none; text-align:left;}
.cdp-error.is-visible{display:block;}

/* Article feed stays out of the layout (and out of the tab order)
   until unlocked, then fades in. */
.cdp-app{display:none;}
.cdp-app.is-visible{display:block; animation:bcFade .4s ease;}

.community-filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px;}
.community-filter-btn{
  padding:9px 20px; border-radius:var(--radius-pill); border:1.5px solid var(--beige-border);
  background:var(--blanco); font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--text-dark); cursor:pointer; transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.community-filter-btn:hover{border-color:var(--verde);}
.community-filter-btn.active{background:var(--verde-deep); border-color:var(--verde-deep); color:#fff;}

.community-grid{display:grid; grid-template-columns:1fr; gap:28px;}
@media (min-width:720px){ .community-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1080px){ .community-grid{grid-template-columns:repeat(3,1fr);} }

.community-card{
  background:var(--blanco); border:1px solid var(--beige-border); border-radius:var(--radius-card);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;
}
.community-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card);}
.community-card-img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--beige);}
.community-card-img img{width:100%; height:100%; object-fit:cover; display:block;}
.community-card-body{padding:20px 22px 24px; display:flex; flex-direction:column; flex:1;}
.community-card-cat{font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--verde); margin-bottom:8px;}
.community-card-body h3{font-family:var(--font-serif); font-size:18.5px; font-weight:600; margin:0 0 10px; line-height:1.3; color:var(--text-dark);}
.community-card-body p{font-size:14px; color:var(--text-body); line-height:1.55; margin:0 0 14px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; flex:1;}
.community-card-date{font-size:12px; color:var(--text-muted); margin-top:auto;}
.cdp-empty{grid-column:1/-1; text-align:center; font-size:15px; color:var(--text-muted); padding:48px 0;}

@media (max-width:480px){
  .cdp-gate-card{padding:34px 26px;}
}
.embarazo-doctor-teaser{padding-bottom:150px;}
@media (max-width:768px){ .embarazo-doctor-teaser{padding-bottom:104px;} }

/* ============================================================
   TEMPORAL — pedido 2026-09-22: la web de reservas real todavía no
   está lista, así que cada enlace/botón de "agendar cita" (marcado
   con la clase .agendar-link) abre una ventana modal que avisa de
   que la reserva online estará disponible próximamente, en vez de
   navegar a #contacto. Ver el modal #comingSoonModal y su lógica en
   site.js. Cuando el enlace de reservas esté listo: quita la clase
   .agendar-link (o el intercept en site.js) y vuelve a apuntar cada
   botón a la reserva real.
   ============================================================ */

/* ============================================================
   TEMPORAL — pedido 2026-09-22: la sección "Comunidad de pacientes"
   pasa a ser una "Sección privada" oculta del menú (la página en sí
   sigue accesible y protegida con contraseña). Marcada con la clase
   .seccion-privada-item. Para reactivarla en el menú, elimina (o
   comenta) esta única regla.
   ============================================================ */
.seccion-privada-item{display:none !important;}


/* ============================================================
   OBESIDAD — "Mi visión en consulta": edificio interactivo
   Metáfora arquitectónica: la salud metabólica es un edificio
   sostenido por tres pilares (nutrición, ejercicio, psicología);
   las herramientas médicas (farmacológico, cirugía) son refuerzos
   ligeros, no otro nivel estructural; los factores individuales
   son nubes suaves alrededor del sistema. Clases propias (vb-*),
   sin reutilizar componentes de otras secciones.
   ============================================================ */
.vision-intro{margin-bottom:44px;}
.vision-intro .eyebrow{margin-bottom:12px;}
.vision-intro .lead{max-width:640px; margin-left:auto; margin-right:auto; margin-bottom:0;}

.vb-layout{position:relative; z-index:1;}
@media (min-width:1000px){
  .vb-layout{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:44px;}
}

/* ---------- lienzo: edificio + nubes ----------
   .vb-stage es un lienzo de coordenadas 0-100% (igual que el resto de
   diagramas de la web): las nubes se posicionan en % sobre esta caja,
   con margen generoso arriba/abajo/lados para que nunca choquen con
   el edificio, que vive centrado en flujo normal. */
.vb-stage{position:relative; width:100%; max-width:520px; margin:0 auto; padding:64px 12px 56px;}

.vb-building{position:relative; z-index:2; width:100%; max-width:380px; margin:0 auto; display:flex; flex-direction:column; align-items:stretch;}

/* ---------- tejado / frontón ---------- */
.vb-roof{
  position:relative; height:74px; margin-bottom:-1px;
  opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;
}
.vb-roof-back{
  position:absolute; inset:0; clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
  background:var(--verde-deep); transform:translateY(4px);
}
.vb-roof-face{
  position:absolute; inset:0; clip-path:polygon(50% 8%, 95% 100%, 5% 100%);
  background:linear-gradient(112deg, #ffffff 0 50%, #eef2ef 50% 100%);
  box-shadow:0 10px 20px -14px rgba(34,66,51,.4);
}
.vb-roof-ridge{position:absolute; top:8%; left:50%; width:1px; height:60%; background:rgba(34,66,51,.3); transform:translateX(-50%);}
.vb-roof-label{
  position:absolute; left:50%; bottom:14%; transform:translateX(-50%); z-index:1;
  font-family:var(--font-serif); font-size:14px; font-weight:600; color:var(--verde-deep);
  white-space:nowrap; letter-spacing:.01em;
}

.vb-body{
  position:relative; z-index:3; background:#fff; border:1px solid var(--beige-border); border-top:none;
  border-radius:0 0 8px 8px; padding:14px 20px; text-align:center; overflow:hidden;
  box-shadow:0 20px 40px -26px rgba(34,66,51,.35);
  opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;
}
.vb-body::before, .vb-body::after{content:""; position:absolute; top:0; bottom:0; width:4px; background:rgba(58,107,84,.14); pointer-events:none;}
.vb-body::before{left:16%;}
.vb-body::after{right:16%;}
.vb-body-sub{position:relative; z-index:1; display:block; font-size:14px; font-weight:600; color:var(--verde-deep); letter-spacing:.01em;}

/* ---------- viga "herramientas médicas" ---------- */
.vb-tools-beam{
  position:relative; z-index:2; margin-top:14px; background:#fff;
  border:1px solid var(--beige-border); border-radius:9px; box-shadow:0 14px 26px -20px rgba(34,66,51,.35);
  padding:12px 0 0; opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;
}
.vb-tools-label{
  display:block; text-align:center; font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); margin-bottom:8px;
}
.vb-tools-row{display:flex;}
.vb-tool{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none;
  cursor:pointer; padding:5px 6px 13px; font-family:var(--font-sans); font-size:10.5px; font-weight:700;
  color:var(--verde-deep); text-align:center; line-height:1.25;
  transition:background .25s ease, color .25s ease;
}
.vb-tool:first-child{border-right:1px solid var(--beige-border); border-radius:0 0 0 9px;}
.vb-tool:last-child{border-radius:0 0 9px 0;}
.vb-tool-icon{width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:var(--verde); transition:color .25s ease, transform .25s ease;}
.vb-tool-icon svg{width:17px; height:17px;}
.vb-tool:hover, .vb-tool:focus-visible, .vb-tool.active{background:var(--beige);}
.vb-tool:hover .vb-tool-icon, .vb-tool:focus-visible .vb-tool-icon, .vb-tool.active .vb-tool-icon{color:var(--verde-deep); transform:translateY(-2px);}

.vb-pillars{position:relative; z-index:2; display:flex; justify-content:center; gap:14px; margin-top:16px;}
.vb-pillar{
  flex:1; max-width:130px; display:flex; flex-direction:column; align-items:center;
  background:none; border:none; cursor:pointer; padding:0; font-family:var(--font-sans);
  opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;
}
/* columna clásica: capitel + fuste acanalado + basa, texto e icono
   integrados en el propio fuste para un aspecto más compacto (sin icono
   flotante independiente encima del pilar). */
.vb-column{position:relative; width:74%; min-height:140px; flex:1; margin:0 auto; display:flex; flex-direction:column;}
.vb-col-cap, .vb-col-base{
  height:6px; margin:0 -14%; border-radius:2px; flex-shrink:0;
  background:linear-gradient(180deg, #fff, rgba(58,107,84,.2));
  box-shadow:0 1px 2px rgba(34,66,51,.15);
  transition:background .3s ease;
}
.vb-col-base{background:linear-gradient(180deg, rgba(58,107,84,.2), #fff);}
.vb-col-shaft{
  flex:1; margin:2px 0; border-radius:2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:8px 4px;
  background-color:rgba(58,107,84,.14);
  background-image:repeating-linear-gradient(90deg, rgba(34,66,51,.16) 0 1.5px, transparent 1.5px 7px);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.5), inset -1px 0 0 rgba(34,66,51,.08);
  transition:background-color .3s ease;
}
.vb-col-label{
  font-size:12.5px; font-weight:700; color:var(--verde-deep); text-align:center; line-height:1.25;
  transition:color .3s ease;
}
.vb-col-icon{
  width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--verde-deep);
  transition:color .3s ease, transform .3s ease;
}
.vb-col-icon svg{width:16px; height:16px;}
.vb-pillar:hover .vb-col-shaft, .vb-pillar:focus-visible .vb-col-shaft, .vb-pillar.active .vb-col-shaft{
  background-color:var(--verde); background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 1.5px, transparent 1.5px 7px);
}
.vb-pillar:hover .vb-col-label, .vb-pillar:focus-visible .vb-col-label, .vb-pillar.active .vb-col-label,
.vb-pillar:hover .vb-col-icon, .vb-pillar:focus-visible .vb-col-icon, .vb-pillar.active .vb-col-icon{color:#fff;}
.vb-pillar:hover .vb-col-icon, .vb-pillar:focus-visible .vb-col-icon, .vb-pillar.active .vb-col-icon{transform:translateY(-2px);}
.vb-pillar:hover .vb-col-cap, .vb-pillar:focus-visible .vb-col-cap, .vb-pillar.active .vb-col-cap,
.vb-pillar:hover .vb-col-base, .vb-pillar:focus-visible .vb-col-base, .vb-pillar.active .vb-col-base{background:var(--verde-hover);}

/* entrada secuencial: pilares → edificio → herramientas → nubes.
   Reutiliza el mismo observer que ya marca .vb-layout con .in (idéntico
   al de .reveal en el resto de la web) para no añadir JS adicional. */
.vb-layout.in .vb-pillars .vb-pillar:nth-child(1){opacity:1; transform:translateY(0); transition-delay:.1s;}
.vb-layout.in .vb-pillars .vb-pillar:nth-child(2){opacity:1; transform:translateY(0); transition-delay:.2s;}
.vb-layout.in .vb-pillars .vb-pillar:nth-child(3){opacity:1; transform:translateY(0); transition-delay:.3s;}
.vb-layout.in .vb-roof{opacity:1; transform:translateY(0); transition-delay:.42s;}
.vb-layout.in .vb-body{opacity:1; transform:translateY(0); transition-delay:.48s;}
.vb-layout.in .vb-tools-beam{opacity:1; transform:translateY(0); transition-delay:.62s;}

/* ---------- nubes ---------- */
.vb-clouds{position:absolute; inset:0; z-index:1; pointer-events:none;}
.vb-cloud-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; pointer-events:none;}
.vb-cloud-lines path{fill:none; stroke:rgba(58,107,84,.22); stroke-width:.35; stroke-dasharray:2 2; vector-effect:non-scaling-stroke;}
.vb-cloud{
  position:absolute; left:var(--cx); top:var(--cy); transform:translate(-50%,-50%);
  background:none; border:none; padding:0; margin:0; font:inherit; cursor:pointer; pointer-events:auto;
  opacity:0; transition:opacity .7s ease; transition-delay:calc(.85s + var(--ed,0s));
}
.vb-layout.in .vb-cloud{opacity:1;}
.vb-cloud-inner{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(255,255,255,.75); backdrop-filter:blur(3px);
  border:1px solid rgba(58,107,84,.14); border-radius:16px; padding:9px 14px 8px;
  font-size:10.5px; font-weight:600; letter-spacing:.01em; color:var(--text-muted); white-space:nowrap;
  box-shadow:0 14px 28px -20px rgba(34,66,51,.4);
  animation:vbFloat 8s ease-in-out infinite;
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.vb-cloud:hover .vb-cloud-inner, .vb-cloud:focus-visible .vb-cloud-inner, .vb-cloud.active .vb-cloud-inner{
  background:#fff; border-color:var(--verde); color:var(--verde-deep); transform:translateY(-3px);
}
.vb-cloud-icon{width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:var(--verde-deep); opacity:.75;}
.vb-cloud-icon svg{width:15px; height:15px;}
@keyframes vbFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }

/* ---------- panel de texto (derecha): mismo idioma trigger/panel que el
   resto de la web (p. ej. .bc-info en Composición corporal) — display
   none/block + fade, para que el alto se ajuste al contenido de cada
   panel en vez de forzar todos a la misma altura. ---------- */
.vb-panel{margin-top:40px; max-width:460px; margin-left:auto; margin-right:auto;}
.vb-panel-content{display:none;}
.vb-panel-content.active{display:block; animation:bcFade .35s ease;}
.vb-panel-eyebrow{display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--verde); margin-bottom:10px;}
.vb-panel-content h3{font-family:var(--font-serif); font-size:23px; color:var(--text-dark); margin-bottom:12px;}
.vb-panel-content p{font-size:14.5px; line-height:1.65; color:var(--text-body); margin:0 0 14px;}
.vb-panel-content p:last-child{margin-bottom:0;}
@media (min-width:1000px){
  .vb-panel{margin-top:0; max-width:none; margin-left:0;}
}

@media (max-width:760px){
  .vb-stage{max-width:340px; padding:52px 4px 34px;}
  .vb-building{max-width:300px;}
  .vb-roof{height:60px;}
  .vb-roof-label{font-size:12px;}
  .vb-column{min-height:104px;}
  .vb-col-label{font-size:11px;}
  .vb-col-icon{width:19px; height:19px;}
  .vb-col-icon svg{width:14px; height:14px;}
  .vb-tool{font-size:10px; padding:4px 6px 10px;}
  .vb-tool-icon{width:20px; height:20px;}
  .vb-tool-icon svg{width:15px; height:15px;}
  .vb-cloud-inner{font-size:9.5px; padding:8px 12px 7px;}
  .vb-cloud-icon{width:17px; height:17px;}
}
@media (max-width:480px){
  .vb-stage{padding:44px 2px 30px;}
  .vb-cloud-lines{display:none;}
  .vb-cloud{position:static; transform:none; display:inline-flex; opacity:1; transition:none;}
  .vb-clouds{position:static; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:24px;}
  .vb-cloud-inner{animation:none;}
}

@media (prefers-reduced-motion: reduce){
  .vb-body, .vb-roof, .vb-tools-beam, .vb-pillar, .vb-cloud{transition:none;}
  .vb-cloud-inner{animation:none;}
  .vb-panel-content.active{animation:none;}
  .vb-tool, .vb-col-shaft, .vb-col-label, .vb-col-icon{transition:none;}
}

/* ============================================================
   MODAL genérico — base reutilizada por el formulario de cita
   (ver assets/cita.css para el contenido específico de la reserva)
   ============================================================ */
.simple-modal-overlay{position:fixed; inset:0; z-index:200; background:rgba(26,52,40,.55); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;}
.simple-modal-overlay.is-visible{opacity:1; visibility:visible;}
.simple-modal-card{background:#fff; border-radius:var(--radius-card); max-width:420px; width:100%; padding:40px 34px; text-align:center; box-shadow:var(--shadow-lg); transform:translateY(14px) scale(.97); transition:transform .25s ease;}
.simple-modal-overlay.is-visible .simple-modal-card{transform:translateY(0) scale(1);}
.simple-modal-icon{width:56px; height:56px; border-radius:50%; background:var(--beige); color:var(--verde); display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.simple-modal-icon svg{width:26px; height:26px;}
.simple-modal-card h3{font-family:var(--font-serif); font-size:21px; margin-bottom:10px; color:var(--verde-deep);}
.simple-modal-card p{font-size:14.5px; color:var(--text-body); line-height:1.55; margin:0 0 22px;}
.simple-modal-close{background:var(--verde); color:#fff; border:none; border-radius:var(--radius-pill); padding:12px 30px; font-size:13.5px; font-weight:600; cursor:pointer; transition:background .2s ease;}
.simple-modal-close:hover{background:var(--verde-hover);}
.simple-modal-x{position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:none; background:var(--beige); color:var(--text-dark); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.simple-modal-card{position:relative;}

/* ============================================================
   SELECTOR DE IDIOMA (ES / EN)
   ============================================================ */
.lang-switch{display:flex; align-items:center; gap:4px; margin-left:4px;}
.lang-btn{width:24px; height:24px; border-radius:50%; border:1.5px solid transparent; background:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:.55; transition:opacity .2s ease, border-color .2s ease, transform .2s ease; font-size:15px; line-height:1;}
.lang-btn span{pointer-events:none;}
.lang-btn img{width:100%; height:100%; object-fit:cover; pointer-events:none; display:block;}
.lang-btn:hover{opacity:.9; transform:scale(1.08);}
.lang-btn.active{opacity:1; border-color:var(--verde);}
.top-bar .lang-switch{margin-left:auto; margin-right:10px;}
.top-bar .lang-btn{opacity:.7;}
.top-bar .lang-btn.active{opacity:1; border-color:rgba(255,255,255,.7);}

/* ============================================================
   CHATBOT — widget flotante de preguntas sobre la web
   ============================================================ */
.chat-fab{position:fixed; right:24px; bottom:92px; z-index:59; background:var(--verde-deep); 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); border:none; cursor:pointer; transition:transform .2s ease, background .2s ease; animation:chatFabBounce 3.4s ease-in-out infinite;}
.chat-fab:hover{transform:translateY(-3px) scale(1.04); background:var(--verde); animation-play-state:paused;}
.chat-fab svg{width:25px; height:25px; position:relative; z-index:1;}
/* Pulsing "notice me" ring — runs until the visitor opens the chat once,
   at which point .chat-noticed is added and both animations stop. */
.chat-fab::before{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid var(--verde-deep); opacity:.6;
  animation:chatFabPing 2.6s ease-out infinite; pointer-events:none;
}
.chat-fab.chat-noticed{animation:none;}
.chat-fab.chat-noticed::before{animation:none; opacity:0;}
@keyframes chatFabBounce{
  0%, 100% { transform:translateY(0); }
  8% { transform:translateY(-9px); }
  16% { transform:translateY(0); }
  24% { transform:translateY(-4px); }
  32%, 100% { transform:translateY(0); }
}
@keyframes chatFabPing{
  0% { transform:scale(1); opacity:.6; }
  75%, 100% { transform:scale(1.45); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .chat-fab, .chat-fab::before{animation:none;}
}
.chat-panel{position:fixed; right:24px; bottom:160px; z-index:61; width:360px; max-width:calc(100vw - 32px); height:min(540px, 70vh); background:#fff; border-radius:20px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; opacity:0; visibility:hidden; transform:translateY(16px); transition:opacity .25s ease, visibility .25s ease, transform .25s ease;}
.chat-panel.is-open{opacity:1; visibility:visible; transform:translateY(0);}
.chat-head{background:var(--verde-deep); color:#fff; padding:16px 18px; display:flex; align-items:center; gap:12px;}
.chat-head-icon{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.chat-head-icon svg{width:18px; height:18px;}
.chat-head-txt{flex:1; min-width:0;}
.chat-head-txt strong{display:block; font-size:14px; font-family:var(--font-serif);}
.chat-head-txt span{display:block; font-size:11px; opacity:.75;}
.chat-close{background:none; border:none; color:#fff; opacity:.8; cursor:pointer; padding:4px; flex-shrink:0;}
.chat-close svg{width:18px; height:18px;}
.chat-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--beige);}
.chat-msg{max-width:85%; padding:10px 14px; border-radius:14px; font-size:13.5px; line-height:1.5;}
.chat-msg.bot{align-self:flex-start; background:#fff; color:var(--text-dark); border-bottom-left-radius:4px; box-shadow:0 2px 8px -4px rgba(0,0,0,.1);}
.chat-msg.user{align-self:flex-end; background:var(--verde); color:#fff; border-bottom-right-radius:4px;}
.chat-msg a{color:inherit; text-decoration:underline;}
.chat-suggestions{display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px; background:var(--beige);}
.chat-suggestion-btn{font-size:11.5px; background:#fff; border:1px solid var(--beige-border); border-radius:var(--radius-pill); padding:6px 12px; cursor:pointer; color:var(--text-dark); transition:background .2s ease, color .2s ease;}
.chat-suggestion-btn:hover{background:var(--verde); color:#fff; border-color:var(--verde);}
.chat-form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--beige-border); background:#fff;}
.chat-input{flex:1; border:1px solid var(--beige-border); border-radius:var(--radius-pill); padding:10px 16px; font-size:13.5px; font-family:inherit; outline:none;}
.chat-input:focus{border-color:var(--verde);}
.chat-send{width:40px; height:40px; border-radius:50%; background:var(--verde); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .2s ease;}
.chat-send:hover{background:var(--verde-hover);}
.chat-send svg{width:17px; height:17px;}
@media (max-width:480px){
  .chat-panel{right:16px; left:16px; width:auto; bottom:150px;}
  .chat-fab{right:16px; bottom:82px;}
  .float-cta{display:none;}
}

/* ============================================================
   PÁGINA "SOBRE MÍ" — CV resumido, investigación, FAQ
   ============================================================ */
.cv-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0;}
.cv-list li{display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px solid var(--beige-border); font-size:15px; color:var(--text-dark); line-height:1.5;}
.cv-list li:last-child{border-bottom:none;}
.cv-list .cv-ic{flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--beige); color:var(--verde); display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease;}
.cv-list .cv-ic svg{width:17px; height:17px;}
.cv-list a.cv-ig{color:var(--verde); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px;}
.cv-list a.cv-ig:hover{text-decoration:underline;}

/* CV item ↔ detail-box hover swap (Background section). Same trigger/panel
   idiom as the META wheel: hovering/focusing/tapping a .cv-item toggles the
   matching .cv-detail-panel[data-cv] inside the sticky right-hand box. */
.cv-list li.cv-item{cursor:pointer; margin:0 -16px; padding-left:16px; padding-right:16px; border-radius:12px; transition:background .2s ease;}
.cv-list li.cv-item:hover, .cv-list li.cv-item.active{background:#fff; box-shadow:var(--shadow-card);}
.cv-list li.cv-item:hover .cv-ic, .cv-list li.cv-item.active .cv-ic{background:var(--verde); color:#fff;}
.cv-list li.cv-item:focus-visible{outline:2px solid var(--verde); outline-offset:2px;}

.cv-split{display:block;}
@media (min-width:960px){ .cv-split{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start;} }
.cv-detail-box{margin-top:32px; background:#fff; border:1px solid var(--beige-border); border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card);}
@media (min-width:960px){ .cv-detail-box{margin-top:0; position:sticky; top:110px;} }
/* Pedido 2026-09-22: en móvil, el CV de Sobre mí se deja como lista simple
   — se oculta la caja de detalle (foto + texto desarrollado), que solo
   tiene sentido con el hover/clic de escritorio; el contenido ampliado
   solo se ve en la versión web. */
@media (max-width:959px){
  .cv-detail-box{display:none;}
  .cv-list li.cv-item{cursor:default;}
  .cv-list li.cv-item:hover, .cv-list li.cv-item.active{background:none; box-shadow:none;}
  .cv-list li.cv-item:hover .cv-ic, .cv-list li.cv-item.active .cv-ic{background:var(--beige); color:var(--verde);}
}
.cv-detail-panel{display:none;}
.cv-detail-panel.active{display:block; animation:cvFade .3s ease;}
@keyframes cvFade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }
.cv-detail-photo{aspect-ratio:4/3; overflow:hidden;}
.cv-detail-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.cv-detail-text{padding:22px 26px 26px;}
.cv-detail-text h4{font-family:var(--font-serif); font-size:17.5px; margin:0 0 8px; color:var(--text-dark);}
.cv-detail-text p{font-size:14px; line-height:1.65; color:var(--text-body); margin:0;}

.research-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
@media (min-width:800px){ .research-grid{grid-template-columns:repeat(3,1fr);} }
/* Pedido 2026-09-22: en móvil, "Mi investigación reciente" pasa de rejilla
   2x3 a una sola fila que se desliza horizontalmente (swipe), en vez de
   apilar las 6 tarjetas hacia abajo. */
@media (max-width:640px){
  .research-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; gap:14px;
    margin:0 -28px; padding:4px 28px 10px; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .research-card{flex:0 0 78%; scroll-snap-align:start;}
}
.research-card{display:block; background:#fff; border:1px solid var(--beige-border); border-radius:14px; overflow:hidden; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease;}
.research-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card);}
.research-thumb{height:190px; overflow:hidden; background:linear-gradient(135deg, var(--verde-deep), var(--verde));}
.research-thumb img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
.research-body{padding:14px 16px;}
.research-body .rc-journal{display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--verde); margin-bottom:6px;}
.research-body h4{font-family:var(--font-serif); font-size:13.5px; line-height:1.4; margin:0 0 8px; color:var(--text-dark);}
.research-body .rc-link{font-size:11.5px; font-weight:600; color:var(--verde);}

/* FAQ: full-width text column (no photo) for a clean, brief layout. */
.faq-split{max-width:760px; margin:0 auto;}

.faq-list{display:flex; flex-direction:column; gap:0;}
.faq-item{border-bottom:1px solid var(--beige-border);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; font-family:var(--font-serif); font-size:16.5px; color:var(--text-dark); font-weight:600;}
.faq-q .faq-chevron{flex-shrink:0; width:22px; height:22px; color:var(--verde); transition:transform .25s ease;}
.faq-item.open .faq-q .faq-chevron{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease;}
.faq-item.open .faq-a{max-height:340px; padding-bottom:20px;}
.faq-a p{font-size:14.5px; color:var(--text-body); line-height:1.6; margin:0; max-width:640px;}

/* ============================================================
   Enlace externo — subrayado punteado sutil para diferenciarlo
   de un enlace interno normal, sin romper el estilo de párrafo.
   ============================================================ */
a.ext-link{color:inherit; text-decoration:underline; text-decoration-style:dotted; text-decoration-color:var(--verde); text-underline-offset:3px; font-weight:600;}
a.ext-link:hover{color:var(--verde);}

/* ============================================================
   Banda "PREGUNTAS FRECUENTES" — enlace de cierre al final de cada
   página de servicio, hacia el acordeón de FAQ en Sobre mí.
   ============================================================ */
/* Bottom padding must clear the .blend overlay that follows this section
   (it overlaps the last 120px/64px of the preceding element via negative
   margin) — otherwise the gradient paints over the button. */
.faq-link-band{text-align:center; padding:38px 0 122px;}
@media (max-width:768px){ .faq-link-band{padding:40px 0 92px;} }