/* Dra. Melania Pacheco Pinto: estilos del sitio (CLAUDE.md §3–§5, §14) */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Size-adjusted fallback to limit layout shift while the font loads */
@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 101%;
  ascent-override: 99%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  --menta: #CFE6D6;
  --guarumo: #8FA394;
  --botella: #1E3B30;
  --grafito: #23272B;
  --niebla: #F3F7F4;
  --font: "Hanken Grotesk", "Hanken Fallback", sans-serif;
  --gutter: clamp(20px, 4vw, 48px);
  --bar-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--niebla);
  color: var(--grafito);
  font: 400 17px/1.5 var(--font);
  padding-bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom));
}
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
/* No single word stranded on its own line */
h1, h2, h3, blockquote, .svc-list a span:first-child { text-wrap: balance; }
p, li, dt, dd { text-wrap: pretty; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--botella); }
a:hover { color: var(--grafito); }
:focus-visible { outline: 3px solid var(--botella); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--menta); }

.skip {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--botella); color: var(--niebla);
  padding: 12px 16px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 8px; color: var(--niebla); }

.wrap { max-width: 1440px; margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  font: 700 17px/1.1 var(--font); text-decoration: none;
  border: 2px solid var(--botella);
}
.btn img { width: 20px; height: 20px; flex: none; }
.btn--wa { background: var(--botella); color: var(--niebla); }
.btn--wa:hover { background: var(--grafito); border-color: var(--grafito); color: var(--niebla); }
.btn--outline { background: transparent; color: var(--botella); }
.btn--outline:hover { background: var(--botella); color: var(--niebla); }
.btn--menta { background: var(--menta); border-color: var(--menta); color: var(--botella); }
.btn--menta:hover { background: var(--niebla); border-color: var(--niebla); color: var(--botella); }
.btn--lg { min-height: 60px; padding: 0 28px; font-size: 19px; }
.btn--lg img { width: 22px; height: 22px; }

.textlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 600 17px/1.2 var(--font); color: var(--botella);
}
.textlink img { width: 18px; height: 18px; flex: none; }

/* ---------- Header ---------- */
.site-header { background: var(--niebla); }
.site-header .wrap {
  min-height: 72px; padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; gap: 12px; align-items: center; text-decoration: none; min-width: 0; margin-right: auto; }
.brand img { width: 24px; height: 31px; flex: none; }
.brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand__name { font: 800 18px/1.05 var(--font); letter-spacing: -.02em; color: var(--botella); }
.brand__role { font: 400 14px/1.1 var(--font); color: var(--grafito); display: none; }
.nav-main, .header-tel, .header-wa { display: none; }
.lang { display: flex; flex: none; }
.lang a {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--botella); color: var(--botella);
  font: 700 15px/1 var(--font); text-decoration: none;
}
.lang a[aria-current="page"] { background: var(--botella); color: var(--niebla); }

