/* ==========================================================================
   Sanatorio Alta Gracia — hoja de estilos
   Paleta tomada del isologo institucional (azul marino + azul medio).
   ========================================================================== */

:root {
  --navy: #1f2547;
  --navy-deep: #141833;
  --blue: #4b67ae;
  --blue-light: #7690c9;
  --blue-pale: #eef1f9;
  --bg: #f6f8fb;
  --card: #ffffff;
  --text: #1f2547;
  --text-dim: #5c6478;
  --border: #e3e7f0;
  --radius: 16px;
  --gradient: linear-gradient(120deg, var(--navy) 0%, var(--blue) 100%);
  --shadow: 0 20px 45px -20px rgba(31, 37, 71, 0.25);
  --shadow-sm: 0 10px 25px -12px rgba(31, 37, 71, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 14px 28px -10px rgba(75, 103, 174, 0.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(75, 103, 174, 0.65); }

.btn-outline {
  background: transparent;
  border-color: transparent;
  /* An inset box-shadow instead of `border` avoids a mobile-rendering seam
     where a thin border can show a tiny gap on a fully rounded (pill)
     corner — box-shadow paints as one continuous shape instead of four
     separate edges. */
  box-shadow: inset 0 0 0 1.5px var(--navy);
  color: var(--navy);
}
.btn-outline:hover { background: var(--navy); color: #fff; box-shadow: inset 0 0 0 1.5px var(--navy); transform: translateY(-2px); }

.btn-outline-light {
  background: rgba(255,255,255,0.06);
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55);
  color: #fff;
  backdrop-filter: blur(4px);
}
.btn-outline-light:hover { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px #fff; transform: translateY(-2px); }

.btn-sm { padding: 10px 18px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 72px;
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
/* The blur/background live on a pseudo-element instead of #header itself.
   A backdrop-filter (or transform/filter) on #header would make it the
   "containing block" for any position:fixed descendant — which is exactly
   what the mobile nav panel is — breaking it into a sliver clipped to the
   header's own height instead of covering the screen. Keeping the filter
   off the real element avoids that side effect. */
#header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s ease;
}
#header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 8px 24px -16px rgba(31, 37, 71, 0.25);
}
#header.scrolled::before {
  background: rgba(255, 255, 255, 0.97);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
}

.logo { display: flex; align-items: center; }
.logo img { height: 42px; width: auto; }

.main-nav ul { display: flex; align-items: center; gap: 6px; }
.main-nav a {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
.main-nav a:hover { color: var(--blue); background: var(--blue-pale); }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 1px;
  width: auto; height: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.main-nav a:hover::after { transform: scaleX(1); }

.main-nav .nav-cta { display: none; }

.header-actions { display: flex; align-items: center; gap: 12px; }


.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 168px 0 100px;
  color: #fff;
  overflow: hidden;
  background-color: var(--navy-deep);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(20, 24, 51, 0.94) 0%, rgba(31, 37, 71, 0.88) 45%, rgba(75, 103, 174, 0.55) 100%);
}

.hero-inner { position: relative; z-index: 1; max-width: 700px; }

