:root {
  color-scheme: light;
  --paper: #f8f6f1;
  --white: #fffefa;
  --ink: #1e3532;
  --muted: #4c625c;
  --teal: #22534b;
  --line: #dddeda;
  --sand: #b58d61;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --width: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.65 var(--sans); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font: 400 1rem/1.08 var(--serif); }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 3px solid #b47b3e; outline-offset: 4px; }
section[id] { scroll-margin-top: 108px; }
.wrap { width: min(var(--width), calc(100% - 88px)); margin-inline: auto; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico.wa { width: 1.27rem; height: 1.27rem; stroke: none; }
.skip { position: fixed; top: -100px; left: 20px; z-index: 6; padding: 12px; background: white; }
.skip:focus { top: 12px; }

.header { position: sticky; top: 0; z-index: 4; background: #faf7f3; border-bottom: 1px solid #e6e2da; }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { width: 240px; display: block; flex: 0 0 auto; }
.brand img { mix-blend-mode: multiply; }
.nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 39px); color: var(--muted); font-size: .89rem; font-weight: 590; }
.nav a { padding: 10px 0; }
.nav a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 5px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 21px; min-height: 52px; color: white; background: var(--teal); border: 1px solid transparent; border-radius: 8px; font-size: .92rem; font-weight: 680; line-height: 1.35; text-align: center; transition: background .2s ease, color .2s ease; }
.button:hover { background: #193e37; }
.button-small { padding: 10px 15px; min-height: 43px; font-size: .81rem; }
.button-outline { color: var(--teal); border-color: #a9b6ac; background: transparent; }
.button-outline:hover { color: white; }

.hero { background: radial-gradient(ellipse at 88% 24%, #e9e8e0, transparent 59%), var(--paper); padding-block: 43px 50px; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(32px, 6vw, 94px); }
.hero-copy { padding-block: 27px; }
.eyebrow { display: flex; align-items: center; gap: 11px; color: var(--teal); font-size: .72rem; font-weight: 750; letter-spacing: .14em; line-height: 1.45; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 25px; height: 1px; flex: 0 0 auto; background: var(--sand); }
h1 { max-width: 650px; margin-top: 21px; font-size: clamp(3.05rem, 5.5vw, 5.25rem); line-height: 1.01; letter-spacing: -.064em; }
h1 em { color: #3f6961; font-weight: inherit; }
.hero-text { color: var(--muted); max-width: 470px; margin-top: 23px; font-size: clamp(1rem, 1.4vw, 1.12rem); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 22px; margin-top: 29px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; width: fit-content; color: var(--teal); font-size: .9rem; font-weight: 700; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link .ico { width: 1rem; height: 1rem; }
.mobile-bio-link { display: none; }
.hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 16px; margin-top: 23px; color: var(--muted); font-size: .83rem; }
.location { display: flex; align-items: center; gap: 8px; }
.hero-number { color: var(--teal); font-weight: 690; white-space: nowrap; }
.hero-number:hover { text-decoration: underline; text-underline-offset: 4px; }
.location .ico { width: 1rem; height: 1rem; color: var(--teal); }
.hero-photo { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #d5d8cd; border-radius: 24px 24px 24px 5px; min-width: 0; height: clamp(460px, 39vw, 535px); background: #d8d9d3; }
.hero-photo img { height: 100%; object-fit: cover; object-position: center 14%; }
.hero-photo figcaption { position: absolute; right: 17px; bottom: 17px; padding: 12px 17px; display: grid; gap: 2px; min-width: 190px; background: #fcfbf6; border-radius: 8px; box-shadow: 0 5px 25px #153b321a; }
.hero-photo figcaption span { font: 1.23rem/1.2 var(--serif); }
.hero-photo figcaption small { color: var(--muted); font-size: .7rem; }

.section-pad { padding-block: clamp(60px, 7vw, 100px); }
.services { background: var(--white); border-block: 1px solid #e8e5dd; }
.section-head { display: grid; align-items: end; grid-template-columns: 1fr .6fr; gap: 25px; margin-bottom: 32px; }
h2 { margin-top: 11px; font-size: clamp(2.35rem, 4vw, 3.55rem); letter-spacing: -.047em; }
.section-head > p { color: var(--muted); max-width: 380px; padding-bottom: 2px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card { background: #f5f7f3; border: 1px solid #e0e7dd; border-radius: 14px; padding: 18px; }
.card--warm { background: #f8f5ee; border-color: #ebe3d5; }
.card-art { margin-bottom: 17px; max-height: 185px; object-fit: contain; border: 1px solid #dce7db; border-radius: 10px; background: #edf3eb; }
.card--warm .card-art { border-color: #ece0ce; background: #f6efe3; }
.card h3 { font-size: clamp(1.48rem, 2.15vw, 1.88rem); letter-spacing: -.032em; }
.card p { color: var(--muted); margin-top: 10px; font-size: .91rem; }
.card details { margin-top: 12px; border-top: 1px solid var(--line); border-bottom: 0; }
.card summary { padding: 10px 0 0; color: var(--teal); font-size: .91rem; }
.card details ul { margin: 8px 0 0; padding-left: 1.15rem; color: var(--muted); font-size: .88rem; }
#cirugia-digestiva-general { scroll-margin-top: 108px; }
@media (min-width: 761px) {
  .card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 164px minmax(0, 1fr); gap: 20px; align-items: center; }
  .card--wide .card-art { margin: 0; }
}

.about { background: #eef0e9; }
.about-grid { display: grid; grid-template-columns: .85fr 1fr; align-items: center; gap: clamp(35px, 8vw, 118px); }
.about-photo { overflow: hidden; height: clamp(310px, 34vw, 434px); border-radius: 20px 5px 20px 20px; }
.about-photo img { height: 100%; object-fit: cover; object-position: center 37%; }
.about-subtitle { margin-top: 8px; color: var(--teal); font-size: .89rem; font-weight: 720; }
.about-bio { display: grid; gap: 12px; max-width: 550px; margin-top: 18px; color: var(--muted); }
.about-intro { color: var(--ink); font-size: 1.04rem; }
.about-bio strong { color: var(--ink); }
.about-registry { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; margin-block: 19px 16px; }
.about-registry > span { padding: 4px 9px; border: 1px solid #cbd8cf; border-radius: 5px; color: var(--teal); font-size: .76rem; font-variant-numeric: tabular-nums; }
.about-registry a { display: inline-flex; align-items: center; gap: 4px; color: var(--teal); font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; }
.about-registry .ico { width: .84rem; height: .84rem; }
.memberships { scroll-margin-top: 104px; margin-top: clamp(30px, 4vw, 48px); padding: 23px 26px 25px; border: 1px solid #d7ded3; border-radius: 12px; background: #f8f9f4; }
.memberships h3 { font-size: 1.5rem; }
.memberships ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 17px 0 0; padding: 0; list-style: none; }
.memberships li { display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 15px; border: 1px solid #e1e6dc; border-radius: 10px; background: var(--white); }
.membership-logo { display: grid; place-items: center; height: 71px; }
.membership-logo img { width: min(100%, 145px); height: 71px; object-fit: contain; }
.memberships .membership-text-only { grid-template-rows: auto; align-content: center; }
.membership-info { display: flex; flex-direction: column; gap: 5px; }
.membership-info strong { color: var(--teal); font-size: .88rem; line-height: 1.4; }
.membership-info p, .membership-info span { color: var(--muted); font-size: .8rem; line-height: 1.5; }
.membership-info span { padding-top: 4px; font-size: .75rem; font-weight: 650; }
.membership-info a { display: inline-flex; align-items: center; gap: 4px; width: fit-content; color: var(--teal); font-size: .75rem; text-decoration: underline; text-underline-offset: 3px; }
.membership-info .ico { width: .8rem; height: .8rem; }

.faq { background: var(--white); }
.faq-grid { display: grid; grid-template-columns: .85fr 1fr; gap: 35px; }
.questions { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; padding: 17px 3px; font-size: .97rem; font-weight: 700; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 1.32rem; font-weight: 400; line-height: 1; color: var(--teal); }
details[open] summary::after { content: '−'; }
details p { margin: -2px 24px 17px 3px; color: var(--muted); font-size: .92rem; }

.contact { padding-block: 55px; color: #fffef9; background: #254e46; }
.contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.contact .eyebrow { color: #e0eade; }
.contact .eyebrow span { background: #d1af81; }
.contact p:not(.eyebrow) { color: #e5ece4; margin-top: 10px; }
.button-light { background: #fbf8ef; color: #264e47; }
.button-light:hover { background: #e7efe5; }
.button-light .diagonal { width: .95rem; height: .95rem; }
.contact-number { text-align: center; font-size: .9rem; font-variant-numeric: tabular-nums; }
.footer { background: #faf7f3; color: var(--muted); }
.footer-inner { min-height: 95px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-block: 22px; padding-right: 142px; }
.footer .brand { width: 202px; }
.footer p { font-size: .82rem; }
.footer-brand p { margin-top: 5px; }
.social-nav p { margin-bottom: 6px; color: var(--ink); font-weight: 700; }
.social-nav ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.social-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 11px; border: 1px solid #dedfd5; border-radius: 7px; color: var(--teal); font-size: .82rem; font-weight: 650; }
.social-nav a:hover { background: #edf1e9; }
.social-nav .ico { width: 1rem; height: 1rem; }
.floating { position: fixed; z-index: 3; right: max(21px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); min-height: 49px; display: flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid #ffffff30; border-radius: 999px; color: white; background: #176640; box-shadow: 0 5px 19px #17352d40; font-size: .83rem; font-weight: 700; transition: background .2s ease; }
.floating:hover { background: #114d31; }
.floating .ico { width: 1.42rem; height: 1.42rem; }

@media (max-width: 1199px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .wrap { width: calc(100% - 56px); }
  .brand { width: 210px; }
  .hero-grid { gap: 30px; }
  .desktop-br { display: none; }
  .memberships ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 36px); }
  section[id] { scroll-margin-top: 72px; }
  .header-inner { min-height: 66px; gap: 10px; }
  .brand { width: min(45vw, 205px); }
  .nav { display: none; }
  .button-small { padding-inline: 10px; font-size: .77rem; }
  .header-cta { white-space: nowrap; }
  .header-cta .ico { width: 1rem; height: 1rem; }
  .hero { padding-block: 26px 30px; }
  .hero-grid { grid-template-columns: 1fr; gap: 23px; }
  .hero-copy { padding: 8px 0 0; }
  h1 { font-size: clamp(2.8rem, 8.9vw, 4.25rem); margin-top: 13px; }
  .hero-text { margin-top: 15px; }
  .actions { margin-top: 20px; gap: 12px 17px; }
  .mobile-bio-link { display: inline-flex; }
  .hero-meta { margin-top: 16px; }
  .hero-photo { height: clamp(320px, 75vw, 485px); border-radius: 17px 17px 17px 4px; }
  .hero-photo img { object-position: center 19%; }
  .hero-photo figcaption { right: auto; left: 10px; bottom: 10px; padding: 8px 12px; min-width: 0; }
  .hero-photo figcaption span { font-size: 1.08rem; }
  .section-head, .faq-grid { grid-template-columns: 1fr; gap: 14px; }
  .section-head { margin-bottom: 20px; }
  .cards { grid-template-columns: 1fr; gap: 11px; }
  .card { padding: 17px; }
  .card-art { margin-bottom: 14px; }
  .about-grid { grid-template-columns: 1fr; gap: 25px; }
  .about-photo { grid-row: 2; height: clamp(275px, 60vw, 390px); }
  .memberships { padding: 17px; }
  .memberships ul { gap: 14px; }
  .contact { padding-block: 43px; }
  .contact-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .contact-number { text-align: left; }
  .footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; gap: 15px; padding-right: 68px; padding-block: 17px; }
  .footer .brand { width: min(58vw, 195px); }
  .floating { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); justify-content: center; width: 49px; padding: 0; }
  .floating span { display: none; }
}
@media (max-width: 520px) {
  .memberships ul { grid-template-columns: 1fr; gap: 8px; }
  .memberships li { grid-template-columns: 76px 1fr; grid-template-rows: auto; gap: 11px; padding: 12px; }
  .memberships .membership-text-only { grid-template-columns: 1fr; }
  .membership-logo, .membership-logo img { height: 58px; }
}
@media (max-width: 350px) {
  .wrap { width: calc(100% - 28px); }
  .actions .button { padding-inline: 13px; }
  .header-cta { font-size: .69rem; }
  .header-cta .ico { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}