@media (min-width: 640px) { .brand__role { display: block; } .brand__name { font-size: 20px; } }
@media (min-width: 1320px) {
  .site-header .wrap { height: 88px; gap: 40px; }
  /* Neither block may shrink below its content, so the name and menu can never overlap */
  .brand { margin-right: 0; flex: none; white-space: nowrap; min-width: max-content; }
  .nav-main {
    flex: 1; min-width: max-content; display: flex; justify-content: safe center; gap: 28px;
    white-space: nowrap; font: 600 15px/1 var(--font);
  }
  .nav-main a { color: var(--grafito); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
  .nav-main a:hover { color: var(--botella); text-decoration: underline; text-underline-offset: 4px; }
  .header-wa { display: inline-flex; }
}
/* Phone number in the header only when there is room for it without crowding the nav */
@media (min-width: 1440px) {
  .header-tel {
    display: flex; align-items: center; min-height: 44px; white-space: nowrap;
    font: 700 17px/1 var(--font); color: var(--botella); text-decoration: none;
  }
}

/* ---------- Sticky header + mega menu ---------- */
[hidden] { display: none !important; }
html { scroll-padding-top: 80px; }
.site-header { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid transparent; }
.site-header.is-stuck, .site-header.is-open { border-bottom-color: var(--botella); }
.menu-btn {
  height: 44px; padding: 0 16px; flex: none; cursor: pointer;
  border: 2px solid var(--botella); background: var(--niebla); color: var(--botella);
  font: 700 15px/1 var(--font);
}
.menu-btn[aria-expanded="true"] { background: var(--botella); color: var(--niebla); }
.nav-mega {
  min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 0; cursor: pointer;
  background: none; border: 0; font: inherit; color: var(--grafito);
}
.nav-mega:hover, .nav-mega[aria-expanded="true"] { color: var(--botella); }
.nav-mega[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 4px; }
.nav-mega svg { transition: transform .15s; }
.nav-mega[aria-expanded="true"] svg { transform: rotate(180deg); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--niebla); border-bottom: 1px solid var(--botella);
  max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
}
.mega__grid {
  max-width: 1440px; margin-inline: auto; display: grid;
  padding: 8px var(--gutter) calc(var(--bar-h) + 40px + env(safe-area-inset-bottom));
}
.mega__col { display: flex; flex-direction: column; min-width: 0; }
.mega__body { display: flex; flex-direction: column; gap: 14px; }
.mega__title { font: 800 26px/1 var(--font); letter-spacing: -.03em; color: var(--botella); }
.mega__sub { font: 700 17px/1.2 var(--font); margin-bottom: 8px; }
.mega__svc { display: grid; gap: 20px; }
.svc-list--sm a, .svc-list--sm span.row { min-height: 48px; font-size: 17px; }
.svc-list small { display: block; font: 400 15px/1.3 var(--font); color: var(--grafito); }
.mega__hours { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: 17px; }
.mega__hours dt { font-weight: 700; }
.mega__pay, .mega__addr { font-size: 17px; }
.map.mega__map { min-height: 0; height: 220px; padding: 0; }
.mega__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mega__btns .btn { flex: 1 1 0; }

/* Mobile and tablet: one list of five rows; Servicios, Cómo llegar and Horario expand in place */
@media (max-width: 1319px) {
  .mega__col--svc .mega__title, .mega__svc .mega__sub, .mega__dup { display: none; }
  /* Horario and Cómo llegar are always open */
  .mega__col--hours, .mega__col--where { gap: 14px; padding-top: 28px; }
  .mega__col--where .mega__body { border-bottom: 0; }
  /* WhatsApp message pinned to the top of the menu while it scrolls */
  .mega__wa {
    position: sticky; top: 0; z-index: 2; margin: -8px calc(-1 * var(--gutter)) 0;
    padding: 14px var(--gutter); background: var(--menta); border-bottom: 1px solid var(--botella);
    display: flex; flex-direction: column; gap: 10px;
  }
  .mega__wa p { font: 500 16px/1.35 var(--font); }
  .mega__wa p span { display: block; font-weight: 700; font-size: 15px; }
  .mega__wa .btn { min-height: 48px; }
  .mega__svc { gap: 0; }
  /* the three lists read as one: a rule under each row only */
  .mega .svc-list li { border-top: 0; border-bottom: 1px solid var(--guarumo); }
  .mega__acc, .mega__link {
    width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 0; border: 0; border-bottom: 1px solid var(--botella); background: none; cursor: pointer;
    font: 700 22px/1.2 var(--font); letter-spacing: -.02em; color: var(--botella); text-decoration: none; text-align: left;
  }
  .mega__acc svg { flex: none; transition: transform .15s; }
  .mega__acc[aria-expanded="true"] svg { transform: rotate(180deg); }
  .mega__acc[aria-expanded="false"] + .mega__body { display: none; }
  .mega__body { padding: 4px 0 24px; border-bottom: 1px solid var(--botella); }
  .mega__link[aria-current="page"] span:first-child { text-decoration: underline; text-underline-offset: 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  .mega:not([hidden]) { animation: mega-in .16s ease-out; }
  @keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }
}
@media (min-width: 760px) and (max-width: 1319px) { .mega__btns .btn { flex: none; } }
/* Desktop: three columns, everything visible, no accordion */
@media (min-width: 1320px) {
  html { scroll-padding-top: 96px; }
  .menu-btn, .mega__acc, .mega__link, .mega__both, .mega__wa { display: none; }
  .mega { max-height: calc(100dvh - 88px); }
  .mega__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 4fr);
    grid-template-areas: "svc hours where"; gap: 48px; padding: 40px var(--gutter) 48px;
  }
  .mega__col { gap: 14px; }
  .mega__col--svc { grid-area: svc; }
  .mega__col--hours { grid-area: hours; }
  .mega__col--where { grid-area: where; }
  .mega__col--hours, .mega__col--where { border-left: 1px solid var(--guarumo); padding-left: 48px; }
  .mega__svc { grid-template-columns: 1fr 1fr; }
  .mega__btns .btn { flex: none; }
}

