/* ===========================================================
   Dr. Camilo Varas — Sitio de marca personal (médico general)
   Sistema único · blanco Apple + obsidiana + azul sobrio
   Tipografía: Sora (display/títulos) · Inter (texto)
   Acento de marca: azul #3a6499 / navy #1a2a40
   Nota: --turq se define abajo en #0a74e8 (base) pero queda
   sobreescrito a #3a6499 por bloques :root posteriores en cascada;
   el azul EFECTIVO de la marca es #3a6499.
   =========================================================== */

:root {
  /* ---- Paleta (blanco Apple, obsidiana, azul sereno · AA) ---- */
  --teal-900: #1d1d1f;   /* titulares (negro Apple) */
  --teal-800: #2a2b2f;   /* texto fuerte / superficies */
  --teal-700: #46474d;   /* texto secundario fuerte */
  --turq:     #0a74e8;   /* acento azul (sobrio) */
  --turq-600: #0a63c9;   /* acento interactivo (AA) */
  --cyan:     #7fb2ff;   /* azul claro sobre obsidiana */
  --mint:     #eef2f9;   /* tile de ícono (azul muy tenue) */
  --mint-2:   #f5f5f7;   /* superficie clara (gris Apple) */
  --ivory:    #ffffff;   /* fondo general (blanco) */
  --navy:     #0c0e12;   /* obsidiana (footer / bloques oscuros) */
  --white:    #ffffff;
  --ink:      #1d1d1f;   /* texto principal (negro Apple) */
  --muted:    #6e6e73;   /* texto secundario (gris Apple) */
  --line:     #e8e8ed;   /* hairline frío neutro */

  /* ---- Radios (squircle / app) ---- */
  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 22px;
  --radius-xl: 26px;
  --radius-btn: 14px;

  /* ---- Sombras Apple — suaves, difusas, neutras, en capas ---- */
  --shadow-xs: 0 1px 2px rgba(17,18,20,.05);
  --shadow-sm: 0 1px 2px rgba(17,18,20,.04), 0 4px 12px rgba(17,18,20,.05);
  --shadow-md: 0 1px 2px rgba(17,18,20,.03), 0 8px 20px rgba(17,18,20,.06), 0 20px 44px rgba(17,18,20,.08);
  --shadow-lg: 0 4px 12px rgba(17,18,20,.06), 0 24px 48px rgba(17,18,20,.10), 0 48px 90px rgba(17,18,20,.12);
  --shadow-accent: 0 1px 2px rgba(10,116,232,.18), 0 6px 16px rgba(10,99,201,.22);
  --hairline: inset 0 1px 0 rgba(255,255,255,.75);   /* luz superior 1px */

  /* ---- Layout / escala ---- */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 24px);
  --section-pad: clamp(46px, 5.5vw, 76px);
  --head-gap: clamp(26px, 3.5vw, 40px);

  --ease: cubic-bezier(.22, 1, .36, 1);     /* salida suave */
  --spring: cubic-bezier(.34, 1.4, .54, 1); /* overshoot sutil */
  --t-fast: .16s;
  --t: .26s;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Sora", "Inter", system-ui, sans-serif;
}

/* ===========================================================
   Base
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px;
  -webkit-tap-highlight-color: transparent;   /* sin flash gris al tocar en móvil */
}
body {
  font-family: var(--font-sans); color: var(--ink); background: var(--ivory);
  line-height: 1.55; font-size: 17px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt";
  overscroll-behavior-y: none;
}
img, iframe, svg { max-width: 100%; display: block; }
img, iframe { border: 0; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; padding: 0; }
strong { font-weight: 700; }

/* Títulos con quiebres de línea balanceados; párrafos sin huérfanas */
h1, h2, .hero__title, .section__title, .cta-final h2, .booking__card h3, .approach__quote blockquote { text-wrap: balance; }
.hero__lead, .section__sub, .about__copy p, .booking__copy > p, .approach__copy > p { text-wrap: pretty; }

/* Selección y scrollbar a tono de marca */
::selection { background: rgba(10,116,232,.16); color: var(--teal-900); }
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: #d2d2d7 transparent; }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-thumb { background: #d2d2d7; border: 3px solid var(--ivory); border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: #b9b9c0; }
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--teal-800); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* Íconos SVG de línea */
.ic {
  width: 1.15em; height: 1.15em; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none;
}

/* Foco visible y consistente (ring suave) */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, .gitem:focus-visible {
  outline: 2px solid rgba(10,116,232,.7); outline-offset: 3px; border-radius: 10px;
}

/* ===========================================================
   Tipografía de sección
   =========================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--turq-600);
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--turq);
  box-shadow: 0 0 0 4px rgba(47,111,208,.16);
}
.section__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.02em;
  color: var(--teal-900); margin-top: .32em;
}
.section__sub {
  color: var(--muted); font-size: 1.05rem; max-width: 54ch; margin-top: .5em;
}

/* ===========================================================
   Botones
   =========================================================== */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: inherit; font-weight: 600; font-size: .95rem; line-height: 1; letter-spacing: -.01em;
  min-height: 50px; padding: 0 26px; border-radius: var(--radius-btn);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform var(--t-fast) var(--spring), box-shadow var(--t) var(--ease),
              background var(--t-fast) linear, border-color var(--t-fast), filter var(--t-fast);
  will-change: transform;
}
.btn .ic { width: 1.1em; height: 1.1em; }
.btn--lg { min-height: 54px; padding: 0 30px; font-size: 1rem; }

.btn--primary {
  background: linear-gradient(180deg, #1488ff 0%, #0a74e8 52%, #0a66cf 100%); color: #fff;
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.08);
}
.btn--primary:hover:not(:disabled) {
  transform: translateY(-2px); filter: saturate(1.04) brightness(1.04);
  box-shadow: 0 2px 6px rgba(17,18,20,.10), 0 10px 22px rgba(10,99,201,.28), 0 20px 40px rgba(10,116,232,.20), inset 0 1px 0 rgba(255,255,255,.34);
}
.btn--primary:active:not(:disabled) {
  transform: translateY(0) scale(.975); filter: brightness(.96);
  box-shadow: 0 1px 2px rgba(17,18,20,.18), inset 0 2px 4px rgba(0,0,0,.18);
}

.btn--ghost {
  background: rgba(255,255,255,.92); color: var(--teal-800); border-color: var(--line);
  box-shadow: var(--shadow-xs), var(--hairline); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover:not(:disabled) { border-color: #c9c9d0; color: var(--turq-600); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--ghost:active:not(:disabled) { transform: scale(.975); box-shadow: var(--shadow-xs); }

.btn--glass {
  background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.btn--glass:hover:not(:disabled) { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.btn--glass:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ===========================================================
   NAV
   =========================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background .3s;
}
.nav.is-scrolled { background: rgba(255,255,255,.86); border-color: rgba(17,18,20,.08); box-shadow: 0 1px 0 rgba(17,18,20,.04), var(--shadow-xs); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }

.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; }
.brand__logo { height: 46px; width: auto; display: block; }
.brand__text { font-size: 1.05rem; color: var(--teal-900); letter-spacing: -.01em; }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a { font-size: .93rem; font-weight: 600; color: var(--ink); opacity: .82; transition: opacity .2s; position: relative; }
.nav__links a:hover { opacity: 1; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--turq); transition: width .3s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-current::after { width: 100%; }
.nav__links a.is-current { opacity: 1; }
.nav__links-cta { display: none; }   /* CTA dentro del menú: solo móvil */

.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__cta { min-height: 0; padding: 11px 20px; }

.nav__burger { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--teal-800); margin: 5px auto; border-radius: 2px; transition: .3s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================================================
   HERO (claro · blanco Apple, foto del doctor a la derecha)
   =========================================================== */
.hero {
  position: relative; overflow: hidden; color: var(--ink);
  padding: clamp(92px, 12vh, 148px) 0 clamp(58px, 8vh, 96px);
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
}
/* Foto del doctor (derecha) + velo blanco que la atenúa ~70% y mantiene el texto legible a la izquierda */
.hero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(98deg, #ffffff 0%, rgba(255,255,255,.96) 30%, rgba(255,255,255,.74) 52%, rgba(255,255,255,.36) 75%, rgba(244,246,249,.20) 100%),
    url("../img/hero-bg.jpg");
  background-size: cover, cover;
  background-position: center, 78% center;
  background-repeat: no-repeat;
}
.blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .55; pointer-events: none; }
.blob--1 { width: 440px; height: 440px; right: 6%; top: -110px; background: radial-gradient(circle at 35% 30%, rgba(58,100,153,.20), transparent 70%); animation: drift 20s ease-in-out infinite; }
.blob--2 { width: 360px; height: 360px; left: -130px; top: 24%; background: radial-gradient(circle at 60% 40%, rgba(143,178,218,.18), transparent 70%); animation: drift 24s ease-in-out infinite -8s; }
@keyframes drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(16px,-20px); } }
.grid-dots { display: none; }

.hero__inner { position: relative; z-index: 2; }
.hero__copy { max-width: 640px; }
.hero .eyebrow { color: var(--turq-600); }
.hero .eyebrow__dot { background: var(--turq); box-shadow: 0 0 0 4px rgba(10,116,232,.14); }
.hero__title {
  font-family: var(--font-serif); font-weight: 500; color: var(--ink);
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -.025em;
  margin: .26em 0 .38em;
}
.hero__lead { font-size: clamp(1.05rem, 1.55vw, 1.2rem); color: var(--teal-700); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 20px; }
.hero__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__pills li {
  display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--teal-800);
  background: rgba(255,255,255,.78); border: 1px solid var(--line); padding: 8px 14px; border-radius: 10px;
  box-shadow: var(--shadow-xs); backdrop-filter: blur(6px);
}
.hero__pills .ic { color: var(--turq-600); width: 1em; height: 1em; }

/* ===========================================================
   TRUST (franja de respaldo)
   =========================================================== */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.trust__inner { display: flex; align-items: center; justify-content: center; gap: 12px 24px; padding: 22px var(--gutter); flex-wrap: wrap; }
.trust__label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.trust__items { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; font-weight: 700; color: var(--teal-800); font-size: .98rem; }
.trust__items .dot { color: var(--turq); }

/* ===========================================================
   Sección genérica
   =========================================================== */
.section { padding: var(--section-pad) 0; }
.section__head { text-align: center; max-width: 680px; margin: 0 auto var(--head-gap); }
.section__head .section__sub { margin-left: auto; margin-right: auto; }

/* ===========================================================
   SOBRE EL DOCTOR
   =========================================================== */
.about__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 64px); align-items: center; }
.about__media { position: relative; }
.about-figure {
  position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(160deg, #eef4ff, #dbe8ff); border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.about-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 1.2s var(--ease); }
.about-figure:hover img { transform: scale(1.04); }
.about-figure__chip {
  position: absolute; right: -16px; bottom: -16px; background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px 22px; box-shadow: var(--shadow-md); text-align: center;
}
.about-figure__chip strong { display: block; font-family: var(--font-serif); font-size: 1.8rem; color: var(--turq-600); line-height: 1; }
.about-figure__chip span { font-size: .78rem; color: var(--muted); }

.about__copy p { color: var(--muted); margin-top: .7em; }
.about__copy strong { color: var(--ink); }
.about__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.about__facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.about__facts dd { font-family: var(--font-serif); font-size: 1.14rem; color: var(--teal-800); margin-top: 4px; }

/* ===========================================================
   SERVICIOS / tarjetas
   =========================================================== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px;
  box-shadow: var(--shadow-sm), var(--hairline);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md), var(--hairline); border-color: #cdd9e8; }
.card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--mint); color: var(--turq-600); margin-bottom: 18px; }
.card__icon .ic { width: 26px; height: 26px; }
.card h3 { font-size: 1.16rem; color: var(--teal-900); font-weight: 700; }
.card p { color: var(--muted); margin-top: 8px; font-size: .98rem; }

/* ===========================================================
   ENFOQUE (bloque navy)
   =========================================================== */
.approach { background: linear-gradient(165deg, #16181e 0%, #0c0e12 100%); color: #e9eaee; }
.approach .eyebrow { color: var(--cyan); }
.approach .eyebrow__dot { background: var(--cyan); box-shadow: 0 0 0 4px rgba(111,168,230,.26); }
.approach .section__title { color: #fff; }
.approach__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(40px, 6vw, 56px); align-items: start; }
.approach__copy > p { color: #b3c1d6; margin-top: 1em; }
.steps { margin-top: 32px; display: grid; gap: 14px; }
.steps li {
  display: flex; gap: 20px; align-items: flex-start; padding: 22px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius);
  transition: background .3s;
}
.steps li:hover { background: rgba(255,255,255,.1); }
.steps__n { font-family: var(--font-serif); font-size: 1.5rem; color: var(--cyan); min-width: 42px; }
.steps h3 { font-size: 1.1rem; color: #fff; }
.steps p { color: #aab6cb; font-size: .96rem; margin-top: 4px; }

.approach__quote {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg);
  padding: 34px 32px; position: sticky; top: 100px;
}
.approach__img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--radius); margin-bottom: 18px; border: 1px solid rgba(255,255,255,.12); }
.quote-mark { width: 34px; height: 34px; color: var(--cyan); margin-bottom: 12px; }
.approach__quote blockquote { font-family: var(--font-serif); font-size: 1.42rem; line-height: 1.36; color: #fff; }
.approach__quote cite { display: block; margin-top: 18px; color: var(--cyan); font-style: normal; font-weight: 700; }

/* ===========================================================
   CÓMO RESERVAR (flow numerado)
   =========================================================== */
.steps-sec { background: var(--white); }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.flow__step {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px;
  box-shadow: var(--shadow-sm), var(--hairline);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}
.flow__step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md), var(--hairline); border-color: #cdd9e8; }
.flow__n {
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; color: #fff;
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--turq), var(--turq-600)); box-shadow: var(--shadow-accent);
}
.flow__step h3 { margin-top: 16px; font-size: 1.1rem; color: var(--teal-900); font-weight: 700; }
.flow__step p { color: var(--muted); margin-top: 7px; font-size: .95rem; }

/* ===========================================================
   BOOKING (link a Encuadrado)
   =========================================================== */
.booking { background: var(--mint-2); }
.booking__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 5vw, 56px); align-items: center; }
.booking__copy > p { color: var(--muted); margin-top: 1em; max-width: 48ch; }
.booking__feats { display: grid; gap: 12px; margin-top: 26px; }
.booking__feats li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--teal-900); }
.booking__feats .ic { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--mint); color: var(--turq-600); }

.booking__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 36px 32px; box-shadow: var(--shadow-md); text-align: center; }
.booking__card-top { margin-bottom: 24px; }
.booking__badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--turq-600); background: var(--mint); padding: 6px 14px; border-radius: 8px; }
.booking__card h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.6rem; color: var(--teal-900); margin: 14px 0 8px; }
.booking__card-top p { color: var(--muted); font-size: .98rem; }
.booking__cta { width: 100%; }
.booking__note { margin-top: 14px; font-size: .86rem; color: var(--teal-700); font-weight: 600; }

/* ===========================================================
   AMBIENTE (galería + lightbox)
   =========================================================== */
.ambiente { background: var(--white); }
/* Galería SIMÉTRICA: grilla uniforme de tiles iguales (4×2 desktop). Todos
   los tiles comparten ratio y tamaño → balance perfecto, sin pieza grande. */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gitem {
  position: relative; margin: 0; padding: 0; border: 0; cursor: zoom-in;
  aspect-ratio: 4 / 3; width: 100%;
  border-radius: var(--radius); overflow: hidden; background: var(--mint-2); box-shadow: var(--shadow-sm);
}
.gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gitem:hover img { transform: scale(1.06); }
.gitem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,20,30,.5), transparent 52%); }
.gitem__cap { position: absolute; left: 12px; bottom: 10px; z-index: 1; color: #fff; font-size: .82rem; font-weight: 600; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.gitem:focus-visible { outline: 3px solid var(--turq); outline-offset: 2px; }

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(8,14,22,.93); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: lbfade .25s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lbfade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lightbox__img { max-width: 92vw; max-height: 82vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.55); object-fit: contain; cursor: zoom-in; transition: transform .3s var(--ease); }
.lightbox__img.is-zoom { transform: scale(1.6); cursor: zoom-out; }
.lightbox__cap { color: #e8eef7; font-size: .94rem; }
.lightbox__close { position: fixed; top: 16px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; transition: .2s; }
.lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; transition: .2s; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.26); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }

