:root {
  --primary: #0d5364;
  --on-primary: #ffffff;
  --primary-container: #d8f1f6;
  --secondary: #4b7f8b;
  --tertiary: #d7b36a;
  --surface: #fbf9f4;
  --surface-container-low: #ffffff;
  --surface-container: #eef9fb;
  --surface-container-high: #dff2f6;
  --on-surface: #15353c;
  --on-surface-variant: #60747a;
  --outline: rgba(13, 83, 100, 0.18);
  --shadow: 0 24px 70px rgba(18, 57, 66, 0.16);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 32px;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Montserrat", Arial, sans-serif;
  --container: 1690px; /* base de referencia 1920: contenido ~1690px; en pantallas <=1440 gobierna 100% - 40px */
  --header-height: 128px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--on-surface);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: geometricPrecision;
}

body.nav-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--on-primary);
  background: var(--primary);
  transform: translateY(-140%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 249, 244, 0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(251, 249, 244, 0.96);
  border-color: var(--outline);
  box-shadow: 0 10px 40px rgba(18, 57, 66, 0.08);
}

.topbar {
  color: var(--on-primary);
  background: #0a4050;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.topbar__inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.topbar__address {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.topbar__social {
  display: flex;
  gap: 8px;
}

.topbar__social a {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 10px;
  transition: background 180ms ease, transform 180ms ease;
}

.topbar__social a:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.main-nav {
  background: linear-gradient(180deg, #edf9fb 0%, #e5f5f8 100%);
}

.main-nav__inner {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.brand__mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--primary);
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 40%, transparent 41%),
    conic-gradient(from 25deg, #0d5364, #7cc4cf, #0d5364);
  font-family: var(--font-display);
  font-size: 33px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 14px 32px rgba(13, 83, 100, 0.18);
}

.brand__text {
  display: grid;
  line-height: 1;
  text-transform: uppercase;
}

.brand__text strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.brand__text small {
  margin-top: 7px;
  color: var(--secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.42em;
}

.main-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.main-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  color: #254c55;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}

.main-menu a:hover,
.main-menu a:focus-visible,
.main-menu a.is-active {
  color: var(--on-primary);
  background: var(--primary);
  outline: none;
}

.nav-toggle {
  display: none;
}

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-height));
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 22%, rgba(215, 179, 106, 0.2), transparent 22%),
    linear-gradient(120deg, rgba(8, 51, 64, 0.94), rgba(12, 78, 94, 0.84));
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media::before,
.hero__media::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(223, 242, 246, 0.11);
}

.hero__media::before {
  width: 520px;
  height: 520px;
  right: 3%;
  top: 9%;
}

.hero__media::after {
  width: 300px;
  height: 300px;
  right: 18%;
  bottom: -80px;
}

.hero__portrait {
  position: absolute;
  right: max(0px, calc((100vw - var(--container)) / 2));
  bottom: 0;
  width: min(43vw, 540px);
  height: 92%;
  background:
    linear-gradient(180deg, rgba(8, 51, 64, 0) 45%, rgba(8, 51, 64, 0.9)),
    radial-gradient(ellipse at 50% 24%, rgba(255, 255, 255, 0.7) 0 7%, transparent 8%),
    linear-gradient(160deg, transparent 0 38%, rgba(246, 240, 226, 0.86) 39% 72%, transparent 73%),
    linear-gradient(145deg, transparent 0 26%, rgba(90, 128, 135, 0.46) 27% 62%, transparent 63%);
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
  opacity: 0.86;
}

.hero__grid {
  min-height: calc(100svh - var(--header-height));
  display: grid;
  grid-template-columns: minmax(0, 650px) 1fr;
  align-items: center;
  gap: 48px;
  padding-block: 92px;
}

.section-dark {
  color: var(--on-primary);
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--tertiary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 720px;
  margin-bottom: 26px;
  font-size: clamp(58px, 7vw, 106px);
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(42px, 5.2vw, 78px);
}

h3 {
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 1.2;
}

.hero__lead {
  max-width: 590px;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 3px solid rgba(215, 179, 106, 0.5);
  outline-offset: 3px;
}

.btn--primary {
  color: #103f49;
  background: linear-gradient(135deg, #f4d486, var(--tertiary));
  box-shadow: 0 18px 45px rgba(215, 179, 106, 0.24);
}

.btn--ghost {
  color: var(--on-primary);
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(255, 255, 255, 0.08);
}

.hero__credential {
  justify-self: end;
  align-self: end;
  max-width: 245px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
}

.hero__credential p {
  margin-bottom: 8px;
  color: var(--tertiary);
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 700;
  line-height: 0.9;
}

.hero__credential span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 600;
}

.trust-strip {
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline);
}

.trust-strip__inner {
  min-height: 104px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 18px;
}

.trust-strip span {
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  color: var(--secondary);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-align: center;
  text-transform: uppercase;
}

.section-soft {
  background: linear-gradient(180deg, var(--surface-container) 0%, var(--surface) 100%);
}

.approach,
.education,
.services,
.blog-preview,
.consult {
  padding-block: clamp(78px, 9vw, 132px);
}

.approach__grid,
.blog-preview__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(42px, 7vw, 96px);
  align-items: start;
}

.section-kicker {
  position: sticky;
  top: 168px;
}

.section-kicker h2,
.section-heading h2,
.education h2,
.consult h2 {
  color: var(--primary);
}

.approach__content {
  padding: clamp(30px, 5vw, 56px);
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow);
}

.approach__content > p {
  color: var(--on-surface-variant);
  font-size: 18px;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 34px;
}

.metric-row article {
  min-height: 142px;
  padding: 22px;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--on-primary);
}

.metric-row strong {
  display: block;
  margin-bottom: 20px;
  color: var(--tertiary);
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
}

.metric-row span {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
}

.quote-band {
  padding-block: clamp(58px, 7vw, 92px);
  background:
    linear-gradient(90deg, rgba(13, 83, 100, 0.92), rgba(13, 83, 100, 0.74)),
    linear-gradient(135deg, #d9edf1, #ffffff);
}

.quote-band__grid {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 46px;
  align-items: center;
}

.quote-card {
  padding: clamp(34px, 6vw, 72px);
  color: var(--on-primary);
  border-left: 4px solid var(--tertiary);
}

.quote-card p {
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 64px);
  line-height: 1.04;
}

.quote-card span {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
}

.doctor-card {
  min-height: 420px;
  border-radius: 999px 999px 40px 40px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(216, 241, 246, 0.2));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.doctor-card__image,
.education__image {
  width: 100%;
  height: 100%;
  min-height: inherit;
  background:
    radial-gradient(circle at 52% 22%, #f2ddc8 0 8%, transparent 9%),
    linear-gradient(160deg, transparent 0 35%, #ffffff 36% 72%, transparent 73%),
    linear-gradient(145deg, #96c9d1, #0f6070);
  /* ESTO ES LA CLAVE: mezcla la imagen con los colores */
  background-blend-mode: soft-light; /* O prueba con 'multiply' o 'soft-light' */
  background-size: cover;
  background-position: center;
}

.education__grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(42px, 7vw, 92px);
  align-items: center;
}

.education__image {
  min-height: 620px;
  border-radius: 48% 48% var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow);
}

.education__copy p:not(.eyebrow) {
  color: var(--on-surface-variant);
  font-size: 18px;
}

.credential-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 30px 0 0;
  list-style: none;
}

.credential-list li {
  position: relative;
  padding: 18px 18px 18px 48px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  background: #fff;
  font-weight: 700;
}

.credential-list li::before {
  content: "✓";
  position: absolute;
  left: 18px;
  top: 18px;
  color: var(--primary);
  font-weight: 900;
}

.section-heading {
  max-width: 720px;
  margin-bottom: 44px;
}

.section-heading p {
  color: var(--on-surface-variant);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.service-card,
.post-card,
.contact-form {
  border: 1px solid var(--outline);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow);
}

.service-card {
  min-height: 322px;
  padding: 34px;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(18, 57, 66, 0.2);
}

.service-card span {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 36px;
  border-radius: 50%;
  color: var(--on-primary);
  background: var(--primary);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
}

.service-card h3,
.post-card h3 {
  color: var(--primary);
}

.service-card p,
.post-card p {
  color: var(--on-surface-variant);
}

.blog-preview {
  background: var(--surface);
}

.blog-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.post-card {
  min-height: 320px;
  padding: 32px;
}

.post-card__date {
  margin-bottom: 18px;
  color: var(--tertiary) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.post-card a {
  display: inline-flex;
  margin-top: 22px;
  color: var(--primary);
  font-weight: 800;
}

.consult {
  background:
    radial-gradient(circle at 15% 20%, rgba(215, 179, 106, 0.2), transparent 26%),
    linear-gradient(135deg, #083340, #0d5364);
}

.consult__grid {
  display: grid;
  grid-template-columns: 0.88fr 1fr;
  gap: clamp(42px, 7vw, 96px);
  align-items: center;
}

.consult h2 {
  color: var(--on-primary);
}

.consult__copy p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
}

.contact-form {
  display: grid;
  gap: 18px;
  padding: clamp(28px, 5vw, 46px);
  color: var(--on-surface);
}

.contact-form label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(13, 83, 100, 0.22);
  border-radius: 16px;
  padding: 15px 16px;
  color: var(--on-surface);
  background: #fff;
  outline: none;
  resize: vertical;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(13, 83, 100, 0.1);
}

.form-status {
  min-height: 22px;
  margin: 0;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.site-footer {
  padding-block: 32px;
  background: #082f3b;
  color: rgba(255, 255, 255, 0.74);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand--footer .brand__text strong,
.brand--footer .brand__text small {
  color: #fff;
}

.brand--footer .brand__mark {
  width: 44px;
  height: 44px;
  font-size: 27px;
}

.site-footer p {
  margin: 0;
  font-size: 13px;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1024px) {
  :root {
    --header-height: 118px;
  }

  .main-nav__inner {
    min-height: 80px;
  }

  .brand__text strong {
    font-size: 20px;
  }

  .brand__text small {
    letter-spacing: 0.32em;
  }

  .main-menu {
    gap: 0;
  }

  .main-menu a {
    padding-inline: 10px;
    font-size: 11px;
  }

  .hero__grid,
  .approach__grid,
  .education__grid,
  .blog-preview__grid,
  .consult__grid {
    grid-template-columns: 1fr;
  }

  .hero__grid {
    min-height: 780px;
    padding-top: 84px;
    align-items: start;
  }

  .hero__portrait {
    right: -60px;
    width: 54vw;
    opacity: 0.44;
  }

  .hero__credential {
    justify-self: start;
  }

  .section-kicker {
    position: static;
  }

  .education__image {
    min-height: 480px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 28px, var(--container));
  }

  .topbar__inner {
    justify-content: center;
  }

  .topbar__social {
    display: none;
  }

  .main-nav__inner {
    min-height: 74px;
  }

  .brand__mark {
    width: 46px;
    height: 46px;
    font-size: 28px;
  }

  .nav-toggle {
    width: 46px;
    height: 46px;
    display: grid;
    place-content: center;
    gap: 5px;
    border: 0;
    border-radius: 50%;
    color: var(--on-primary);
    background: var(--primary);
    cursor: pointer;
  }

  .nav-toggle span:not(.sr-only) {
    width: 20px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .main-menu {
    position: fixed;
    inset: 112px 14px auto;
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--outline);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  body.nav-open .main-menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .main-menu a {
    justify-content: center;
    min-height: 48px;
    color: var(--primary);
    background: var(--surface-container);
  }

  .hero {
    min-height: auto;
  }

  .hero__grid {
    min-height: 720px;
    padding-block: 72px;
  }

  h1 {
    font-size: clamp(50px, 16vw, 74px);
  }

  h2 {
    font-size: clamp(38px, 12vw, 56px);
  }

  .hero__portrait {
    width: 92vw;
    height: 48%;
    right: -35%;
    opacity: 0.28;
  }

  .hero__lead,
  .approach__content > p,
  .education__copy p:not(.eyebrow),
  .consult__copy p:not(.eyebrow) {
    font-size: 16px;
  }

  .hero__actions {
    display: grid;
  }

  .trust-strip__inner,
  .metric-row,
  .quote-band__grid,
  .blog-cards {
    grid-template-columns: 1fr;
  }

  .trust-strip__inner {
    padding-block: 22px;
  }

  .approach,
  .education,
  .services,
  .blog-preview,
  .consult {
    padding-block: 72px;
  }

  .approach__content,
  .service-card,
  .post-card,
  .contact-form {
    border-radius: 24px;
  }

  .quote-card {
    padding-inline: 0;
  }

  .doctor-card,
  .education__image {
    min-height: 380px;
  }

  .site-footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Real asset integration */
.brand__logo {
  width: clamp(180px, 17vw, 260px);
  height: auto;
  object-fit: contain;
}

.brand--footer .brand__logo {
  width: 210px;
  filter: brightness(0) invert(1);
}

.hero {
  min-height: 610px;
  background: #1b120e;
}

.hero__media::after,
.hero__portrait {
  display: none;
}

.hero::before,
.hero::after {
  display: none;
}

.hero__copy {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.trust-strip__inner {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 4vw, 56px);
  padding-block: 20px;
}

.trust-strip__inner img {
  width: 100%;
  max-width: 190px;
  max-height: 72px;
  justify-self: center;
  object-fit: contain;
}

.trust-strip__inner img:nth-child(3) {
  max-height: 86px;
}

.approach__content {
  grid-template-columns: minmax(440px, 520px) minmax(340px, 430px);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  justify-content: space-between;
  padding: 64px 40px 64px 72px;
  overflow: hidden;
}

.approach__content::after {
  content: none;
  display: none !important;
}

.approach__content::before {
  grid-column: 1;
  grid-row: 1;
}

.approach__text {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  max-width: 520px;
}

.approach__text p {
  margin-bottom: 14px;
  color: #394b50;
  font-size: 12px;
  line-height: 1.7;
}

.approach__text p::before {
  content: "La diferencia empieza antes de la sala de operaciones";
  display: block;
  max-width: 470px;
  margin-bottom: 28px;
  color: #141f23;
  font-family: var(--font-display);
  font-size: 35px;
  font-weight: 700;
  line-height: 1;
}

.approach__content > p,
.approach__content > p::before {
  content: none;
  display: initial;
}

.approach__photo {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: min(38vw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  justify-self: end;
}

.quote-band {
  background:
    linear-gradient(90deg, rgba(4, 50, 63, 0.94), rgba(4, 50, 63, 0.88)),
    url("./assets/images/quote-office.webp") center center / cover no-repeat;
}

.education__image {
  min-height: 590px;
  border-radius: 18px;
  background: url("./assets/images/quirofano.webp") center center / cover no-repeat;
}

.service-card {
  overflow: hidden;
  padding: 0 0 30px;
}

.service-card > img {
  width: 100%;
  height: 260px;
  margin-bottom: 24px;
  object-fit: cover;
}

.service-card > span,
.service-card > h3,
.service-card > p {
  margin-inline: 30px;
}

.service-card > span {
  margin-bottom: 22px;
}

.surgical-gallery {
  padding-block: clamp(74px, 8vw, 118px);
  background: #dff3f8;
}

.surgical-gallery__grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 24px;
  align-items: stretch;
}

.gallery-feature {
  min-height: 430px;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.gallery-feature img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
}

.gallery-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.gallery-stack img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  border-radius: 14px;
  object-fit: cover;
}

.insurance-strip {
  position: relative;
  isolation: isolate;
  padding-block: clamp(74px, 8vw, 116px);
  color: var(--on-surface);
  background: #ffffff;
}

.insurance-strip__image {
  min-height: 280px;
  margin-bottom: 52px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.5)),
    url("./assets/images/footer-quirofano.webp") center center / cover no-repeat;
}

