:root {
  --navy: #17325c;
  --navy-deep: #0e2038;
  --navy-soft: #52627a;
  --green: #4f9e2f;
  --green-dark: #3c7a22;
  --green-pale: #eaf4e2;
  --amber: #f2a33c;
  --amber-dark: #d6862a;
  --coral: #e8654f;
  --blue: #2a63ab;
  --paper: #ffffff;
  --bg: #f5f8fb;
  --line: rgba(23, 50, 92, 0.12);
  --shadow-sm: 0 10px 24px -16px rgba(15, 35, 70, 0.28);
  --shadow-lg: 0 28px 56px -28px rgba(15, 35, 70, 0.32);

  --font-display: 'Poppins', 'Century Gothic', 'Futura', 'Avenir Next', 'Segoe UI Semibold', 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, 'Liberation Mono', monospace;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --wrap: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; margin: 0; font-weight: 700; color: var(--navy); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: clamp(1.25rem, 4vw, 2.5rem); padding-right: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.section-alt { background: var(--paper); }

.icon { width: 1.3em; height: 1.3em; flex-shrink: 0; }
.icon-sm { width: 1rem; height: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green-dark);
  background: var(--green-pale);
  display: inline-flex;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
}

.section-head { max-width: 640px; margin: 0 0 2.6rem; }
.section-head h2 { font-size: clamp(1.7rem, 2vw + 1rem, 2.35rem); margin-top: 0.7rem; line-height: 1.2; }
.section-head p { margin-top: 0.7rem; color: var(--navy-soft); font-size: 1.02rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 700; font-size: 0.94rem; padding: 0.85rem 1.6rem; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-deep); transform: translateY(-1px); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--navy); }
.btn-outline:hover { border-color: var(--green); color: var(--green-dark); }
.btn-outline-blue { color: var(--blue); }
.btn-outline-blue:hover { border-color: var(--blue); color: var(--blue); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ---------- NAV ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.97); border-bottom: 1px solid var(--line); }
.nav-inner { max-width: 1400px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 0.6rem; padding-top: 0.85rem; padding-bottom: 0.85rem; gap: 1rem; }
.nav-brand { display: flex; align-items: center; gap: 0.6rem; }
.nav-brand img { height: 38px; width: 38px; border-radius: 10px; }
.nav-brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.1; color: var(--navy); }
.brand-accent { color: var(--green); }
.brand-accent.small { font-size: 0.7em; }

.nav-toggle { display: none; background: none; border: none; padding: 0.4rem; color: var(--navy); cursor: pointer; }
.nav-toggle .icon { width: 1.6rem; height: 1.6rem; }

.nav-menu { display: flex; align-items: center; gap: 1.6rem; }
.nav-links { display: flex; align-items: center; gap: 1.15rem; }
.nav-links a { font-size: 0.92rem; font-weight: 600; color: var(--navy-soft); transition: color 0.15s ease; }
.nav-links a:hover { color: var(--green-dark); }
.nav-actions { display: flex; align-items: center; gap: 0.7rem; }

@media (max-width: 1200px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: fixed; inset: 64px 0 0 0; background: var(--paper); flex-direction: column; align-items: stretch;
    padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem); gap: 1.4rem; transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease; overflow-y: auto;
  }
  .nav-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .nav-actions { flex-direction: column; align-items: stretch; }
  .nav-actions .btn { width: 100%; }
}

/* ---------- PROFESSIONAL STRIP (index.html — médico/odontólogo CTA, above the nav) ---------- */
.pro-strip { background: linear-gradient(100deg, var(--navy-deep) 0%, var(--navy) 100%); }
.pro-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.7rem 1.6rem; padding: 0.8rem 0; text-align: center; }
.pro-strip-text { color: rgba(255,255,255,0.92); font-size: 0.92rem; font-weight: 600; }
.pro-strip-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.btn-pro { background: var(--amber); color: var(--navy-deep); font-size: 0.88rem; padding: 0.6rem 1.3rem; }
.btn-pro:hover { background: #fff; color: var(--navy-deep); transform: translateY(-1px); }
@media (max-width: 640px) {
  .pro-strip-inner { padding: 0.7rem 0; }
  .pro-strip-text { font-size: 0.84rem; }
}

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #eef4ff 0%, var(--bg) 55%); padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.hero > .wrap { position: relative; z-index: 1; text-align: center; }

.hero-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.hero-doctor-avatar {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  box-shadow: 0 14px 26px -12px rgba(15, 35, 70, 0.4);
  border: 3px solid rgba(255, 255, 255, 0.8);
  animation: heroAvatarFloat 7s ease-in-out infinite;
}
.hero-doctor-avatar-ring { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px dashed rgba(23, 50, 92, 0.18); }

@keyframes heroAvatarFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(3deg); }
}