/* ===========================================================
   CONSULTA (oficina + mapa)
   =========================================================== */
.office__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 56px); align-items: center; }
.office__info { margin: 26px 0; display: grid; gap: 16px; }
.office__info li { display: flex; gap: 14px; align-items: flex-start; }
.office__ic { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--mint); color: var(--turq-600); display: grid; place-items: center; }
.office__info div { color: var(--muted); }
.office__info strong { display: block; color: var(--teal-900); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 2px; }
.office__map { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.office__map iframe { width: 100%; height: 100%; min-height: 380px; aspect-ratio: 4 / 3; }

/* ===========================================================
   NUEVA CONSULTA PRIVADA (próximamente · arena cálida)
   =========================================================== */
.future { background: var(--mint-2); border-top: 1px solid var(--line); }
.future__inner { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(40px, 5vw, 60px); align-items: center; }
.future__copy > p { color: var(--teal-700); margin: 1em 0 1.6em; max-width: 46ch; }
.future__copy strong { color: var(--ink); }
.future__benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.future__benefits li {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 18px; box-shadow: var(--shadow-xs), var(--hairline);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
}
.future__benefits li:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: #cdd9e8; }
.future__ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--mint); color: var(--turq-600);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(18,32,54,.05);
}
.future__benefits strong { display: block; color: var(--teal-900); font-size: 1rem; }
.future__benefits p { color: var(--muted); font-size: .92rem; margin-top: 3px; }

/* ===========================================================
   FAQ
   =========================================================== */
.faq { background: var(--mint-2); }
.faq__inner { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(40px, 5vw, 50px); align-items: start; }
.faq__list { display: grid; gap: 12px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 22px; box-shadow: var(--shadow-xs); transition: border-color .25s, box-shadow .25s; }
.faq details[open] { border-color: #bcceea; box-shadow: var(--shadow-sm); }
.faq details[open] > p { animation: faqReveal .32s var(--ease) both; }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; color: var(--teal-900); font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq__plus { position: relative; flex: none; width: 20px; height: 20px; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; background: var(--turq); border-radius: 2px; transition: .3s var(--ease); }
.faq__plus::before { top: 9px; left: 0; width: 20px; height: 2px; }
.faq__plus::after { top: 0; left: 9px; width: 2px; height: 20px; }
.faq details[open] .faq__plus::after { transform: rotate(90deg); opacity: 0; }
.faq details p { color: var(--muted); padding: 0 0 18px; font-size: .96rem; }

/* ===========================================================
   CTA FINAL
   =========================================================== */
.cta-final { background: var(--ivory); }
.cta-final__card {
  position: relative; overflow: hidden; text-align: center; color: #eaecf0;
  background: linear-gradient(165deg, #1b1d23 0%, #0c0e12 100%); border-radius: var(--radius-xl);
  padding: clamp(40px, 6vw, 68px); box-shadow: var(--shadow-lg);
}
.cta-final__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 320px at 82% -25%, rgba(10,116,232,.22), transparent 60%); }
.cta-final__card > * { position: relative; z-index: 1; }
.cta-final h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.6rem); color: #fff; }
.cta-final p { color: rgba(234,241,255,.85); margin: 12px auto 26px; max-width: 50ch; }

/* ===========================================================
   FOOTER
   =========================================================== */