.insurance-strip h2 {
  margin-bottom: 32px;
  color: var(--primary);
}

.insurance-strip__logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}

.insurance-strip__logos img {
  width: 100%;
  max-height: 92px;
  padding: 18px;
  border: 1px solid var(--outline);
  border-radius: 16px;
  background: #fff;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .approach__content {
    grid-template-columns: 1fr;
    padding: 48px;
  }

  .approach__text,
  .approach__photo {
    grid-column: 1;
    grid-row: auto;
  }

  .approach__photo {
    width: min(70vw, 430px);
    justify-self: center;
  }

  .surgical-gallery__grid,
  .gallery-stack {
    grid-template-columns: 1fr;
  }

  .gallery-stack img {
    min-height: 360px;
  }

  .insurance-strip__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .brand__logo {
    width: 178px;
  }

  .hero {
    min-height: 650px;
    background-position: center top;
  }

  .trust-strip__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .trust-strip__inner img:nth-child(3) {
    grid-column: auto;
  }

  .trust-strip__inner img {
    max-height: 62px;
  }

  .approach__content {
    padding: 34px 24px;
  }

  .approach__text p::before {
    font-size: 31px;
  }

  .service-card > img {
    height: 300px;
  }

  .gallery-feature,
  .gallery-feature img,
  .gallery-stack img {
    min-height: 320px;
  }

  .insurance-strip__image {
    min-height: 210px;
  }

  .insurance-strip__logos {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Prototype-aligned pass: closer to the approved Figma sample */
@media (min-width: 761px) {
  .site-header {
    position: sticky;
    inset: 0 auto auto 0;
    width: 100%;
    transform: none;
    transition: box-shadow 220ms ease, background 220ms ease;
  }

  .site-header.is-scrolled {
    transform: none;
  }
}

.hero {
  min-height: 610px;
  background: #1b120e;
}

.hero::before,
.hero::after {
  display: none;
  content: none;
}

.hero::before {
  left: clamp(28px, 8vw, 155px);
}

.hero::after {
  right: clamp(28px, 8vw, 155px);
}

.hero__media {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #1b120e;
}

.hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 44%;
  filter: none;
}

.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.62)),
    linear-gradient(90deg, rgba(21, 10, 7, 0.72), rgba(21, 10, 7, 0.08) 26%, rgba(21, 10, 7, 0.1) 74%, rgba(21, 10, 7, 0.72));
}

.hero__media::after {
  display: none;
}

.hero__portrait {
  display: none;
}

.hero__grid {
  min-height: 610px;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  padding-block: 86px 66px;
  text-align: center;
}

.hero__copy {
  max-width: 760px;
}

.hero .eyebrow {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  letter-spacing: 0.09em;
}