@media (max-width: 760px) {
  .hero-doctor-avatar { width: 40px; height: 40px; font-size: 0.78rem; }
  .hero-doctor-avatar[data-hide-mobile] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-doctor-avatar { animation: none !important; }
}
/* ---------- HERO-STATIC (unete-medicos.html) — real photo on desktop, plain gradient on mobile ---------- */
.hero-static { background: linear-gradient(165deg, #e9f7f3 0%, #eef4ff 42%, var(--bg) 80%); }

/* .wrap auto-centers within .hero everywhere on the site — fine for uniform-background sections,
   but here it pushes the whole text block ~53px away from the real left edge for no reason. Drop
   just the left half of that centering so the text block sits as far left as .wrap's own padding allows. */
.hero-static .wrap { margin-left: 0; }

/* left-align all hero copy — the base .hero rule centers text (for the homepage's centered hero),
   and h1/.hero-sub carry their own auto side-margins for that same centered layout. Both need
   overriding here or the text still reads centered inside its column even at text-align:left. */
.hero-text-panel { text-align: left; }
.hero-text-panel h1,
.hero-text-panel .hero-sub {
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 1280px) {
  .hero-static {
    background-image: url('hero-doctor-bg.webp');
    background-size: cover;
    background-position: 54% 46%;
    background-repeat: no-repeat;
  }
  /* text stays near the left, over the globe; form sits center-left; the right third is
     left empty so the doctor in the photo stays fully visible */
  .hero-static .unete-hero-grid { grid-template-columns: minmax(0, 380px) minmax(0, 400px) minmax(0, 1fr); gap: 1.75rem; }

  /* text sits directly on the photo — no card/box, just a light-safe color + shadow */
  .hero-text-panel .hero-tagline,
  .hero-text-panel h1,
  .hero-text-panel .hero-sub,
  .hero-text-panel .check-item,
  .hero-text-panel .hero-cta-secondary,
  .hero-text-panel .hero-microcopy {
    /* a solid dark halo hugging each letter — not a background, part of the text itself.
       Needed because this patch of photo swings from near-black to near-white within a few
       pixels (measured), so no single flat text color reads reliably without it. */
    text-shadow:
      0 0 1px rgba(2, 16, 22, 1),
      0 0 3px rgba(2, 16, 22, 0.95),
      0 0 6px rgba(2, 16, 22, 0.85),
      0 0 12px rgba(2, 16, 22, 0.7),
      0 0 20px rgba(2, 16, 22, 0.5);
  }
  .hero-text-panel .hero-tagline { color: #fff; }
  .hero-text-panel h1 { color: #fff; }
  .hero-static .hero-text-panel h1 .accent { color: var(--amber); }
  .hero-text-panel .hero-sub { color: #fff; }
  .hero-text-panel .check-item { color: #fff; }
  .hero-text-panel .check-item .icon { color: var(--amber); }
  .hero-text-panel .hero-cta-secondary { color: #fff; }
  .hero-text-panel .hero-microcopy {
    color: #fff;
    font-weight: 600;
    /* smallest text on the photo — needs a tighter, stronger halo than the shared one above */
    text-shadow:
      0 0 1px rgba(2, 16, 22, 1),
      0 0 2px rgba(2, 16, 22, 1),
      0 0 4px rgba(2, 16, 22, 0.95),
      0 0 8px rgba(2, 16, 22, 0.8);
  }

  /* pull content up into the empty photo space above the globe, and give the headline more presence there */
  .hero.hero-static { padding-top: clamp(1.1rem, 2.4vw, 1.8rem); }
  .hero-static .hero-text-panel h1 { font-size: clamp(2.3rem, 3.6vw + 0.8rem, 3.5rem); }

  /* the lead-card was reading too large next to the trimmed text column — tighten it */
  .hero-static .unete-hero-grid { display: block; min-height: 600px; }
  .hero-static .hero-text-panel { max-width: 400px; }
  /* center the form on the full page width so it stays at the true middle of the screen at every
     size, independent of the text column. left:50% would center on .wrap instead (.wrap has its
     own position:relative for the homepage hero's layering, and caps out at 1160px) — 50vw reads
     off the real viewport instead, sidestepping that regardless of which ancestor is positioned. */
  .hero-static .lead-card {
    position: absolute;
    top: 0;
    left: 50vw;
    width: 340px;
    /* .lead-card also has the shared heroRise entrance animation (translateY only), which — being
       an animation — overrides any plain `transform` declared here. Bake the centering into its
       own keyframes instead so both apply together. */
    animation: heroRiseCentered 0.6s ease-out both;
    animation-delay: 0.12s;
  }
  .hero-static .lead-card { padding: 1.15rem 1.25rem; }
  .hero-static .lead-card h2 { font-size: 1rem; margin-bottom: 0.2rem; }
  .hero-static .lead-card .lead-sub { font-size: 0.8rem; margin-bottom: 0.8rem; }
  .hero-static .lead-card .lead-row { gap: 0.6rem; }
  .hero-static .lead-card .field-group { margin-bottom: 0.6rem; }
  .hero-static .lead-card .field-group label { font-size: 0.7rem; margin-bottom: 0.25rem; }
  .hero-static .lead-card .field-group input,
  .hero-static .lead-card .field-group select.field-select { padding: 0.55rem 0.7rem; font-size: 0.86rem; }
  .hero-static .lead-card .btn-block { padding: 0.65rem 1.3rem; font-size: 0.88rem; }
  .hero-static .lead-card .lead-submit { margin-top: 0.8rem; }
  .hero-static .lead-card .lead-divider { margin: 0.85rem 0; }

  .hero-static .lead-icon { width: 2.4rem; height: 2.4rem; margin-bottom: 0.7rem; }
}

/* subtle entrance for the two hero panels — respects prefers-reduced-motion via the global override above */
@keyframes heroRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.hero-text-panel, .lead-card { animation: heroRise 0.6s ease-out both; }
.lead-card { animation-delay: 0.12s; }
/* same rise, but with the lead-card's horizontal centering baked into every frame */
@keyframes heroRiseCentered {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* scroll-reveal for card grids — class is added by JS only, so content stays visible if JS never runs */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }

/* ---------- LEAD ICON (brand mark above the lead-card form) ---------- */
.lead-icon {
  width: 2.8rem; height: 2.8rem; margin-bottom: 0.9rem;
  border-radius: 10px; background: var(--green-pale); color: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
}
.lead-icon .icon { width: 1.4rem; height: 1.4rem; }

/* ---------- LEAD TRUST (checkmarks under the submit button) ---------- */
.lead-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.9rem; }
.lead-trust li {
  display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--navy-soft);
}
.lead-trust li::before {
  content: ''; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
  background: var(--green-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c7a22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/60% no-repeat;
}

/* ---------- HERO CTA ROW (primary + secondary link, under the benefits list) ---------- */
.hero-cta-row { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-top: 1.7rem; }
.hero-cta-secondary { font-weight: 700; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; }
.hero-microcopy { margin-top: 1.3rem; font-size: 0.8rem; color: var(--navy-soft); }
.hero-benefits { margin-top: 1.4rem; }

.hero-tagline { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--navy-soft); }
.hero h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); line-height: 1.12; margin-top: 0.7rem; max-width: 20ch; margin-left: auto; margin-right: auto; }
.hero h1 .accent { color: var(--green); }
.hero-sub { margin-top: 1.1rem; font-size: 1.08rem; color: var(--navy-soft); max-width: 68ch; margin-left: auto; margin-right: auto; }

.search-card {
  margin-top: 2.2rem; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 1.3rem; text-align: left;
}
.search-card-badge {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem;
  background: var(--green-pale); color: var(--green-dark); font-size: 0.76rem; font-weight: 700;
  padding: 0.4rem 0.8rem; border-radius: var(--radius-pill);
}
.search-card-note {
  display: flex; align-items: flex-start; gap: 0.45rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: 0.82rem; color: var(--navy-soft); text-align: left;
}
.search-card-note .icon { color: var(--green-dark); flex-shrink: 0; margin-top: 0.15rem; }
.search-card-note span { flex: 1 1 auto; min-width: 0; }
.search-card-note strong { color: var(--navy); }

.search-card-simple { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; padding: 2.2rem 2.4rem; }
.btn-lg { width: 100%; max-width: 420px; padding: 1.05rem 2.6rem; font-size: 1.05rem; }
.btn-lg .icon { width: 1.25rem; height: 1.25rem; }
@media (max-width: 480px) {
  .search-card-simple { padding: 1.8rem 1.3rem; }
  .btn-lg { width: 100%; }
}

.chip-row { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: center; }
.chip-row-label { font-size: 0.82rem; color: var(--navy-soft); margin-right: 0.2rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: var(--radius-pill);
  background: var(--paper); border: 1px solid var(--line); font-size: 0.85rem; font-weight: 600; color: var(--navy);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.chip:hover { border-color: var(--green); color: var(--green-dark); }
.chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- PILLARS ---------- */
.pillars-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.1rem; }
@media (max-width: 980px) { .pillars-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .pillars-grid { grid-template-columns: 1fr; } }
.pillar { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.4rem; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--green); }
.pillar-icon { width: 2.8rem; height: 2.8rem; border-radius: 12px; background: var(--green-pale); display: flex; align-items: center; justify-content: center; color: var(--green-dark); margin-bottom: 1rem; }
.pillar h3 { font-size: 1.02rem; margin-bottom: 0.5rem; }
.pillar p { font-size: 0.9rem; color: var(--navy-soft); line-height: 1.6; }

/* ---------- FLOW STEPS ---------- */
.flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.4rem; counter-reset: step; }
@media (max-width: 980px) { .flow-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .flow-grid { grid-template-columns: 1fr; } }
.flow-step { position: relative; padding-top: 0.5rem; }
.flow-num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--green); opacity: 0.55; }
.flow-step h3 { font-size: 1.02rem; margin-top: 0.5rem; }
.flow-step p { font-size: 0.9rem; color: var(--navy-soft); margin-top: 0.4rem; line-height: 1.6; }