.footer {
  position: relative; background: linear-gradient(180deg, #131419 0%, #08090c 100%);
  color: #aaadb5; padding: clamp(48px, 6vw, 76px) 0 30px;
}
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,178,255,.4), transparent);
}
.footer__top {
  display: grid; grid-template-columns: 1.7fr 1fr 1.2fr 1.15fr; gap: 40px;
  padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,.09);
}
.footer__brand { display: grid; gap: 14px; align-content: start; max-width: 330px; }
.footer__logo { height: 56px; width: auto; }
.footer__brandtxt strong { display: block; color: #fff; font-family: var(--font-serif); font-weight: 500; font-size: 1.12rem; letter-spacing: -.01em; }
.footer__brandtxt p { color: #94a1b6; font-size: .92rem; line-height: 1.6; margin: 7px 0 0; }
.footer__ig {
  display: inline-flex; align-items: center; gap: 9px; width: max-content;
  padding: 8px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  color: #dfe6f2; font-size: .87rem; font-weight: 600;
  transition: background .2s, border-color .2s, transform var(--t-fast) var(--ease);
}
.footer__ig:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); color: #fff; transform: translateY(-1px); }
.footer__ig .ic { width: 18px; height: 18px; }

.footer__col { display: flex; flex-direction: column; align-items: start; gap: 2px; }
.footer__col h4 { color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
/* Tap target accesible (≥44px) sin alterar el look: el área táctil crece en
   vertical y el gap del col se reduce para conservar el ritmo visual. */
.footer__col a {
  color: #aeb8c8; font-size: .94rem; width: max-content;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color .2s;
}
.footer__col a:hover { color: #fff; }
.footer__addr { color: #94a1b6; font-size: .92rem; line-height: 1.65; margin: 0; }
.footer__col .footer__maplink { color: #9fc0e6; font-weight: 600; margin-top: 2px; }
.footer__col .footer__maplink:hover { color: #cfe0f5; }
.footer__cta .btn { margin-top: 8px; }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 22px;
}
.footer__bottom p { color: #7e8aa0; font-size: .82rem; margin: 0; }
/* Links legales con área táctil ≥44px (inline-flex centrado, sin cambiar el texto) */
.footer__bottom a, .footer__legal a {
  color: #9aa6ba; font-size: .82rem; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color .2s;
}
.footer__bottom a:hover, .footer__legal a:hover { color: #fff; }
.footer__legal { display: flex; gap: 20px; }
.footer__legal-info { color: #9aa6ba; }

@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 34px 28px; }
  .footer__brand { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 600px) {
  /* ====== FOOTER MÓVIL — rediseño app-native (marca → nav → consulta → legal) ====== */
  .footer { padding: 40px 0 0; }

  /* 1 · Marca centrada, como cabecera del pie */
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
    padding-bottom: 24px;
  }
  .footer__brand {
    grid-column: 1 / -1; max-width: none;
    justify-items: center; text-align: center;
    gap: 12px;
    padding-bottom: 24px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .footer__logo { height: 48px; }
  .footer__brandtxt p { margin-top: 6px; max-width: 34ch; margin-left: auto; margin-right: auto; }
  .footer__ig { margin: 4px auto 0; }

  /* 2 · Navegación + Dónde atiendo: dos columnas balanceadas */
  .footer__col { gap: 10px; }
  .footer__col h4 { margin-bottom: 4px; }

  /* 3 · Consulta (CTA) a ancho completo, botón real de marca */
  .footer__cta {
    grid-column: 1 / -1;
    margin-top: 8px; padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.10);
    align-items: stretch; text-align: center;
  }
  .footer__cta h4 { text-align: center; }
  .footer__cta .footer__addr { text-align: center; margin-bottom: 4px; }
  .footer__cta .footer__maplink {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 48px; margin-top: 8px;
    padding: 0 20px; border-radius: var(--radius-btn);
    background: linear-gradient(180deg, #4775ad 0%, #3a6499 56%, #2f547f 100%);
    color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
    box-shadow: 0 4px 12px rgba(15,28,46,.45), inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .12s var(--ease), filter .16s, box-shadow .2s var(--ease);
  }
  .footer__cta .footer__maplink:hover { color: #fff; filter: brightness(1.05); }
  .footer__cta .footer__maplink:active { transform: scale(.97); filter: brightness(.97); box-shadow: 0 1px 4px rgba(15,28,46,.5), inset 0 2px 5px rgba(0,0,0,.22); }

  /* 4 · Legal centrado y apilado, con aire bajo (despeja el tab bar fijo) */
  .footer__bottom {
    flex-direction: column; align-items: center; text-align: center;
    gap: 10px; margin-top: 24px; padding: 20px 0 calc(88px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255,255,255,.10);
  }
  .footer__bottom p { order: 2; }
  .footer__legal { order: 1; gap: 24px; justify-content: center; }
}

/* Teléfonos muy angostos (≤360): gutters y gap del pie algo más ceñidos */
@media (max-width: 360px) {
  .footer__top { gap: 22px 12px; }
  .footer__col h4 { font-size: .76rem; letter-spacing: .06em; }
}

/* ===========================================================
   BARRA FIJA INFERIOR (móvil)
   =========================================================== */
.mobile-bar { display: none; }

/* ===========================================================
   AVISO DE COOKIES
   =========================================================== */
.cookie {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 13px 16px; box-shadow: var(--shadow-lg);
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; flex: 1; font-size: .84rem; color: var(--muted); line-height: 1.45; }
.cookie a { color: var(--turq-600); font-weight: 700; }
.cookie .btn { flex: none; min-height: 42px; padding: 0 20px; font-size: .88rem; }

/* ===========================================================
   REVEAL (entrada al hacer scroll)
   =========================================================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 960px) {
  .about__grid, .approach__grid, .office__grid, .booking__inner, .faq__inner, .future__inner { grid-template-columns: 1fr; gap: 44px; }
  .approach__quote { position: static; }
  .cards, .flow { grid-template-columns: repeat(2, 1fr); }
  /* 8 tiles → siempre par: 4 cols (4×2). Nunca 3 (dejaría fila impar). */
  .gallery { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__links.is-open {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: 72px; left: 12px; right: 12px;
    background: rgba(255,255,255,.98); backdrop-filter: blur(20px);
    padding: 14px 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  }
  .nav__links.is-open a { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--line); opacity: 1; }
  .nav__links.is-open a::after { display: none; }
  .nav__links.is-open a:last-child { border-bottom: 0; }
  .nav__links.is-open .nav__links-cta { display: inline-flex; justify-content: center; margin-top: 12px; color: #fff; }
}

/* Barra fija inferior — móvil/tablet */
@media (max-width: 820px) {
  .mobile-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70;
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--line); border-radius: 18px;
    padding: 10px 12px 10px 18px; box-shadow: var(--shadow-lg);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    animation: barUp .5s var(--ease) both;
  }
  @keyframes barUp { from { transform: translateY(120%); } to { transform: none; } }
  .mobile-bar__info strong { display: block; font-size: .94rem; color: var(--teal-900); line-height: 1.15; }
  .mobile-bar__info span { font-size: .76rem; color: var(--muted); }
  .mobile-bar .btn { min-height: 48px; padding: 0 24px; }
  body { padding-bottom: 88px; }
  .cookie { bottom: 86px; }
}

@media (max-width: 720px) {
  .cards, .flow { grid-template-columns: 1fr; }
  /* Móvil/tablet angosto: 2 columnas (2×4), tiles iguales 4:3 */
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .about__facts { grid-template-columns: 1fr; gap: 14px; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .container { padding: 0 22px; }
  .section { padding: clamp(46px, 12vw, 62px) 0; }
  .section__head { text-align: left; margin-bottom: 26px; max-width: none; }
  .section__head .section__sub { margin-left: 0; margin-right: 0; }
  .hero { padding: 76px 0 52px; }
  .hero__title { font-size: clamp(2.2rem, 9vw, 2.9rem); }
  .hero__lead { max-width: 100%; }
  .blob { display: none; }
  /* En móvil el doctor queda como textura tenue arriba-derecha; el texto manda */
  .hero__bg {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.92) 46%, #f4f6f9 100%),
      url("../img/hero-bg.jpg");
    background-position: center, 72% top;
    background-size: cover, 150% auto;
  }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .card, .flow__step { padding: 22px 20px; }
  .trust__inner { gap: 10px 16px; padding: 18px var(--gutter); }
  .booking__card { padding: 28px 22px; }
  .future__benefits { grid-template-columns: 1fr; }
  .approach__quote { padding: 28px 24px; }
  .about-figure { aspect-ratio: 4 / 3.4; }
  .about-figure__chip { right: 12px; bottom: -14px; padding: 13px 18px; }
  .cookie { flex-direction: column; align-items: stretch; gap: 10px; left: 10px; right: 10px; }
  .cookie .btn { align-self: flex-end; }
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.6rem; }
  .lightbox__img { max-height: 74vh; }
  .lightbox__close { top: 12px; right: 12px; }
}

@media (max-width: 400px) {
  .container { padding: 0 18px; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ===========================================================
   Pulido premium — profundidad + tacto app-native
   =========================================================== */

/* Tiles de ícono con luz superior sutil */
.card__icon, .office__ic, .booking__feats .ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(18,32,54,.05); }

/* Galería: transición propia + sombra al pasar */
.gitem { transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.gitem:hover { box-shadow: var(--shadow-md); }

/* Pills e insignias más nítidas */
.hero__pills li { box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.booking__badge { box-shadow: var(--hairline); }

/* Feedback táctil inmediato en pantallas sin hover (móvil) — sensación nativa */
@media (hover: none) {
  .btn { transition: transform .09s var(--ease), filter .12s, box-shadow .2s var(--ease); }
  .btn:active:not(:disabled) { transform: scale(.96); filter: brightness(.98); }
  .card:active, .flow__step:active, .gitem:active, .footer__ig:active {
    transform: scale(.98); transition: transform .09s var(--ease);
  }
  /* sin hover-lift en táctil: el contenido no “salta” al hacer scroll */
  .card:hover, .flow__step:hover, .btn:hover { transform: none; }
}

/* ===========================================================
   Accesibilidad — movimiento reducido
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================
   SALTO v2 — recalibración de tokens
   =========================================================== */
:root {
  --radius-sm: 14px;
  --radius:    20px;
  --radius-lg: 26px;
  --radius-xl: 30px;
  --radius-btn: 14px;

  --section-pad: clamp(56px, 7vw, 104px);
  --head-gap: clamp(30px, 4vw, 48px);
  --maxw: 1200px;

  --accent-soft: rgba(10,116,232,.10);
  --accent-line: linear-gradient(90deg, var(--turq), #4f9bff);
  --shadow-blue: 0 2px 4px rgba(10,99,201,.06), 0 14px 30px rgba(10,99,201,.10), 0 30px 60px rgba(12,18,28,.08);
}

/* SALTO v2 — jerarquía de títulos (Sora con peso) */
.hero__title {
  font-weight: 600;
  font-size: clamp(2.9rem, 6.4vw, 5rem);
  line-height: 0.98;
  letter-spacing: -.035em;
}
.section__title {
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  letter-spacing: -.028em;
}
.cta-final h2,
.booking__card h3,
.future__copy .section__title { font-weight: 600; letter-spacing: -.025em; }
.eyebrow { font-size: .76rem; letter-spacing: .16em; }

/* SALTO v2 — HERO con impacto y foto recuperada */
.hero {
  padding: clamp(104px, 13vh, 168px) 0 clamp(72px, 9vh, 112px);
  background: radial-gradient(120% 90% at 12% 0%, #ffffff 0%, #eef3fb 70%, #e7eefb 100%);
}
.hero__bg {
  background-image:
    linear-gradient(96deg, #ffffff 0%, rgba(255,255,255,.94) 26%, rgba(255,255,255,.62) 50%, rgba(255,255,255,.20) 72%, rgba(231,238,251,0) 100%),
    url("../img/hero-bg.jpg");
  background-position: center, 80% center;
}
.hero__copy { max-width: 660px; }
.hero__title { position: relative; margin: .30em 0 .42em; }
.hero__title::before {
  content: ""; display: block; width: 56px; height: 4px; border-radius: 4px;
  background: var(--accent-line); margin-bottom: clamp(20px, 2.4vw, 30px);
}
.hero__lead { font-size: clamp(1.1rem, 1.6vw, 1.28rem); color: var(--teal-700); max-width: 46ch; line-height: 1.6; }
.hero__actions { margin: 30px 0 24px; gap: 14px; }
.hero__pills { gap: 10px; }
.hero__pills li {
  background: rgba(255,255,255,.86); border: 1px solid rgba(10,116,232,.16);
  padding: 9px 15px; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(17,18,20,.04), inset 0 1px 0 rgba(255,255,255,.7);
}
.hero__pills .ic { color: var(--turq-600); }

/* SALTO v2 — tarjetas con firma azul sutil */
.card, .flow__step { position: relative; padding: 30px 28px; border-radius: var(--radius); border-color: #eceef3; overflow: hidden; }
.card::before, .flow__step::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: var(--accent-line); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.card:hover::before, .flow__step:hover::before { transform: scaleX(1); }
.card:hover, .flow__step:hover { transform: translateY(-6px); box-shadow: var(--shadow-blue), var(--hairline); border-color: #cdd9e8; }
.card__icon {
  width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(160deg, #f1f6ff, var(--mint));
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--spring);
}
.card:hover .card__icon { transform: scale(1.06); }
.card h3, .flow__step h3 { letter-spacing: -.01em; }

/* SALTO v2 — grillas con más aire */
.cards { gap: 22px; }

/* SALTO v2 — ritmo y cabeceras de sección */
.section__head { max-width: 720px; }
.section__sub { font-size: 1.08rem; line-height: 1.6; color: var(--muted); }
.eyebrow__dot { width: 7px; height: 7px; box-shadow: 0 0 0 4px var(--accent-soft); }
.trust__items { letter-spacing: -.005em; }
.trust__items .dot { color: rgba(10,116,232,.5); }

/* SALTO v2 — botones más definidos */
.btn { font-weight: 600; letter-spacing: -.01em; border-radius: var(--radius-btn); }
.btn--lg { min-height: 56px; padding: 0 32px; }
.btn--primary { background: linear-gradient(180deg, #2a91ff 0%, #0a74e8 50%, #0a60c6 100%); }
.btn--ghost { background: rgba(255,255,255,.96); border-color: #e3e6ec; }
.btn--ghost:hover:not(:disabled) { border-color: var(--turq); color: var(--turq-600); }

/* SALTO v2 — bloques oscuros con más profundidad */
.approach__quote blockquote { font-weight: 500; letter-spacing: -.01em; }
.steps li { border-radius: var(--radius); padding: 24px; }
.cta-final__card { border-radius: var(--radius-xl); }
.cta-final__card::before {
  background:
    radial-gradient(680px 360px at 82% -25%, rgba(10,116,232,.30), transparent 60%),
    radial-gradient(520px 300px at 12% 120%, rgba(79,155,255,.16), transparent 60%);
}

/* SALTO v2 — cohesión del acento */
.about-figure { border-radius: var(--radius-xl); box-shadow: var(--shadow-blue); }
.about-figure__chip strong { color: var(--turq-600); }
.about__facts dd { letter-spacing: -.01em; }
.future__benefits li { border-radius: var(--radius); }
.future__benefits li:hover { box-shadow: var(--shadow-blue); border-color: #cdd9e8; }
.future__ic { background: linear-gradient(160deg, #f1f6ff, var(--mint)); }
.booking__card { border-radius: var(--radius-xl); box-shadow: var(--shadow-blue); }
.faq details[open] { border-color: #bcceea; box-shadow: var(--shadow-blue); }

/* ===========================================================
   AMBIENTE · "Así será tu consulta" — badge render + disclaimer
   =========================================================== */
.gitem__badge {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; padding: 5px 10px; border-radius: 999px;
  background: rgba(10,116,232,.92); border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 2px 8px rgba(10,99,201,.35), inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.gitem__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.gitem__badge--place { background: rgba(20,22,28,.82); border-color: rgba(255,255,255,.18); box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.16); }
.gitem__badge--place::before { background: var(--cyan); box-shadow: 0 0 0 3px rgba(127,178,255,.3); }
.gitem__cap { font-size: .86rem; letter-spacing: -.01em; }
.gallery__disclaimer {
  display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 18px;
  background: var(--mint); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--teal-700); font-size: .9rem; line-height: 1.45;
}
.gallery__disclaimer .ic { flex: none; width: 22px; height: 22px; color: var(--turq-600); stroke-width: 1.8; }
.gallery__disclaimer strong { color: var(--teal-900); }
.gallery--reveal .gitem { border: 1px solid var(--line); }
.gallery--reveal .gitem:hover { border-color: #cfe0f5; }
@media (max-width: 600px) {
  .gitem__badge { font-size: .62rem; padding: 4px 8px; left: 8px; top: 8px; }
  .gallery__disclaimer { font-size: .84rem; padding: 12px 14px; align-items: flex-start; }
}

/* ===========================================================
   SALTO v2.1 — pulido: alineación, espaciado, ritmo, responsive
   =========================================================== */

/* Ritmo de secciones: evitar dos secciones tintadas seguidas
   (la sección "consulta privada" es tintada; FAQ pasa a blanco) */
.faq { background: var(--white); }

/* Botones de la sección "Dónde atiendo hoy": fila alineada y con aire */
.office__copy .btn { margin-top: 14px; }
.office__copy .btn + .btn { margin-left: 10px; }

/* Ancho de lectura cómodo y coherente para párrafos largos */
.about__copy p, .booking__copy > p, .future__copy > p { max-width: 60ch; }

/* Galería simétrica: el alto lo fija aspect-ratio 4:3 en .gitem (tiles iguales). */

/* Tablet: la grilla de servicios/beneficios respira mejor */
@media (max-width: 960px) and (min-width: 721px) {
  .cards { gap: 20px; }
  .future__benefits { gap: 14px; }
}

/* Móvil: re-afinar lo que el bloque SALTO v2 (sin media query) pisó */
@media (max-width: 600px) {
  .hero { padding: 84px 0 56px; }
  .hero__title { font-size: clamp(2.4rem, 9.5vw, 3.1rem); }
  .hero__title::before { width: 44px; margin-bottom: 18px; }
  .hero__lead { max-width: 100%; }
  .hero__bg {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.92) 46%, #eef3fb 100%),
      url("../img/hero-bg.jpg");
    background-position: center, 72% top;
    background-size: cover, 150% auto;
  }
  .card, .flow__step { padding: 24px 20px; }
  .office__copy .btn { width: 100%; }
  .office__copy .btn + .btn { margin-left: 0; }
  .section__title { font-size: clamp(1.8rem, 7.5vw, 2.3rem); }
}

/* ===========================================================
   v3 — FIGMA / OBSIDIAN: claro + bloques oscuros + violeta
   =========================================================== */
:root {
  --turq:     #3a6499;   /* violeta (acento/UI) */
  --turq-600: #2f527f;   /* violeta interactivo (AA texto sobre claro) */
  --cyan:     #8fb2da;   /* violeta claro (sobre oscuro) */
  --mint:     #eef2f7;   /* tile de ícono (violeta muy tenue) */
  --mint-2:   #f4f6f9;   /* superficie clara tintada */
  --line:     #e6eaed;   /* hairline con tinte violeta */
  --ink:      #1a2a40;   /* texto principal */
  --teal-900: #1a2a40;   /* grafito (titulares) */
  --teal-800: #26384f;
  --teal-700: #46566e;
  --muted:    #6b6878;

  --accent-soft: rgba(58,100,153,.12);
  --accent-line: linear-gradient(90deg, #3a6499, #8fb2da);
  --shadow-accent: 0 1px 2px rgba(58,100,153,.20), 0 6px 16px rgba(47,82,127,.24);
  --shadow-blue: 0 2px 4px rgba(47,82,127,.08), 0 14px 30px rgba(47,82,127,.12), 0 30px 60px rgba(20,18,28,.10);
}

::selection { background: rgba(58,100,153,.18); color: var(--teal-900); }
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, .gitem:focus-visible { outline: 2px solid rgba(58,100,153,.75); }

/* Botón primario violeta */
.btn--primary {
  background: linear-gradient(180deg, #8fb2da 0%, #3a6499 52%, #2f527f 100%);
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.10);
}
.btn--primary:hover:not(:disabled) {
  box-shadow: 0 2px 6px rgba(17,18,20,.10), 0 10px 22px rgba(47,82,127,.30), 0 20px 40px rgba(58,100,153,.22), inset 0 1px 0 rgba(255,255,255,.34);
}

/* --- BARRA SUPERIOR (nav) oscura tipo Obsidian --- */
.nav { background: rgba(20,20,26,.72); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav.is-scrolled { background: rgba(18,18,24,.9); border-color: rgba(255,255,255,.09); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.brand__text { color: #f3f2f7; }
.nav__links a { color: #c9c7d6; opacity: 1; }
.nav__links a:hover, .nav__links a.is-current { color: #fff; }
.nav__links a::after { background: var(--turq); }
.nav__burger span { background: #e7e6ef; }
.nav__links.is-open { background: rgba(22,22,28,.98); border-color: rgba(255,255,255,.1); }
.nav__links.is-open a { color: #e7e6ef; border-bottom-color: rgba(255,255,255,.08); }

/* --- HERO oscuro grafito --- */
.hero { background: radial-gradient(130% 100% at 15% 0%, #21212b 0%, #17171e 60%, #121218 100%); color: #ECEAF6; }
.hero__bg {
  background-image:
    linear-gradient(96deg, #16161d 0%, rgba(22,22,29,.94) 30%, rgba(22,22,29,.74) 55%, rgba(22,22,29,.52) 80%, rgba(18,18,24,.42) 100%),
    url("../img/hero-bg.jpg");
  background-position: center, 82% center;
}
.hero .eyebrow { color: var(--cyan); }
.hero .eyebrow__dot { background: var(--turq); box-shadow: 0 0 0 4px rgba(58,100,153,.28); }
.hero__title { color: #f7f6fb; }
.hero__lead { color: #bcb9cf; }
.hero__lead strong { color: #fff; }
.hero__pills li { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #d8d6e6; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.hero__pills .ic { color: var(--cyan); }
.hero__actions .btn--ghost { background: rgba(255,255,255,.07); color: #ECEAF6; border-color: rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.hero__actions .btn--ghost:hover:not(:disabled) { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.3); }

/* --- Acentos azules en superficies claras (kit único #3a6499) --- */
.eyebrow { color: var(--turq-600); }
.card:hover, .flow__step:hover, .future__benefits li:hover, .gallery--reveal .gitem:hover { border-color: #cdd9e8; }
.card__icon, .future__ic, .office__ic, .booking__feats .ic { background: linear-gradient(160deg, #f6f9fd, var(--mint)); color: var(--turq-600); }
.faq details[open] { border-color: #cfdcec; }
.faq__plus::before, .faq__plus::after { background: var(--turq); }
.about-figure { background: linear-gradient(160deg, #eef4ff, #dbe8ff); }
.about-figure__chip strong, .about__facts dd { color: var(--turq-600); }
.trust__items .dot { color: var(--turq); }
.booking__badge { color: var(--turq-600); background: var(--mint); }
.gitem__badge { background: rgba(58,100,153,.92); }

/* --- "Mi enfoque" (Obsidian dark + violeta) --- */
.approach { background: linear-gradient(165deg, #1e2e44 0%, #14202f 100%); }
.approach .eyebrow, .steps__n, .approach__quote cite { color: var(--cyan); }
.approach .eyebrow__dot { background: var(--cyan); box-shadow: 0 0 0 4px rgba(58,100,153,.3); }

/* --- CTA final + footer (grafito + glow violeta) --- */
.cta-final__card { background: linear-gradient(165deg, #243750 0%, #14202f 100%); }
.cta-final__card::before {
  background:
    radial-gradient(680px 360px at 82% -25%, rgba(58,100,153,.34), transparent 60%),
    radial-gradient(520px 300px at 12% 120%, rgba(143,178,218,.18), transparent 60%);
}
.footer { background: linear-gradient(180deg, #1a2a40 0%, #101b29 100%); }
.footer::before { background: linear-gradient(90deg, transparent, rgba(58,100,153,.45), transparent); }
.footer__col .footer__maplink { color: #8fb2da; }
.footer__col .footer__maplink:hover { color: #cfe0f5; }

/* ===========================================================
   v3 — "DÓNDE ATIENDO HOY" mejorada (panel + jerarquía)
   =========================================================== */
.office__info {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 20px; margin: 24px 0; box-shadow: var(--shadow-sm);
}
.office__info li { padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.office__info li:last-child { border-bottom: 0; }
.office__ic { width: 44px; height: 44px; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.85); }
.office__info strong { color: var(--turq-600); }
.office__map { border: 1px solid var(--line); box-shadow: var(--shadow-blue); border-radius: var(--radius-xl); }
.office .booking__note { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--mint-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }

/* Móvil v3: (revertido en v4 — hero ahora claro) */

/* ===========================================================
   v4 — BARRA SUPERIOR blanca translúcida + HERO claro (sin foto)
   =========================================================== */

/* Barra superior: blanca translúcida (revierte el nav oscuro de v3) */
.nav { background: rgba(255,255,255,.72); border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(255,255,255,.88); border-color: rgba(17,18,20,.08); box-shadow: 0 1px 0 rgba(17,18,20,.04), var(--shadow-xs); }
.brand__text { color: var(--teal-900); }
.nav__links a { color: var(--ink); opacity: .82; }
.nav__links a:hover, .nav__links a.is-current { color: var(--turq-600); opacity: 1; }
.nav__links a::after { background: var(--turq); }
.nav__burger span { background: var(--teal-800); }
.nav__links.is-open { background: rgba(255,255,255,.98); border-color: var(--line); }
.nav__links.is-open a { color: var(--ink); border-bottom-color: var(--line); }

/* Hero claro, SIN la foto del doctor (revierte el hero oscuro de v3) */
.hero { background: radial-gradient(120% 92% at 14% 0%, #ffffff 0%, #f4f8fc 58%, #e9f0f8 100%); color: var(--ink); }
.hero__bg { background-image: radial-gradient(58% 78% at 86% 18%, rgba(58,100,153,.12), transparent 70%); background-position: center; background-size: cover; }
.hero .eyebrow { color: var(--turq-600); }
.hero .eyebrow__dot { background: var(--turq); box-shadow: 0 0 0 4px rgba(58,100,153,.18); }
.hero__title { color: var(--teal-900); }
.hero__lead { color: var(--teal-700); }
.hero__lead strong { color: var(--ink); }
.hero__pills li { background: rgba(255,255,255,.9); border: 1px solid rgba(58,100,153,.20); color: var(--teal-800); box-shadow: 0 1px 2px rgba(17,18,20,.05), inset 0 1px 0 rgba(255,255,255,.7); }
.hero__pills .ic { color: var(--turq-600); }
.hero__actions .btn--ghost { background: rgba(255,255,255,.96); color: var(--teal-800); border-color: var(--line); }
.hero__actions .btn--ghost:hover:not(:disabled) { background: #fff; color: var(--turq-600); border-color: var(--turq); }

@media (max-width: 600px) {
  .hero__bg { background-image: radial-gradient(72% 60% at 82% 8%, rgba(58,100,153,.12), transparent 70%); background-size: cover; background-position: center; }
}

/* ===========================================================
   v6 — paleta del sitio publicado (azul suave) + pills en fila
   =========================================================== */
.btn--primary { background: linear-gradient(135deg, #3a6499 0%, #2f527f 100%); }
.btn--primary:hover:not(:disabled) {
  box-shadow: 0 2px 6px rgba(17,18,20,.10), 0 10px 22px rgba(47,82,127,.30), 0 20px 40px rgba(58,100,153,.22), inset 0 1px 0 rgba(255,255,255,.30);
}
.eyebrow__dot { background: var(--turq); box-shadow: 0 0 0 4px rgba(58,100,153,.20); }
.hero .eyebrow__dot { background: var(--turq); box-shadow: 0 0 0 4px rgba(58,100,153,.22); }
.trust__items .dot { color: var(--turq); }

/* Hero pills en FILA 1×3 en escritorio (compactas para que entren las 3) */
.hero__pills { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.hero__pills li { padding: 6px 11px; font-size: .8rem; }

/* ===========================================================
   v7 — HERO con FOTO + degradé elegante (estilo Apple)
   =========================================================== */
.hero { background: #ffffff; }
.hero__bg {
  background-image:
    linear-gradient(100deg, #ffffff 0%, rgba(255,255,255,.97) 26%, rgba(255,255,255,.72) 46%, rgba(255,255,255,.32) 66%, rgba(255,255,255,.06) 84%, rgba(255,255,255,0) 100%),
    url("../img/foto-hero-salud.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right center;
  background-size: cover, cover;
}
@media (max-width: 760px) {
  .hero__bg {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.93) 52%, #ffffff 100%),
      url("../img/foto-hero-salud.jpg");
    background-position: center, center 20%;
    background-size: cover, cover;
  }
}

/* ===========================================================
   v8 — PULIDO "APP PREMIUM": coherencia cromática + ritmo
   Objetivo del cliente: menos colores, más balance, sensación app.
   Quita los tintes lila heredados (v2/v3) que rompían la paleta
   azul de marca, unifica sombras/radios e iguala el ritmo visual.
   No cambia la paleta (#3a6499 y familia) ni el contenido.
   =========================================================== */

/* --- 1. Sombra azul de marca SIN componente violeta heredado --- */
:root {
  --shadow-blue: 0 1px 2px rgba(47,82,127,.06),
                 0 10px 24px rgba(47,82,127,.10),
                 0 26px 52px rgba(26,42,64,.10);
  /* superficie azul tenue uniforme para todos los tiles de ícono */
  --tile: linear-gradient(160deg, #f3f6fb 0%, #e9eff7 100%);
}

/* --- 2. Tiles de ícono: azul de marca uniforme (adiós lila #f3f0fe/#f0ecfe) --- */
.card__icon,
.future__ic,
.office__ic,
.booking__feats .ic,
.gallery__disclaimer .ic {
  background: var(--tile);
  color: var(--turq-600);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(26,42,64,.05);
}
.card:hover .card__icon { background: linear-gradient(160deg, #eef3fb 0%, #dde8f5 100%); }

/* La figura del doctor: marco azul de marca (no lila) por si la foto tarda/falla */
.about-figure { background: linear-gradient(160deg, #eef3fb 0%, #dbe6f4 100%); }

/* --- 3. GALERÍA: fotos coherentes, overlay sutil tipo app --- */
/* Velo más suave: las fotos respiran y el caption se lee sin "ensuciar" */
.gitem::after {
  background: linear-gradient(to top, rgba(16,27,41,.46) 0%, rgba(16,27,41,.06) 42%, transparent 64%);
}
.gitem img { transition: transform .7s var(--ease), filter .4s var(--ease); }
/* Badge "Referencia": más discreto y nítido (era muy ruidoso sobre line-art) */
.gitem__badge {
  font-size: .64rem; letter-spacing: .06em; padding: 4px 9px;
  background: rgba(26,42,64,.62); border-color: rgba(255,255,255,.16);
  box-shadow: 0 2px 8px rgba(16,27,41,.28), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.gitem__badge::before { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.gitem__badge--place { background: rgba(58,100,153,.78); border-color: rgba(255,255,255,.2); }
.gitem__badge--place::before { background: var(--cyan); }
.gitem__cap { font-size: .88rem; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
/* Borde uniforme + realce de marca al hover, consistente con tarjetas */
.gallery--reveal .gitem { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.gallery--reveal .gitem:hover { box-shadow: var(--shadow-blue); border-color: #cfe0f5; }

/* --- Contraste AA del caption de galería ---
   El texto blanco debe leerse sobre CUALQUIER foto. Dos capas:
   1) scrim inferior más profundo (banda baja realmente oscura), y
   2) chip semitransparente bajo el propio texto, de modo que el color
   compuesto bajo las letras quede ~0.83 de opacidad navy → AA garantizado
   incluso sobre una foto blanca, sin oscurecer toda la imagen. */
.gitem::after {
  background: linear-gradient(to top,
    rgba(12,19,30,.62) 0%, rgba(12,19,30,.30) 26%, rgba(12,19,30,.05) 50%, transparent 66%);
}
.gitem__cap {
  left: 10px; right: 10px; bottom: 8px; width: max-content; max-width: calc(100% - 20px);
  padding: 4px 10px; border-radius: 9px;
  background: rgba(11,18,28,.58);
  box-shadow: 0 1px 6px rgba(0,0,0,.28);
  backdrop-filter: blur(3px) saturate(115%); -webkit-backdrop-filter: blur(3px) saturate(115%);
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

/* --- 4. NAV premium: roce de marca y menú móvil más sólido --- */
.nav__cta { box-shadow: var(--shadow-accent); }
.nav__links a::after { height: 2px; border-radius: 2px; background: var(--accent-line); }
/* Menú móvil: alineado a la izquierda (más app, menos volante) + jerarquía clara */
@media (max-width: 860px) {
  .nav__links.is-open { left: var(--gutter); right: var(--gutter); padding: 10px 16px 16px; box-shadow: var(--shadow-blue); }
  .nav__links.is-open a { align-self: stretch; text-align: left; font-size: 1rem; padding: 15px 4px; color: var(--teal-800); }
  .nav__links.is-open a:hover { color: var(--turq-600); }
  .nav__links.is-open .nav__links-cta { align-self: stretch; text-align: center; justify-content: center; margin-top: 14px; padding: 14px; color: #fff; box-shadow: var(--shadow-accent); }
}

/* --- 5. Ritmo vertical coherente entre secciones (mismo respiro app) --- */
.gallery__disclaimer { margin-top: 22px; border-radius: var(--radius); }

/* --- 6. Microdetalle: insignia "Reserva online" y notas con el mismo azul --- */
.booking__badge { background: var(--tile); }
.office .booking__note { background: var(--tile); }

/* --- 7. Barra fija móvil: borde de marca sutil para separar del fondo --- */
@media (max-width: 820px) {
  .mobile-bar { box-shadow: 0 -1px 0 rgba(26,42,64,.04), var(--shadow-blue); border-color: rgba(58,100,153,.14); }
}

/* ===========================================================
   v12 — PULIDO FINAL: fotos de escena cohesionadas + detalles
   Fotos nuevas (sin rostros): unifico tono para que lean como un
   set de marca, no stock suelto. Acabado "app premium", azul.
   =========================================================== */

/* 7.1 · Acabado consistente de TODAS las fotos de escena.
   Normaliza brillo/contraste/saturación para que la cálida del hero,
   el pasillo frío y el bodegón del estetoscopio convivan sin saltos. */
.about-figure img,
.approach__img,
.gitem img {
  filter: saturate(.94) contrast(1.03) brightness(1.012);
}
.about-figure:hover img,
.gitem:hover img { filter: saturate(1) contrast(1.05) brightness(1.02); }

/* 7.2 · about-figure: velo de marca muy sutil (duotono apenas perceptible)
   que tiñe la foto hacia el navy del sitio y la integra al fondo. */
.about-figure { position: relative; isolation: isolate; }
.about-figure::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(165deg, rgba(58,100,153,.10) 0%, rgba(26,42,64,.04) 48%, rgba(26,42,64,.16) 100%);
  mix-blend-mode: multiply;
  border-radius: inherit;
}
.about-figure__chip { z-index: 2; }

/* 7.3 · Estetoscopio (.approach__img): el plano tiene mucho blanco;
   centro el objeto y le doy un fondo de marca para que no se vea "vacío". */
.approach__img {
  object-position: 50% 46%;
  background: linear-gradient(160deg, #eef3fb 0%, #dbe6f4 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(58,100,153,.05);
}

/* 7.4 · Galería: descanso ligeramente atenuado → al hover toma color pleno.
   Refuerza la sensación premium de "se ilumina al pasar". */
.gallery--reveal .gitem img { filter: saturate(.9) contrast(1.03) brightness(1.0); transition: transform .7s var(--ease), filter .45s var(--ease); }
.gallery--reveal .gitem:hover img { filter: saturate(1.02) contrast(1.05) brightness(1.03); }

/* 7.5 · Galería: alturas/proporción más parejas para un grid prolijo
   (la foto grande dominaba demasiado el bloque). */
@media (min-width: 761px) {
  .gallery--reveal { align-items: stretch; }
}

/* 7.6 · Hero: un pelín más de presencia de la foto en desktop sin perder
   la legibilidad del titular (degradé Apple intacto). */
@media (min-width: 961px) {
  .hero__bg { background-blend-mode: normal; }
}

/* 7.7 · Respeta usuarios con reduce-motion: sin zoom de fotos. */
@media (prefers-reduced-motion: reduce) {
  .about-figure img, .gitem img, .about-figure:hover img, .gitem:hover img { transition: none; transform: none; }
}

/* ===========================================================
   v14 — HOME ÁGIL: home recortado de 11 a 7 secciones.
   "Mi enfoque" integrado en "El doctor" (3 pilares); "Reservar" +
   "Dónde atiendo" + "Consulta privada" fusionados en una sola
   sección. Aquí: estilos de los elementos nuevos + ritmo.
   =========================================================== */

/* Pilares del enfoque, integrados en "El doctor" (reemplazan la sección navy) */
.about__pillars { display: grid; gap: 12px; margin-top: 22px; }
.about__pillars li {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--teal-700); font-size: 1rem; line-height: 1.5;
}
.about__pillars li .ic {
  flex: none; width: 26px; height: 26px; padding: 5px; margin-top: 1px;
  border-radius: 8px; background: var(--tile); color: var(--turq-600);
  stroke-width: 2.4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(26,42,64,.05);
}
.about__pillars strong { color: var(--ink); }

/* Sección de reserva: fila de CTAs alineada con aire (reemplaza office__copy .btn) */
.office__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.office__cta .btn { margin: 0; }
@media (max-width: 600px) {
  .office__cta { flex-direction: column; }
  .office__cta .btn { width: 100%; }
}

/* Galería simétrica de 8 fotos: 4 columnas iguales (4×2) en desktop.
   El alto de cada tile lo fija aspect-ratio 4:3, no grid-auto-rows. */
@media (min-width: 961px) {
  .gallery--reveal { grid-template-columns: repeat(4, 1fr); }
}

/* Ritmo: la sección de reserva (office) es clara; va sobre blanco, separada
   de la galería (blanca) con un hairline sutil para marcar capítulo. */
.office { border-top: 1px solid var(--line); background: var(--mint-2); }
.office__info { background: var(--white); }

/* ===========================================================
   v15 — PROPORCIONES: ritmo más compacto y proporcionado.
   Escritorio menos extenso/aireado; móvil compacto y alineado.
   Solo espaciado / proporción / alineación (sin tocar color,
   tipografía de marca, herramientas ni lightbox).
   =========================================================== */

/* --- 1. Ritmo vertical global: secciones menos extensas en desktop --- */
:root {
  --section-pad: clamp(44px, 5vw, 80px);   /* antes clamp(56,7vw,104) */
  --head-gap:    clamp(26px, 3vw, 38px);   /* antes clamp(30,4vw,48)  */
}

/* --- 2. HERO: bajar el aire vertical (era enorme en desktop) --- */
.hero {
  padding: clamp(84px, 9vh, 124px) 0 clamp(52px, 6vh, 76px);
}
.hero__actions { margin: 26px 0 22px; }
.hero__title::before { margin-bottom: clamp(16px, 2vw, 24px); }

/* --- 3. Grillas de 2 columnas: alinear arriba para que la columna corta
   no flote con un gran vacío (about, office/reserva, booking, faq, futuro,
   herramienta IMC). Antes: align-items:center -> desbalance vertical. --- */
.about__grid,
.office__grid,
.booking__inner,
.future__inner { align-items: start; }
.faq__inner { align-items: start; }

/* En "El doctor" el chip cuelga de la figura: re-centrar solo la media */
.about__media { align-self: center; }

/* --- 4. Tarjetas y pasos: padding interno un punto más ajustado --- */
.card, .flow__step { padding: 26px 24px; }
.cards { gap: 20px; }
.flow { gap: 18px; }

/* --- 5. Cabeceras de sección: menos margen inferior, lectura más cohesionada --- */
.section__sub { margin-top: .45em; }

/* --- 6. Sección "Mi enfoque" (navy): pasos con menos margen superior --- */
.steps { margin-top: 26px; }
.steps li { padding: 20px 22px; }

/* --- 7. Galería: tiles uniformes 4:3 (alto por aspect-ratio en .gitem) --- */

/* --- 8. Reserva (office): info y CTA con aire medido --- */
.office__info { margin: 20px 0; }
.office__cta { margin-top: 20px; }

/* --- 9. CTA final: tarjeta menos alta --- */
.cta-final__card { padding: clamp(36px, 5vw, 60px); }
.cta-final p { margin: 12px auto 24px; }

/* --- 10. Footer: top algo más compacto --- */
.footer { padding: clamp(44px, 5vw, 64px) 0 28px; }
.footer__top { padding-bottom: 32px; gap: 36px; }

/* ===========================================================
   v15 — MÓVIL: compacto, denso-pero-respirable, bien alineado
   =========================================================== */
@media (max-width: 600px) {
  /* Ritmo de sección más ceñido (era clamp(46,12vw,62)) */
  .section { padding: clamp(40px, 9vw, 52px) 0; }
  .section__head { margin-bottom: 22px; }

  /* Hero: menos aire arriba/abajo, todo a la izquierda y prolijo */
  .hero { padding: 72px 0 44px; }
  .hero__actions { margin: 22px 0 18px; }
  .hero__title::before { margin-bottom: 16px; }

  /* Tarjetas / pasos / inputs más compactos */
  .card, .flow__step { padding: 20px 18px; }
  .cards { gap: 14px; }
  .flow { gap: 12px; }
  .steps { margin-top: 22px; gap: 12px; }
  .steps li { padding: 18px; gap: 16px; }

  /* Reserva / oficina */
  .office__info { margin: 18px 0; }
  .office__info li { padding: 13px 0; }
  .office__cta { margin-top: 18px; }
  .booking__card { padding: 24px 20px; }
  .booking__feats { margin-top: 20px; }

  /* Beneficios "consulta privada" más juntos */
  .future__benefits { gap: 12px; }
  .future__benefits li { padding: 16px; }
  .future__copy > p { margin: .8em 0 1.2em; }

  /* FAQ compacto */
  .faq summary { padding: 15px 0; font-size: .98rem; }
  .faq details p { padding-bottom: 15px; }

  /* CTA final ceñido (el footer móvil se rige por su propio bloque de rediseño) */
  .cta-final__card { padding: 32px 22px; }

  /* about: chip menos saliente para no romper el ritmo */
  .about__facts { margin-top: 20px; padding-top: 18px; gap: 12px; }
}

/* 360px: apretar gutters y grillas finas sin desbordes */
@media (max-width: 380px) {
  .container { padding: 0 16px; }
  .card, .flow__step { padding: 18px 16px; }
  .hero__title { font-size: clamp(2.1rem, 9.2vw, 2.7rem); }
  .gallery, .gallery--reveal { gap: 8px; }
}

/* ===========================================================
   v16 — ESCALA TIPOGRÁFICA: jerarquía clara y proporcional
   --------------------------------------------------------
   Problema detectado: títulos desproporcionados.
   · .hero__title llegaba a 80px (5rem) → muy dominante.
   · .section__title (= H1 de páginas internas) a 51px (3.2rem)
     aplastaba al subtítulo (17px) con un salto de ~3x.
   · .cta-final h2 a 42px quedaba casi al nivel del título.
   Solución: escala modular (~1.25) anclada en cuerpo 17px.
     small 14 → cuerpo 17 → subtítulo 19 → card h3 19
     → sección 40 → cta 36 → hero 64  (desktop, máx clamp)
   Mismo criterio en TODAS las páginas. Solo tipografía
   (tamaño / peso / interlineado / ancho de línea / tracking).
   =========================================================== */

/* --- 1. Tokens de escala (referencia única, sin pisar color) --- */
:root {
  --fs-small:   .82rem;                       /* 14px  · notas, breadcrumb */
  --fs-body:    1rem;                          /* 17px  · cuerpo */
  --fs-sub:     1.16rem;                        /* ~19.7 · subtítulo atenuado */
  --fs-h3:      1.16rem;                        /* ~19.7 · títulos de tarjeta */
  --fs-h2:      clamp(1.9rem, 3.2vw, 2.5rem);   /* 30→40 · título de sección/H1 interno */
  --fs-cta:     clamp(1.7rem, 2.8vw, 2.25rem);  /* 27→36 · CTA final */
  --fs-h1:      clamp(2.6rem, 5.2vw, 4rem);     /* 42→64 · hero */
  --lh-body:    1.6;
  --lh-tight:   1.1;
}

/* --- 2. HERO: titular con presencia pero sin dominar de más --- */
.hero__title {
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -.028em;
  font-weight: 600;
}
.hero__lead {
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  line-height: 1.6;
  max-width: 46ch;
}

/* --- 3. TÍTULO DE SECCIÓN (y H1 de páginas internas) --- */
.section__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -.022em;
  font-weight: 600;
}

/* --- 4. CTA final: un escalón por debajo del título de sección --- */
.cta-final h2 {
  font-size: var(--fs-cta);
  line-height: 1.1;
  letter-spacing: -.02em;
}

/* --- 5. SUBTÍTULO: peldaño real entre cuerpo y título (atenuado) --- */
.section__sub {
  font-size: var(--fs-sub);
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
}
.section__head .section__sub { max-width: 56ch; }

/* --- 6. CUERPO: lectura ágil, ancho e interlineado cómodos --- */
body { line-height: var(--lh-body); }
.about__copy p,
.booking__copy > p,
.future__copy > p,
.approach__copy > p { line-height: 1.62; max-width: 64ch; }

/* --- 7. Títulos de tarjeta y bloques medianos: consistentes --- */
.card h3, .flow__step h3, .booking__card h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -.012em;
}
.booking__card h3 { font-size: 1.3rem; }   /* leve realce: es título de tarjeta destacada */

/* --- 8. Cita del enfoque: armonizar con la nueva escala --- */
.approach__quote blockquote { font-size: 1.34rem; line-height: 1.4; }

/* --- 9. MÓVIL (≤600px): compacto, una columna, sin saltos bruscos --- */
@media (max-width: 600px) {
  .hero__title  { font-size: clamp(2.1rem, 8.4vw, 2.6rem); line-height: 1.08; letter-spacing: -.022em; }
  .section__title { font-size: clamp(1.65rem, 6.6vw, 2rem); line-height: 1.12; }
  .cta-final h2 { font-size: clamp(1.55rem, 6.4vw, 1.95rem); }
  .section__sub { font-size: 1.06rem; line-height: 1.5; }
  .hero__lead   { font-size: 1.06rem; line-height: 1.55; }
  /* ancho de línea: en móvil el cuerpo ocupa el contenedor (1 columna) */
  .about__copy p, .booking__copy > p, .future__copy > p, .approach__copy > p { max-width: none; }
}

/* --- 10. 360px: que el hero no se vea gigante en pantallas finas --- */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(1.95rem, 9vw, 2.35rem); }
}

/* ===========================================================
   v18 — Mapa "Reserva y dónde atiendo": satélite, más grande, bloque proporcionado
   =========================================================== */
@media (min-width: 961px) {
  #reservar .office__grid { grid-template-columns: .92fr 1.08fr; align-items: stretch; }
  #reservar .office__copy { align-self: center; }
}
.office__map iframe { min-height: 460px; height: 100%; aspect-ratio: auto; }

/* ===========================================================
   v19 — Páginas internas: breadcrumb/título compacto y cercano a la barra superior
   =========================================================== */
.page-hero, .imc__hero { padding-top: clamp(28px, 4.5vw, 44px); }
.breadcrumb { margin-bottom: 12px; }

/* ===========================================================
   v20 — ENTREGA: coherencia entre páginas + móvil amigable (centrado)
   Auditoría QA visual (desktop 1280/1440 · móvil 390/360).
   Solo layout/espaciado/alineación/centrado. Sin tocar paleta,
   tipografía de marca, herramientas, lightbox, nav ni contenido.
   =========================================================== */

/* --- 0. Token de altura de la barra superior (faltaba; varias páginas
   lo referenciaban como var(--nav-h,72px)) --- */
:root { --nav-h: 72px; }

/* --- 1. PAGE-HERO unificado en TODAS las páginas internas ---
   Antes: recursos/consejos/chequeos/habitos arrancaban a 128px y la
   calculadora a 120px, mientras sobre/servicios/consulta a 44px. Ahora
   todas comparten el mismo respiro superior y el mismo ritmo bajo el
   título → el header se siente del mismo sitio, no de plantillas sueltas. */
.page-hero, .imc__hero { padding-top: clamp(28px, 4.5vw, 44px); }
.page-hero__lead, .imc__lead { margin-top: 0; }

/* Breadcrumb consistente (mismo tamaño/peso/color en todas las páginas) */
.breadcrumb { font-size: .9rem; color: var(--muted); margin-bottom: 12px; line-height: 1.4; }
.breadcrumb a { color: var(--turq-600); font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; color: var(--line); }

/* --- 2. MÓVIL (≤600px): experiencia amigable, todo centrado y en
   una sola columna, con peso visual equilibrado --- */
@media (max-width: 600px) {
  /* Cabeceras de sección y de página: centradas (eyebrow, título, sub) */
  .section__head { text-align: center; margin-left: auto; margin-right: auto; }
  .section__head .eyebrow { justify-content: center; }
  .section__head .section__sub { margin-left: auto; margin-right: auto; }

  /* Page-hero de páginas internas: SOLO el encabezado (breadcrumb, eyebrow,
     título y lead) se centra — el contenido que sigue (cards, tablas, grids,
     formularios) conserva su alineación natural. Se apunta a los hijos
     directos del .container del hero para no arrastrar las cards de
     servicios.html (que comparten la clase .page-hero en su sección). */
  .page-hero > .container > .breadcrumb,
  .page-hero > .container > .eyebrow,
  .page-hero > .container > .page-hero__title,
  .page-hero > .container > .section__title,
  .page-hero > .container > .page-hero__lead,
  .page-hero > .container > .section__head,
  .imc__hero > .container > .breadcrumb,
  .imc__hero > .container > .eyebrow,
  .imc__hero > .container > h1,
  .imc__hero > .container > .imc__lead { text-align: center; }
  .page-hero > .container > .eyebrow,
  .page-hero > .container > .section__head .eyebrow,
  .imc__hero > .container > .eyebrow { justify-content: center; }
  .page-hero > .container > .page-hero__lead,
  .imc__hero > .container > .imc__lead { margin-left: auto; margin-right: auto; }
  .page-hero > .container > .breadcrumb,
  .imc__hero > .container > .breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; }

  /* Caso sobre.html: el encabezado del page-hero vive dentro de .about__copy
     (grilla foto+texto). Centramos breadcrumb/eyebrow/título/intro y CTA;
     los datos (dl) quedan alineados a la izquierda para no descuadrar pares. */
  .about.page-hero .about__copy { text-align: center; }
  .about.page-hero .about__copy .eyebrow { justify-content: center; }
  .about.page-hero .about__copy .breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; }
  .about.page-hero .about__copy .about__facts { text-align: left; }
  .about.page-hero .about__copy .btn { width: 100%; }

  /* Hero de la home: centrado + barra de acento centrada + pills/CTAs centrados */
  .hero__copy { text-align: center; margin-left: auto; margin-right: auto; }
  .hero .eyebrow { justify-content: center; }
  .hero__title::before { margin-left: auto; margin-right: auto; }
  .hero__lead { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .hero__pills { justify-content: center; }

  /* CTAs a ancho cómodo y centrados (sensación app, target táctil grande) */
  .hero__actions .btn { width: 100%; }
  .cta-final p { margin-left: auto; margin-right: auto; }

  /* Disclaimers / notas: legibles y centradas como bloque */
  .disclaimer, .imc-disclaimer { margin-left: auto; margin-right: auto; }
}

/* --- 3. 360px: gutters y centrado se mantienen sin desbordes --- */
@media (max-width: 380px) {
  .breadcrumb { font-size: .85rem; }
}

/* ===========================================================
   v21 — Banner "Nueva consulta pronto" (realce: letra blanca sobre azul)
   =========================================================== */
.new-consulta-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
  margin: 0 0 26px; padding: 16px 20px; border-radius: var(--radius);
  background: linear-gradient(120deg, #16202e 0%, #2f527f 58%, #3a6499 100%);
  color: #fff; box-shadow: var(--shadow-md);
}
.ncb__pin { flex: none; width: 30px; height: 30px; color: #fff; opacity: .92; }
.ncb__body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.ncb__tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
}
.ncb__txt { margin: 0; font-size: 1.02rem; color: #fff; line-height: 1.4; }
.ncb__txt strong { color: #fff; }
@media (max-width: 600px) {
  .new-consulta-banner { padding: 14px 16px; gap: 10px; }
  .ncb__txt { font-size: .92rem; }
}

/* ===========================================================
   v22 — Hub de Recursos (wiki/blog) + Blog de consejos + Actividades
   Bloque propio. Paleta azul #3a6499 / navy #1a2a40. Sin morado/verde.
   =========================================================== */

:root {
  --hub-blue: #3a6499;
  --hub-blue-d: #2f527f;
  --hub-navy: #1a2a40;
  --hub-tint: #eef3f9;
  --hub-tint-2: #f4f8fc;
  --hub-line: #e3e9f1;
}

/* ---------- HERO con imagen de contexto ---------- */
.hub-hero { position: relative; overflow: hidden; padding: 0; }
.hub-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(125deg, #16202e 0%, #24405f 52%, #3a6499 100%);
}
.hub-hero__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .22; mix-blend-mode: luminosity;
}
.hub-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 90% at 85% -10%, rgba(143,178,218,.18), transparent 55%);
}
.hub-hero__inner { position: relative; z-index: 1; padding: clamp(48px,7vw,84px) 0 clamp(40px,6vw,64px); }
.hub-hero .breadcrumb { color: rgba(255,255,255,.72); margin-bottom: 14px; }
.hub-hero .breadcrumb a { color: #fff; }
.hub-hero .eyebrow { color: #bcd2ee; }
.hub-hero .eyebrow__dot { background: #9cc0ec; box-shadow: 0 0 0 4px rgba(156,192,236,.22); }
.hub-hero__title { color: #fff; margin: .3em 0 .6rem; }
.hub-hero__lead { color: rgba(255,255,255,.86); max-width: 52ch; font-size: 1.16rem; line-height: 1.6; }
.hub-hero__stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hub-stat {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px; padding: 12px 18px; min-width: 120px; backdrop-filter: blur(4px);
}
.hub-stat strong { display: block; font-family: var(--font-serif); font-size: 1.7rem; color: #fff; line-height: 1; }
.hub-stat span { font-size: .82rem; color: rgba(255,255,255,.78); }

/* ---------- Buscador / filtros ---------- */
.hub-tools { margin-top: 26px; }
.hub-search {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--hub-line); border-radius: 14px;
  padding: 10px 16px; max-width: 520px; box-shadow: var(--shadow-sm, 0 8px 24px -18px rgba(26,42,64,.35));
}
.hub-search .ic { width: 20px; height: 20px; color: var(--hub-blue); flex: none; }
.hub-search input {
  border: 0; outline: 0; font: inherit; color: var(--ink); background: transparent;
  width: 100%; padding: 4px 0;
}
.hub-search input::placeholder { color: #9aa3b2; }
.hub-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hub-chip {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  background: #fff; color: #46546b; border: 1px solid var(--hub-line);
  padding: 8px 16px; border-radius: 999px; transition: all .18s ease;
}
.hub-chip:hover { border-color: var(--hub-blue); color: var(--hub-blue); }
.hub-chip[aria-pressed="true"] { background: var(--hub-blue); color: #fff; border-color: var(--hub-blue); }
.hub-empty { display: none; text-align: center; color: var(--muted); padding: 30px 0; font-size: 1.02rem; }
.hub-empty.is-on { display: block; }

/* ---------- Sección / categorías del hub ---------- */
.hub-cat { margin-top: clamp(40px,5vw,60px); }
.hub-cat__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hub-cat__ic {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: grid; place-items: center; background: var(--hub-tint); color: var(--hub-blue);
}
.hub-cat__ic .ic { width: 24px; height: 24px; }
.hub-cat__t { font-family: var(--font-serif); font-size: 1.4rem; color: var(--hub-navy); line-height: 1.1; }
.hub-cat__s { color: var(--muted); font-size: .96rem; margin-top: 2px; }
.hub-cat__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--hub-line), transparent); margin-left: 6px; }

/* ---------- Grid de tarjetas con foto ---------- */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hub-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hub-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--hub-line); border-radius: 18px; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.hub-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -24px rgba(26,42,64,.45); border-color: var(--hub-blue); }
.hub-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--hub-tint); }
.hub-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.hub-card:hover .hub-card__media img { transform: scale(1.05); }
.hub-card__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.94); color: var(--hub-blue);
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(18,32,54,.16);
}
.hub-card__badge .ic { width: 14px; height: 14px; }
.hub-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.hub-card__body h3 { font-family: var(--font-serif); font-size: 1.18rem; color: var(--hub-navy); font-weight: 600; line-height: 1.25; }
.hub-card__body p { color: var(--muted); margin-top: 8px; font-size: .96rem; line-height: 1.55; }
.hub-card__more { margin-top: auto; padding-top: 16px; font-weight: 600; color: var(--hub-blue); display: inline-flex; align-items: center; gap: .45rem; font-size: .94rem; }
.hub-card__more .ic { width: 18px; height: 18px; transition: transform .2s ease; }
.hub-card:hover .hub-card__more .ic { transform: translateX(3px); }
.hub-card.is-hidden { display: none; }

/* ---------- Blog (consejos) ---------- */
.blog-feature {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  background: #fff; border: 1px solid var(--hub-line); border-radius: 22px; overflow: hidden;
  margin-bottom: clamp(34px,4vw,48px); text-decoration: none; color: inherit;
  transition: box-shadow .22s ease, border-color .22s ease;
}
.blog-feature:hover { box-shadow: 0 24px 50px -26px rgba(26,42,64,.45); border-color: var(--hub-blue); }
.blog-feature__media { position: relative; min-height: 320px; background: var(--hub-tint); overflow: hidden; }
.blog-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-feature:hover .blog-feature__media img { transform: scale(1.04); }
.blog-feature__body { padding: clamp(28px,4vw,44px); display: flex; flex-direction: column; justify-content: center; }
.blog-feature__body h2 { font-family: var(--font-serif); font-size: clamp(1.4rem,2.4vw,1.9rem); color: var(--hub-navy); line-height: 1.18; margin: 12px 0 10px; }
.blog-feature__body p { color: var(--muted); font-size: 1.04rem; line-height: 1.6; }
.blog-feature__more { margin-top: 18px; font-weight: 600; color: var(--hub-blue); display: inline-flex; align-items: center; gap: .45rem; }
.blog-feature__more .ic { width: 18px; height: 18px; }

.cat-badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--hub-blue); background: var(--hub-tint); border: 1px solid #d9e3f0;
  padding: 5px 12px; border-radius: 999px;
}
.cat-badge .ic { width: 14px; height: 14px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-post {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--hub-line); border-radius: 18px; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.blog-post:hover { transform: translateY(-5px); box-shadow: 0 22px 46px -24px rgba(26,42,64,.45); border-color: var(--hub-blue); }
.blog-post__media { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--hub-tint); }
.blog-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.blog-post:hover .blog-post__media img { transform: scale(1.05); }
.blog-post__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.blog-post__body h3 { font-family: var(--font-serif); font-size: 1.16rem; color: var(--hub-navy); font-weight: 600; line-height: 1.25; margin: 10px 0 8px; }
.blog-post__body p { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.blog-post__read { margin-top: auto; padding-top: 14px; font-weight: 600; color: var(--hub-blue); font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; }
.blog-post__read .ic { width: 16px; height: 16px; }

/* ---------- Artículo desarrollado (acordeón de consejo) ---------- */
.article-list { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.article-item {
  background: #fff; border: 1px solid var(--hub-line); border-radius: 18px; overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.article-item[open] { border-color: var(--hub-blue); box-shadow: 0 16px 40px -28px rgba(26,42,64,.4); }
.article-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; font-family: var(--font-serif); font-size: 1.12rem; color: var(--hub-navy);
}
.article-item summary::-webkit-details-marker { display: none; }
.article-item__n {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--hub-tint); color: var(--hub-blue);
}
.article-item__n .ic { width: 20px; height: 20px; }
.article-item__chev { margin-left: auto; color: var(--hub-blue); transition: transform .25s ease; flex: none; }
.article-item[open] .article-item__chev { transform: rotate(180deg); }
.article-body { padding: 0 22px 22px 78px; color: #46546b; line-height: 1.65; }
.article-body p { margin: 0 0 12px; }
.article-body .tip-box {
  display: flex; gap: .6rem; align-items: flex-start; background: var(--hub-tint-2);
  border: 1px solid #dde7f3; border-radius: 12px; padding: .85rem 1rem; font-size: .94rem; color: #33415a; margin-top: 6px;
}
.article-body .tip-box .ic { flex: none; width: 18px; height: 18px; color: var(--hub-blue); margin-top: .15rem; }
.article-body .tip-box b { color: var(--hub-navy); }

/* ---------- Actividades / recomendaciones (wiki) ---------- */
.rec-block { margin-top: clamp(40px,5vw,58px); }
.rec-band {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
  border: 1px solid var(--hub-line); border-radius: 22px; overflow: hidden; background: #fff;
}
.rec-band--rev .rec-band__media { order: 2; }
.rec-band__media { position: relative; min-height: 280px; background: var(--hub-tint); overflow: hidden; }
.rec-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rec-band__body { padding: clamp(26px,3.5vw,40px); display: flex; flex-direction: column; justify-content: center; }
.rec-band__body h3 { font-family: var(--font-serif); font-size: clamp(1.3rem,2.2vw,1.6rem); color: var(--hub-navy); margin: 12px 0 10px; line-height: 1.2; }
.rec-band__body > p { color: var(--muted); line-height: 1.6; }
.rec-checks { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.rec-checks li { display: flex; gap: 10px; align-items: flex-start; color: #3b485c; font-size: .98rem; line-height: 1.5; }
.rec-checks .ic { flex: none; width: 20px; height: 20px; color: var(--hub-blue); margin-top: .12rem; }

/* Estadísticas destacadas */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(34px,4vw,46px); }
.stat-card {
  background: linear-gradient(160deg, #fff 0%, var(--hub-tint) 100%);
  border: 1px solid var(--hub-line); border-radius: 18px; padding: 26px 24px; text-align: center;
}
.stat-card strong { display: block; font-family: var(--font-serif); font-size: 2.3rem; color: var(--hub-blue); line-height: 1; }
.stat-card span { display: block; margin-top: 8px; color: #46546b; font-size: .95rem; line-height: 1.4; }

/* Fuentes confiables */
.source-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.source-link {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--hub-line); border-radius: 14px; padding: 16px 18px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.source-link:hover { border-color: var(--hub-blue); transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(26,42,64,.4); }
.source-link__ic { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--hub-tint); color: var(--hub-blue); }
.source-link__ic .ic { width: 22px; height: 22px; }
.source-link__t { display: block; font-weight: 600; color: var(--hub-navy); font-size: 1rem; }
.source-link__d { display: block; color: var(--muted); font-size: .86rem; margin-top: 2px; }
.source-link__t .ic { width: 13px; height: 13px; color: var(--hub-blue); vertical-align: -1px; margin-left: 4px; }

/* Disclaimer compartido en el bloque hub */
.hub-disclaimer {
  display: flex; gap: .8rem; align-items: flex-start; background: var(--hub-tint);
  border: 1px solid #d6e0ee; border-left: 4px solid var(--hub-blue); border-radius: 14px;
  padding: 1.1rem 1.25rem; margin: clamp(40px,5vw,56px) auto 0; max-width: 860px; color: #33415a;
}
.hub-disclaimer .ic { flex: none; width: 22px; height: 22px; color: var(--hub-blue); margin-top: .1rem; }
.hub-disclaimer strong { color: var(--hub-navy); }
.hub-disclaimer a { color: var(--hub-blue); font-weight: 600; }

/* ---------- Responsive del bloque hub ---------- */
@media (max-width: 980px) {
  .hub-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-feature, .rec-band { grid-template-columns: 1fr; }
  .blog-feature__media, .rec-band__media { min-height: 240px; }
  .rec-band--rev .rec-band__media { order: 0; }
  .source-list { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hub-grid, .hub-grid--2, .blog-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .hub-stat { min-width: 0; flex: 1; padding: 11px 12px; }
  .hub-stat span { font-size: .76rem; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
  .hub-hero__stats { gap: 10px; }
  .article-body { padding: 0 18px 20px 18px; }
  .hub-cat__t { font-size: 1.22rem; }
}

/* ===========================================================
   v23 — Pulido móvil del bloque superior (hero pills + respaldo)
   =========================================================== */
@media (max-width: 600px) {
  /* Pills: stack centrado y prolijo (evita el quiebre 2+1 de la fila) */
  .hero__pills { flex-direction: column; align-items: center; gap: 9px; }
  .hero__pills li { width: auto; font-size: .82rem; padding: 7px 13px; }
  /* "Respaldo profesional": apilado, centrado y con aire */
  .trust__inner { flex-direction: column; gap: 9px; padding: 20px var(--gutter); text-align: center; }
  .trust__label { font-size: .7rem; letter-spacing: .14em; }
  .trust__items { justify-content: center; gap: 6px 12px; font-size: .9rem; line-height: 1.5; }
}

/* ===========================================================
   v24 — Protección de imágenes de la galería (marca de agua va horneada en el JPG)
   =========================================================== */
.gitem img, .lightbox__img {
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ===========================================================================
   v26 · REFACTOR — Sistema de diseño base-8 + escala fluida + app-feel
   ---------------------------------------------------------------------------
   Consolida espaciados/escala dispersos en ~24 bloques override previos.
   - Espaciado: TODO múltiplo de 8 (4 solo como medio-paso puntual).
   - Tipografía: escala modular ÚNICA con clamp() (fluida).
   - Superficies con elevaciones (--bg-100..400) + tokens de marca.
   - Marca: azul #3a6499 / navy #1a2a40 / blanco (coherente con la calculadora).
   - No borra los overrides previos; los unifica vía tokens y reglas finales.
   =========================================================================== */
:root {
  /* ---- Marca (azul sobrio #3a6499 · navy #1a2a40) ---- */
  --brand:         #3a6499;   /* azul de marca */
  --brand-strong:  #2f547f;   /* hover / texto-link AA */
  --brand-soft:    #eef3fa;   /* superficie azul tenue */
  --brand-border:  #d4e0f0;   /* borde azul tenue */
  --navy-900:      #1a2a40;   /* navy (titulares fuertes / bloques) */

  /* ---- UN SOLO AZUL en todo el sitio: remapear los tokens viejos
     (--turq*, --cyan, --mint) al azul de marca #3a6499. Así los íconos,
     eyebrows, subrayados, badges, etc. de Inicio/Servicios/Consulta dejan de
     usar el azul brillante #0a74e8 y quedan idénticos al hub de Recursos
     (#3a6499). Coherencia de kit sin tocar 48 llamadas ni el markup. ---- */
  --turq:     #3a6499;   /* acento azul de marca (antes #0a74e8) */
  --turq-600: #2f547f;   /* acento interactivo AA (antes #0a63c9) */
  --cyan:     #9cc0ec;   /* azul claro sobre navy (acorde al hub) */
  --mint:     #eef3fa;   /* tile de ícono azul tenue (= --brand-soft) */

  /* ---- Superficies con elevaciones ---- */
  --bg-100: #ffffff;   /* base / tarjetas */
  --bg-200: #f5f7fa;   /* superficie hundida 1 */
  --bg-300: #eef2f7;   /* superficie hundida 2 */
  --bg-400: #e4eaf2;   /* bordes/realces fríos */

  /* ---- Espaciado base-8 (única fuente de verdad) ---- */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-half: 4px;   /* medio-paso puntual */

  /* ---- Escala tipográfica modular ÚNICA (fluida, ~ratio 1.2) ---- */
  --fz-2xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);  /* eyebrow / micro */
  --fz-xs:  clamp(0.80rem, 0.78rem + 0.12vw, 0.86rem);  /* hints / captions */
  --fz-sm:  clamp(0.90rem, 0.87rem + 0.16vw, 0.95rem);  /* UI / labels */
  --fz-base:clamp(1.00rem, 0.97rem + 0.18vw, 1.06rem);  /* cuerpo */
  --fz-md:  clamp(1.08rem, 1.02rem + 0.30vw, 1.20rem);  /* lead */
  --fz-lg:  clamp(1.20rem, 1.10rem + 0.50vw, 1.40rem);  /* h3 */
  --fz-xl:  clamp(1.45rem, 1.25rem + 1.00vw, 1.90rem);  /* h2 móvil→tablet */
  --fz-2xl: clamp(1.80rem, 1.45rem + 1.75vw, 2.80rem);  /* section title */
  --fz-3xl: clamp(2.10rem, 1.60rem + 2.50vw, 3.60rem);  /* hero */

  /* Radios base-8 coherentes */
  --radius-tab: 16px;
}

/* Ritmo de sección y layout, ahora en base-8 (sobrescribe los previos) */
:root {
  --gutter: clamp(16px, 5vw, 24px);
  --section-pad: clamp(48px, 6vw, 80px);
  --head-gap: clamp(24px, 3.5vw, 40px);
  --maxw: 1180px;
}

/* ---- Reescalado tipográfico a la escala única ---- */
.section__title { font-size: var(--fz-2xl); }
.section__sub   { font-size: var(--fz-md); }
.hero__lead     { font-size: var(--fz-md); }
.eyebrow        { font-size: var(--fz-2xs); }
.btn            { font-size: var(--fz-sm); }
.btn--lg        { font-size: var(--fz-base); }

/* ---- Marca aplicada al sistema (botón primario, links, acentos) ---- */
.btn--primary {
  background: linear-gradient(180deg, #4775ad 0%, var(--brand) 52%, var(--brand-strong) 100%);
  box-shadow: 0 1px 2px rgba(26,42,64,.18), 0 6px 16px rgba(47,84,127,.24),
              inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.08);
}
.btn--primary:hover:not(:disabled) {
  box-shadow: 0 2px 6px rgba(26,42,64,.12), 0 10px 22px rgba(47,84,127,.30),
              0 20px 40px rgba(58,100,153,.20), inset 0 1px 0 rgba(255,255,255,.32);
}
.eyebrow            { color: var(--brand); }
.eyebrow__dot       { background: var(--brand); box-shadow: 0 0 0 4px rgba(58,100,153,.16); }
.nav__links a::after{ background: var(--brand); }
.nav__links a.is-current { color: var(--brand-strong); }
.btn--ghost:hover:not(:disabled) { color: var(--brand-strong); }
a:focus-visible, button:focus-visible, summary:focus-visible,
.btn:focus-visible, .gitem:focus-visible, .tabbar__item:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid rgba(58,100,153,.75); outline-offset: 3px;
}
::selection { background: rgba(58,100,153,.16); color: var(--navy-900); }

/* ===========================================================================
   MICRO-INTERACCIONES (hover / focus-visible / active) · ~200ms ease
   =========================================================================== */
.card, .hub-card, .source-link, .imc-card {
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
@media (hover: hover) {
  .card:hover      { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .footer__ig:hover,
  .footer__maplink:hover { color: #fff; }
}
.card:active, .hub-card:active { transform: translateY(-1px); }

/* ===========================================================================
   BOTTOM TAB BAR (app-feel) — solo móvil/tablet, oculta en desktop
   =========================================================================== */
.tabbar { display: none; }

@media (max-width: 860px) {
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--brand-border);
    box-shadow: 0 -1px 0 rgba(26,42,64,.04), 0 -8px 24px rgba(26,42,64,.06);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    animation: tabUp .45s var(--ease) both;
  }
  @keyframes tabUp { from { transform: translateY(110%); } to { transform: none; } }

  .tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-height: 48px; padding: 6px 4px 4px;
    border-radius: 12px; color: var(--muted);
    font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: -.01em;
    transition: color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar__item .ic { width: 22px; height: 22px; stroke-width: 1.8; }
  .tabbar__item span { display: block; }

  .tabbar__item:hover { color: var(--brand); }
  .tabbar__item:active { transform: scale(.92); }
  .tabbar__item[aria-current="page"] {
    color: var(--brand-strong);
    background: var(--brand-soft);
  }
  .tabbar__item[aria-current="page"] .ic { stroke-width: 2.1; }

  /* CTA "Reservar": píldora de marca, destacada */
  .tabbar__item--cta {
    color: #fff;
    background: linear-gradient(180deg, #4775ad 0%, var(--brand) 60%, var(--brand-strong) 100%);
    margin: -4px 2px 0;
    box-shadow: 0 4px 12px rgba(47,84,127,.30), inset 0 1px 0 rgba(255,255,255,.25);
  }
  .tabbar__item--cta:hover { color: #fff; }
  .tabbar__item--cta:active { transform: scale(.94); }

  /* Reservar espacio inferior para que la tab bar no tape contenido */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: none;
  }
  /* La vieja mobile-bar queda neutralizada (la reemplaza la tab bar) */
  .mobile-bar { display: none !important; }
  /* El aviso de cookies se eleva por encima de la tab bar */
  .cookie { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ===========================================================================
   MÓVIL OS-NATIVE · escala más pequeña y compacta (cada bloque = "pantalla")
   Sobrescribe los ritmos sueltos previos con valores base-8 compactos.
   =========================================================================== */
@media (max-width: 600px) {
  body { font-size: 16px; line-height: 1.5; }
  .container { padding: 0 16px; }

  /* Ritmo vertical ceñido y consistente (base-8) */
  .section { padding: 40px 0; }
  .section__head { margin-bottom: 24px; }

  /* Hero compacto */
  .hero { padding: 64px 0 40px; }
  .hero__title { font-size: clamp(1.9rem, 8.5vw, 2.5rem); line-height: 1.06; }
  .hero__lead  { font-size: var(--fz-base); line-height: 1.5; }
  .hero__actions { gap: 8px; margin-top: 16px; }
  .hero__pills { margin-top: 16px; gap: 8px; }

  /* Títulos de sección más contenidos en móvil */
  .section__title { font-size: clamp(1.55rem, 6.4vw, 1.95rem); }
  .section__sub   { font-size: var(--fz-sm); }

  /* Tarjetas compactas */
  .card { padding: 16px 16px; }
  .card h3 { font-size: var(--fz-base); }
  .card p  { font-size: var(--fz-sm); }
  .cards { gap: 8px; }

  /* Botones móvil: alto cómodo pero compacto, tap target ≥44px */
  .btn { min-height: 46px; }
  .btn--lg { min-height: 50px; }

  /* Galería más ágil */
  .gallery { gap: 8px; }
}

/* Teléfonos angostos (360/375): aún más ceñido, sin desbordes */
@media (max-width: 400px) {
  .container { padding: 0 16px; }
  .hero__title { font-size: clamp(1.75rem, 9vw, 2.2rem); }
  .nav__inner { gap: 12px; }
  .brand__text { font-size: 1rem; }
}

/* Respeta el gusto por menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .tabbar { animation: none; }
  .card, .hub-card, .source-link, .imc-card, .tabbar__item, .btn { transition: none; }
}

/* ===========================================================
   v17 — HERO simplificado + alineación mapa + acento médico
          + skip-link accesible. Director de arte, jun-2026.
   Objetivo: header con más aire (menos píldoras), mapa y texto
   como bloques parejos, toque gráfico médico sutil, y skip-link
   oculto salvo con teclado. Solo este bloque; gana en cascada.
   =========================================================== */

/* --- 0. SKIP-LINK: invisible fuera de pantalla, visible solo al :focus
   (Tab). Antes salía con left:-999px pero sin transición ni foco nítido.
   Usamos el patrón clip accesible + aparición prolija arriba-izquierda. --- */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 300;
  background: var(--teal-800); color: #fff;
  padding: 10px 16px; border-radius: 10px;
  font-size: .9rem; font-weight: 600;
  box-shadow: var(--shadow-md);
  transform: translateY(-150%);
  transition: transform .2s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 8px;                         /* anula el left:-999px heredado */
  transform: translateY(0);
  outline: 2px solid #fff; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* --- 1. HERO: más aire, menos elementos. La línea meta reemplaza las 3
   píldoras: misma info esencial, sin cajas que saturan. --- */
.hero__meta {
  margin: 18px 0 0;
  font-size: .92rem; font-weight: 600; letter-spacing: .005em;
  color: var(--teal-700);
  display: inline-flex; align-items: center; gap: 10px;
}
.hero__meta::before {
  content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px;
  background: var(--accent-line);
}
.hero__lead { max-width: 42ch; }     /* línea un punto más corta = más aire */
.hero__actions { margin-bottom: 18px; }

/* Acento médico SUTIL en el hero: cruz de línea muy tenue, arriba-derecha,
   detrás del contenido. Decorativa, no compite con el titular. */
.hero { position: relative; }
.hero::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  right: clamp(20px, 6vw, 72px); top: clamp(18px, 5vh, 56px);
  width: 124px; height: 124px; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%233a6499' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 6h12v20h20v12H38v20H26V38H6V26h20z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
}
@media (max-width: 760px) { .hero::after { display: none; } }

/* --- 2. ACENTO MÉDICO global SUTIL: línea de pulso bajo los eyebrows.
   Un latido fino en el color de marca, como firma médica discreta. --- */
.section .eyebrow { position: relative; }

/* Patrón de cruces muy tenue como textura de fondo en bandas de marca
   (trust + futuro), apenas perceptible — "es la web de un doctor". */
.trust { position: relative; overflow: hidden; }
.trust::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%233a6499' stroke-width='1.4' stroke-linecap='round' opacity='0.12'%3E%3Cpath d='M24 17v14M17 24h14'/%3E%3C/svg%3E");
  background-size: 48px 48px;
}
.trust__inner { position: relative; z-index: 1; }

/* --- 3. CONSULTA: mapa y texto como BLOQUES PAREJOS.
   El problema: el mapa flotaba (aspect-ratio) y no arrancaba ni terminaba
   con el bloque de texto. Solución: ambas columnas estiradas a la misma
   altura, mapa con altura 100% y tope mínimo, alineados arriba. --- */
.office__grid {
  align-items: stretch;            /* columnas a la misma altura */
}
.office__grid > .office__copy,
.office__grid > .office__map {
  align-self: stretch;
}
/* La columna de texto en consulta usa una tarjeta info: que llene el alto */
.office__grid .office__copy { display: flex; flex-direction: column; }
.office__grid .office__copy .office__info { flex: 1 1 auto; }
/* Mapa: que iguale el alto de la columna de texto, no un aspect-ratio suelto */
.office__map { display: flex; align-self: stretch; }
.office__map iframe {
  width: 100%; height: 100%;
  aspect-ratio: auto;              /* deja de imponer 4/3, llena el bloque */
  min-height: 340px;
  border: 0; display: block;
}
@media (min-width: 861px) {
  .office__map iframe { min-height: 100%; }
}
/* En móvil vuelven a apilarse con una proporción cómoda y pareja */
@media (max-width: 860px) {
  .office__map iframe { aspect-ratio: 16 / 11; min-height: 260px; }
}

/* --- 4. ABOUT (Sobre mí): foto y texto bien parejos, foto con alto medido
   para que "encaje en pantalla" en desktop sin dominar. --- */
@media (min-width: 861px) {
  .page-hero .about-figure { aspect-ratio: 4 / 4.4; max-height: 560px; }
}

/* --- 5. MICRO-INTERACCIONES coherentes (200ms) en CTAs/links del hero --- */
.hero__actions .btn { transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.hero__actions .btn:active:not(:disabled) { transform: translateY(1px); }

/* --- 6. Acento médico en headers de páginas internas (sobre/consulta):
   un pulso fino junto al breadcrumb/eyebrow, marca de "ficha médica". --- */
.page-hero .section__head .eyebrow::after,
.page-hero > .container > .about__grid .eyebrow::after { content: none; }

/* ===========================================================
   v28 — Bloques de info: ÍCONO AL LADO del texto (compacta el alto)
   + render del doctor encuadrado al rostro
   =========================================================== */
.card {
  display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; row-gap: 4px;
  align-items: start; padding: 20px 20px;
}
.card__icon { grid-row: 1 / span 2; margin: 0 !important; width: 48px; height: 48px; align-self: start; }
.card h3 { grid-column: 2; align-self: center; }
.card p  { grid-column: 2; margin-top: 2px; }
@media (max-width: 600px) {
  .card { padding: 16px; column-gap: 12px; grid-template-columns: 44px 1fr; }
  .card__icon { width: 44px; height: 44px; }
}
/* Render del doctor: encuadre al rostro (no a los pies) */
.about-figure img { object-position: center 22%; }

/* ===========================================================================
   v29 — SISTEMA DE ALINEACIÓN UNIFICADO + NAV PREMIUM (autoritativo)
   ---------------------------------------------------------------------------
   Problema del cliente: en móvil unos encabezados van centrados y otros a la
   izquierda sin criterio (la home centra "Servicios" pero deja "El doctor" y
   "Reserva" a la izquierda; recursos/actividades dejan el hero a la izquierda
   mientras servicios/sobre/consulta lo centran).

   REGLA ÚNICA (móvil ≤600px), aplicada IGUAL en TODO el sitio:
   · ENCABEZADO de sección/página  → CENTRADO
       (eyebrow + título + subtítulo/intro), en CUALQUIER envoltorio:
       .section__head, page-hero, hub-hero, .about__copy, .office__copy,
       .approach__copy, .future__copy.
   · CUERPO (párrafos largos, listas, bullets, tarjetas, datos, pasos,
       formularios, tablas, paneles de info) → IZQUIERDA (lectura).
   · Headers de fila ícono+texto (.hub-cat__head) se mantienen a la izquierda
       a propósito (no son encabezados centrados, son barras de capítulo).
   Escritorio (≥601px) intacto: encabezados a la izquierda como en el diseño.
   =========================================================================== */
@media (max-width: 600px) {

  /* ---- 1 · ENCABEZADOS DE SECCIÓN: centrar el trío en todo envoltorio ---- */
  /* El "trío" = eyebrow + .section__title + el primer párrafo/lead que les
     sigue (.section__sub o el <p> introductorio directo del copy-wrapper). */
  .about__copy > .eyebrow,
  .about__copy > .section__title,
  .office__copy > .eyebrow,
  .office__copy > .section__title,
  .approach__copy > .eyebrow,
  .approach__copy > .section__title,
  .future__copy > .eyebrow,
  .future__copy > .section__title {
    text-align: center;
  }
  /* Lead introductorio: es el primer <p> "pelado" tras el título (sin clase
     de bloque). Lo centramos; el resto de párrafos del cuerpo no se tocan. */
  .about__copy > .section__title + p:not([class]),
  .office__copy > .section__title + p:not([class]),
  .approach__copy > .section__title + p:not([class]),
  .future__copy > .section__title + p:not([class]),
  .about__copy > .section__title + p.reveal,
  .office__copy > .section__title + p.reveal,
  .approach__copy > .section__title + p.reveal,
  .future__copy > .section__title + p.reveal {
    text-align: center;
  }
  /* Eyebrow centrado de verdad: es inline-flex, así que su caja queda a la
     izquierda aunque el texto esté centrado. Lo pasamos a flex de ancho
     completo con contenido centrado para que la píldora quede al medio. */
  .about__copy > .eyebrow,
  .office__copy > .eyebrow,
  .approach__copy > .eyebrow,
  .future__copy > .eyebrow,
  .hub-hero__inner > .eyebrow { display: flex; justify-content: center; }

  /* ---- 2 · CUERPO de esos mismos bloques: forzar IZQUIERDA ---- */
  /* Listas/datos/pasos/paneles que viven en el copy-wrapper o a su lado,
     para que el cuerpo siempre se lea a la izquierda aunque el header centre. */
  .about__pillars,
  .about__facts,
  .office__info,
  .booking__note,
  .steps,
  .future__benefits { text-align: left; }
  .about__pillars li,
  .office__info li,
  .steps li,
  .future__benefits li { text-align: left; }

  /* ---- 3 · HUB-HERO (recursos/actividades): centrar el header como el resto ---- */
  .hub-hero__inner > .breadcrumb,
  .hub-hero__inner > .eyebrow,
  .hub-hero__inner > .hub-hero__title,
  .hub-hero__inner > .section__title,
  .hub-hero__inner > .hub-hero__lead { text-align: center; }
  .hub-hero__inner > .breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; }
  .hub-hero__lead { margin-left: auto; margin-right: auto; }
  /* Buscador y filtros del hub: bloque centrado y prolijo (no desparramado) */
  .hub-tools { display: flex; flex-direction: column; align-items: center; }
  .hub-search { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
  .hub-filters { justify-content: center; }
  .hub-hero__stats { justify-content: center; }

  /* ---- 4 · Estos encabezados de fila se quedan a la IZQUIERDA a propósito ---- */
  .hub-cat__head { text-align: left; }
}

/* ===========================================================================
   v29 — NAV PREMIUM: barra superior (desktop) + bottom tab bar (móvil)
   Espaciados base-8, estados activos nítidos, tap targets ≥44px, 200ms.
   =========================================================================== */

/* --- Barra superior (desktop): ritmo base-8 + activo más legible --- */
.nav__inner { height: 64px; }
.nav__links { gap: 28px; }
.nav__links a { transition: color .2s var(--ease), opacity .2s var(--ease); padding: 6px 0; }
.nav__links a::after { bottom: 0; height: 2px; }
/* Estado activo del link: color de marca pleno + subrayado permanente.
   Cubre tanto la página actual (aria-current, páginas internas) como el
   scroll-spy de la home (.is-current). Mismo tratamiento → consistencia. */
.nav__links a.is-current,
.nav__links a[aria-current="page"] { color: var(--brand-strong); opacity: 1; }
.nav__links a.is-current::after,
.nav__links a[aria-current="page"]::after { width: 100%; }
.brand__logo { height: 40px; }
/* CTA de la barra: tap/click cómodo y firma de marca coherente */
.nav__cta { min-height: 40px; padding: 0 18px; border-radius: var(--radius-btn); }

/* --- Bottom tab bar (móvil): pulido premium --- */
@media (max-width: 860px) {
  /* Ritmo base-8 + separación clara del contenido */
  .tabbar { padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 2px; }
  .tabbar__item { gap: 4px; min-height: 52px; padding: 7px 4px 5px; border-radius: 14px; }
  .tabbar__item .ic { width: 23px; height: 23px; }
  .tabbar__item span { font-size: 10.5px; letter-spacing: -.01em; }
  /* Activo: fondo de marca tenue + ícono más marcado (lectura instantánea) */
  .tabbar__item[aria-current="page"] {
    color: var(--brand-strong);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand-border);
  }
  .tabbar__item[aria-current="page"] .ic { stroke-width: 2.2; }
  /* CTA "Reservar": píldora destacada, alto consistente con el resto */
  .tabbar__item--cta { margin: -2px 2px 0; box-shadow: 0 4px 12px rgba(47,84,127,.32), inset 0 1px 0 rgba(255,255,255,.28); }
  /* Reservar espacio para que la tab bar NUNCA tape el footer/última sección */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* --- Tab bar más fina en teléfonos angostos, sin perder target ≥44px --- */
@media (max-width: 380px) {
  .tabbar__item span { font-size: 10px; }
  .tabbar__item { padding: 7px 2px 5px; }
}

/* Reduced-motion: sin transiciones en la nav */
@media (prefers-reduced-motion: reduce) {
  .nav__links a, .tabbar__item { transition: none; }
}

/* ===========================================================
   v30 — Botones radio 12px (no pill) sin doble línea + grids 2x2 móvil
   =========================================================== */
:root { --radius-btn: 12px; }
.btn { border-radius: 12px; white-space: nowrap; }

/* Móvil: tarjetas de servicios en patrón 2 columnas (cuadrado/simétrico) */
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card { display: block; text-align: center; padding: 16px 12px; }
  .card__icon { grid-row: auto; margin: 0 auto 8px !important; }
  .card h3 { font-size: .95rem; }
  .card p  { font-size: .82rem; line-height: 1.42; }
}

/* ===========================================================================
   v31 — SIMETRÍA POR BLOQUES + RITMO BASE-8 + SALTOS DE LÍNEA COHERENTES
   Lleva Servicios / Consulta / Recursos al pulido de Inicio. Solo
   espaciado / alineación / wrap — sin colores nuevos ni cambios de contenido.
   =========================================================================== */

/* --- 1 · "Título muy pegado a la descripción": separación consistente
   título → subtítulo/cuerpo en TODO el sitio (base-8, mismo respiro). --- */
.section__title { margin-top: 12px; }              /* eyebrow → título */
.section__sub   { margin-top: 12px; }              /* título → subtítulo */
.section__head  { margin-bottom: var(--head-gap); }
/* Tarjetas: título → cuerpo con el mismo ritmo en cada familia de tarjeta */
.card h3 + p,
.svc__item h2 + p,
.flow__step h3 + p,
.future__benefits strong + p,
.hub-card__body h3 + p,
.quick-link__t + .quick-link__d { margin-top: 8px; }
.svc__item h2 { line-height: 1.25; }

/* --- 2 · SALTOS DE LÍNEA COHERENTES: títulos balanceados, párrafos sin
   huérfanas. Extiende el patrón de Inicio a los títulos/leads de las tres
   páginas (los <br> de marca se respetan; balance ordena el resto). --- */
.svc__item h2,
.hub-cat__t,
.hub-hero__title,
.hub-card__body h3,
.booking__card h3,
.future__copy .section__title,
.cta-final h2 { text-wrap: balance; }
.svc__item > p,
.hub-card__body p,
.hub-hero__lead,
.future__copy > p,
.quick-link__d { text-wrap: pretty; }

/* --- 3 · SIMETRÍA: filas parejas, tarjetas de igual alto por fila.
   El grid ya estira las celdas; lo fijamos explícito y hacemos que el
   contenido se distribuya para que los pies (más-link, bullets) alineen. --- */
.svc, .hub-grid, .hub-grid--2, .quick-grid, .future__benefits, .cards {
  align-items: stretch;
}
.svc__item { height: 100%; }
.hub-card { height: 100%; }
.quick-link { height: 100%; }

/* --- 4 · RITMO VERTICAL entre secciones igual al de Inicio (head-gap único).
   El breadcrumb no debe pegar el eyebrow al borde; respiro consistente. --- */
.breadcrumb { margin-bottom: 16px; }
.page-hero .section__head { margin-bottom: var(--head-gap); }

/* --- 5 · Móvil: mismas reglas de simetría, sin desbordes --- */
@media (max-width: 600px) {
  .section__title { margin-top: 10px; }
  .section__sub   { margin-top: 10px; }
}

/* ===========================================================
   v31 — Coherencia móvil real: hero/respaldo centrados (intro),
   secciones de contenido a la IZQUIERDA + ficha de datos prolija
   =========================================================== */
@media (max-width: 600px) {
  /* Respaldo: sin viñetas; cada aval en su propia línea, centrado */
  .trust__items .dot { display: none; }
  .trust__items { flex-direction: column; align-items: center; gap: 6px; }

  /* Secciones de contenido: TODO a la izquierda (se acaba la mezcla) */
  .about__copy, .about__copy *,
  .section__head, .section__head *,
  .hub-hero, .hub-hero *,
  .office__copy, .office__copy *,
  .approach__copy, .approach__copy *,
  .future__copy, .future__copy * { text-align: left !important; }
  .about__copy .eyebrow, .section__head .eyebrow, .hub-hero .eyebrow,
  .office__copy .eyebrow, .approach__copy .eyebrow, .future__copy .eyebrow {
    justify-content: flex-start !important;
  }

  /* El doctor — mini-datos como ficha clínica (etiqueta izq · valor der) */
  .about__facts { display: grid; gap: 0; margin-top: 16px; border-top: 1px solid var(--line); }
  .about__facts > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid var(--line);
  }
  .about__facts dt {
    margin: 0; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .about__facts dd { margin: 0; font-weight: 600; color: var(--teal-900); text-align: right !important; }
}

/* ===========================================================================
   v32 — SISTEMA DE RITMO VERTICAL ÚNICO EN MÓVIL (base-8) · AUTORITATIVO
   ---------------------------------------------------------------------------
   El cliente: "en móvil está desordenado, sin jerarquía por bloque, los
   márgenes a la intuición". Causa: ~30 bloques override apilados, cada familia
   con su propio gap mágico (18/14/16/13/22px, 1.1/1.6/2.6rem). Aquí se impone
   UNA escala base-8 por NIVEL, igual en TODAS las páginas. Va al final → gana
   en cascada. No toca paleta, contenido, JS ni el desktop (≥601px).

   ESCALA POR NIVEL (móvil ≤600px):
   · Padding vertical de SECCIÓN ............ 40px (--sp-6 menos un paso)   = pareja en todo
   · breadcrumb → eyebrow ................... 16px (--sp-2)
   · eyebrow → título ...................... 8px  (--sp-1)   fijo y pequeño
   · título → subtítulo .................... 8px  (--sp-1)
   · header → primer bloque de contenido ... 24px (--sp-3)
   · ENTRE bloques/tarjetas ................ 16px (--sp-2)   (12px en grids 2×2 densos)
   · INTRA-tarjeta (ícono→título→texto) .... 8/4px (--sp-1 / --sp-half)
   =========================================================================== */
@media (max-width: 600px) {

  /* ---- 1 · PADDING VERTICAL DE SECCIÓN: idéntico en TODAS las páginas ----
     .section ya estaba en 40px; igualamos los heros de páginas internas a ese
     mismo ritmo (antes: page-hero/hub-hero/imc-hero arrancaban dispares). */
  .section { padding: 40px 0; }                        /* 40px arriba/abajo, parejo */
  .page-hero, .imc__hero { padding-top: var(--sp-4) !important; padding-bottom: 0 !important; }  /* 32px arriba, el cuerpo aporta el resto */
  .hub-hero__inner { padding: var(--sp-6) 0 var(--sp-4) !important; }   /* 40 / 32 */

  /* ---- 2 · RESPIRO SUPERIOR DEL HEADER: breadcrumb → eyebrow ----
     Unifica el dispar 18px / 12px / 16px de los inline a 16px (--sp-2). */
  .breadcrumb { margin-bottom: var(--sp-2) !important; }

  /* ---- 3 · JERARQUÍA HEADER: eyebrow → título → subtítulo (fijo y pequeño) */
  .section__title,
  .page-hero__title,
  .hub-hero__title { margin-top: var(--sp-1); }        /* eyebrow → título: 8px */
  .section__sub,
  .page-hero__lead,
  .hub-hero__lead,
  .imc__lead { margin-top: var(--sp-1); }              /* título → subtítulo: 8px */
  /* chequeos/habitos fijaban el título con .32em + 1rem: normalizar */
  .page-hero .eyebrow { margin-bottom: 0; }
  .page-hero__title { margin-bottom: 0; }

  /* ---- 4 · HEADER → PRIMER BLOQUE DE CONTENIDO: 24px en todas ---- */
  .section__head { margin-bottom: var(--sp-3); }
  .page-hero .section__head { margin-bottom: var(--sp-3); }

  /* Primer bloque de cuerpo que sigue directamente al header del copy-wrapper:
     listas/datos/pasos/paneles arrancan a 24px del título o del lead. */
  .about__copy .about__pillars,
  .about__copy .about__facts,
  .about__copy .values,
  .office__copy .office__info,
  .office__copy .office__cta,
  .future__copy .future__benefits,
  .prev,
  .table-block:first-of-type { margin-top: var(--sp-3); }

  /* ---- 5 · GAP ENTRE BLOQUES / TARJETAS: 16px (12px en grids 2×2 densos) ---- */
  .svc { gap: var(--sp-2); }                           /* servicios apilados: 16 */
  .quick-grid { gap: var(--sp-2); }
  .hub-grid, .hub-grid--2, .blog-grid, .post-gallery { gap: var(--sp-2); }
  .source-list { gap: var(--sp-2); }
  .article-list { gap: var(--sp-2); }
  .steps { gap: var(--sp-2); }
  .future__benefits { gap: var(--sp-2); }
  .booking__feats { gap: var(--sp-1); }
  /* Grids 2×2 densos (servicios en index, credenciales en sobre): 12px */
  .cards { gap: 12px; }
  .legal ul { gap: var(--sp-1); }

  /* ---- 6 · SEPARACIÓN ENTRE SECCIONES-CAPÍTULO del hub (recursos/actividades)
     y entre bandas de blog: ritmo único, ya no clamp() suelto ---- */
  .hub-cat { margin-top: var(--sp-6); }                /* 40px entre capítulos */
  .hub-cat__head { margin-bottom: var(--sp-3); }       /* 24px head de capítulo → grid */
  .rec-block { margin-top: var(--sp-6); }
  .stat-row { margin-top: var(--sp-4); }
  .blog-feature { margin-bottom: var(--sp-4); }        /* 32px */
  .hub-disclaimer, .disclaimer { margin-top: var(--sp-6) !important; }
  .gallery__disclaimer { margin-top: var(--sp-3) !important; }

  /* ---- 7 · INTRA-TARJETA: ícono → título → texto, fijo y pequeño ----
     Todas las familias de tarjeta comparten el mismo respiro interno. */
  .svc__item { gap: var(--sp-1); padding: var(--sp-3) var(--sp-2); }   /* 24/16 */
  .svc__head { gap: var(--sp-2); }
  .svc__list { gap: var(--sp-1); }
  .quick-link { gap: var(--sp-2); padding: var(--sp-2); }
  .hub-card__body { padding: var(--sp-2) var(--sp-2) var(--sp-3); }
  .hub-card__body h3 + p,
  .svc__item h2 + p,
  .future__benefits strong + p,
  .quick-link__t + .quick-link__d,
  .card h3 + p { margin-top: var(--sp-1); }             /* título → texto: 8px */
  .values li, .about__pillars li { gap: var(--sp-2); }
  .values h3 { margin-bottom: var(--sp-half); }         /* 4px */

  /* ---- 8 · TÍTULOS DE CAPÍTULO/BANDA del hub a la escala única (jerarquía) ----
     Que el título de capítulo (hub-cat__t) y de banda (rec-band/blog) lean como
     "título de sección" móvil, no como tamaños sueltos. */
  .hub-cat__t { font-size: var(--fz-lg); }
  .table-block { margin-top: var(--sp-6); }
  .table-block__head { margin-bottom: var(--sp-2); }
  .table-block__head h2 { margin: 0 0 var(--sp-half); }

  /* ---- 9 · LEGAL (privacidad/términos): el ritmo base-8 lo fija el <style>
     inline de cada página (ya normalizado a --sp-*). Aquí solo aseguramos que
     el padding inferior despeje la bottom tab bar fija. ---- */
  .legal { padding-bottom: calc(var(--sp-10) + env(safe-area-inset-bottom, 0px)); }
}

/* Teléfonos angostos: solo ajustes de densidad, el ritmo base-8 se mantiene */
@media (max-width: 380px) {
  .cards { gap: var(--sp-1); }                          /* 8px en grids 2×2 muy finos */
}

/* ===========================================================
   v33 — "Paso a paso" balanceado/equitativo: badge circular
   consistente, peso visual parejo, ritmo base-8, en todas las versiones
   =========================================================== */
.steps { display: grid; gap: var(--sp-2); }
.steps li {
  display: flex; gap: var(--sp-2); align-items: center; padding: 18px 20px;
}
.steps__n {
  flex: 0 0 44px; width: 44px; height: 44px; min-width: 0;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-sans); font-weight: 700; font-size: 1.05rem; color: #fff;
  background: linear-gradient(180deg, #3a6499, #2f527f);
  box-shadow: 0 2px 8px rgba(16,24,40,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.steps li > div { flex: 1 1 auto; min-width: 0; }
.steps h3 { font-size: 1.05rem; margin: 0 0 2px; }
.steps p { margin: 0; }
@media (max-width: 600px) {
  .steps li { padding: 16px; gap: 14px; align-items: center; }
  .steps__n { flex-basis: 40px; width: 40px; height: 40px; font-size: 1rem; }
}

/* ===========================================================
   v34 — "Reservar online" (#como-reservar) tipo app: columna única
   centrada en escritorio (elimina el vacío del 2-col desbalanceado)
   =========================================================== */
@media (min-width: 861px) {
  #como-reservar .approach__grid {
    grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; gap: 28px;
  }
  #como-reservar .info-card { max-width: 100%; }
}

/* ===========================================================
   v35 — Compactación global: títulos más chicos y secciones más
   compactas (achicar las letras grandes, mejor distribución)
   =========================================================== */
:root { --section-pad: clamp(40px, 4.2vw, 58px); }
.section { padding: var(--section-pad) 0; }
.hero__title    { font-size: clamp(2.05rem, 1.5rem + 2.2vw, 2.8rem); line-height: 1.08; }
.section__title { font-size: clamp(1.55rem, 1.3rem + 1.3vw, 2.1rem); line-height: 1.14; }
.section__sub   { font-size: 1.02rem; }
.hero__lead     { font-size: clamp(1.0rem, 1.2vw, 1.12rem); }
.page-hero__title { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.15rem); line-height: 1.12; }

/* v36 — Consulta: separar el último paso del botón "Reservar hora" */
#como-reservar .steps { margin-bottom: var(--sp-4); }

/* ===========================================================
   v38 — "El doctor": datos (Formación/Atención/Presencial) como
   bloques uniformes centrados tipo botón (móvil y escritorio)
   =========================================================== */
.about__facts { display: grid; gap: 8px; margin-top: 20px; border-top: none; }
.about__facts > div {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-align: center; padding: 12px 14px;
  background: rgba(58,100,153,.05); border: 1px solid rgba(58,100,153,.16);
  border-radius: 12px;
}
.about__facts dt {
  margin: 0; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.about__facts dd {
  margin: 0; font-weight: 600; color: var(--teal-900); font-size: .98rem; text-align: center; text-wrap: balance;
}
@media (min-width: 760px) {
  .about__facts { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

/* ===========================================================
   v40 — Quiebres de línea balanceados (FAQ y títulos) en toda la web
   =========================================================== */
.faq summary { display: block; position: relative; padding-right: 36px; text-wrap: balance; }
.faq summary .faq__plus { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
h1, h2, h3, h4,
.section__title, .hero__title, .page-hero__title, .hub-hero__title,
.card h3, .svc__item h3, .quick-link__t { text-wrap: balance; }

/* ===========================================================
   v41 — Fix overflow horizontal (margen derecho) + menos espacio
   en páginas internas + foto del doctor más chica (1×1)
   =========================================================== */
/* a) Sin overflow horizontal en pantallas angostas: botones largos pueden envolver */
@media (max-width: 400px) { .btn { white-space: normal; line-height: 1.2; } }
.about__grid, .approach__grid, .office__grid, .booking__inner,
.about__copy, .office__copy, .booking__copy, .approach__copy,
.cards, .svc, .hub-grid, .faq__inner, .future__inner { min-width: 0; }
.about__grid > *, .approach__grid > *, .office__grid > * { min-width: 0; }
/* b) Páginas internas: menos espacio superior, parejo en toda la web */
.page-hero { padding-top: clamp(12px, 2.5vw, 24px) !important; }
/* c) Foto del doctor: cuadrada (1×1) y más chica, en todas las páginas */
.about-figure { aspect-ratio: 1 / 1; max-width: 300px; margin-inline: auto; }
@media (min-width: 861px) { .about-figure { max-width: 360px; } }

/* ===========================================================
   v42 — Hero: previsiones como chips/bloques + botones del mismo porte
   =========================================================== */
.hero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.hero__chips li {
  font-size: .82rem; font-weight: 600; color: var(--teal-800);
  background: rgba(58,100,153,.06); border: 1px solid rgba(58,100,153,.18);
  padding: 7px 13px; border-radius: 999px;
}
.hero__chips .hero__chips--soon {
  color: #fff; background: linear-gradient(180deg, #3a6499, #2f527f); border-color: transparent;
}
@media (min-width: 561px) {
  .hero__actions { display: flex; gap: 12px; align-items: stretch; }
  .hero__actions .btn { flex: 1 1 0; }
}

/* v43 — Valores ("Mi enfoque"): quiebre balanceado, sin palabra huérfana */
.about__pillars li, .about__pillars li span { text-wrap: balance; }

/* ===========================================================
   v45 — Compactar Recursos (tarjetas) y FOOTER en móvil
   =========================================================== */
@media (max-width: 600px) {
  /* Recursos: fotos de tarjeta más bajas + menos aire entre categorías/tarjetas */
  .hub-card__media { aspect-ratio: 16 / 7; }
  .hub-cat { margin-top: 26px; }
  .hub-cat__head { margin-bottom: 14px; }
  .hub-grid { gap: 14px; }
  /* Footer más compacto */
  .footer { padding-top: 28px !important; padding-bottom: 20px !important; }
  .footer__top { gap: 20px !important; padding-bottom: 22px !important; }
  .footer__brand { gap: 8px !important; max-width: none; }
  .footer__logo { height: 44px; }
  .footer__col { gap: 8px !important; }
}

/* ===========================================================
   v46 — Iconos a estándar Lucide (trazo 2px uniforme, esquinas redondas)
   =========================================================== */
.ic { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gallery__disclaimer .ic { stroke-width: 2; }

/* v47 — Comillas de la cita: trazo de color (no bloque negro relleno) */
.quote-mark { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--cyan); }

/* ===========================================================
   v48 — Valores ("Mi enfoque") como bloques tipo botón (1×3)
   =========================================================== */
.about__pillars { gap: 10px; }
.about__pillars li {
  align-items: center;
  background: rgba(58,100,153,.05); border: 1px solid rgba(58,100,153,.16);
  border-radius: 12px; padding: 13px 15px;
}
.about__pillars li span { text-wrap: pretty; }