h1 {
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: 16px;
  font-size: clamp(36px, 3.7vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.018em;
}

.hero__lead {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.hero__note {
  max-width: 560px;
  margin: 0 auto 22px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  line-height: 1.55;
}

.hero__actions {
  justify-content: center;
  gap: 10px;
}

.btn {
  min-height: 30px;
  padding: 0 15px;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.btn--primary {
  color: #fff;
  background: #129dcc;
  box-shadow: none;
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(0, 0, 0, 0.18);
}

.hero__credential {
  display: none;
}

.trust-strip {
  background: #ffffff;
  border-bottom: 0;
}

.trust-strip__inner {
  min-height: 108px;
  grid-template-columns: repeat(5, 1fr);
  gap: 34px;
}

.trust-strip span {
  min-height: 64px;
  border: 0;
  border-radius: 0;
  color: #264b55;
  background: transparent;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-transform: none;
}

.logo-word--mutuo {
  color: #9a1e24 !important;
  font-weight: 800 !important;
}

.logo-seal {
  width: 72px;
  height: 72px;
  justify-self: center;
  border: 1px solid #b9d8e2 !important;
  border-radius: 50% !important;
  color: #6b9dad !important;
  font-family: var(--font-display);
  font-size: 18px !important;
  letter-spacing: 0.08em !important;
}

.logo-word--davinci {
  font-style: italic;
  font-weight: 900 !important;
}

.approach {
  padding-block: 88px;
  background: #dff3f8;
}

.approach__grid {
  display: block;
}

.section-kicker {
  position: static;
}

.approach .section-kicker {
  display: none;
}

.approach__content {
  position: relative;
  min-height: 430px;
  display: grid;
  align-content: center;
  max-width: 1128px;
  padding: 70px 520px 70px 72px;
  border: 0;
  border-radius: 11px;
  background: #ffffff;
  box-shadow: none;
  overflow: visible;
}

.approach__content::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: min(40vw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 43% 25%, #f0c9ac 0 8%, transparent 9%),
    radial-gradient(circle at 43% 25%, #3b2720 0 14%, transparent 15%),
    linear-gradient(35deg, transparent 0 46%, #ffffff 47% 68%, transparent 69%),
    linear-gradient(90deg, rgba(36, 68, 79, 0.18), rgba(36, 68, 79, 0.05)),
    linear-gradient(135deg, #e9f0f2, #b9d3db);
  box-shadow: 0 18px 40px rgba(16, 63, 73, 0.08);
}

.approach__content::before {
  content: "UNA CIRUJANA CON CRITERIO CLÍNICO";
  display: block;
  margin-bottom: 24px;
  color: #405960;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.approach__content > p {
  max-width: 520px;
  margin-bottom: 14px;
  color: #394b50;
  font-size: 12px;
  line-height: 1.7;
}

.approach__content > p::before {
  content: "La diferencia empieza antes de la sala de operaciones";
  display: block;
  max-width: 470px;
  margin-bottom: 28px;
  color: #141f23;
  font-family: var(--font-display);
  font-size: 35px;
  font-weight: 700;
  line-height: 1;
}

.figma-checklist {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 8px 0 0;
  color: #2b494f;
  font-size: 12px;
  list-style: none;
}

.figma-checklist li {
  position: relative;
  padding-left: 22px;
}

.figma-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 1px solid #7aa8b3;
  border-radius: 50%;
  color: #0d5364;
  font-size: 9px;
  line-height: 1;
}

.quote-band {
  min-height: 314px;
  display: grid;
  align-items: center;
  padding-block: 78px;
  background:
    linear-gradient(90deg, rgba(4, 50, 63, 0.94), rgba(4, 50, 63, 0.88)),
    radial-gradient(circle at 45% 20%, rgba(255, 255, 255, 0.22), transparent 18%),
    linear-gradient(135deg, #5e8b91, #163943);
}

.quote-band__grid {
  display: block;
}

.quote-card {
  max-width: 850px;
  margin-inline: auto;
  padding: 0;
  border: 0;
  text-align: center;
}

.quote-card p {
  margin-bottom: 18px;
  font-size: clamp(26px, 3.1vw, 45px);
  line-height: 1.06;
  font-style: italic;
}

.quote-card span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.doctor-card {
  display: none;
}

.education,
.services,
.blog-preview {
  background: #dff3f8;
}

.education__grid,
.services .container,
.blog-preview__grid {
  padding: clamp(34px, 6vw, 64px);
  border-radius: 12px;
  background: #ffffff;
}

.education__image {
  min-height: 500px;
  border-radius: 999px 999px 16px 16px;
  box-shadow: none;
}

.service-card,
.post-card,
.contact-form {
  box-shadow: none;
}

@media (max-width: 1024px) {
  .approach__content {
    padding: 52px 380px 52px 48px;
  }

  .approach__content::after {
    width: 360px;
  }
}

@media (max-width: 760px) {
  .site-header {
    position: sticky;
  }

  .topbar {
    display: none;
  }

  .hero {
    min-height: 620px;
  }

  .hero::before,
  .hero::after {
    display: none;
  }

  .hero__grid {
    min-height: 620px;
    padding-block: 84px 56px;
  }

  h1 {
    font-size: clamp(36px, 10vw, 50px);
  }

  .hero__lead {
    font-size: 13px;
  }

  .hero__note {
    font-size: 10px;
  }

  .trust-strip__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .logo-seal {
    grid-column: 1 / -1;
  }

  .approach {
    padding-block: 40px;
  }

  .approach__content {
    min-height: auto;
    padding: 34px 26px 300px;
    overflow: hidden;
  }

  .approach__content::after {
    right: 50%;
    top: auto;
    bottom: -120px;
    width: 330px;
    transform: translateX(50%);
  }

  .approach__content > p::before {
    font-size: 31px;
  }

  .quote-band {
    min-height: 260px;
    padding-block: 60px;
  }

  .education__grid,
  .services .container,
  .blog-preview__grid {
    padding: 28px 20px;
  }
}

/* Figma audit implementation pass — header, hero, logos, approach and footer polish */
:root {
  --header-height: 96px;
}

.site-header {
  background: rgba(237, 249, 251, 0.96);
  backdrop-filter: blur(14px);
}

.topbar {
  background: #073f4c;
  font-size: 11px;
}

.topbar__inner {
  min-height: 30px;
}

.main-nav {
  background: #e9f7fa;
}

.main-nav__inner {
  min-height: 66px;
  gap: clamp(18px, 3vw, 42px);
}

.brand__logo {
  width: clamp(162px, 15vw, 226px);
}

.main-menu {
  gap: 2px;
  flex: 1;
}

.main-menu a {
  min-height: 34px;
  padding-inline: clamp(9px, 1.05vw, 15px);
  color: #1d5662;
  font-size: clamp(10px, 0.72vw, 12px);
  letter-spacing: 0.1em;
}

.main-menu a:hover,
.main-menu a:focus-visible,
.main-menu a.is-active {
  background: #0d5364;
}

.hero {
  min-height: clamp(520px, 66vw, 650px);
  background: #140c09;
}

.hero__media img {
  object-position: center 40%;
  filter: saturate(0.9) contrast(1.04) brightness(0.72);
  transform: scale(1.012);
}

.hero__media::before {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.28) 28%, transparent 55%),
    radial-gradient(ellipse at 50% 43%, rgba(255, 255, 255, 0.05), transparent 29%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.53) 48%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(90deg, rgba(17, 8, 6, 0.48) 0%, rgba(17, 8, 6, 0.18) 35%, rgba(17, 8, 6, 0.2) 65%, rgba(17, 8, 6, 0.46) 100%);
}

.hero__grid {
  min-height: clamp(520px, 66vw, 650px);
  padding-block: clamp(58px, 8vw, 92px) clamp(48px, 6vw, 72px);
}

.hero__copy {
  max-width: 720px;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.72);
}

.hero .eyebrow {
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

h1 {
  max-width: 730px;
  margin-bottom: 14px;
  font-size: clamp(38px, 4.1vw, 60px);
  line-height: 0.98;
}

.hero__lead {
  max-width: 610px;
  margin-bottom: 10px;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.52;
}

.hero__note {
  max-width: 560px;
  margin-bottom: 20px;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: 1.55;
}

.hero__actions {
  gap: 10px;
}

.btn {
  min-height: 34px;
  padding-inline: 17px;
  font-size: 10.5px;
  letter-spacing: 0.035em;
}

.btn--primary {
  background: #159cc5;
  box-shadow: 0 10px 24px rgba(21, 156, 197, 0.22);
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.64);
  background: rgba(0, 0, 0, 0.18);
}

.trust-strip {
  background: #fff;
}

.trust-strip__inner {
  min-height: 96px;
  grid-template-columns: 1.08fr 0.9fr 1fr 1.18fr 1.08fr;
  gap: clamp(18px, 3.2vw, 48px);
  padding-block: 15px;
}

.trust-strip__inner img {
  max-width: 178px;
  max-height: 58px;
  filter: none;
}

.trust-strip__inner img:nth-child(2) {
  max-width: 138px;
  max-height: 68px;
}

.trust-strip__inner img:nth-child(3) {
  max-width: 150px;
  max-height: 76px;
}

.trust-strip__inner img:nth-child(4) {
  max-width: 218px;
  max-height: 54px;
}

.trust-strip__inner img:nth-child(5) {
  max-width: 206px;
  max-height: 58px;
}

.approach {
  padding-block: clamp(64px, 7vw, 92px);
  background: #dff3f8;
}

.approach__content {
  max-width: 1220px;
  min-height: 520px;
  grid-template-columns: minmax(480px, 570px) minmax(420px, 510px);
  gap: clamp(44px, 5vw, 76px);
  justify-content: end;
  margin-left: auto;
  margin-right: 0;
  padding: clamp(46px, 5vw, 66px) clamp(54px, 5vw, 76px) clamp(46px, 5vw, 66px) clamp(42px, 4vw, 58px);
  border-radius: 12px;
  background: #fff;
}

.approach__content::before {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  margin-bottom: 18px;
  color: #49636a;
  font-size: 10px;
  letter-spacing: 0.22em;
}

.approach__text {
  grid-column: 2;
  grid-row: 2;
  max-width: 500px;
  justify-self: start;
  text-align: left;
}

.approach__text p::before {
  max-width: 500px;
  margin-bottom: 20px;
  font-size: clamp(36px, 3.45vw, 52px);
  line-height: 0.98;
}

.approach__text p {
  max-width: 500px;
  font-size: 13px;
  line-height: 1.68;
}

.figma-checklist {
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
}

.approach__photo {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: min(42vw, 540px);
  max-width: 540px;
  min-width: 460px;
  justify-self: start;
  box-shadow: 0 26px 56px rgba(17, 75, 88, 0.14);
}

.quote-band {
  min-height: clamp(360px, 23vw, 455px);
  display: grid;
  align-items: center;
  padding-block: clamp(76px, 6vw, 112px);
  background:
    linear-gradient(90deg, rgba(5, 51, 62, 0.9), rgba(5, 51, 62, 0.82)),
    linear-gradient(180deg, rgba(5, 51, 62, 0.68), rgba(5, 51, 62, 0.9)),
    url("./assets/images/quote-office.webp") center 43% / cover no-repeat;
}

.quote-band__grid {
  display: block;
}

.quote-card {
  max-width: 1280px;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  box-shadow: none;
}

.quote-card p {
  max-width: 1180px;
  margin-inline: auto;
  margin-bottom: 28px;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(42px, 3.1vw, 62px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.quote-card span {
  display: block;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.insurance-strip {
  padding-block: clamp(60px, 7vw, 94px);
}

.insurance-strip__image {
  min-height: clamp(220px, 24vw, 318px);
  margin-bottom: 42px;
  border-radius: 0;
}

.insurance-strip__logos {
  gap: 18px;
}

.insurance-strip__logos img {
  max-height: 84px;
  padding: 16px;
  border-color: rgba(13, 83, 100, 0.14);
  border-radius: 12px;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .brand__logo {
    width: 156px;
  }

  .main-menu a {
    padding-inline: 8px;
    font-size: 10px;
    letter-spacing: 0.07em;
  }
}

@media (max-width: 900px) and (min-width: 761px) {
  .main-menu a {
    padding-inline: 6px;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 1024px) {
  :root {
    --header-height: 82px;
  }

  .hero,
  .hero__grid {
    min-height: 610px;
  }

  .approach__content {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin-inline: auto;
    padding: 48px;
  }

  .approach__content::before,
  .approach__text,
  .approach__photo {
    grid-column: 1;
    grid-row: auto;
  }

  .approach__text {
    justify-self: center;
    max-width: 560px;
  }

  .approach__photo {
    width: min(76vw, 460px);
    min-width: 0;
    justify-self: center;
    order: -1;
  }
}

@media (max-width: 760px) {
  :root {
    --header-height: 74px;
  }

  .main-nav__inner {
    min-height: 70px;
  }

  .main-menu {
    inset: 84px 14px auto;
  }

  .brand__logo {
    width: 166px;
  }

  .hero,
  .hero__grid {
    min-height: 600px;
  }

  .hero__media img {
    object-position: calc(48% - 50px) 50%;
    filter: saturate(0.95) contrast(1.02) brightness(0.68);
    transform: none;
  }

  .hero__media::before {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.7)),
      linear-gradient(90deg, rgba(16, 8, 6, 0.76), rgba(16, 8, 6, 0.26), rgba(16, 8, 6, 0.74));
  }

  .hero__grid {
    padding-block: 74px 48px;
  }

  h1 {
    font-size: clamp(35px, 10vw, 48px);
  }

  .hero__lead {
    font-size: 12.5px;
  }

  .hero__note {
    display: none;
  }

  .trust-strip__inner {
    min-height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    padding-block: 22px;
  }

  .trust-strip__inner img {
    max-width: 156px;
    max-height: 54px;
  }

  .trust-strip__inner img:nth-child(2),
  .trust-strip__inner img:nth-child(3) {
    max-height: 64px;
  }

  .trust-strip__inner img:nth-child(3) {
    grid-column: 1 / -1;
  }

  .approach__content {
    padding: 34px 24px 30px;
  }

  .approach__text p::before {
    font-size: clamp(29px, 9vw, 36px);
  }

  .approach__photo {
    width: min(82vw, 360px);
    min-width: 0;
  }

  .quote-band {
    min-height: 248px;
    padding-block: 54px;
  }

  .quote-card p {
    font-size: clamp(25px, 8vw, 34px);
  }
}

/* Figma match: approach section card with oversized right circular image */
.approach {
  padding-block: clamp(74px, 7vw, 104px);
  overflow-x: clip;
  background: #dff3f8;
}

.approach__grid {
  width: min(100% - 120px, 1692px);
  max-width: none;
  display: block;
}

.approach .section-kicker {
  display: none;
}

.approach__content {
  position: relative;
  min-height: clamp(560px, 36vw, 685px);
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(92px, 7vw, 124px) clamp(700px, 43vw, 820px) clamp(86px, 6vw, 112px) clamp(92px, 7vw, 116px);
  overflow: visible;
  border: 0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: none;
}

.approach__content::before {
  content: "UNA CIRUJANA CON CRITERIO CLÍNICO";
  display: block;
  margin: 0 0 28px;
  color: #202427;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 21px);
  font-weight: 500;
  letter-spacing: 0.32em;
  line-height: 1.2;
}

.approach__text {
  width: min(100%, 720px);
  max-width: 720px;
  text-align: left;
}

.approach__text p {
  max-width: 720px;
  margin: 0 0 26px;
  color: #21242b;
  font-size: clamp(16px, 1.05vw, 19px);
  font-weight: 500;
  line-height: 1.62;
}

.approach__text p::before {
  content: "La diferencia empieza antes de la sala de operaciones";
  display: block;
  max-width: 760px;
  margin: 0 0 36px;
  color: #171719;
  font-family: var(--font-display);
  font-size: clamp(46px, 3.35vw, 68px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.figma-checklist {
  display: grid;
  gap: 9px;
  margin-top: 0;
  color: #2f3542;
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 500;
}

.figma-checklist li {
  padding-left: 36px;
}

.figma-checklist li::before {
  top: 2px;
  width: 18px;
  height: 18px;
  border-color: #0b6b8b;
  color: #0b6b8b;
  font-size: 12px;
}

.approach__photo {
  position: absolute;
  right: clamp(-120px, -5vw, -56px);
  top: 50%;
  width: clamp(560px, 39vw, 790px);
  min-width: 0;
  max-width: none;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  box-shadow: none;
}

@media (max-width: 1280px) and (min-width: 1025px) {
  .approach__grid {
    width: min(100% - 72px, 1180px);
  }

  .approach__content {
    padding-right: clamp(500px, 42vw, 600px);
  }

  .approach__photo {
    right: -42px;
    width: clamp(500px, 42vw, 590px);
  }
}

@media (max-width: 1024px) {
  .approach__grid {
    width: min(100% - 40px, 760px);
  }

  .approach__content {
    min-height: auto;
    padding: 48px;
    overflow: hidden;
  }

  .approach__photo {
    position: static;
    width: min(76vw, 520px);
    margin: 34px auto 0;
    transform: none;
  }
}

@media (max-width: 760px) {
  .approach__grid {
    width: min(100% - 28px, 560px);
  }

  .approach__content {
    padding: 34px 24px 30px;
    border-radius: 16px;
  }

  .approach__content::before {
    margin-bottom: 20px;
    font-size: 11px;
    letter-spacing: 0.22em;
  }

  .approach__text p::before {
    margin-bottom: 24px;
    font-size: clamp(33px, 10vw, 42px);
  }

  .approach__text p,
  .figma-checklist {
    font-size: 14px;
  }

  .approach__photo {
    width: min(84vw, 380px);
    margin-top: 28px;
  }

  .quote-band {
    min-height: 300px;
    padding-block: 58px;
    background-position: center center;
  }

  .quote-card p {
    max-width: 92%;
    margin-bottom: 18px;
    font-size: clamp(28px, 8vw, 38px);
  }

  .quote-card span {
    font-size: 11px;
    letter-spacing: 0.22em;
  }
}

/* Screenshot-matched header + hero correction */
@media (min-width: 761px) {
  :root {
    --header-height: 148px;
  }

  .site-header {
    background: #ffffff;
    border-bottom: 0;
    box-shadow: none;
  }

  .site-header.is-scrolled {
    background: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(10, 62, 76, 0.07);
  }

  .topbar {
    color: #202426;
    background: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .topbar__inner {
    position: relative;
    min-height: 92px;
    display: grid;
    grid-template-columns: 110px minmax(230px, 1fr) auto minmax(210px, 1fr) 174px;
    align-items: center;
    column-gap: clamp(14px, 1.4vw, 26px);
  }

  .topbar__inner > .topbar__address:not(.topbar__address--figma),
  .topbar__inner > .topbar__social:not(.topbar__social--figma) {
    display: none;
  }

  .topbar__social--figma {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    justify-self: start;
  }

  .topbar__social--figma a {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    color: #0e80ad;
    background: transparent;
    border-radius: 0;
    line-height: 1;
  }

  .topbar__social--figma a img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
  }

  .topbar__address--figma {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    min-width: 0;
    color: #1e2528;
    font-family: "Poppins", var(--font-body);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 500;
  }

  .topbar__address--figma > span {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .topbar__address--figma > img {
    width: 16px;
    height: auto;
    flex: 0 0 auto;
  }

  .topbar__brand {
    position: absolute;
    left: 50%;
    justify-self: center;
    transform: translateX(-50%);
  }

  .topbar__brand .brand__logo {
    width: clamp(260px, 18vw, 326px);
  }

  .topbar__phone {
    grid-column: 4;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1d2225;
    font-family: "Poppins", var(--font-body);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
  }

  .topbar__phone img {
    width: 16px;
    height: auto;
    flex: 0 0 auto;
  }

  .topbar__cta {
    grid-column: 5;
    justify-self: end;
    min-width: 174px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background: #0c82b0;
    font-family: "Poppins", var(--font-body);
    font-size: 16px;
    font-weight: 500;
    box-shadow: none;
  }

  .nav-toggle--topbar {
    display: none;
  }

  .main-nav {
    background: #d9edf4;
  }

  .main-nav__inner {
    min-height: 56px;
    display: flex;
    justify-content: center;
  }

  .main-nav .brand,
  .main-nav .nav-toggle {
    display: none !important;
  }

  .main-menu {
    flex: 0 1 auto;
    justify-content: center;
    gap: clamp(36px, 4.06vw, 78px);
  }

  .main-menu li:nth-child(5),
  .main-menu__cta-item {
    display: none;
  }

  .main-menu a {
    min-height: 56px;
    padding: 0;
    border-radius: 0;
    color: #15191b;
    background: transparent !important;
    font-family: "Poppins", var(--font-body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .main-menu a:hover,
  .main-menu a:focus-visible,
  .main-menu a.is-active {
    color: #15191b;
  }

  .main-menu a.is-active::after,
  .main-menu a:hover::after,
  .main-menu a:focus-visible::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 13px;
    height: 1px;
    background: currentColor;
  }

  .main-menu a {
    position: relative;
  }

  .hero {
    min-height: calc(100svh - var(--header-height));
    background: #140d09;
  }

  .hero__grid {
    min-height: calc(100svh - var(--header-height));
    padding-block: clamp(78px, 10vh, 128px) clamp(64px, 9vh, 100px);
    align-items: center;
  }

  .hero__media img {
    object-position: center center;
    filter: saturate(0.96) contrast(1.02) brightness(0.8);
    transform: none;
  }

  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.1) 20%,
      rgba(0, 0, 0, 0.26) 44%,
      rgba(0, 0, 0, 0.58) 72%,
      rgba(0, 0, 0, 0.86) 100%
    );
  }

  .hero__media::after,
  .hero::before,
  .hero::after {
    display: none !important;
    content: none !important;
  }

  .hero__copy {
    max-width: 1040px;
    transform: translateY(44px);
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.58);
  }

  .hero__copy.reveal,
  .hero__copy.reveal.is-visible {
    transform: translateY(44px);
  }

  .hero__actions {
    margin-bottom: 14px;
  }

  .hero .eyebrow {
    margin-bottom: 22px;
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 0.16em;
  }

  /* Tipografía fluida calibrada a lienzo 1920: valor Figma exacto a 1920px,
     proporcional hacia abajo (coeficiente = px Figma / 19.2) */
  h1 {
    max-width: clamp(620px, 51.04vw, 980px);
    margin-inline: auto;
    margin-bottom: 40px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(46px, 3.49vw, 67px);
    font-weight: 500;
    line-height: 1.19;
    letter-spacing: 0;
    text-align: center;
  }

  .hero__lead {
    max-width: clamp(640px, 52.08vw, 1000px);
    margin-inline: auto;
    margin-bottom: 34px;
    color: #ffffff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(21px, 1.56vw, 30px);
    font-weight: 500;
    line-height: 1.27;
    text-align: center;
  }

  .hero__note {
    max-width: clamp(520px, 41.67vw, 800px);
    margin-inline: auto;
    margin-bottom: 62px;
    color: rgba(255, 255, 255, 0.92);
    font-family: "Poppins", var(--font-body);
    font-size: clamp(15px, 0.94vw, 18px);
    font-weight: 300;
    line-height: 1.61;
    text-align: center;
  }

  .hero__actions {
    justify-content: center;
    gap: 24px;
  }

  .btn {
    min-height: 40px;
    padding-inline: 22px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
  }

  .btn--primary {
    background: #0789bd;
    box-shadow: none;
  }

  .btn--ghost {
    border-color: #ffffff;
    background: rgba(0, 0, 0, 0.16);
  }

  html body .topbar__brand .brand__logo {
    width: clamp(285px, 18vw, 326px) !important;
    max-width: none;
  }
}

/* Rango intermedio: la dirección se oculta pero el teléfono permanece visible */
@media (max-width: 1180px) and (min-width: 761px) {
  .topbar__inner {
    grid-template-columns: auto 1fr auto auto;
  }

  .topbar__address--figma {
    display: none;
  }

  .topbar__social--figma {
    grid-column: 1;
  }

  .topbar__phone {
    grid-column: 3;
    justify-self: end;
  }

  .topbar__cta {
    grid-column: 4;
  }

  html body .topbar__brand .brand__logo {
    width: 210px !important;
  }
}

@media (max-width: 980px) and (min-width: 761px) {
  .topbar__social--figma {
    display: none;
  }

  .topbar__phone {
    grid-column: 1;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .topbar {
    display: block;
    color: #132f36;
    background: #ffffff;
  }

  .topbar__inner {
    min-height: 72px;
    display: flex;
    justify-content: space-between;
  }

  .topbar__inner > .topbar__address:not(.topbar__address--figma),
  .topbar__inner > .topbar__social:not(.topbar__social--figma),
  .topbar__social--figma,
  .topbar__cta,
  .main-nav .brand,
  .main-nav .nav-toggle {
    display: none !important;
  }

  .topbar__inner {
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar__brand {
    display: inline-flex;
  }

  .topbar__brand .brand__logo {
    width: 148px;
  }

  .topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: #1d2225;
    font-family: "Poppins", var(--font-body);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }

  .topbar__phone img {
    width: 14px;
    height: auto;
    flex: 0 0 auto;
  }

  .topbar__phone .topbar__phone-label {
    display: none;
  }

  .nav-toggle--topbar {
    width: 48px;
    height: 48px;
    display: grid;
    place-content: center;
    gap: 5px;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    background: #0d5364;
  }

  .nav-toggle--topbar span:not(.sr-only) {
    width: 21px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
  }

  .main-nav {
    min-height: 0;
    background: transparent;
  }

  .main-nav__inner {
    min-height: 0;
  }

  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.12) 0%,
      rgba(0, 0, 0, 0.26) 34%,
      rgba(0, 0, 0, 0.62) 70%,
      rgba(0, 0, 0, 0.88) 100%
    );
  }
}

/* Final Figma match: quote band visible photographic background */
.quote-band {
  min-height: clamp(360px, 26.5vw, 508px);
  display: grid;
  align-items: center;
  padding-block: clamp(82px, 6vw, 120px);
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 48%, rgba(2, 43, 57, 0.34) 0%, rgba(2, 43, 57, 0.5) 54%, rgba(2, 43, 57, 0.62) 100%),
    linear-gradient(90deg, rgba(2, 43, 57, 0.36), rgba(2, 43, 57, 0.26), rgba(2, 43, 57, 0.36)),
    url("./assets/images/quote-office.webp") center center / cover no-repeat !important;
}

.quote-band__grid {
  display: block;
}

.quote-card {
  max-width: 1260px;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent !important;
  text-align: center;
  box-shadow: none !important;
}

.quote-card p {
  max-width: 1180px;
  margin-inline: auto;
  margin-bottom: 28px;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(42px, 3.1vw, 62px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.34);
}

.quote-card span {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .quote-band {
    min-height: 300px;
    padding-block: 58px;
    background:
      radial-gradient(circle at 50% 48%, rgba(2, 43, 57, 0.38) 0%, rgba(2, 43, 57, 0.56) 100%),
      linear-gradient(90deg, rgba(2, 43, 57, 0.42), rgba(2, 43, 57, 0.3), rgba(2, 43, 57, 0.42)),
      url("./assets/images/quote-office.webp") center center / cover no-repeat !important;
  }

  .quote-card p {
    max-width: 92%;
    margin-bottom: 18px;
    font-size: clamp(28px, 8vw, 38px);
  }

  .quote-card span {
    font-size: 11px;
    letter-spacing: 0.22em;
  }
}

/* Final Figma match: education / certifications editorial grid */
.education {
  padding-block: clamp(72px, 7vw, 112px) clamp(88px, 7vw, 126px);
  background: #ffffff;
}

.education > .education__grid {
  display: none !important;
}

.education__wrap {
  width: min(100% - 168px, 1610px);
  max-width: none;
}

.education__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: clamp(72px, 12vw, 180px);
  align-items: start;
  margin-bottom: clamp(66px, 6vw, 92px);
}

.education__eyebrow {
  margin: 0 0 26px;
  color: #1f2024;
  font-size: clamp(16px, 1.05vw, 21px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.education__title h2 {
  max-width: 820px;
  margin: 0;
  color: #202124;
  font-family: var(--font-display);
  font-size: clamp(48px, 4.2vw, 76px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.education__summary {
  max-width: 420px;
  margin: clamp(54px, 4.2vw, 76px) 0 0;
  color: #1f2024;
  font-size: clamp(16px, 1vw, 19px);
  line-height: 1.55;
  text-align: center;
}

.education__tabs {
  display: grid;
  grid-template-columns: minmax(280px, 486px) minmax(280px, 486px);
  gap: clamp(52px, 6vw, 108px);
  align-items: end;
  margin-bottom: clamp(48px, 4.8vw, 68px);
}

.education__tab {
  position: relative;
  min-height: 68px;
  padding: 0 0 24px;
  border: 0;
  color: #25262a;
  background: transparent;
  font: inherit;
  font-size: clamp(22px, 1.55vw, 31px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease;
}

.education__tab.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #0d5b72;
}

.education__tab:hover,
.education__tab:focus-visible {
  color: #0d5b72;
}

.education__tab:focus-visible {
  outline: 3px solid rgba(13, 91, 114, 0.24);
  outline-offset: 6px;
}

.education__credentials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(56px, 7vw, 112px);
  row-gap: clamp(82px, 7vw, 112px);
}

.education__credentials[hidden] {
  display: none !important;
}

.education__credentials.is-active {
  animation: educationPanelIn 260ms ease both;
}

@keyframes educationPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.education__credential span {
  display: block;
  margin-bottom: 8px;
  color: rgba(32, 33, 36, 0.36);
  font-family: var(--font-display);
  font-size: clamp(30px, 2vw, 40px);
  line-height: 1;
}

.education__credential h3 {
  max-width: 500px;
  margin: 0 0 28px;
  color: #0d5b72;
  font-family: var(--font-display);
  font-size: clamp(30px, 2.35vw, 41px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.education__credential p {
  max-width: 520px;
  margin: 0;
  color: #34353a;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.45;
  letter-spacing: 0.08em;
}

@media (max-width: 1180px) {
  .education__wrap {
    width: min(100% - 56px, 980px);
  }

  .education__intro {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 68px;
  }

  .education__summary {
    margin: 0;
    text-align: left;
  }

  .education__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .education__credentials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px 44px;
  }
}

@media (max-width: 760px) {
  .education {
    padding-block: 64px 78px;
  }

  .education__wrap {
    width: min(100% - 32px, 560px);
  }

  .education__title h2 {
    font-size: clamp(38px, 12vw, 52px);
  }

  .education__tabs,
  .education__credentials {
    grid-template-columns: 1fr;
  }

  .education__tabs {
    gap: 18px;
    margin-bottom: 54px;
  }

  .education__tab {
    text-align: center;
  }

  .education__credentials {
    row-gap: 52px;
  }

  .education__credential h3 {
    margin-bottom: 18px;
    font-size: clamp(28px, 9vw, 36px);
  }
}

/* Final Figma match: evaluation / treatment image card */
.evaluation {
  position: relative;
  overflow-x: clip;
  padding-block: clamp(74px, 7vw, 106px);
  background: #dff3f8;
}

.evaluation__wrap {
  position: relative;
  width: min(100% - 112px, 1584px);
  max-width: none;
  display: grid;
  grid-template-columns: minmax(430px, 682px) minmax(0, 1fr);
  align-items: center;
}

.evaluation__wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 0;
  left: -100vw;
  min-height: clamp(520px, 34vw, 664px);
  border-radius: 0 18px 18px 0;
  background: #ffffff;
  transform: translateY(-50%);
}

.evaluation__media {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-height: clamp(620px, 44vw, 858px);
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #dbe7e9;
  box-shadow: 0 18px 34px rgba(18, 60, 70, 0.22);
}

.evaluation__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.evaluation__card {
  position: relative;
  z-index: 1;
  min-height: clamp(520px, 34vw, 664px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: -18px;
  padding: clamp(70px, 7vw, 124px) clamp(64px, 7vw, 112px) clamp(70px, 7vw, 116px) clamp(70px, 7vw, 120px);
  border-radius: 0;
  background: transparent;
}

.evaluation__eyebrow {
  margin: 0 0 34px;
  color: #1f2024;
  font-size: clamp(15px, 1vw, 19px);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.evaluation__card h2 {
  max-width: 760px;
  margin: 0 0 26px;
  color: #202124;
  font-family: var(--font-display);
  font-size: clamp(46px, 3.8vw, 70px);
  font-style: italic;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.evaluation__card h2 em {
  color: #0d5b72;
  font-style: italic;
  font-weight: 700;
}

.evaluation__lead {
  max-width: 690px;
  margin: 0 0 24px;
  color: #25262a;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.48;
}

.evaluation__list {
  display: grid;
  gap: 12px;
  margin: 0 0 38px;
  padding: 0;
  color: #344154;
  list-style: none;
}

.evaluation__list li {
  position: relative;
  padding-left: 36px;
  font-size: clamp(15px, 1vw, 18px);
}

.evaluation__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1.5px solid #0d7fa7;
  border-radius: 50%;
  color: #0d7fa7;
  font-size: 12px;
  font-weight: 800;
}

.evaluation__card .btn {
  align-self: flex-start;
}

@media (max-width: 1180px) {
  .evaluation__wrap {
    width: min(100% - 48px, 920px);
    grid-template-columns: 1fr;
  }

  .evaluation__media {
    min-height: 520px;
  }

  .evaluation__card {
    min-height: auto;
    margin: -22px 24px 0;
    padding: 58px 42px 48px;
    border-radius: 18px;
    background: #ffffff;
  }

  .evaluation__wrap::before {
    display: none;
  }
}

@media (max-width: 760px) {
  .evaluation {
    padding-block: 56px 72px;
  }

  .evaluation__wrap {
    width: min(100% - 28px, 560px);
  }

  .evaluation__media {
    min-height: 440px;
  }

  .evaluation__card {
    margin: -16px 0 0;
    padding: 42px 24px 34px;
  }

  .evaluation__card h2 {
    font-size: clamp(38px, 12vw, 52px);
  }
}

/* Final Figma match: consultation flow steps */
.consult-flow {
  padding-block: clamp(86px, 8vw, 128px) clamp(96px, 8vw, 136px);
  background: #f6f2ed;
}

.consult-flow__wrap {
  width: min(100% - 168px, 1588px);
  max-width: none;
}

.consult-flow__heading {
  max-width: 620px;
  margin-bottom: clamp(116px, 10vw, 158px);
}

.consult-flow__eyebrow {
  margin: 0 0 30px;
  color: #202124;
  font-size: clamp(15px, 1vw, 20px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.consult-flow__heading h2 {
  margin: 0;
  color: #202124;
  font-family: var(--font-display);
  font-size: clamp(48px, 4.15vw, 78px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.consult-flow__heading h2 em {
  display: block;
  color: #0d5b72;
  font-style: italic;
  font-weight: 500;
}

.consult-flow__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(48px, 5.5vw, 102px);
}

.consult-flow__step span {
  display: block;
  margin-bottom: 8px;
  color: rgba(32, 33, 36, 0.34);
  font-family: var(--font-display);
  font-size: clamp(30px, 2vw, 40px);
  line-height: 1;
}

.consult-flow__step h3 {
  margin: 0 0 18px;
  color: #0d5b72;
  font-family: var(--font-display);
  font-size: clamp(30px, 2.15vw, 39px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
}

.consult-flow__step p {
  max-width: 360px;
  margin: 0;
  color: #34353a;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.45;
  letter-spacing: 0.07em;
}

@media (max-width: 1180px) {
  .consult-flow__wrap {
    width: min(100% - 56px, 980px);
  }

  .consult-flow__heading {
    margin-bottom: 80px;
  }

  .consult-flow__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px 48px;
  }
}

@media (max-width: 760px) {
  .consult-flow {
    padding-block: 64px 78px;
  }

  .consult-flow__wrap {
    width: min(100% - 32px, 560px);
  }

  .consult-flow__heading {
    margin-bottom: 56px;
  }

  .consult-flow__heading h2 {
    font-size: clamp(40px, 12vw, 54px);
  }

  .consult-flow__steps {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* Final Figma match: services hover cards */
.services {
  padding-block: clamp(88px, 8vw, 128px) clamp(72px, 7vw, 112px);
  background: #ffffff;
}

.services > .container:not(.services__wrap) {
  display: none !important;
}

.services__wrap {
  width: min(100% - 144px, 1600px);
  max-width: none;
}

.services__heading {
  max-width: 820px;
  margin: 0 auto clamp(66px, 6vw, 92px);
  text-align: center;
}

.services__eyebrow {
  margin: 0 0 28px;
  color: #202124;
  font-size: clamp(15px, 1vw, 19px);
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

.services__heading h2 {
  margin: 0 0 34px;
  color: #202124;
  font-family: var(--font-display);
  font-size: clamp(54px, 4vw, 72px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.services__heading p {
  max-width: 760px;
  margin: 0 auto;
  color: #1f2024;
  font-size: clamp(16px, 1vw, 19px);
  line-height: 1.65;
}

.service-grid--figma {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}

.service-card--figma {
  position: relative;
  min-height: clamp(420px, 34vw, 506px);
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #d8edf3;
  box-shadow: none;
  outline: none;
  isolation: isolate;
}

.service-card--figma + .service-card--figma {
  margin-left: -1px;
}

.service-card--figma img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.01);
  transition: opacity 220ms ease, transform 320ms ease;
}

.service-card--figma::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(216, 237, 243, 0.54) 64%, rgba(216, 237, 243, 0.98) 100%);
  transition: opacity 220ms ease;
}

.service-card__front,
.service-card__back {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: clamp(26px, 2.1vw, 36px) clamp(24px, 2vw, 32px);
}

.service-card__front {
  min-height: 178px;
  display: flex;
  align-items: flex-end;
  transition: opacity 180ms ease, transform 220ms ease;
}

.service-card__back {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #d8edf3;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 220ms ease;
}

.service-card--figma h3 {
  max-width: 260px;
  margin: 0;
  color: #0d5b72;
  font-family: var(--font-display);
  font-size: clamp(32px, 2.45vw, 43px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.service-card__back h3 {
  margin-bottom: clamp(34px, 4.2vw, 72px);
}

.service-card__back p {
  max-width: 250px;
  margin: 0;
  color: #34353a;
  font-size: clamp(13px, 0.86vw, 15px);
  line-height: 1.45;
  letter-spacing: 0.06em;
}

.service-card--figma:hover img,
.service-card--figma:focus-visible img {
  opacity: 0;
  transform: scale(1.04);
}

.service-card--figma:hover::before,
.service-card--figma:focus-visible::before {
  opacity: 0;
}

.service-card--figma:hover .service-card__front,
.service-card--figma:focus-visible .service-card__front {
  opacity: 0;
  transform: translateY(8px);
}

.service-card--figma:hover .service-card__back,
.service-card--figma:focus-visible .service-card__back {
  opacity: 1;
  transform: translateY(0);
}

.service-card--figma:focus-visible {
  box-shadow: 0 0 0 4px rgba(13, 91, 114, 0.22);
}

@media (max-width: 1280px) {
  .services__wrap {
    width: min(100% - 56px, 1080px);
  }

  .service-grid--figma {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 760px) {
  .services {
    padding-block: 68px 76px;
  }

  .services__wrap {
    width: min(100% - 32px, 560px);
  }

  .services__heading {
    margin-bottom: 44px;
  }

  .service-grid--figma {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-card--figma {
    min-height: 390px;
  }
}

/* Final Figma match: testimonials carousel + FAQ */
.testimonials {
  padding-block: clamp(42px, 5vw, 76px);
  overflow: hidden;
  background: #ffffff;
}

.testimonials__inner {
  width: min(100% - 32px, 1920px);
  margin-inline: auto;
}

.testimonials__heading {
  max-width: 820px;
  margin: 0 auto 34px;
  text-align: center;
}

.testimonials__eyebrow {
  margin: 0 0 12px;
  color: #202124;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.testimonials__heading h2 {
  margin: 0;
  color: #202124;
  font-family: var(--font-display);
  font-size: clamp(36px, 3vw, 56px);
  font-weight: 600;
  line-height: 1.05;
}

.testimonials__viewport {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(360px, 1fr);
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.testimonials__viewport::-webkit-scrollbar {
  display: none;
}

.testimonials__controls {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}

.testimonials__arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(32, 33, 36, 0.16);
  border-radius: 50%;
  color: #202124;
  background: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(32, 33, 36, 0.14);
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

.testimonials__arrow:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(32, 33, 36, 0.22);
}

.testimonials__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.review-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  scroll-snap-align: start;
  padding: 24px 24px 20px;
  border: 1px solid rgba(32, 33, 36, 0.1);
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(32, 33, 36, 0.18);
}

.review-card__stars {
  margin-bottom: 16px;
  color: #f6b532;
  font-size: 20px;
  letter-spacing: 0.08em;
}

.review-card p {
  margin: 0 0 28px;
  color: #202124;
  font-size: 14px;
  line-height: 1.55;
}

.review-card__meta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.review-card__meta strong,
.review-card__meta span {
  display: block;
}

.review-card__meta strong {
  color: #145da0;
  font-size: 13px;
  font-weight: 800;
}

.review-card__meta span {
  color: #6b7280;
  font-size: 12px;
}

.review-card__google {
  width: 28px;
  height: 28px;
  display: grid !important;
  place-items: center;
  border-radius: 50%;
  color: #4285f4 !important;
  background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
  font-size: 0 !important;
}

.review-card__google::before {
  content: "G";
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: #4285f4;
  font-size: 12px;
  font-weight: 800;
}

.faq {
  padding-block: clamp(94px, 9vw, 150px) clamp(72px, 7vw, 110px);
  background: #ffffff;
}

.faq__wrap {
  width: min(100% - 56px, 1040px);
}

.faq__heading {
  margin-bottom: clamp(74px, 7vw, 112px);
}

.faq__eyebrow {
  margin: 0 0 36px;
  color: #202124;
  font-size: clamp(16px, 1.1vw, 22px);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.faq__heading h2 {
  margin: 0;
  color: #202124;
  font-family: var(--font-display);
  font-size: clamp(48px, 4.4vw, 76px);
  font-style: italic;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.faq__heading h2 em {
  color: #0d5b72;
  font-style: italic;
}

.faq__item {
  border-bottom: 1px solid rgba(32, 33, 36, 0.36);
}

.faq__question {
  width: 100%;
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0;
  border: 0;
  color: #202124;
  background: transparent;
  font-family: var(--font-display);
  font-size: clamp(25px, 1.85vw, 32px);
  font-weight: 500;
  line-height: 1.18;
  text-align: left;
  cursor: pointer;
}

.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 3px solid #0d5b72;
  border-radius: 50%;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 3px;
  border-radius: 99px;
  background: #0d5b72;
  transform: translate(-50%, -50%);
}

.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item.is-open .faq__icon {
  background: #0d5b72;
}

.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after {
  background: #ffffff;
}

.faq__item.is-open .faq__icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.faq__item.is-open .faq__icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.faq__answer {
  max-width: 900px;
  padding: 0 72px 46px 0;
}

.faq__answer p {
  margin: 0;
  color: #202124;
  font-size: clamp(17px, 1.1vw, 21px);
  line-height: 1.55;
}

.faq__answer p a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.faq__answer p a:hover,
.faq__answer p a:focus-visible {
  color: var(--secondary);
}

@media (max-width: 760px) {
  .testimonials__heading {
    margin-bottom: 24px;
  }

  .testimonials__viewport {
    grid-auto-columns: minmax(286px, 86vw);
  }

  .faq {
    padding-block: 68px 76px;
  }

  .faq__wrap {
    width: min(100% - 32px, 560px);
  }

  .faq__heading {
    margin-bottom: 48px;
  }

  .faq__heading h2 {
    font-size: clamp(39px, 12vw, 54px);
  }

  .faq__question {
    min-height: 86px;
    font-size: 24px;
  }

  .faq__answer {
    padding-right: 0;
    padding-bottom: 32px;
  }
}

/* Final Figma match: photo carousel, insurance accepted and location */
.photo-carousel {
  padding-block: clamp(40px, 5vw, 74px);
  overflow: hidden;
  background: #ffffff;
}

.photo-carousel__track {
  width: 100%;
}

.photo-carousel__track img {
  width: 100%;
  height: clamp(210px, 16vw, 280px);
  display: block;
  object-fit: cover;
  object-position: center center;
}

.insurance-strip {
  display: none !important;
}

.insurance-accepted {
  padding-block: clamp(106px, 10vw, 166px) clamp(72px, 7vw, 112px);
  background: #ffffff;
}

.insurance-accepted__wrap {
  width: min(100% - 100px, 1720px);
  max-width: none;
}

.insurance-accepted__heading {
  max-width: 720px;
  margin: 0 auto clamp(110px, 9vw, 154px);
  text-align: center;
}

.insurance-accepted__eyebrow {
  margin: 0 0 34px;
  color: #202124;
  font-size: clamp(16px, 1.05vw, 21px);
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.insurance-accepted__heading h2 {
  margin: 0 0 48px;
  color: #202124;
  font-family: var(--font-display);
  font-size: clamp(54px, 4.4vw, 82px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.insurance-accepted__heading h2 em {
  display: block;
  color: #0d5b72;
  font-style: normal;
}

.insurance-accepted__heading p {
  max-width: 640px;
  margin: 0 auto;
  color: #202124;
  font-size: clamp(17px, 1.1vw, 20px);
  line-height: 1.55;
}

.insurance-accepted__logos {
  display: grid;
  grid-template-columns: 0.8fr 1.35fr 1.22fr 1.15fr 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
}

.insurance-accepted__logos img {
  width: 100%;
  max-height: 90px;
  object-fit: contain;
}

.insurance-accepted__mmm {
  color: #00767b;
  text-align: center;
}

.insurance-accepted__mmm::before {
  content: "";
  width: 92px;
  height: 46px;
  display: block;
  margin: 0 auto 8px;
  background: linear-gradient(145deg, transparent 0 36%, #00767b 37% 54%, transparent 55%),
    linear-gradient(16deg, transparent 0 45%, #00767b 46%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.insurance-accepted__mmm strong {
  display: block;
  font-size: 38px;
  line-height: 0.9;
  letter-spacing: 0.03em;
}

.insurance-accepted__mmm span {
  display: block;
  font-size: 16px;
  line-height: 1;
}

.location-section {
  padding-block: clamp(112px, 10vw, 168px);
  background: #ffffff;
}

.location-section__grid {
  width: min(100% - 136px, 1640px);
  max-width: none;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.2fr);
  gap: clamp(88px, 13vw, 218px);
  align-items: center;
}

.location-section__eyebrow {
  margin: 0 0 34px;
  color: #202124;
  font-size: clamp(16px, 1.05vw, 21px);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.location-section h2 {
  margin: 0 0 42px;
  color: #202124;
  font-family: var(--font-display);
  font-size: clamp(56px, 4.8vw, 86px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.location-section h2 em {
  display: block;
  color: #0d5b72;
  font-style: normal;
}

.location-section ul {
  display: grid;
  gap: 10px;
  margin: 0 0 32px;
  padding: 0;
  color: #202124;
  font-size: clamp(17px, 1.1vw, 20px);
  line-height: 1.35;
  list-style: none;
}

.location-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.btn--outline {
  color: #0789bd;
  border: 1.5px solid #0789bd;
  background: #ffffff;
}

.location-map {
  position: relative;
  min-height: clamp(290px, 19vw, 366px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(196, 216, 228, 0.45) 1px, transparent 1px) 0 0 / 82px 82px,
    linear-gradient(0deg, rgba(196, 216, 228, 0.45) 1px, transparent 1px) 0 0 / 82px 82px,
    #f4f2ef;
  box-shadow: inset 0 0 0 1px rgba(32, 33, 36, 0.06);
}

.location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.location-map__external {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1;
  padding: 8px 14px;
  border-radius: 6px;
  color: #145da0;
  background: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(32, 33, 36, 0.18);
}

.location-map__external:hover {
  background: #ffffff;
}

@media (max-width: 1180px) {
  .insurance-accepted__wrap,
  .location-section__grid {
    width: min(100% - 56px, 980px);
  }

  .insurance-accepted__logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px;
  }

  .location-section__grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }
}

@media (max-width: 760px) {
  .photo-carousel__track img {
    height: 180px;
  }

  .insurance-accepted,
  .location-section {
    padding-block: 72px;
  }

  .insurance-accepted__wrap,
  .location-section__grid {
    width: min(100% - 32px, 560px);
  }

  .insurance-accepted__heading {
    margin-bottom: 58px;
  }

  .insurance-accepted__heading h2,
  .location-section h2 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .insurance-accepted__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .location-map {
    min-height: 280px;
  }
}

/* Final Figma match: closing CTA + footer */
.final-cta {
  min-height: clamp(470px, 39vw, 606px);
  display: grid;
  align-items: center;
  color: #ffffff;
  background:
    linear-gradient(0deg, rgba(2, 43, 57, 0.74), rgba(2, 43, 57, 0.74)),
    url("./assets/images/footer-quirofano.webp") center center / cover no-repeat;
}

.final-cta__content {
  max-width: 920px;
  text-align: center;
}

.final-cta__eyebrow {
  margin: 0 0 44px;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(16px, 1.1vw, 21px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.final-cta h2 {
  margin: 0 auto 32px;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(62px, 5.4vw, 100px);
  font-style: italic;
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.final-cta h2 em {
  display: block;
  font-style: italic;
}

.final-cta__content > p:not(.final-cta__eyebrow) {
  max-width: 820px;
  margin: 0 auto 34px;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(16px, 1.15vw, 21px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.12em;
}

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.site-footer {
  padding-block: clamp(64px, 6vw, 88px) 0;
  color: #ffffff;
  background: #176477;
}

.site-footer__inner {
  width: min(100% - 56px, 1200px);
  max-width: none;
  display: block;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) auto auto;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
  padding-bottom: clamp(44px, 4vw, 64px);
}

.site-footer__brand {
  display: grid;
  gap: 22px;
  justify-items: start;
}

.site-footer__brand .brand__logo {
  width: 210px;
  filter: brightness(0) invert(1);
}

.site-footer__brand p {
  max-width: 350px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14.5px;
  line-height: 1.7;
}

.site-footer__heading {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.site-footer__col ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__col li {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px;
  line-height: 1.6;
}

.site-footer__col a {
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.site-footer__bottom > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.site-footer__legal a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  text-decoration: none;
}

.site-footer a:hover {
  color: #a9dcea;
}

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

@media (max-width: 760px) {
  .final-cta {
    min-height: 520px;
    padding-block: 72px;
  }

  .final-cta h2 {
    font-size: clamp(48px, 14vw, 68px);
  }

  .final-cta__content > p:not(.final-cta__eyebrow) {
    letter-spacing: 0.05em;
  }

  .site-footer__inner {
    width: min(100% - 32px, 560px);
  }

  .site-footer__bottom {
    justify-content: flex-start;
  }
}

/* Tipografía Figma: familias consistentes también en mobile */
.hero h1,
.hero__lead {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
}

.hero__note {
  font-family: "Poppins", var(--font-body);
  font-weight: 300;
}

.btn {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
}

.main-menu a {
  font-family: "Poppins", var(--font-body);
  font-weight: 500;
}

/* Redes sociales en footer */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
  font-size: 13px;
}

.site-footer__social a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 180ms ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: #ffffff;
}

/* Final targeted polish: approach section from Figma specs */
@media (min-width: 1025px) {
  .approach {
    padding-block: 72px 96px;
    background: #dff3f8;
  }

  .approach__grid {
    width: min(100% - 136px, 1692px);
    max-width: none;
  }

  .approach__content {
    min-height: 685px;
    display: flex;
    align-items: center;
    padding: 92px 740px 88px 70px;
    border-radius: 14px;
    background: #ffffff;
  }

  .approach__text {
    width: 100%;
    max-width: 560px;
  }

  .figma-checklist {
    gap: 4px;
    margin: 0;
    padding: 0;
    font-family: "Poppins", var(--font-body);
  }

  .figma-checklist li {
    min-height: 29px;
    padding-left: 30px;
    color: #202124;
    font-size: 16px;
    font-weight: 400;
    line-height: 29px;
  }

  .figma-checklist li::before {
    top: 5px;
    width: 15px;
    height: 15px;
    border-color: #0d5b72;
    color: #0d5b72;
    font-size: 10px;
  }

  .approach__photo {
    right: -90px;
    width: 815px;
    height: 815px;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
  }
}

@media (min-width: 1025px) and (max-width: 1480px) {
  .approach__content {
    padding-right: clamp(520px, 48vw, 680px);
  }

  .approach__photo {
    right: -95px;
    width: clamp(620px, 55vw, 760px);
    height: clamp(620px, 55vw, 760px);
  }
}

@media (max-width: 1024px) {
  .approach__text p {
    font-family: "Poppins", var(--font-body);
    font-weight: 400;
    line-height: 29px;
  }

  .figma-checklist,
  .figma-checklist li {
    font-family: "Poppins", var(--font-body);
    font-weight: 400;
    line-height: 29px;
  }
}

/* Education grid spacing fix: preserve Figma scale without cramped columns */
@media (min-width: 1320px) {
  .education__wrap {
    width: min(100% - 160px, 1606px);
  }

  .education__credentials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
  }

  .education__credential {
    min-height: 178px;
    padding-right: 18px;
  }

  .education__credential h3 {
    max-width: 100%;
  }
}

@media (min-width: 761px) and (max-width: 1319px) {
  .education__wrap {
    width: min(100% - 112px, 1120px);
  }

  .education__credentials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    row-gap: 72px;
  }

  .education__credential span,
  .education__credential h3 {
    font-size: clamp(34px, 3.35vw, 40px);
    line-height: 1.02;
  }

  .education__credential h3 {
    max-width: 480px;
  }

  .education__credential p {
    max-width: 480px;
  }
}

/* Evaluation section cleanup: no photo frame, single white surface */
.evaluation {
  background: #dff3f8;
}

.evaluation__media {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.evaluation__media img {
  border-radius: 0;
}

.evaluation__card {
  box-shadow: none;
}

@media (min-width: 1181px) {
  .evaluation__card {
    margin-left: 0;
    border-radius: 18px;
  }
}

/* Typography system from formation section downward */
:is(
  .education,
  .evaluation,
  .consult-flow,
  .services,
  .testimonials,
  .faq,
  .photo-carousel,
  .insurance-accepted,
  .location-section,
  .blog-preview,
  .consult,
  .final-cta,
  .site-footer
) :is(p, li, span, label, input, textarea) {
  font-family: "Poppins", var(--font-body);
}

:is(
  .education,
  .evaluation,
  .consult-flow,
  .services,
  .testimonials,
  .faq,
  .insurance-accepted,
  .location-section,
  .blog-preview,
  .consult,
  .final-cta
) :is(h2, h3) {
  font-family: "Playfair Display", Georgia, serif;
}

:is(
  .education__eyebrow,
  .evaluation__eyebrow,
  .consult-flow__eyebrow,
  .services__eyebrow,
  .testimonials__eyebrow,
  .faq__eyebrow,
  .insurance-accepted__eyebrow,
  .location-section__eyebrow,
  .final-cta__eyebrow,
  .blog-preview .eyebrow,
  .consult .eyebrow
) {
  font-family: "Poppins", var(--font-body);
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Legacy CTA safety net; final typography contract below is the source of truth. */
:is(
  .btn,
  .topbar__cta,
  .contact-form button,
  .testimonials__arrow
) {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
}

/* Preserve editorial numbering while CTAs stay Roboto */
.education__credential span {
  font-family: "Playfair Display", Georgia, serif;
}

/* Unified typography contract: keep section sizing local, unify font roles globally */
:root {
  --type-heading-family: "Playfair Display", Georgia, serif;
  --type-body-family: "Poppins", Arial, sans-serif;
  --type-button-family: "Roboto", Arial, sans-serif;
  --type-eyebrow-weight: 300;
  --type-eyebrow-tracking: 3px;
}

body,
p,
li,
label,
input,
textarea,
select {
  font-family: var(--type-body-family);
}

h1,
h2,
h3,
.section-heading h2,
.section-kicker h2,
.education__title h2,
.evaluation__card h2,
.consult-flow__heading h2,
.consult-flow__step h3,
.services__heading h2,
.service-card h3,
.service-card--figma h3,
.service-card__back h3,
.testimonials__heading h2,
.faq__heading h2,
.insurance-accepted__heading h2,
.location-section h2,
.final-cta h2 {
  font-family: var(--type-heading-family);
}

.eyebrow,
.hero .eyebrow,
.education__eyebrow,
.evaluation__eyebrow,
.consult-flow__eyebrow,
.services__eyebrow,
.testimonials__eyebrow,
.faq__eyebrow,
.insurance-accepted__eyebrow,
.location-section__eyebrow,
.final-cta__eyebrow,
.blog-preview .eyebrow,
.consult .eyebrow {
  font-family: var(--type-body-family);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}

button,
[type="button"],
[type="submit"],
.btn,
.btn--primary,
.btn--ghost,
.btn--outline,
.topbar__cta,
.contact-form button,
.testimonials__arrow,
.education__tab,
.faq__question {
  font-family: var(--type-button-family);
  font-weight: 500;
}

/* Final footer and review icon match */
.review-card__google {
  width: 24px;
  height: 24px;
  display: block !important;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

.review-card__google::before {
  content: none;
}

.services .service-card--figma h3,
.services .service-card__front h3,
.services .service-card__back h3 {
  max-width: 100%;
  font-family: var(--type-heading-family);
  font-weight: 400;
  font-style: normal;
  font-size: 26px;
  line-height: 32px;
  letter-spacing: 1px;
}

.services .service-card__front,
.services .service-card__back {
  padding-inline: 20px;
}

.services .service-card__back {
  padding-block: 30px 32px;
}

.services .service-card__back p {
  max-width: 100%;
}

.site-footer {
  padding-block: 0;
  color: #ffffff;
  background: #176477;
}

.site-footer__inner {
  width: min(100% - 300px, 1600px);
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(56px, 9vw, 180px);
}

.site-footer__left {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.site-footer__brandline,
.site-footer__copyright {
  margin: 0;
  color: #ffffff;
  font-family: var(--type-heading-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
}

.site-footer__right {
  display: grid;
  gap: 22px;
  justify-items: end;
}

.site-footer__nav,
.site-footer__legal {
  display: flex;
  align-items: center;
  gap: clamp(44px, 5vw, 82px);
}

.site-footer__nav a {
  color: #ffffff;
  font-family: var(--type-button-family);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-footer__legal {
  gap: clamp(34px, 4vw, 70px);
}

.site-footer__legal a {
  color: #ffffff;
  font-family: var(--type-heading-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.4px;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #d8edf3;
}

@media (max-width: 1180px) {
  .site-footer__inner {
    width: min(100% - 64px, 980px);
    min-height: auto;
    padding-block: 34px;
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__right {
    justify-items: start;
    width: 100%;
  }

  .site-footer__nav,
  .site-footer__legal {
    flex-wrap: wrap;
    gap: 18px 32px;
  }
}

@media (max-width: 760px) {
  .site-footer__inner {
    width: min(100% - 32px, 560px);
  }

  .services .service-card--figma h3,
  .services .service-card__front h3,
  .services .service-card__back h3 {
    font-size: 26px;
    line-height: 32px;
  }
}

/* ===== Correcciones de diseño — revisión marketing (julio 2026) ===== */

/* Globales: botones con icono y color de marca (elimina dorado legacy en mobile) */
.btn {
  gap: 10px;
}

.btn .btn__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Icono blanco de Figma sobre botón outline (fondo blanco): recolorear al azul de marca */
.btn--outline .btn__icon {
  filter: brightness(0) saturate(100%) invert(42%) sepia(85%) saturate(2050%) hue-rotate(174deg) brightness(92%) contrast(95%);
}

.btn--primary {
  color: #ffffff;
  background: #0789bd;
  box-shadow: none;
}

/* Cita: el velo de .final-cta (84%) está calibrado para una foto de
   quirófano ya oscura; esta foto (oficina, tonos claros) con el mismo
   84% queda casi tapada. Se baja la opacidad para esta imagen puntual
   para que la foto se distinga y el texto siga siendo legible. */
.quote-band {
  background:
    linear-gradient(0deg, rgba(2, 33, 44, 0.6), rgba(2, 33, 44, 0.6)),
    url("./assets/images/quote-office.webp") center center / cover no-repeat !important;
}

/* Formación: evitar "internacionales" viuda en la última línea del título */
.education__title h2 {
  text-wrap: balance;
}

/* Formación: nombres de doctores en Poppins Light */
.education__tab {
  font-family: "Poppins", var(--type-body-family);
  font-weight: 300;
}

/* Formación: ítems de credenciales en Playfair Display Regular */
.education__credential h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
}

/* Formación: reforzar estado activo del tab en mobile */
@media (max-width: 760px) {
  .education__tab {
    opacity: 0.45;
    padding-bottom: 10px;
    transition: opacity 180ms ease, color 180ms ease;
  }

  .education__tab.is-active {
    opacity: 1;
    color: #0d5b72;
    font-weight: 500;
  }
}

/* Mobile: dirección de la oficina visible bajo el logo en la primera pantalla */
@media (max-width: 760px) {
  .topbar__address--figma {
    display: flex !important;
    order: 10;
    flex: 1 1 100%;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    margin: 2px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(13, 47, 54, 0.08);
    color: #132f36;
    font-family: "Poppins", var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
  }

  .topbar__address--figma > span {
    max-width: 260px;
  }

  .topbar__address--figma > img {
    width: 14px;
    height: auto;
    margin-top: 2px;
    flex: 0 0 auto;
  }

  /* Botones e íconos de CTA un poco más grandes en mobile */
  .btn {
    min-height: 58px;
    padding-inline: 28px;
    gap: 12px;
    font-size: 15px;
  }

  .btn .btn__icon {
    width: 24px;
    height: 24px;
  }
}

/* Mobile: menú como navigation drawer (Material Design 3) —
   panel lateral de altura completa + scrim, en vez de la tarjeta flotante */
@media (max-width: 760px) {
  .nav-toggle--topbar {
    position: relative;
    z-index: 80;
  }

  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(2, 20, 26, 0.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1);
  }

  body.nav-open .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .main-menu {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 70;
    width: min(84vw, 340px);
    height: 100dvh;
    margin: 0;
    padding: 104px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: -18px 0 48px rgba(9, 38, 46, 0.22);
    transform: translateX(100%);
    opacity: 1;
    pointer-events: none;
    transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
    overflow-y: auto;
  }

  body.nav-open .main-menu {
    transform: translateX(0);
    pointer-events: auto;
  }

  .main-menu a:not(.btn) {
    justify-content: flex-start;
    min-height: 56px;
    padding: 0 20px;
    color: #15343c;
    background: transparent;
  }

  .main-menu a.is-active:not(.btn),
  .main-menu a:hover:not(.btn),
  .main-menu a:focus-visible:not(.btn) {
    color: #ffffff;
    background: #0d5364;
  }

  .main-menu__cta-item {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(13, 83, 100, 0.14);
  }

  .main-menu__cta-item a.btn {
    justify-content: center;
    width: 100%;
    min-height: 52px;
    color: #ffffff;
    background: #0789bd;
  }

  .main-menu__cta-item a.btn:hover,
  .main-menu__cta-item a.btn:focus-visible {
    color: #ffffff;
    background: #06618a;
  }
}

/* Evaluación: checks iguales a los del prototipo (enfoque) + espaciado entre ítems */
.evaluation__list {
  display: grid;
  gap: 12px;
}

.evaluation__list li {
  padding-left: 30px;
}

.evaluation__list li::before,
.figma-checklist li::before {
  content: "";
  top: 5px;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
  background: url("./assets/logos/task_alt.png") center / contain no-repeat;
}

/* Cómo funciona: "la Dra. Saavedra" itálica regular; pasos sin mayúsculas */
.consult-flow__heading h2 em {
  font-style: italic;
  font-weight: 400;
}

.consult-flow__step h3 {
  text-transform: none;
}

/* Servicios: degradé con cierre sólido para legibilidad del texto */
.service-card--figma::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(216, 237, 243, 0.72) 58%, rgba(216, 237, 243, 1) 100%);
}

/* Servicios: encuadre de la primera card consistente con las demás (recorta techo claro) */
.service-card--figma:first-child img {
  object-position: center 68%;
}

/* Opiniones: estrellas kid_star de Figma */
.review-card__stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.review-card__stars img {
  width: 21px;
  height: 19px;
  object-fit: contain;
}

/* Planes médicos: logos centrados verticalmente */
.insurance-accepted__logos {
  align-items: center;
}

/* Enfoque: título y texto alineados al margen izquierdo del card (anula justify-content:end legacy) */
@media (min-width: 1025px) {
  .approach__content {
    justify-content: flex-start;
  }
}

/* CTA final: fondo más oscuro para legibilidad */
.final-cta {
  background:
    linear-gradient(0deg, rgba(2, 33, 44, 0.84), rgba(2, 33, 44, 0.84)),
    url("./assets/images/footer-quirofano.webp") center center / cover no-repeat;
}

/* ============================================================
   SISTEMA TIPOGRÁFICO ÚNICO — fuente de verdad
   Escala: pretítulos 19px · títulos 50px · mensajes itálicos 60px · párrafos 16px
   Cualquier ajuste tipográfico futuro se hace SOLO en este bloque.
   ============================================================ */

/* 1 · Pretítulos (eyebrows) — Poppins Light 19/23, tracking 3px, mayúsculas */
.eyebrow,
.hero .eyebrow,
.education__eyebrow,
.evaluation__eyebrow,
.consult-flow__eyebrow,
.services__eyebrow,
.services__heading p.services__eyebrow,
.testimonials__eyebrow,
.faq__eyebrow,
.insurance-accepted__eyebrow,
.insurance-accepted__heading p.insurance-accepted__eyebrow,
.location-section__eyebrow,
.final-cta__eyebrow,
.quote-card span {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 19px;
  font-weight: 300;
  font-style: normal;
  line-height: 23px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Separación única pretítulo → título (la firma de la cita no lleva) */
.eyebrow,
.hero .eyebrow,
.education__eyebrow,
.evaluation__eyebrow,
.consult-flow__eyebrow,
.services__eyebrow,
.services__heading p.services__eyebrow,
.testimonials__eyebrow,
.faq__eyebrow,
.insurance-accepted__eyebrow,
.insurance-accepted__heading p.insurance-accepted__eyebrow,
.location-section__eyebrow,
.final-cta__eyebrow {
  margin-top: 0;
  margin-bottom: 44px;
}

/* Footer alineado a los márgenes de la sección Ubicación (68px @1440 · 140px @1920) */
@media (min-width: 761px) {
  .site-footer__inner {
    width: min(100% - 136px, 1640px);
  }
}

/* Evaluación: panel blanco = caja del texto (con aire interno), foto más alta que el panel
   arriba y abajo, como en Figma (foto 858px vs panel 665px de referencia) */
@media (min-width: 1181px) {
  .evaluation__wrap::before {
    display: none;
  }

  .evaluation__card {
    min-height: 0;
    padding-block: clamp(56px, 4.6vw, 88px);
  }

  .evaluation__card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 0 -100vw;
    border-radius: 0 18px 18px 0;
    background: #ffffff;
  }
}

@media (min-width: 1025px) {
  /* pretítulo del card de enfoque (contenido generado) */
  .approach__content::before {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 19px;
    font-weight: 300;
    line-height: 23px;
    letter-spacing: 3px;
  }
}

/* 2 · Títulos de sección — Playfair Display Medium 50/60, tracking -2px */
.education__title h2,
.education__copy h2,
.evaluation__card h2,
.consult-flow__heading h2,
.services__heading h2,
.section-heading h2,
.testimonials__heading h2,
.faq__heading h2,
.insurance-accepted__heading h2,
.location-section h2,
.insurance-strip h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-style: normal;
  font-weight: 500;
  font-size: 50px;
  line-height: 60px;
  letter-spacing: -2px;
}

/* Títulos que llevan énfasis itálico (misma escala 50/60) */
.evaluation__card h2,
.evaluation__card h2 em,
.faq__heading h2,
.faq__heading h2 em {
  font-style: italic;
  font-weight: 500;
}

.insurance-accepted__heading h2 em,
.services__heading h2 em {
  font-style: normal;
  font-weight: 500;
}

.services__heading h2,
.insurance-accepted__heading h2 {
  text-align: center;
}

/* 3 · Mensajes destacados en itálica — Playfair 60/72, tracking -2px */
.quote-card p,
.final-cta h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -2px;
  text-align: center;
}

.quote-card p em,
.final-cta h2 em {
  font-style: italic;
  font-weight: 400;
}

/* 4 · Párrafos — Poppins Regular 16/29 */
.approach__text p,
.education__summary,
.education__credential p,
.evaluation__lead,
.evaluation__list li,
.consult-flow__step p,
.services__heading p:not(.services__eyebrow),
.service-card p,
.service-card__back p,
.review-card p,
.faq__answer p,
.insurance-accepted__heading p:not(.insurance-accepted__eyebrow),
.location-section ul,
.location-section li,
.final-cta__content > p:not(.final-cta__eyebrow),
.figma-checklist li {
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 29px;
  letter-spacing: 0;
}

/* Excepción de la diseñadora: respuestas FAQ con interlineado 24px */
.faq__answer p {
  line-height: 24px;
}

/* 5 · Componentes tipográficos */
.faq__question {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: 0;
}

.faq__question span {
  font-family: inherit;
}

.consult-flow__step span,
.consult-flow__step h3,
.education__credential span,
.education__credential h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  line-height: 39px;
  letter-spacing: 1px;
  text-align: left;
}

.education__credential {
  text-align: left;
}

.education__credential span {
  color: rgba(32, 33, 36, 0.34);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.education__credential h3 {
  color: #0d5b72;
  margin-bottom: 26px;
}

.education__credential p {
  color: #34353a;
}

.education__tab {
  font-size: 28px;
  line-height: 60px;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.education__summary {
  color: #202124;
  text-align: right;
}

.education__title h2,
.education__copy h2 {
  color: #202124;
  text-align: left;
}

.quote-card p {
  color: #ffffff;
}

.quote-card span {
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

/* 6 · Escala responsive (única) */
@media (max-width: 760px) {
  .education__title h2,
  .education__copy h2,
  .evaluation__card h2,
  .consult-flow__heading h2,
  .services__heading h2,
  .section-heading h2,
  .testimonials__heading h2,
  .faq__heading h2,
  .insurance-accepted__heading h2,
  .location-section h2,
  .insurance-strip h2 {
    font-size: clamp(36px, 11vw, 44px);
    line-height: 1.12;
    letter-spacing: -1.4px;
  }

  .quote-card p,
  .final-cta h2 {
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1.12;
    letter-spacing: -1px;
  }

  .consult-flow__step span,
  .consult-flow__step h3,
  .education__credential span,
  .education__credential h3 {
    font-size: clamp(30px, 9vw, 36px);
    line-height: 1.08;
  }

  .education__tab {
    font-size: 22px;
    line-height: 36px;
    text-align: left;
  }

  .education__summary {
    text-align: left;
  }
}

/* ============================================================
   REVISIÓN 2 — Enfoque "Una cirujana con criterio clínico"
   Los textos aprobados ahora viven en el HTML. Este bloque
   apaga todos los textos generados por CSS de capas anteriores
   y estiliza los elementos reales.
   ============================================================ */
.approach__content::before,
.approach__content::after,
.approach__text p::before,
.approach__text p::after,
.figma-checklist li::after {
  content: none !important;
}

.approach__text .approach__kicker {
  max-width: none;
  margin: 0 0 28px;
  color: #202124;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 19px;
  font-weight: 300;
  line-height: 23px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.approach__text .approach__title {
  max-width: 560px;
  margin: 0 0 24px;
  color: #202124;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 50px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: -2px;
  text-wrap: balance;
}

.approach__text .approach__lead {
  max-width: 560px;
  margin: 0 0 16px;
  color: #202124;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
  text-wrap: pretty;
}

@media (max-width: 1024px) {
  .approach__text .approach__kicker {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 2.4px;
  }

  .approach__text .approach__title {
    font-size: clamp(30px, 5vw, 42px);
    line-height: 1.2;
    letter-spacing: -1px;
  }
}

@media (max-width: 760px) {
  .approach__text .approach__title {
    font-size: clamp(29px, 9vw, 36px);
  }
}

/* ============================================================
   REVISIÓN 2 — Formación y certificaciones
   Sin palabras viudas en títulos/párrafos y títulos de ítems
   con cuerpo reducido para evitar cortes abruptos.
   ============================================================ */
.education__title h2,
.education__copy h2,
.education__credential h3 {
  text-wrap: balance;
}

.education__summary,
.education__credential p {
  text-wrap: pretty;
}

.education__credential h3 {
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.28;
  letter-spacing: 0.2px;
}

.education__tab {
  white-space: nowrap;
  font-size: clamp(17px, 2.2vw, 28px);
}

@media (max-width: 760px) {
  .education__credential h3 {
    font-size: clamp(21px, 6.4vw, 26px);
    line-height: 1.28;
  }

  .education__tab {
    font-size: 20px;
    line-height: 34px;
  }
}

/* ============================================================
   REVISIÓN 2 — Evaluación y tratamiento
   Color exacto del botón primario (#0876A5) + microinteracción
   de la imagen (zoom sutil al hover).
   ============================================================ */
.btn--primary {
  background: #0876a5;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: #06618a;
}

.evaluation__media {
  overflow: hidden;
  /* Crea un contexto de apilamiento propio: en Safari, overflow:hidden
     puede no recortar un hijo transformado (scale) sin esto, y la
     imagen "se escapa" del marco al hacer hover. */
  isolation: isolate;
}

.evaluation__media img {
  /* Ligero sangrado (-1px) para que el redondeo de subpíxeles del
     grid nunca deje una línea blanca del fondo entre la imagen y
     su marco. */
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  transition: transform 480ms ease;
}

.evaluation__media:hover img,
.evaluation__media:focus-within img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .evaluation__media img {
    transition: none;
  }

  .evaluation__media:hover img,
  .evaluation__media:focus-within img {
    transform: none;
  }
}

/* ============================================================
   REVISIÓN 2 — Seguros médicos / Planes
   Logos con altura óptica uniforme y centrado en su celda.
   ============================================================ */
.insurance-accepted__logos {
  align-items: center;
  justify-items: center;
}

.insurance-accepted__logos img {
  width: auto;
  max-width: 100%;
  height: clamp(44px, 4.2vw, 64px);
  object-fit: contain;
}

@media (min-width: 1181px) {
  .insurance-accepted__logos {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.insurance-accepted__mmm::before {
  width: 72px;
  height: 36px;
}

.insurance-accepted__mmm strong {
  font-size: 30px;
}

.insurance-accepted__mmm span {
  font-size: 13px;
}

@media (max-width: 760px) {
  .insurance-accepted__logos img {
    height: 44px;
  }
}

/* El asset de MCS trae aire interno; se compensa para presencia óptica igual */
.insurance-accepted__logos img[alt^="MCS"] {
  height: clamp(52px, 5vw, 76px);
}

/* ============================================================
   REVISIÓN 3 — Ajustes de feedback de diseño
   ============================================================ */

/* Topbar: en el rango 1181-1420px el texto de la dirección
   choca con el logo centrado (el logo crece con el viewport
   mientras el texto se mantiene fijo a la izquierda). Se acota
   el logo y se envuelve la dirección en más líneas, más angostas. */
@media (min-width: 1181px) and (max-width: 1420px) {
  html body .topbar__brand .brand__logo {
    width: 200px !important;
  }

  .topbar__address--figma > span {
    max-width: 215px;
    font-size: 12.5px;
    line-height: 1.35;
  }
}

/* Trust-strip: tamaños exactos del diseño Figma (@1920) escalados a
   nuestra referencia de compatibilidad de 1440 (factor 0.75):
   auxilio-mutuo 280x75->210x56.25 · acs 237x74->177.75x55.5 ·
   facs 196x108->147x81 · dra-maiza 134x103->100.5x77.25 ·
   davinci 280x46->210x34.5. El clamp() reproduce ese valor exacto a
   1440px de viewport (vw = px/14.4) y se achica de forma
   proporcional en pantallas más chicas. */
@media (min-width: 761px) {
  .trust-strip__inner {
    min-height: 150px;
  }

  .trust-strip__inner img {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
  }

  .trust-strip__inner img:nth-child(1) {
    width: clamp(127px, 14.5833vw, 210px);
    height: clamp(34px, 3.90625vw, 56.25px);
    max-width: none;
    max-height: none;
  }

  .trust-strip__inner img:nth-child(2) {
    width: clamp(106px, 12.347vw, 177.75px);
    height: clamp(33px, 3.85417vw, 55.5px);
    max-width: none;
    max-height: none;
  }

  .trust-strip__inner img:nth-child(3) {
    width: clamp(89px, 10.208vw, 147px);
    height: clamp(49px, 5.625vw, 81px);
    max-width: none;
    max-height: none;
  }

  .trust-strip__inner img:nth-child(4) {
    width: clamp(78px, 9.0278vw, 130px);
    height: clamp(60px, 6.9444vw, 100px);
    max-width: none;
    max-height: none;
  }

  .trust-strip__inner img:nth-child(5) {
    width: clamp(128px, 14.583vw, 210px);
    height: clamp(21px, 2.39583vw, 34.5px);
    max-width: none;
    max-height: none;
  }
}

/* Título de "Una cirujana con criterio clínico": la segunda parte
   ("sala de operaciones") en itálica, igual que el resto de los
   títulos de sección con énfasis. */
.approach__text .approach__title em {
  color: #0d5b72;
  font-style: italic;
  font-weight: 500;
}

/* Cómo funciona: los títulos de paso a 40px hacían que cada columna
   envolviera el texto de forma distinta según el largo de la
   palabra, dando la impresión de columnas desiguales. Un cuerpo
   más chico deja que casi todos quepan en una línea. */
.consult-flow__step h3 {
  font-size: 30px;
  line-height: 1.22;
}

/* Seguros aceptados: tamaños exactos del diseño Figma (@1920)
   escalados a 1440 (factor 0.75):
   triple-m 130x98.16->97.5x73.62 · triple-s 332.74x98.78->249.56x74.09 ·
   mcs 404.67x98.78->303.5x74.09 · menonita 201.9x91.85->151.43x68.89 ·
   auxilio-salud-plus 156x59->117x44.25 · mapfre 298x59->223.5x44.25.
   El clamp() reproduce ese valor exacto a 1440px (vw = px/14.4). */
.insurance-accepted__logos img[alt^="Triple-M"],
.insurance-accepted__logos img[alt^="Triple-S"],
.insurance-accepted__logos img[alt^="MCS"],
.insurance-accepted__logos img[alt^="Plan de Salud Menonita"],
.insurance-accepted__logos img[alt^="Auxilio Salud Plus"],
.insurance-accepted__logos img[alt="MAPFRE"] {
  width: auto;
  max-width: none;
  max-height: none;
}

.insurance-accepted__logos img[alt^="Triple-M"] {
  width: clamp(58px, 6.7708vw, 97.5px);
  height: clamp(44px, 5.11268vw, 73.6226px);
}

.insurance-accepted__logos img[alt^="Triple-S"] {
  width: clamp(148px, 17.3305vw, 249.559px);
  height: clamp(44px, 5.14497vw, 74.0875px);
}

.insurance-accepted__logos img[alt^="MCS"] {
  width: clamp(180px, 21.0764vw, 303.5px);
  height: clamp(44px, 5.14497vw, 74.0875px);
}

.insurance-accepted__logos img[alt^="Plan de Salud Menonita"] {
  width: clamp(90px, 10.5156vw, 151.425px);
  height: clamp(41px, 4.78394vw, 68.8888px);
}

.insurance-accepted__logos img[alt^="Auxilio Salud Plus"] {
  width: clamp(71px, 8.125vw, 117px);
  height: clamp(27px, 3.07292vw, 44.25px);
}

.insurance-accepted__logos img[alt="MAPFRE"] {
  width: clamp(136px, 15.5208vw, 223.5px);
  height: clamp(27px, 3.07292vw, 44.25px);
}

/* Con los anchos reales de Figma (MCS 303.5px, Triple-S 249.6px, MAPFRE
   223.5px, etc.) 6 columnas de igual fr fuerzan overflow o se pisan.
   Columnas a su contenido real + espacio disponible entre ellas. */
@media (min-width: 1181px) {
  .insurance-accepted__logos {
    grid-template-columns: repeat(6, max-content);
    justify-content: space-between;
    gap: clamp(16px, 2.2vw, 40px);
  }
}

/* ============================================================
   REVISIÓN 4 — Quote band según referencia de Figma
   Banda más compacta, imagen visible y cita a escala editorial.
   ============================================================ */
.quote-band {
  min-height: 380px;
  padding-block: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(0deg, rgba(2, 39, 52, 0.72), rgba(2, 39, 52, 0.72)),
    url("./assets/images/quote-office.webp") center 44% / cover no-repeat !important;
}

.quote-band__grid {
  width: min(100% - 48px, 1180px);
}

.quote-card {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

.quote-card p {
  max-width: 960px;
  margin: 0 auto 22px;
  color: #ffffff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(36px, 3.05vw, 44px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.18;
  letter-spacing: -1.4px;
  text-align: center;
  text-shadow: none;
}

.quote-card span {
  color: rgba(255, 255, 255, 0.92);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 23px;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .quote-band {
    min-height: 300px;
  }

  .quote-card p {
    font-size: clamp(29px, 8vw, 36px);
    line-height: 1.16;
    letter-spacing: -0.8px;
  }

  .quote-card span {
    font-size: 12px;
    letter-spacing: 2px;
  }
}

/* ============================================================
   REVISIÓN 5 — Quote band: imagen más visible como Figma
   ============================================================ */
.quote-band {
  min-height: clamp(420px, 26.5vw, 488px);
  padding-block: 0;
  display: grid;
  place-items: center;
  background-color: #0b3442;
  background-image:
    linear-gradient(90deg, rgba(2, 31, 43, 0.22) 0%, rgba(2, 31, 43, 0.03) 44%, rgba(2, 31, 43, 0.22) 100%),
    linear-gradient(0deg, rgba(4, 43, 56, 0.52), rgba(4, 43, 56, 0.52)),
    url("./assets/images/quote-office.webp") !important;
  background-position: center center, center center, center 48% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.quote-band__grid {
  width: min(100% - 48px, 1200px);
}

.quote-card {
  max-width: 1060px;
  margin-inline: auto;
}

.quote-card p {
  max-width: 1060px;
  margin: 0 auto 24px;
  font-size: clamp(39px, 3vw, 50px);
  line-height: 1.2;
  letter-spacing: -1.2px;
}

.quote-card span {
  font-size: 15px;
  line-height: 23px;
  letter-spacing: 3px;
}

@media (max-width: 760px) {
  .quote-band {
    min-height: 320px;
    background-position: center center !important;
  }

  .quote-card p {
    font-size: clamp(30px, 8.2vw, 38px);
    line-height: 1.16;
  }
}

/* ============================================================
   REVISIÓN 6 — Quote band sin interferencia de CSS legacy
   Se anula el background antiguo y se reconstruye en capas.
   ============================================================ */
.quote-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(420px, 26.5vw, 488px);
  background: #0b3442 !important;
}

.quote-band::before,
.quote-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.quote-band::before {
  z-index: -2;
  background: url("./assets/images/quote-office.webp") center 48% / cover no-repeat;
  filter: saturate(1.04) contrast(1.22) brightness(0.98);
  transform: scale(1.01);
}

.quote-band::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 35, 47, 0.2) 0%, rgba(3, 35, 47, 0.08) 42%, rgba(3, 35, 47, 0.2) 100%),
    rgba(6, 51, 64, 0.2);
}

.quote-band__grid,
.quote-card {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .quote-band::before {
    background-position: center center;
  }
}