/* ---------- SPECIALTY / CITY GRIDS ---------- */
.specialty-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 980px) { .specialty-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px) { .specialty-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.specialty-card {
  display: flex; align-items: center; gap: 0.8rem; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 1rem 1.1rem; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.specialty-card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.specialty-card .icon-wrap { width: 2.3rem; height: 2.3rem; border-radius: 10px; background: var(--green-pale); color: var(--green-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.specialty-card span.name { font-size: 0.9rem; font-weight: 700; }

/* ---------- APP DOWNLOAD (PWA) ---------- */
.app-download { text-align: center; }
.app-download-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-soft); font-weight: 700; }
.app-download-title { margin-top: 0.4rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.app-download-sub { margin-top: 0.6rem; color: var(--navy-soft); max-width: 46ch; margin-left: auto; margin-right: auto; }
.app-badges { margin-top: 1.6rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem; }
.app-badge {
  display: inline-flex; align-items: center; gap: 0.6rem; background: var(--navy); color: #fff; border: none; cursor: pointer;
  border-radius: 12px; padding: 0.7rem 1.3rem; transition: transform 0.15s ease, background 0.15s ease;
}
.app-badge:hover { transform: translateY(-1px); background: var(--navy-deep); }
.app-badge img { width: 1.9rem; height: 1.9rem; flex-shrink: 0; border-radius: 6px; }
.app-badge span { display: flex; flex-direction: column; line-height: 1.2; text-align: left; font-family: var(--font-body); }
.app-badge span small { font-size: 0.62rem; opacity: 0.75; }
.app-badge span strong { font-size: 0.98rem; }
.app-download-note { margin-top: 1rem; font-size: 0.82rem; color: var(--navy-soft); }

dialog.install-dialog { border: none; border-radius: 20px; padding: 1.7rem 1.8rem; max-width: 360px; width: calc(100% - 2.5rem); box-shadow: var(--shadow-lg); }
dialog.install-dialog::backdrop { background: rgba(10, 17, 40, 0.55); }
dialog.install-dialog h3 { font-size: 1.1rem; margin-bottom: 0.9rem; }
dialog.install-dialog p, dialog.install-dialog li { color: var(--navy-soft); font-size: 0.92rem; line-height: 1.6; }
dialog.install-dialog ol { padding-left: 1.2rem; margin: 0 0 1.3rem; list-style: decimal; }
dialog.install-dialog .btn { width: 100%; margin-top: 0.2rem; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.9rem; }
.faq-item {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 0 1.4rem; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq-item[open] { border-color: var(--green); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.15rem 0; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; font-weight: 700; font-size: 1rem; color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 6px; }
.faq-item summary .faq-chevron { color: var(--green-dark); transition: transform 0.2s ease; }
.faq-item[open] summary .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 0 1.3rem; color: var(--navy-soft); font-size: 0.95rem; line-height: 1.65; }
.faq-answer a { color: var(--green-dark); font-weight: 700; }
.faq-more { text-align: center; margin-top: 2rem; font-size: 0.92rem; color: var(--navy-soft); }
.faq-more a { color: var(--green-dark); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item summary .faq-chevron { transition: none; }
}

/* ---------- TRUST / LEGAL GRID ---------- */
.legal-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; }
@media (max-width: 900px) { .legal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .legal-grid { grid-template-columns: 1fr; } }
.legal-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.legal-card-icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--green-pale); display: flex; align-items: center; justify-content: center; color: var(--green-dark); }
.legal-card h3 { font-size: 1.02rem; }
.legal-card p { font-size: 0.89rem; color: var(--navy-soft); line-height: 1.6; }
.legal-card a.inline-link { font-size: 0.85rem; font-weight: 700; color: var(--green-dark); margin-top: auto; display: inline-flex; align-items: center; gap: 0.3rem; }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.68); }
.footer-grid { padding: 3rem 0 2rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid-5 { grid-template-columns: 1.3fr 0.8fr 0.8fr 0.9fr 0.9fr; }
@media (max-width: 860px) { .footer-grid-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid-5 { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; }
.footer-brand img { height: 34px; width: 34px; border-radius: 9px; }
.footer-brand-word { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.02rem; }
.site-footer .tag { margin-top: 0.9rem; font-style: italic; color: rgba(255,255,255,0.5); font-size: 0.88rem; }
.site-footer .desc { margin-top: 0.6rem; font-size: 0.86rem; line-height: 1.6; max-width: 32ch; }
.site-footer h4 { color: #fff; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; font-family: var(--font-mono); }
.site-footer ul li { margin-bottom: 0.6rem; }
.site-footer a { font-size: 0.87rem; transition: color 0.15s ease; }
.site-footer a:hover { color: var(--amber); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 1.4rem 0; font-size: 0.76rem; color: rgba(255,255,255,0.4); font-family: var(--font-mono); display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; justify-content: space-between; }
.footer-bottom a { color: rgba(255,255,255,0.55); }

/* ---------- DOCTOR PROFILE ---------- */
.profile-header { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.profile-meta h1 { font-size: 1.5rem; }
.profile-specialty { color: var(--green-dark); font-weight: 700; margin-top: 0.3rem; }
.profile-location { display: flex; align-items: center; gap: 0.4rem; color: var(--navy-soft); font-size: 0.92rem; margin-top: 0.5rem; }
.profile-bio { margin-top: 0.9rem; color: var(--navy-soft); line-height: 1.65; max-width: 60ch; }
.coverage-tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.35rem 0.85rem; font-size: 0.78rem; font-weight: 600; color: var(--navy-soft); }

.profile-grid { margin-top: 1.8rem; display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.4rem; align-items: start; }
.profile-grid > * { min-width: 0; }
@media (max-width: 860px) { .profile-grid { grid-template-columns: 1fr; } }

.booking-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem; }
.booking-card h2 { font-size: 1.15rem; }
.date-tabs { margin-top: 1.1rem; display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.3rem; }
.date-tab {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-md);
  padding: 0.6rem 1rem; font-size: 0.82rem; font-weight: 700; text-align: center; cursor: pointer; color: var(--navy-soft);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.date-tab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.slot-grid { margin-top: 1.1rem; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.6rem; }
@media (max-width: 460px) { .slot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.slot-btn {
  border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius-md); padding: 0.65rem 0.5rem;
  font-weight: 700; font-size: 0.88rem; cursor: pointer; color: var(--navy); transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.slot-btn:hover { border-color: var(--green); }
.slot-btn.is-selected { background: var(--green); border-color: var(--green); color: #fff; }
.slot-empty { grid-column: 1 / -1; color: var(--navy-soft); font-size: 0.88rem; padding: 0.5rem 0; }

.booking-form { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.booking-form .selected-slot-line { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 700; margin-bottom: 1rem; color: var(--navy); }
.booking-form .selected-slot-line .icon { color: var(--green-dark); }
.field-group { margin-bottom: 0.9rem; }
.field-group label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy-soft); margin-bottom: 0.4rem; }
.field-group input, .field-group textarea, .field-group select.field-select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.75rem 0.9rem; font: inherit; font-size: 0.94rem; color: var(--navy);
  background: var(--paper); transition: border-color 0.15s ease;
}
.field-group input:focus, .field-group textarea:focus, .field-group select.field-select:focus { outline: none; border-color: var(--green); }
.field-group textarea { resize: vertical; min-height: 5rem; }
.field-error { display: none; color: var(--coral); font-size: 0.78rem; margin-top: 0.35rem; }
.field-group.has-error input, .field-group.has-error textarea { border-color: var(--coral); }
.field-group.has-error .field-error { display: block; }

.confirmation-panel { text-align: center; padding: 1.5rem 0.5rem; }
.confirmation-icon { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--green-pale); color: var(--green-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; }
.confirmation-icon .icon { width: 1.9rem; height: 1.9rem; }
.confirmation-panel h3 { font-size: 1.15rem; }
.confirmation-panel p { margin-top: 0.6rem; color: var(--navy-soft); font-size: 0.92rem; line-height: 1.6; }
.confirmation-panel .btn { margin-top: 1.3rem; }

.sidebar-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem; margin-bottom: 1rem; }
.sidebar-card h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy-soft); font-family: var(--font-mono); margin-bottom: 0.7rem; }
.sidebar-card p { font-size: 0.88rem; color: var(--navy-soft); line-height: 1.6; }
.sidebar-card a.inline-link { color: var(--green-dark); font-weight: 700; font-size: 0.85rem; }