/* ---------- Placeholder image box (until the client provides a photo) ---------- */
.ph {
  background: var(--niebla); border: 2px dashed var(--guarumo);
  padding: 18px; display: flex; align-items: flex-end;
  font: 500 16px/1.35 var(--font); color: var(--grafito);
}

/* ---------- Hero ---------- */
.hero { display: grid; }
.hero__copy {
  background: var(--menta);
  padding: 48px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 18px;
}
.hero h1 {
  font: 800 clamp(64px, 17vw, 136px)/.86 var(--font);
  letter-spacing: -.055em; color: var(--grafito);
}
.hero__who { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.hero__name { font: 600 clamp(24px, 4vw, 30px)/1.1 var(--font); letter-spacing: -.015em; }
.hero__role { font: 500 18px/1.3 var(--font); }
.hero__lead { font: 400 clamp(20px, 3vw, 26px)/1.3 var(--font); letter-spacing: -.01em; max-width: 470px; text-wrap: pretty; }
.hero__spacer { flex: 1; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 8px; }
.hero__cta p { font: 400 18px/1.3 var(--font); }
.hero__media img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }

/* Desktop: the hero fills the screen under the header, and the type and spacing scale with the
   window height, so the WhatsApp button is visible on load even on short laptop screens. */
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1fr; height: calc(100svh - 72px); min-height: 520px; max-height: 960px; }
  .hero__copy { padding: clamp(28px, 7vh, 88px) 64px clamp(28px, 6vh, 64px) var(--gutter); gap: clamp(10px, 2.2vh, 22px); }
  .hero h1 { font-size: clamp(64px, min(9.5vw, 15vh), 136px); }
  .hero__who { margin-top: 0; }
  .hero__name { font-size: clamp(22px, 3.4vh, 30px); }
  .hero__role { font-size: clamp(16px, 2.2vh, 18px); }
  .hero__lead { font-size: clamp(18px, 2.9vh, 26px); max-width: 30ch; }
  .hero__media { min-height: 0; }
  .hero__media picture { display: block; height: 100%; }
  .hero__media img { aspect-ratio: auto; height: 100%; }
}
@media (min-width: 1320px) { .hero { height: calc(100svh - 88px); } }

/* ---------- Section headings ---------- */
.h2-big { font: 800 clamp(40px, 7vw, 56px)/.95 var(--font); letter-spacing: -.045em; color: var(--botella); }
.h2-small { font: 700 22px/1 var(--font); }

/* ---------- Servicios ---------- */
.services { padding: 72px var(--gutter); display: grid; gap: 40px; }
.services__intro { display: flex; flex-direction: column; gap: 14px; }
.services__intro p { font-size: 19px; max-width: 46ch; }
.services .h2-big { font-size: clamp(48px, 7vw, 88px); }
.services__groups { display: grid; gap: 40px; }
.services__group { display: flex; flex-direction: column; gap: 14px; }
.services__group h3 { font: 800 clamp(32px, 3.4vw, 40px)/1 var(--font); letter-spacing: -.035em; color: var(--grafito); }
.services__age { font-size: 18px; }
.svc-list li { border-top: 1px solid var(--guarumo); }
.svc-list li:last-child { border-bottom: 1px solid var(--guarumo); }
.svc-list a, .svc-list span.row {
  min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font: 600 19px/1.25 var(--font); color: var(--botella); text-decoration: none;
}
.svc-list a:hover { color: var(--grafito); }
.svc-list span.row { color: var(--grafito); font-weight: 500; }

