/* Editorial typography and clinical imagery refinement */
body {
  font-family: "DM Sans", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.eyebrow { gap: 11px; font-size: 11px; letter-spacing: 0.16em; }
h1, h2 { font-family: Manrope, "Segoe UI", sans-serif; letter-spacing: -0.048em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: clamp(48px, 5.2vw, 72px); font-weight: 650; }
.section-heading h2, .services h2, .benefits h2, .faq h2, .contact h2 { font-size: clamp(40px, 4vw, 56px); font-weight: 620; }
.hero-lead { font-size: 18px; line-height: 1.78; max-width: 620px; }
.section-heading > p, .services-intro > p:not(.eyebrow), .faq-intro p:last-child { font-size: 16px; line-height: 1.75; }
.problem-card h3, .service-item h3, .process-step h3, .specialty-card h3, .benefit-list h3 { letter-spacing: -0.025em; }
.problem-card p, .process-step p, .service-item p, .specialty-card li, .benefit-list p, details p { line-height: 1.72; }
.contact-email { color: #d9f5f3; font-weight: 650; font-size: 15px; border-bottom: 1px solid rgba(217,245,243,.42); transition: color .2s ease, border-color .2s ease; }
.contact-email:hover { color: #fff; border-color: #fff; }

.problems, .services, .process, .specialties, .benefits, .faq { position: relative; isolation: isolate; overflow: hidden; }
.problems::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 46%;
  height: 620px;
  background: linear-gradient(90deg, rgba(251,254,254,.9) 0%, rgba(251,254,254,.3) 34%, rgba(251,254,254,.58) 100%), url("assets/clinic-images/recepcion-clinica.png") center / cover no-repeat;
  opacity: .62;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}
.process::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 52%;
  background: linear-gradient(90deg, #fbfefe 0%, rgba(251,254,254,.42) 30%, rgba(251,254,254,.5) 100%), url("assets/clinic-images/recepcion-clinica.png") center / cover no-repeat;
  opacity: .4;
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
}
.services::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,45,67,.98) 0%, rgba(8,45,67,.93) 46%, rgba(8,45,67,.78) 100%), url("assets/clinic-images/operacion-administrativa.png") center / cover no-repeat;
}
.specialty-card { isolation: isolate; background-color: #fff; }
.specialty-card::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .6s ease;
}
.specialty-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.68) 45%, rgba(255,255,255,.96) 72%, #fff 84%);
}
.specialty-card.dental::before { background-image: url("assets/clinic-images/consultorio-odontologico.png"); }
.specialty-card.aesthetic::before { background-image: url("assets/clinic-images/consulta-medicina-estetica.png"); }
.specialty-card:hover::before { transform: scale(1.025); }
.specialty-art { opacity: .65; }
.benefits::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(100deg, rgba(8,45,67,.99) 0%, rgba(11,54,80,.94) 55%, rgba(11,54,80,.82) 100%), url("assets/clinic-images/operacion-administrativa.png") right center / cover no-repeat;
}
.faq::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 48% 0 0;
  background: linear-gradient(90deg, rgba(251,254,254,.56) 0%, rgba(251,254,254,.34) 55%, #fbfefe 100%), url("assets/clinic-images/consulta-medicina-estetica.png") center / cover no-repeat;
  opacity: .46;
  mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
}

@media (max-width: 700px) {
  body { font-size: 15px; line-height: 1.68; }
  h1 { font-size: clamp(40px, 12vw, 48px); line-height: 1.04; letter-spacing: -0.045em; }
  .section-heading h2, .services h2, .benefits h2, .faq h2, .contact h2 { font-size: clamp(34px, 10vw, 43px); line-height: 1.08; }
  .hero-lead { font-size: 16px; line-height: 1.72; }
  .eyebrow { font-size: 10px; line-height: 1.45; letter-spacing: .14em; }
  .problems::before { inset: 0 -45% auto 12%; height: 520px; opacity: .48; }
  .process::before { inset: 0 -45% 0 30%; opacity: .25; }
  .specialty-card::after { background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.76) 43%, rgba(255,255,255,.98) 70%, #fff 82%); }
  .faq::before { inset: 0 -50% 0 20%; opacity: .25; mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%); }
  .service-item h3 { font-size: 22px; }
  .specialty-card h3 { font-size: 22px; }
  .contact-card h2 { font-size: 38px; }
}