/* ---------- UNETE-MEDICOS layout helpers ---------- */
.unete-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (max-width: 860px) { .unete-hero-grid { grid-template-columns: 1fr; } }
.pillars-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .pillars-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .pillars-grid-3 { grid-template-columns: 1fr; } }

/* ---------- LEAD CARD (unete-medicos.html hero form) ---------- */
.lead-card { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.6rem; }
.lead-card h2 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.lead-card .lead-sub { font-size: 0.86rem; color: var(--navy-soft); margin-bottom: 1.3rem; }
.lead-submit { margin-top: 1.1rem; }
.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 560px) { .lead-row { grid-template-columns: 1fr; } }
.lead-divider { display: flex; align-items: center; gap: 0.8rem; margin: 1.3rem 0; color: var(--navy-soft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); }
.lead-divider::before, .lead-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- CHECK LIST (value props) ---------- */
.check-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.9rem 1.6rem; }
@media (max-width: 700px) { .check-list { grid-template-columns: 1fr; } }
.check-item { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.98rem; color: var(--navy); line-height: 1.5; }
.check-item .icon { color: var(--green); flex-shrink: 0; margin-top: 0.15rem; width: 1.25rem; height: 1.25rem; }
.check-item strong { font-weight: 700; }
.check-list.hero-benefits { grid-template-columns: 1fr; gap: 0.6rem; }