/* Home services: a dark rule over each list, one rule under each row */
.services .svc-list { margin-top: 10px; }
.services .svc-list li { border-top: 0; border-bottom: 1px solid var(--guarumo); }
.services .svc-list li:first-child { border-top: 2px solid var(--botella); }
.services .svc-list a, .services .svc-list span.row { min-height: 80px; padding-block: 12px; }
.services .textlink { margin-top: 18px; }
/* Children: Menta panel, WhatsApp link pinned to the bottom */
.services__group:last-child { background: var(--menta); padding: 32px clamp(20px, 3vw, 40px); }
.services__group:last-child .textlink { margin-top: auto; padding-top: 24px; }

@media (min-width: 760px) {
  /* Adults in two columns: 4 rows on the left, 5 on the right, rows aligned across */
  .services__group:first-child .svc-list { display: grid; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto); column-gap: 44px; align-items: stretch; }
  .services__group:first-child .svc-list li:nth-child(-n+4) { grid-column: 1; }
  .services__group:first-child .svc-list li:nth-child(n+5) { grid-column: 2; }
  .services__group:first-child .svc-list li:nth-child(5) { border-top: 2px solid var(--botella); }
  .services__group:first-child .svc-list a, .services__group:first-child .svc-list span.row { height: 100%; }
}
@media (min-width: 1100px) {
  .services { padding: 112px var(--gutter) 112px; gap: 56px; }
  .services__intro { display: grid; grid-template-columns: 5fr 5fr auto; align-items: end; column-gap: 48px; }
  .services__intro p { padding-bottom: 8px; }
  .services__intro .section-more { padding-bottom: 4px; }
  .services__groups { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 28px; align-items: stretch; }
  .services__group:first-child { padding-right: 0; }
}

/* ---------- Sobre la doctora ---------- */
.about { background: var(--botella); color: var(--niebla); }
.about .wrap { padding: 72px var(--gutter); display: grid; gap: 40px; }
.about__photo img { width: 100%; max-width: 420px; aspect-ratio: 9 / 10; object-fit: cover; }
.about__copy { display: flex; flex-direction: column; gap: 24px; }
.about .h2-small { color: var(--menta); }
.about__quote { font: 500 clamp(28px, 4.4vw, 44px)/1.15 var(--font); letter-spacing: -.025em; color: var(--niebla); max-width: 760px; text-wrap: pretty; }
.about__bio { font-size: 19px; color: var(--menta); max-width: 620px; }
.about__story { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.about__story p { font-size: 19px; color: var(--niebla); }

@media (min-width: 900px) {
  .about .wrap { padding: 104px var(--gutter); grid-template-columns: 4fr 8fr; gap: 64px; align-items: end; }
  .about__photo img { max-width: none; height: 460px; aspect-ratio: auto; }
  .about__copy { gap: 28px; padding-bottom: 8px; }
}

/* ---------- Cómo llegar ---------- */
.directions { background: var(--menta); }
.directions .wrap { padding: 72px var(--gutter) 64px; display: flex; flex-direction: column; gap: 40px; }
.directions__top { display: grid; gap: 32px; }
.directions__head { display: flex; flex-direction: column; gap: 16px; }
.directions__city { font: 500 clamp(24px, 3vw, 30px)/1 var(--font); }
.directions__big {
  font: 800 clamp(58px, 15vw, 118px)/.84 var(--font);
  letter-spacing: -.06em; color: var(--botella);
}
.directions__info { display: flex; flex-direction: column; gap: 18px; }
.directions__office { font: 600 24px/1.25 var(--font); }
.directions__info h3 { font: 700 19px/1.2 var(--font); }
.directions__info p { font-size: 18px; }
.directions__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.directions__media { display: grid; gap: 16px; }
.directions__media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; object-position: 50% 60%; aspect-ratio: 4 / 3; }
.map {
  position: relative; background: var(--niebla); border: 1px solid var(--botella);
  min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  padding: 20px;
}
.map p { font-size: 17px; max-width: 40ch; }
.map .btn { align-self: flex-start; }
.map .map__canvas { position: absolute; inset: 0; background: var(--niebla); } /* beats .maplibregl-map { position: relative } */
.map--js > .btn { visibility: hidden; }
/* Brand overrides for MapLibre's own controls (§5, §14) */
.map .maplibregl-ctrl-group, .map .maplibregl-ctrl-attrib, .map .maplibregl-ctrl-attrib-button,
.map .maplibregl-ctrl button { border-radius: 0; box-shadow: none; }
.map .maplibregl-ctrl-group { border: 1px solid var(--botella); background: var(--niebla); }
.map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
.map .maplibregl-ctrl-group button + button { border-top: 1px solid var(--botella); }
/* Full screen: real Fullscreen API, or MapLibre's fallback where it is missing (iPhone Safari) */
.map .map__canvas.maplibregl-pseudo-fullscreen { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 200; }
.map .maplibregl-cooperative-gesture-screen { background: var(--botella); color: var(--niebla); font: 500 17px/1.3 var(--font); }
.map-pin { display: flex; flex-direction: column; align-items: center; }
.map-pin__label {
  background: var(--botella); color: var(--niebla); padding: 12px 16px;
  display: flex; gap: 12px; align-items: center; font: 400 15px/1.25 var(--font); white-space: nowrap;
}
.map .map-pin__label img { width: 34px; height: 34px; min-height: 0; display: block; }
.map-pin__label span { display: flex; flex-direction: column; gap: 2px; }
.map-pin__label strong { font-weight: 800; color: var(--menta); }
.map-pin__arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid var(--botella); }
.map-pin__dot { width: 14px; height: 14px; background: var(--botella); border: 3px solid var(--niebla); margin-top: 2px; }