.eyebrow {
  position: relative;
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  color: #cfd9f2;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height: 1.18;
  margin: 0 0 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero h1 .accent { color: #9fb3e6; }

.hero-sub {
  font-size: 1.1rem;
  color: #d6ddf0;
  max-width: 560px;
  margin-bottom: 36px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 44px; }

.hero-info {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero-info-item { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: #d6ddf0; }
.hero-info-item svg { width: 20px; height: 20px; flex-shrink: 0; color: #9fb3e6; }
.hero-info-item a { font-weight: 600; color: #fff; }
.hero-info-item a:hover { text-decoration: underline; }

/* ---------- Quick access strip ---------- */
.quick-access {
  position: relative;
  z-index: 2;
  margin-top: -56px;
  margin-bottom: 40px;
}
.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.quick-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

/* Two distinct tones within the brand's navy → blue palette, one per card. */
.quick-card:nth-child(1) { --quick-color: #1f2547; --quick-glow: rgba(31,37,71,0.4); --quick-tint: rgba(31,37,71,0.16); }
.quick-card:nth-child(2) { --quick-color: #4b67ae; --quick-glow: rgba(75,103,174,0.4); --quick-tint: rgba(75,103,174,0.18); }

.quick-card:hover {
  transform: translateY(-4px);
  background: linear-gradient(160deg, var(--quick-tint, rgba(75,103,174,0.16)) 0%, transparent 75%), var(--card);
  border-color: var(--quick-color, var(--blue));
  box-shadow: 0 0 34px -8px var(--quick-glow, rgba(75,103,174,0.4)), var(--shadow);
}

/* Diagonal light sweep across the card on hover. */
.quick-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.7s ease;
}
.quick-card:hover::after { left: 130%; }

.quick-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
  color: #fff;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.quick-card:hover .quick-icon {
  background: var(--quick-color, var(--blue));
  box-shadow: 0 0 22px -2px var(--quick-glow, rgba(75,103,174,0.5));
}
.quick-icon svg { width: 28px; height: 28px; }
.quick-card h3 { margin: 0 0 4px; font-size: 1.08rem; transition: color 0.25s ease; }
.quick-card:hover h3 { color: var(--quick-color, var(--navy)); }
.quick-card p { margin: 0 0 12px; color: var(--text-dim); font-size: 0.9rem; }
.quick-card .btn { padding: 9px 18px; font-size: 0.82rem; }

@media (prefers-reduced-motion: reduce) {
  .quick-card:hover { transform: none; }
  .quick-card::after { display: none; }
}

/* ---------- Sections ---------- */
.section { padding: 100px 0; position: relative; overflow: hidden; }
.section-alt { background: var(--blue-pale); }
.section > .container { position: relative; z-index: 1; }

/* Generic decorative photo background — very low opacity, faded at the
   top/bottom edges so it reads as a subtle texture behind the content
   rather than a competing image. */
.section-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.section-photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.32;
  filter: saturate(0.85);
}
/* Especialidades: true fixed background (image stays still, the page
   scrolls over it) — done with a CSS background instead of a
   translated <img>, plus a good deal more visible than the other
   section backgrounds. */
.section-photo-bg-fixed {
  position: absolute;
  inset: 0;
  background-image: url('../img/sag-especialidades.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.62;
  filter: saturate(0.85);
}
/* Obra Social section reuses the same fixed-parallax technique with
   its own photo, cropped to hide the stock photo's English label,
   at the site's default background visibility. */
.section-photo-bg-fixed--porque {
  background-image: url('../img/sag-porque.jpg');
  background-position: 75% center;
  opacity: 0.6;
}
@media (max-width: 780px) {
  /* iOS/mobile browsers largely ignore background-attachment: fixed,
     so it falls back to scrolling with the page — still fine, just
     not a true parallax there. */
  .section-photo-bg-fixed { background-attachment: scroll; opacity: 0.5; }
  .section-photo-bg-fixed--porque { opacity: 0.48; }
}
@media (prefers-reduced-motion: reduce) {
  .section-photo-bg-fixed { background-attachment: scroll; }
}
.section-photo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(246,248,251,0.35) 22%, rgba(246,248,251,0.35) 78%, var(--bg) 100%);
}
.section-alt .section-photo-bg::after {
  background: linear-gradient(180deg, var(--blue-pale) 0%, rgba(238,241,249,0.35) 22%, rgba(238,241,249,0.35) 78%, var(--blue-pale) 100%);
}
/* The two fixed-parallax sections show much more of the photo now,
   so the old edge fade (solid page-color band at 0%/100%) reads as
   a harsh white glow against the brighter image. Soften it: less
   opaque, and the transition happens over a much thinner strip. */
#especialidades .section-photo-bg::after,
#obras-sociales .section-photo-bg::after {
  background: linear-gradient(180deg, rgba(246,248,251,0.45) 0%, rgba(246,248,251,0) 10%, rgba(246,248,251,0) 90%, rgba(246,248,251,0.45) 100%);
}

@media (max-width: 780px) {
  .section-photo-bg img { opacity: 0.26; }
}
@media (prefers-reduced-motion: reduce) {
  .section-photo-bg img { opacity: 0.27; }
}

.section-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section-eyebrow {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--blue);
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.section-sub { color: var(--text-dim); font-size: 1.02rem; }

/* ---------- Especialidades ---------- */
.specialties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.specialty-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.specialty-card:hover {
  background: linear-gradient(160deg, rgba(75,103,174,0.14) 0%, rgba(31,37,71,0.08) 100%), var(--card);
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
  transform: translateY(-4px);
}
.specialty-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-pale);
  color: var(--blue);
  margin-bottom: 14px;
  transition: background 0.25s ease, color 0.25s ease;
}
.specialty-icon svg { width: 30px; height: 30px; }
.specialty-card:hover .specialty-icon { background: var(--gradient); color: #fff; }
.specialty-card h3 { margin: 0 0 6px; font-size: 1rem; }
.specialty-card p { margin: 0; color: var(--text-dim); font-size: 0.86rem; }

.specialties-note {
  margin-top: 34px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* ---------- Institucional ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}
/* The image's own tall aspect ratio must not dictate the row height, or
   "stretch" ends up growing the row (and the text column) to match the
   photo instead of shrinking the photo to match the text. Taking the
   frame out of flow (absolute, filling .about-media) removes the image
   from that height calculation entirely — so the row height is driven
   only by the text column, and the photo is cropped down to fit it. */
.about-media { position: relative; }
.about-media-frame {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 6px solid #fff;
}
.about-media-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }

.about-text .section-eyebrow { margin-bottom: 12px; }
.about-text h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 800; margin: 0 0 18px; letter-spacing: -0.01em; }
.about-text p { color: var(--text-dim); margin-bottom: 18px; }