/* ---------- PAIN LIST (problem framing) — 4 dynamic cards ---------- */
.pain-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 980px) { .pain-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pain-list { grid-template-columns: 1fr; } }
.pain-item {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem; box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.pain-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--coral); }
.pain-item .mark {
  display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
  border-radius: 50%; background: var(--coral); color: #fff; font-family: var(--font-mono);
  font-size: 0.82rem; font-weight: 700; flex-shrink: 0; margin-bottom: 1rem;
}
.pain-item p { color: var(--navy-soft); font-size: 0.94rem; line-height: 1.55; }
.pain-item strong { color: var(--navy); display: block; margin-bottom: 0.3rem; font-size: 1.02rem; }

/* ---------- VALUE BAND (unete-medicos.html) ---------- */
.value-band { background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 100%); }
.value-band-kicker { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--amber); margin-bottom: 1.1rem; }
.value-band-quote { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw + 0.8rem, 1.9rem); line-height: 1.35; color: #fff; font-weight: 700; }
.value-band-quote strong { color: var(--green); }
.value-band-quote .accent-light { color: var(--amber); }
.value-band-checks { margin-top: 1.8rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.value-band-check { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: rgba(255,255,255,0.85); text-align: left; }
.value-band-check .icon { color: var(--green); width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

/* ---------- OFFER GRID (qué incluye tu plan) ---------- */
.offer-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.4rem; }
@media (min-width: 861px) { .offer-grid { gap: 2.4rem; } }
@media (max-width: 860px) { .offer-grid { grid-template-columns: 1fr; } }
.offer-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.offer-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.offer-card-bonus { border-color: var(--amber); background: linear-gradient(175deg, var(--green-pale) 0%, var(--paper) 42%); }
.offer-card-badge {
  position: absolute; top: -0.7rem; right: 1.6rem; background: var(--amber); color: var(--navy); font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0.32rem 0.85rem; border-radius: var(--radius-pill);
  font-family: var(--font-mono); white-space: nowrap; box-shadow: var(--shadow-sm);
}
/* connector between the paid plan and the free bonus, desktop only */
@media (min-width: 861px) {
  .offer-grid::after {
    content: '+'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--green);
    color: var(--green-dark); font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
  }
}
.offer-card-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.offer-card-icon { width: 3rem; height: 3rem; border-radius: 12px; background: var(--green-pale); color: var(--green-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.offer-card-tag { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy-soft); font-weight: 700; display: block; }
.offer-card h3 { font-size: 1.1rem; margin-top: 0.25rem; }
.offer-list { display: flex; flex-direction: column; gap: 0.65rem; }
.offer-list li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; color: var(--navy); line-height: 1.5; }
.offer-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: 0.55rem; }