@media (min-width: 900px) {
  .directions .wrap { padding: 104px var(--gutter) 96px; gap: 56px; }
  .directions__top { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: end; }
  .directions__info { padding-bottom: 10px; }
  .directions__media { grid-template-columns: 5fr 7fr; height: 400px; }
  .directions__media picture { height: 100%; min-height: 0; }
  .directions__media img { aspect-ratio: auto; }
  .map { min-height: 0; }
}

/* ---------- Horario y pagos ---------- */
.hours { padding: 72px var(--gutter); display: grid; gap: 40px; }
.hours__main { display: flex; flex-direction: column; gap: 32px; }
.hours dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; font: 400 20px/1.35 var(--font); }
.hours dt { font-weight: 700; }
.hours dd + dt { margin-top: 14px; }
.hours__pay { background: var(--menta); padding: 28px; display: flex; flex-direction: column; gap: 16px; font-size: 19px; align-self: end; }
.hours__pay strong { font-weight: 700; }

@media (min-width: 640px) {
  .hours dl { grid-template-columns: 220px minmax(0, 1fr); gap: 18px 24px; }
  .hours dd + dt { margin-top: 0; }
}
@media (min-width: 1000px) {
  .hours { padding: 112px var(--gutter) 96px; grid-template-columns: 7fr 5fr; gap: 80px; }
  .hours__pay { padding: 32px; }
}

/* ---------- Artículos ---------- */
.articles { padding: 16px var(--gutter) 88px; display: flex; flex-direction: column; gap: 40px; }
.articles__head { display: flex; flex-direction: column; gap: 10px; }
.articles__head p { font-size: 19px; max-width: 560px; text-wrap: pretty; }
.articles__grid { display: grid; gap: 48px; align-items: start; }
.art-feat { display: flex; flex-direction: column; gap: 16px; }
.art-feat img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.art-topic { font: 500 17px/1.3 var(--font); }
.art-feat h3 { font: 800 clamp(30px, 4vw, 40px)/1.02 var(--font); letter-spacing: -.035em; max-width: 680px; }
.art-feat p.sum { font-size: 19px; max-width: 640px; }
.art-list { display: flex; flex-direction: column; gap: 28px; }
.art-sm {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start;
  padding-bottom: 28px; border-bottom: 1px solid var(--guarumo);
}
.art-sm img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.art-sm div { display: flex; flex-direction: column; gap: 8px; }
.art-sm .art-topic { font-size: 16px; }
.art-sm h3 { font: 700 21px/1.15 var(--font); letter-spacing: -.02em; }