.about-list { margin-top: 26px; display: grid; gap: 14px; }
.about-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text);
}
.about-list svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--blue);
  margin-top: 1px;
}

/* ---------- Obra Social ---------- */
.insurance-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 18px;
}
.insurance-logo {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.insurance-logo:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}
.insurance-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) opacity(0.6);
  transition: filter 0.25s ease;
}
.insurance-logo:hover img {
  filter: grayscale(0) opacity(1);
}
.insurance-note {
  text-align: center;
  margin: 34px 0 0;
  color: var(--text-dim);
  font-size: 0.98rem;
}
.insurance-note a { color: var(--blue); font-weight: 700; }
.insurance-note a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .insurance-logo:hover { transform: none; }
}
@media (hover: none) {
  /* Touch devices have no hover — show logos in full color directly. */
  .insurance-logo img { filter: none; }
}

/* ---------- Contacto ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-info { display: grid; gap: 20px; margin-bottom: 30px; }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
}
.contact-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-pale);
  color: var(--blue);
}
.contact-icon svg { width: 22px; height: 22px; }
.contact-item h3 { margin: 0 0 4px; font-size: 0.96rem; }
.contact-item p, .contact-item a { margin: 0; color: var(--text-dim); font-size: 0.92rem; }
.contact-item a:hover { color: var(--blue); }

.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  height: 220px;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.contact-form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-sm);
}
.contact-form-card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.contact-form-card > p { margin: 0 0 24px; color: var(--text-dim); font-size: 0.92rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.94rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(75,103,174,0.15);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.form-note { margin-top: 14px; font-size: 0.88rem; color: var(--blue); min-height: 1.2em; }
.form-note-error { color: #c0392b; }

/* ---------- Footer ---------- */
.footer {
  background: var(--navy-deep);
  color: #cfd5ea;
  padding: 64px 0 26px;
  position: relative;
  overflow: hidden;
}
.footer-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.footer-photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0.27;
  mix-blend-mode: luminosity;
}
.footer-photo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--navy-deep) 0%, rgba(20,24,51,0.4) 30%, var(--navy-deep) 100%);
}
.footer > .container { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-logo { height: 40px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-col p { color: #a7aed0; font-size: 0.9rem; margin: 0; max-width: 320px; }
.footer-col h4 { color: #fff; font-size: 0.98rem; margin: 0 0 18px; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: #a7aed0; font-size: 0.9rem; transition: color 0.2s ease; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 0.82rem;
  color: #8890b3;
}
.footer-credit {
  text-align: right;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.footer-credit-name {
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  margin: 0 0 3px;
}
.footer-credit-links {
  margin: 0;
  font-size: 0.82rem;
  color: #a7aed0;
}
.footer-credit-links a { color: #a7aed0; transition: color 0.2s ease; }
.footer-credit-links a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .specialties-grid { grid-template-columns: repeat(2, 1fr); }
  .insurance-grid { grid-template-columns: repeat(4, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .about-media { height: 340px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .main-nav {
    position: fixed;
    top: 72px; left: 0; right: 0;
    z-index: 1001;
    background: #fff;
    padding: 10px 24px 24px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 24px 40px -16px rgba(20, 24, 51, 0.35);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .main-nav.open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }

  /* Dims the rest of the page behind the open panel, so the menu reads as
     a focused overlay rather than a plain white sheet. Tapping it closes
     the menu (see script.js). */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    top: 72px;
    background: rgba(15, 18, 40, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 999;
  }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }

  .main-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav a {
    display: block;
    width: 100%;
    padding: 14px 12px;
    border-radius: 10px;
    border-bottom: none;
  }
  .main-nav a::after { display: none; }
  .main-nav a:hover, .main-nav a:active { background: var(--blue-pale); }
  .main-nav ul li { border-bottom: 1px solid var(--border); }
  .main-nav ul li:last-child { border-bottom: none; }
  .main-nav .nav-cta { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 14px; }
  .main-nav .nav-cta .btn { width: 100%; }
  .header-actions .btn { display: none; }
  .nav-toggle { display: flex; }
  .hero { padding-top: 130px; }
  .quick-grid { grid-template-columns: 1fr; }
  .quick-access { margin-top: -34px; }
}

@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .specialties-grid { grid-template-columns: 1fr; }
  .insurance-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .footer-credit { text-align: center; width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .hero-actions { flex-direction: column; }
}

@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .hero h1 { font-size: 1.85rem; }
  .quick-card { flex-direction: column; text-align: center; }
  .contact-form-card { padding: 26px 20px; }
  .insurance-grid { grid-template-columns: repeat(2, 1fr); }
}