/* ---------- STAT STRIP (planes) ---------- */
.stat-strip { margin-top: 2.2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2rem 0; }
.stat-strip-item { flex: 1 1 200px; text-align: center; padding: 0 1.2rem; border-left: 1px solid var(--line); }
.stat-strip-item:first-child { border-left: none; }
.stat-strip-item strong { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--navy); }
.stat-strip-item span { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--navy-soft); }
@media (max-width: 640px) { .stat-strip-item { border-left: none; border-top: 1px solid var(--line); padding: 0.9rem 0.5rem 0; } .stat-strip-item:first-child { border-top: none; } }

/* ---------- PRICING (planes) ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; }
.pricing-grid[hidden] { display: none; }
@media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; } }
.price-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.4rem; text-align: center; position: relative; display: flex; flex-direction: column; }
.price-card.is-featured { border: 2px solid var(--green); box-shadow: var(--shadow-lg); }
.price-card-badge { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); background: var(--green-dark); color: #fff; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.32rem 0.85rem; border-radius: var(--radius-pill); font-family: var(--font-mono); white-space: nowrap; }
.price-card-period { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy-soft); font-weight: 700; }
.price-card-save {
  align-self: center; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--green-dark); background: var(--green-pale);
  padding: 0.22rem 0.65rem; border-radius: var(--radius-pill);
}
.price-card-amount { margin-top: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.price-card-amount .currency { font-size: 1.1rem; vertical-align: top; margin-right: 0.1rem; }
.price-card-amount .unit { font-size: 0.78rem; font-weight: 600; color: var(--navy-soft); margin-left: 0.2rem; }
.price-card-monthly { margin-top: 0.3rem; color: var(--green-dark); font-size: 0.9rem; font-weight: 700; flex: 1; font-variant-numeric: tabular-nums; }
.price-card-note { margin-top: 0.5rem; font-size: 0.74rem; color: var(--navy-soft); line-height: 1.4; }
.price-card .btn { margin-top: 1.1rem; }
.pricing-note { text-align: center; margin-top: 2rem; font-size: 0.88rem; color: var(--navy-soft); }

/* Bigger touch targets for the pricing toggle + CTA on phones (WCAG 44px minimum) */
@media (max-width: 640px) {
  #planes .chip { padding: 0.7rem 1.1rem; min-height: 44px; }
  #planes .price-card .btn { min-height: 44px; padding-top: 0.8rem; padding-bottom: 0.8rem; }
}