@media (min-width: 640px) { .art-sm { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } .art-sm h3 { font-size: 24px; } }
@media (min-width: 1000px) {
  .articles { padding: 16px var(--gutter) 112px; }
  .articles__grid { grid-template-columns: 7fr 5fr; gap: 56px; }
  .art-feat img { aspect-ratio: auto; height: 420px; }
  .art-sm img { aspect-ratio: auto; height: 150px; }
}

/* ---------- Service page ---------- */
.svc-hero { display: grid; }
.svc-hero__copy { background: var(--menta); padding: 48px var(--gutter) 40px; display: flex; flex-direction: column; gap: 20px; }
.svc-hero h1 { font: 800 clamp(40px, 8vw, 72px)/.95 var(--font); letter-spacing: -.045em; }
.svc-hero__lead { font: 400 clamp(18px, 2vw, 20px)/1.45 var(--font); max-width: 40ch; }
.svc-hero__media img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) {
  .svc-hero { grid-template-columns: 6fr 6fr; min-height: 560px; }
  .svc-hero__copy { padding: 72px 64px 56px var(--gutter); justify-content: flex-end; }
  .svc-hero__media img { aspect-ratio: auto; }
}

.svc-body { padding: 72px var(--gutter); display: grid; gap: 48px; }
.svc-body__main { display: flex; flex-direction: column; gap: 48px; max-width: 70ch; }
.svc-body section { display: flex; flex-direction: column; gap: 14px; }
.svc-body h2 { font: 800 clamp(30px, 4vw, 40px)/1 var(--font); letter-spacing: -.035em; color: var(--botella); }
.svc-body p, .svc-body li { font-size: 18px; }
.svc-body ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 10px; }
ul.dash li { padding-left: 22px; position: relative; }
ul.dash li + li { margin-top: 10px; }
ul.dash li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--botella); }
/* Price tables: group heading over a Verde botella rule, name left, price right */
.prices { display: flex; flex-direction: column; margin-block: 6px 4px; }
.prices__group {
  font: 700 22px/1.2 var(--font); letter-spacing: -.02em; color: var(--grafito);
  padding-bottom: 14px; border-bottom: 2px solid var(--botella);
}
.prices__list + .prices__group { margin-top: 36px; }
.prices__list div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--guarumo); font-size: 18px; line-height: 1.35;
}
.prices__list dd { font-weight: 800; color: var(--botella); white-space: nowrap; text-align: right; }
/* Phones: a price range stacks on two lines so the treatment name keeps its width */
@media (max-width: 639px) { .prices__list dd .nw { display: block; } }
.reviewed { font-size: 16px; border-top: 1px solid var(--grafito); padding-top: 16px; }
.svc-aside { display: flex; flex-direction: column; gap: 32px; align-self: start; }
.svc-aside figure img { width: 100%; }
.svc-aside figcaption { font-size: 15px; margin-top: 8px; }
.svc-aside h2 { font: 700 22px/1.1 var(--font); color: var(--grafito); letter-spacing: 0; }
.svc-aside .svc-list a { font-size: 18px; }
@media (min-width: 1000px) {
  .svc-body { padding: 104px var(--gutter); grid-template-columns: 7fr 4fr; gap: 80px; }
  .svc-aside { position: sticky; top: 24px; }
}

.msg { background: var(--menta); }
.msg .wrap { padding: 72px var(--gutter); display: grid; gap: 28px; }
.msg h2 { font: 800 clamp(36px, 6vw, 56px)/.95 var(--font); letter-spacing: -.045em; color: var(--botella); }
.msg blockquote {
  margin: 0; background: var(--niebla); border-left: 4px solid var(--botella);
  padding: 20px 24px; font: 500 clamp(20px, 2.6vw, 26px)/1.35 var(--font); max-width: 34ch;
}
.msg__actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
@media (min-width: 900px) {
  .msg .wrap { padding: 96px var(--gutter); grid-template-columns: 5fr 7fr; gap: 48px; align-items: end; }
  .msg__right { display: flex; flex-direction: column; gap: 24px; }
}