/* ---------- TIMELINE (flujo de implementación) ---------- */
.timeline { max-width: 640px; margin: 0 auto; position: relative; }
.timeline-item { position: relative; padding-left: 3.6rem; padding-bottom: 2.2rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: 1.2rem; top: 2.6rem; bottom: -0.2rem; width: 2px; background: var(--line); }
.timeline-item:last-child::before { display: none; }
.timeline-marker { position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1rem; box-shadow: 0 8px 16px -8px rgba(79, 158, 47, 0.55); }
.timeline-content h3 { font-size: 1.05rem; }
.timeline-content p { margin-top: 0.4rem; color: var(--navy-soft); font-size: 0.92rem; line-height: 1.6; }

#implementacion .wrap { max-width: 640px; }

/* Horizontal stepper on wider screens — vertical timeline stays for mobile/tablet */
@media (min-width: 900px) {
  #implementacion .wrap { max-width: 1080px; }
  .timeline { display: flex; align-items: flex-start; max-width: none; gap: 0.5rem; }
  .timeline-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 0 0.8rem; padding-bottom: 0;
  }
  .timeline-marker { position: relative; left: auto; top: auto; margin-bottom: 1.1rem; z-index: 1; }
  .timeline-item::before {
    left: -50%; right: auto; top: 1.2rem; bottom: auto; width: 100%; height: 2px;
  }
  .timeline-item:first-child::before { display: none; }
  .timeline-item:last-child::before { display: block; }
  .timeline-content p { max-width: 24ch; }
}

.not-found { text-align: center; padding: 5rem 1.5rem; }
.not-found h1 { font-size: 1.6rem; }
.not-found p { margin-top: 0.8rem; color: var(--navy-soft); }
.not-found .btn { margin-top: 1.5rem; }

/* ---------- HOME HERO (index.html) — centered content on a dark overlay over the patient
   photo. Deliberately its own look: unete-medicos.html keeps hero-doctor-bg.webp, a left-
   aligned layout and light-patch text colors via the shared .hero-static rules above — this
   page never falls back to that shared gradient or shares that photo. ---------- */

/* solid dark fallback below the photo breakpoint, not the shared .hero-static gradient, so
   this hero is visually distinct from unete-medicos.html's at every width, not just ≥1024px */
.hero-patient.hero-static { background: var(--navy-deep); }

.hero-overlay {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(9,20,38,0.72) 0%, rgba(9,20,38,0.58) 55%, rgba(9,20,38,0.8) 100%);
}

@media (min-width: 1024px) {
  .hero-patient.hero-static {
    background-image: url('hero-patient-bg.webp');
    background-size: cover;
    background-position: 68% 22%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(calc(100vh - 72px), 760px);
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  }
  .hero-patient.hero-static > .wrap { width: 100%; }
}

/* centered content at every width — the overlay guarantees contrast regardless of what part
   of the photo sits behind the text, so nothing needs to hug a specific light patch anymore */
.hero-patient.hero-static .home-hero-grid { max-width: 640px; margin-left: auto; margin-right: auto; padding-left: 0; }
.hero-patient .hero-text-panel { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.hero-patient .hero-text-panel h1,
.hero-patient .hero-text-panel .hero-sub { margin-left: auto; margin-right: auto; }
.hero-patient .home-search-card { text-align: center; }
.hero-patient .home-search-actions { justify-content: center; }
.chip-row.hero-chip-row.hero-chip-row { justify-content: center; }

/* white text on the overlay, unconditionally — no halo-shadow needed since the overlay itself
   carries the contrast, unlike the médico hero's light-patch approach above */
.hero-patient.hero-static .hero-tagline,
.hero-patient.hero-static .hero-text-panel h1,
.hero-patient.hero-static .hero-text-panel .hero-sub,
.hero-patient.hero-static .home-search-title,
.hero-patient.hero-static .search-card-note,
.hero-patient.hero-static .chip-row-label {
  color: #fff;
  text-shadow: none;
}
.hero-patient.hero-static .hero-tagline { color: rgba(255,255,255,0.78); }
.hero-patient.hero-static h1 .accent { color: var(--green); }
.hero-patient.hero-static .search-card-note strong { color: #fff; }
.hero-patient.hero-static .search-card-note .icon { color: var(--green); }

.hero-patient.hero-static .chip { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); color: #fff; }
.hero-patient.hero-static .chip:hover { background: rgba(255,255,255,0.22); border-color: #fff; color: #fff; }

.hero-patient.hero-static .home-search-actions .btn-outline { color: #fff; border-color: rgba(255,255,255,0.55); }
.hero-patient.hero-static .home-search-actions .btn-outline:hover { background: rgba(255,255,255,0.14); border-color: #fff; color: #fff; }

/* the floating cartoon avatar decoration doesn't belong over a real photo — hide it here only */
.hero-patient .hero-blobs { display: none; }

/* unboxed on purpose — text and controls sit directly on the overlay, no card/shadow */
.home-search-card { margin-top: 1.7rem; text-align: left; }
.home-search-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 1rem; color: var(--navy); }
.home-search-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: flex-start; }
.home-search-actions .btn { flex: 0 1 auto; width: auto; padding-left: 1.6rem; padding-right: 1.6rem; }
.home-search-card .search-card-note { margin-top: 1.1rem; padding-top: 0; border-top: none; }

.chip-row.hero-chip-row { justify-content: flex-start; }

/* ---------- HERO HOOKS (ganchos: gratis / registro fácil / descarga la app) ---------- */
.hero-hooks { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.hero-hook {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.32); color: #fff;
  font-size: 0.85rem; font-weight: 700;
}
.hero-hook .icon { color: var(--green); width: 1rem; height: 1rem; }
a.hero-hook-link { cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
a.hero-hook-link:hover { background: rgba(255,255,255,0.26); border-color: #fff; }

.final-cta-wrap { max-width: 640px; text-align: center; }
.final-cta-wrap h2 { font-size: clamp(1.7rem, 2vw + 1rem, 2.35rem); }
.final-cta-wrap .btn { margin-top: 1.6rem; }
.final-cta-note { margin-top: 1rem; font-size: 0.9rem; color: var(--navy-soft); }