/* ---------- Section pages (servicios, sobre la doctora, contacto, horario, artículos) ---------- */
.nav-main a[aria-current="page"] { color: var(--botella); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.page-head { background: var(--menta); padding: 48px var(--gutter) 48px; display: flex; flex-direction: column; gap: 20px; }
.page-head h1, .page-h1 { font: 800 clamp(40px, 7vw, 72px)/.95 var(--font); letter-spacing: -.045em; color: var(--grafito); max-width: 16ch; }
.page-head__lead { font: 400 clamp(18px, 2vw, 20px)/1.45 var(--font); max-width: 50ch; }
@media (min-width: 900px) { .page-head { padding: 88px var(--gutter) 72px; gap: 28px; } }
.h3 { font: 700 28px/1 var(--font); letter-spacing: -.02em; color: var(--grafito); }
.h3-sm { font: 700 19px/1.2 var(--font); color: var(--grafito); }

.services--page { display: flex; flex-direction: column; gap: 32px; }
.services__note { font-size: 18px; max-width: 60ch; }

.about--page .about__h1 { font: 800 clamp(40px, 6vw, 72px)/.95 var(--font); letter-spacing: -.045em; color: var(--niebla); }
.about--page .about__quote { font-size: clamp(24px, 3vw, 32px); }

.facts { padding: 72px var(--gutter); display: grid; gap: 48px; }
.facts__list { display: flex; flex-direction: column; margin: 0; }
.facts__list > div { border-top: 1px solid var(--guarumo); padding: 20px 0; display: grid; gap: 6px; }
.facts__list > div:last-child { border-bottom: 1px solid var(--guarumo); }
.facts__list dt { font: 700 19px/1.2 var(--font); color: var(--botella); }
.facts__list dd { font-size: 18px; }
.facts__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 640px) { .facts__list > div { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; } }
@media (min-width: 1000px) { .facts { padding: 104px var(--gutter); grid-template-columns: 7fr 5fr; gap: 80px; align-items: start; } }

.directions--page .wrap { padding-top: 48px; }
.directions--page .page-h1 { max-width: 18ch; font-size: clamp(36px, 6vw, 64px); }
.directions__note { font-size: 18px; max-width: 46ch; }
@media (min-width: 900px) { .directions--page .wrap { padding-top: 88px; } }

.contact-block { padding: 72px var(--gutter); display: grid; gap: 40px; }
.contact-block > div { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.contact-block > div p { font-size: 19px; max-width: 42ch; }
.contact-block__list { font-style: normal; display: flex; flex-direction: column; }
.contact-block__list div { border-top: 1px solid var(--guarumo); padding: 14px 0; display: flex; flex-direction: column; }
.contact-block__list div:last-child { border-bottom: 1px solid var(--guarumo); }
.contact-block__list span { font-size: 16px; }
.contact-block__list a { display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; font: 700 22px/1.2 var(--font); text-decoration: none; }
.contact-block__list a.mail { font-size: 18px; font-weight: 500; word-break: break-all; }
@media (min-width: 1000px) { .contact-block { padding: 104px var(--gutter); grid-template-columns: 6fr 6fr; gap: 80px; align-items: end; } }

.hours--page { padding-bottom: 32px; }
.steps { padding: 32px var(--gutter) 88px; display: flex; flex-direction: column; gap: 28px; }
.steps ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 0; max-width: 760px; }
.steps li { counter-increment: s; border-top: 1px solid var(--guarumo); padding: 20px 0 20px 56px; position: relative; font-size: 19px; }
.steps li:last-child { border-bottom: 1px solid var(--guarumo); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 14px; font: 800 32px/1 var(--font); color: var(--botella); }

.art-grid { padding: 64px var(--gutter) 88px; display: grid; gap: 48px 32px; }
.art-card { display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--guarumo); padding-bottom: 28px; }
.art-card img, .art-card .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.art-card h2 { font: 700 24px/1.15 var(--font); letter-spacing: -.02em; }
.art-card p:last-child { font-size: 18px; }
@media (min-width: 700px) { .art-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .art-grid { grid-template-columns: 1fr 1fr 1fr; padding: 88px var(--gutter) 112px; } }

.section-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 18px/1.2 var(--font); color: var(--botella); }
.about .section-more { color: var(--menta); }

/* ---------- 404 ---------- */
.notfound { background: var(--menta); padding: 80px var(--gutter); display: flex; flex-direction: column; gap: 24px; }
.notfound h1 { font: 800 clamp(40px, 8vw, 72px)/.95 var(--font); letter-spacing: -.045em; }
.notfound p { font-size: 19px; max-width: 46ch; }
.notfound ul { display: flex; flex-direction: column; gap: 4px; }
.notfound ul a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; font-size: 18px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--botella); color: var(--niebla); }
.site-footer .wrap { padding: 64px var(--gutter) 32px; display: flex; flex-direction: column; gap: 56px; }
.foot__grid { display: grid; gap: 48px; }
.foot__brand { display: flex; flex-direction: column; gap: 20px; }
.foot__id { display: flex; align-items: center; gap: 18px; }
.foot__id img { width: 64px; height: 64px; flex: none; }
.foot__name { font: 800 28px/1.02 var(--font); letter-spacing: -.035em; color: var(--menta); }
.foot__about { display: flex; flex-direction: column; gap: 6px; font-size: 18px; line-height: 1.4; }
.foot__cred { color: var(--niebla); }
.foot__pat { color: var(--menta); }
.foot__brand .btn { align-self: flex-start; min-height: 56px; padding: 0 24px; font-size: 18px; }
.foot__cols { display: grid; gap: 32px; }
.foot__col { border-top: 1px solid var(--guarumo); padding-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.foot__col h2 { font: 700 17px/1.2 var(--font); color: var(--menta); }
.site-footer address { font-style: normal; display: flex; flex-direction: column; gap: 12px; }
.site-footer address div { display: flex; flex-direction: column; }
.foot__label { font-size: 16px; line-height: 1.3; color: var(--menta); }
.site-footer address a {
  display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start;
  font: 700 18px/1.2 var(--font); color: var(--niebla); text-decoration: none;
}
.site-footer address a:hover, .foot__lang a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer address a.foot__mail { font-size: 17px; font-weight: 400; white-space: nowrap; }
.foot__addr { font-size: 18px; line-height: 1.45; color: var(--niebla); }
.nw { white-space: nowrap; }
.foot__maps {
  display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start;
  font: 600 17px/1.2 var(--font); color: var(--menta);
}
.foot__maps:hover { color: var(--niebla); }
.foot__val { font-size: 18px; color: var(--niebla); }
.foot__bar {
  border-top: 1px solid var(--guarumo); padding-top: 22px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
  font-size: 15px; color: var(--menta);
}
.foot__lang { display: flex; gap: 20px; }
.foot__lang a { display: inline-flex; align-items: center; min-height: 44px; color: var(--menta); text-decoration: none; }
.foot__lang a[aria-current="page"] { color: var(--niebla); font-weight: 700; }
@media (min-width: 1024px) {
  .site-footer .wrap { padding: 88px 48px 36px; gap: 72px; }
  .foot__grid { gap: 56px; align-items: start; }
  .foot__cred { white-space: nowrap; }
  .foot__cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(0, .75fr); }
}
/* 1024–1279: brand above the three columns, so the one-line email fits its column */
/* 1280–1439: brand only as wide as the credential line, giving the columns the rest */
@media (min-width: 1280px) { .foot__grid { grid-template-columns: max-content minmax(0, 1fr); } }
@media (min-width: 1440px) { .foot__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

/* ---------- Sticky mobile bar (§6) ---------- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; /* above the sticky header and its menu */
  display: grid; grid-template-columns: 3fr 2fr; gap: 8px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--niebla); border-top: 1px solid var(--botella);
}
.mbar .btn { min-height: var(--bar-h); padding: 0 12px; font-size: 18px; }
.mbar .btn--outline { background: var(--niebla); }
/* Desktop: the same bar becomes a fixed square WhatsApp button, bottom right.
   Niebla border keeps it visible on Verde botella sections. Llamar stays in the header. */
@media (min-width: 1320px) {
  body { padding-bottom: 0; }
  .mbar {
    left: auto; right: 32px; bottom: 32px; display: block;
    padding: 0; background: none; border: 0;
  }
  .mbar .btn--outline { display: none; }
  .mbar .btn--wa { min-height: 60px; padding: 0 28px; font-size: 19px; border-color: var(--niebla); }
  .mbar .btn--wa img { width: 22px; height: 22px; }
  /* room under the footer so the button never covers the language links */
  .site-footer .wrap { padding-bottom: 128px; }
}