/* ==========================================================================
   Urologyn Care — design tokens
   Palette sampled from the live site (teal #008e99 CTA/brand, warm tan
   #b9a077 secondary, #f4ebe2 topbar). Aliased to --color-* names as well so
   the cookie-consent block's CSS (assets/js/consent.js) works unmodified.
   ========================================================================== */
:root {
  --teal: #008e99;
  --teal-dark: #016d73;
  --teal-light: #e6f4f5;
  --tan: #b9a077;
  --tan-dark: #a08a63;
  --gold: #d99a2b;
  --gold-dark: #b87e1c;
  --topbar-bg: #f4ebe2;
  --text: #333333;
  --text-light: #6b6b6b;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-500: #71717a;
  --white: #ffffff;
  --radius: 3px;
  /* Separate radius token for interactive buttons only (cards/inputs/images
     keep the crisp 3px clinical look via --radius) — rounder corners read
     as more inviting/tappable without tipping into the uniform bubbly
     radius that makes an interface look AI-templated. */
  --radius-btn: 8px;
  /* WhatsApp's own brand green, reserved for buttons that actually open a
     wa.me chat. Matches .whatsapp-float below (already uses #25d366) so
     every WhatsApp CTA on the site shares one recognizable, destination-
     matched action color instead of each guessing at brand teal or tan —
     the floating button already proved this pattern works; this extends it
     to the CTAs that actually drive the appointment funnel. #128c7e is
     WhatsApp's own secondary brand teal-green, used here as the hover/dark
     shade instead of an arbitrary darkened green. */
  --wa-green: #25d366;
  --wa-green-dark: #128c7e;
  --fw-regular: 500;
  --fw-semibold: 700;
  --max-width: 1200px;

  /* aliases for the ported cookie-consent block */
  --color-white: var(--white);
  --color-black: var(--text);
  --color-blue: var(--teal);
  --color-gray-100: var(--gray-100);
  --color-gray-200: var(--gray-200);
  --color-gray-500: var(--gray-500);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  line-height: 1.6;
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0 0 14px; line-height: 1.25; font-weight: var(--fw-semibold); }
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 19px; }
p { margin: 0 0 16px; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal);
  color: var(--white);
  padding: 12px 20px;
  z-index: 6000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ==========================================================================
   i18n banners (assets/js/i18n-banner.js) — language switch + international
   patients notice. Inserted at the very top of <body>, above the sticky
   header, so they never overlap page chrome; stack in insertion order if
   both fire on the same visit.
   ========================================================================== */
.i18n-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--teal-dark);
  color: var(--white);
  padding: 10px 20px;
  font-size: 14px;
  text-align: center;
}
.i18n-bar-link { color: var(--white); text-decoration: underline; font-weight: var(--fw-semibold); white-space: nowrap; }
.i18n-bar-link--tan { color: var(--tan); }
.i18n-bar-close { background: none; border: none; color: var(--white); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: 0.85; }
.i18n-bar-close:hover { opacity: 1; }

.icon { width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: var(--white);
  border: 1px solid var(--teal);
  border-radius: var(--radius-btn);
  padding: 11px 22px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  /* Resting elevation + a hover "lift" (translateY + larger shadow) and an
     active "press" (shadow collapses back down) — the depth-has-an-offset
     cue that makes a button read as a tangible, pressable object instead of
     flat colored text. Contrast against the page (not hue) is what's
     actually proven to move click rates (CXL/HubSpot: a red CTA beat green
     by 21% purely on contrast); shadow/elevation is what signals
     "clickable" before the visitor even reads the color. */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18); }
.btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
/* Visible keyboard-focus ring — was entirely missing on buttons before this
   (WCAG 2.4.7, and a basic "this is interactive" cue for non-mouse users). */
.btn:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.btn-outline { background: transparent; color: var(--teal); box-shadow: none; }
.btn-outline:hover { background: var(--teal-light); color: var(--teal-dark); }
.btn-tan { background: var(--tan); border-color: var(--tan); }
.btn-tan:hover { background: var(--tan-dark); border-color: var(--tan-dark); }
/* Reserved for buttons that open a wa.me chat — see --wa-green above. */
.btn-whatsapp { background: var(--wa-green); border-color: var(--wa-green); }
.btn-whatsapp:hover { background: var(--wa-green-dark); border-color: var(--wa-green-dark); }
.btn-footer {
  display: inline-block;
  background: var(--tan);
  color: var(--white);
  border-radius: var(--radius-btn);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  margin-top: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-footer:hover { background: var(--tan-dark); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18); }
.btn-footer:focus-visible { outline: 2px solid var(--tan-dark); outline-offset: 2px; }

/* ==========================================================================
   Topbar + Header
   ========================================================================== */
.topbar { background: var(--topbar-bg); font-size: 13px; }
.topbar-grid { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; flex-wrap: wrap; gap: 6px; }
.topbar-contact { display: flex; gap: 20px; flex-wrap: wrap; }
.topbar-contact a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.topbar-contact a:hover { color: var(--teal-dark); }
.topbar-social { display: flex; gap: 12px; }
.topbar-social a { color: var(--teal-dark); display: flex; }
.topbar-social a:hover { color: var(--teal); }

.site-header {
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 200;
}
.site-header .container { display: flex; align-items: center; gap: 24px; padding-top: 12px; padding-bottom: 12px; }
.site-logo img { height: 36px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
/* :not(.btn) — the "Solicitar cita" CTA lives inside .main-nav too (so the
   mobile overlay panel is one cohesive block, see header.html), but it must
   keep its own button styling (white text, teal fill, real padding) instead
   of inheriting this plain-link color/padding, which otherwise wins on
   specificity and was rendering the button with black text and no
   horizontal padding. */
.main-nav > a:not(.btn) { font-size: 15px; font-weight: var(--fw-semibold); color: var(--text); padding: 8px 0; }
.main-nav > a:not(.btn):hover { color: var(--teal); }

.nav-item-dropdown { position: relative; }
.nav-item-dropdown > a { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: var(--fw-semibold); color: var(--text); padding: 8px 0; }
.nav-item-dropdown > a:hover { color: var(--teal); }
.nav-item-dropdown .icon-sm { transition: transform 0.15s ease; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: block; padding: 9px 12px; font-size: 14px; border-radius: var(--radius); color: var(--text); }
.nav-dropdown a:hover { background: var(--teal-light); color: var(--teal-dark); }

.btn-header-cta { flex-shrink: 0; }

.nav-toggle { display: none; background: none; border: none; width: 30px; height: 24px; padding: 0; flex-direction: column; justify-content: space-between; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.nav-backdrop { display: none; }

/* Sede + phone (left) and social icons (right) stay visible together down
   to genuinely small phone widths — .topbar-grid already wraps, so there's
   no need to hide the contact info just because the main nav collapses to
   a hamburger at 900px. On real phones (iPhone included — CSS viewport
   width is 375-430px, always under this) only the "Sede Pereira:" label
   hides; the phone number itself stays visible next to the icon (there's
   room for it), and the whole thing is one tappable tel: link either way. */
@media (max-width: 480px) {
  .topbar-contact-label { display: none; }
}

@media (max-width: 900px) {
  /* Collapsed row is just logo + hamburger. The panel (nav links + the
     CTA, now its last child in the template) is position:absolute, so
     opening it overlays the page instead of pushing content below the
     header down — it never changes the height of anything in normal
     flow. */
  .site-header .container { flex-wrap: wrap; position: relative; }
  .site-logo { order: 1; }
  .nav-toggle { display: flex; order: 2; margin-left: auto; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0.2s ease;
    z-index: 150;
  }
  .main-nav.is-open { max-height: 80vh; overflow-y: auto; opacity: 1; visibility: visible; padding: 10px 20px 20px; }
  .main-nav > a:not(.btn), .nav-item-dropdown > a { padding: 12px 4px; border-bottom: 1px solid var(--gray-100); }
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    display: none;
    padding: 0 0 0 16px;
  }
  .nav-item-dropdown.is-open .nav-dropdown { display: block; }
  .btn-header-cta { justify-content: center; margin-top: 12px; }

  /* Dimmed backdrop behind the open panel, tap-to-close (wired in
     main.js). Keyed off body.nav-locked — set exactly when the panel
     opens — rather than a sibling selector, since the CTA now lives
     inside .main-nav rather than next to it. */
  .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 15, 15, 0.45); z-index: 140; }
  body.nav-locked .nav-backdrop { display: block; }
  body.nav-locked { overflow: hidden; }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs { font-size: 13px; color: var(--text-light); margin-bottom: 18px; }
.breadcrumbs a { color: var(--teal-dark); }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .sep { margin: 0 6px; color: var(--gray-500); }
.breadcrumbs [aria-current="page"] { color: var(--text); }

/* ==========================================================================
   Page header (non-home pages)
   ========================================================================== */
.page-header { background: var(--topbar-bg); padding: 36px 0 28px; }
.page-header h1 { margin-bottom: 4px; }

/* ==========================================================================
   Procedure page toolbar — the "← Volver a X" back-link and the
   "Preguntar a la IA" widget share one row (see assets/js/ask-ai.js),
   same on mobile and desktop; wraps naturally on very narrow screens
   instead of reserving a whole separate row either way.
   ========================================================================== */
.procedure-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.procedure-back-link { color: var(--text); white-space: nowrap; }
.procedure-back-link:hover { color: var(--teal-dark); }

.ai-ask { position: relative; flex-shrink: 0; }
.ai-ask-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.ai-ask-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  padding: 10px;
  display: none;
  z-index: 20;
}
.ai-ask.is-open .ai-ask-menu { display: block; }
.ai-ask-hint { font-size: 12px; color: var(--text-light); margin: 0 0 8px; padding: 0 4px; }
.ai-ask-link { display: block; padding: 9px 12px; font-size: 14px; border-radius: var(--radius); color: var(--text); }
.ai-ask-link:hover { background: var(--teal-light); color: var(--teal-dark); }
@media (max-width: 420px) {
  .ai-ask-menu { left: 0; right: auto; }
  /* Tightened just enough that "← Volver a X" + this button share one row
     down to ~360px viewports instead of wrapping to two. */
  .procedure-toolbar { gap: 10px; }
  .procedure-back-link { font-size: 14px; }
  .ai-ask-toggle { padding: 8px 12px; gap: 6px; }
}

/* ==========================================================================
   Hero (home) — fills the viewport below the topbar+header on first paint
   (--header-h is measured and set by assets/js/main.js from #siteTopHeader),
   so the next section only appears once the visitor scrolls.
   ========================================================================== */
.hero-fold { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h, 100px)); }

.hero-carousel { position: relative; overflow: hidden; flex: 1 1 auto; min-height: 320px; background: var(--teal-dark); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }

/* Per-slide title/body/CTA, positioned over each photo's own reserved
   solid-color panel (left side of the source graphic) instead of being
   baked into the image — keeps the copy real, crawlable text while still
   visually matching the banner design. */
.hero-slide-text { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; max-width: 46%; padding: 24px 6% 24px max(24px, calc((100vw - var(--max-width)) / 2 + 24px)); color: var(--white); pointer-events: none; }
.hero-slide.is-active .hero-slide-text { pointer-events: auto; }
.hero-slide-title { font-size: clamp(28px, 3.8vw, 50px); font-weight: var(--fw-semibold); line-height: 1.18; margin: 0 0 14px; }
.hero-slide-body { font-size: clamp(15px, 1.4vw, 19px); line-height: 1.4; opacity: 0.94; margin: 0 0 20px; max-width: 380px; }
.hero-slide-text .btn { align-self: flex-start; padding: 12px 28px; font-size: 18px; }
@media (max-width: 1024px) { .hero-slide-text { max-width: 50%; } }
@media (max-width: 700px) {
  /* padding-bottom reserves room above .hero-progress (bottom:16px, ~19px
     tall including its click target) so a longer/bolded title that wraps
     to 3-4 lines pushes the CTA button up instead of sitting under the
     progress bar — the centered flex column shrinks its usable height
     instead of overflowing past it. */
  .hero-slide-text { max-width: 62%; padding: 12px 24px 40px; }
  .hero-slide-title { font-size: 20px; margin-bottom: 8px; }
  .hero-slide-body { display: none; }
  .hero-slide-text .btn { padding: 9px 18px; font-size: 15px; }
}

/* Per-slide progress bar (Instagram-stories style): one segment per
   slide, the active one fills over SLIDE_DURATION (hero-carousel.js),
   earlier ones stay full, later ones stay empty. */
.hero-progress { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 6px; z-index: 10; }
.hero-progress-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.35); border: none; padding: 0; cursor: pointer; overflow: hidden; }
.hero-progress-fill { display: block; height: 100%; width: 0%; background: var(--white); }
@keyframes heroProgressFill { from { width: 0%; } to { width: 100%; } }

.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,0.85); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; }
.hero-arrow:hover { background: var(--white); }
.hero-prev { left: 16px; }
.hero-next { right: 16px; }
@media (max-width: 700px) { .hero-arrow { display: none; } }

.hero-intro { flex: 0 0 auto; background: var(--teal-dark); color: var(--white); padding: 24px 0; }
.hero-eyebrow { color: var(--tan); font-size: 20px; margin-bottom: 6px; letter-spacing: 2px; }
.hero-intro h1 { font-size: 24px; margin-bottom: 8px; max-width: 640px; }
.hero-intro p { opacity: 0.92; margin-bottom: 14px; max-width: 640px; }
.hero-phones { display: flex; gap: 24px; flex-wrap: wrap; font-weight: var(--fw-semibold); }
.hero-phones a { display: inline-flex; align-items: center; gap: 8px; }
.hero-phones .icon { background: var(--tan); border-radius: 50%; padding: 7px; width: 30px; height: 30px; flex-shrink: 0; }
@media (max-width: 700px) { .hero-intro h1 { font-size: 20px; } }

/* Service selector (Urología/Ginecología) now lives in the hero-intro
   slot — high-value, one click away, no scroll needed. Plain background
   since the cards already carry their own teal/tan color. */
.hero-intro--services { background: var(--white); padding: 20px 0; }

/* Title+text and CTA on the same row (used where hero-intro's old
   content — heading, supporting text — now sits: right at the point the
   background goes from white to the gray of the Especialistas/Sedes
   section below, so it acts as a teal transition band between the two
   instead of an abrupt white-to-gray cut). */
.intro-row-section { background: var(--teal-dark); color: var(--white); }
.intro-row-section h1 { color: var(--white); }
.intro-row-section p { color: var(--white); opacity: 0.92; }
.intro-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
.intro-row h1 { margin-bottom: 6px; }
.intro-row .hero-eyebrow { font-size: 20px; margin-bottom: 6px; letter-spacing: 2px; }
.intro-row-cta { flex-shrink: 0; }
@media (max-width: 700px) {
  .intro-row { grid-template-columns: 1fr; }
  .intro-row-cta { margin-top: 6px; }
}

/* Below tablet width, drop the fullheight rule and let the carousel sit at
   its actual photo aspect ratio (1352x495) instead of being forced to fill
   the viewport height — that would zoom/crop the photos and squeeze the
   real hero-slide-text overlay into an unpredictably cropped area. The
   next section flows in right after it, no forced scroll. */
@media (max-width: 1024px) {
  .hero-fold { min-height: 0; display: block; }
  .hero-carousel { flex: none; aspect-ratio: 1352 / 495; min-height: 0; }
}

/* ==========================================================================
   Service split cards (home) — contained within the page margins. The
   background shape is on a rotated ::before layer (not the card itself)
   so the solid-color half lands under the text instead of the white
   cutout half, which would make the white heading unreadable.
   ========================================================================== */
.service-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.service-card { position: relative; padding: 20px 24px 22px; color: var(--white); display: block; border-radius: 10px; overflow: hidden; }
.service-card::before { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; background-position: bottom center; transform: rotate(180deg); z-index: 0; }
.service-card > * { position: relative; z-index: 1; }
.service-card--urologia { background-color: var(--teal); }
.service-card--urologia::before { background-image: url(/assets/img/shape-teal.png); }
.service-card--ginecologia { background-color: var(--tan); }
.service-card--ginecologia::before { background-image: url(/assets/img/shape-tan.png); }
.service-card h2 { color: var(--white); font-size: 20px; margin: 0 0 6px; padding-right: 130px; }
.service-card p { opacity: 0.95; margin: 0; max-width: 320px; }
/* Top-right corner so it doesn't add its own row below the copy — the
   card's height is just the title + two lines of body text. */
.service-card-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: var(--white);
  color: var(--teal-dark);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.service-card--ginecologia .service-card-btn { color: var(--tan-dark); }
.service-card:hover .service-card-btn { background: var(--teal-dark); color: var(--white); }
.service-card--ginecologia:hover .service-card-btn { background: var(--tan-dark); }
@media (max-width: 700px) { .service-split { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .service-card { padding-top: 56px; }
  .service-card-btn { top: 16px; right: 16px; }
  .service-card h2 { padding-right: 0; }
}

/* ==========================================================================
   Split card: the photo fills the whole card (it's already designed with
   the subject on one half and a blurred/plain half for the text), text is
   overlaid directly on the plain half — no color box behind it.
   Especialistas: subject on the photo's left -> text panel on the right.
   Sedes: subject on the photo's right -> text panel on the left.
   ========================================================================== */
.split-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.split-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 340px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(0,0,0,0.12);
  background-size: cover;
  background-repeat: no-repeat;
}
.split-card--especialistas { background-image: url(/assets/img/bg-especialistas.png); background-position: 15% 30%; justify-content: flex-end; }
.split-card--sedes { background-image: url(/assets/img/bg-sedes.png); background-position: 75% center; justify-content: flex-start; }
.split-card-text { color: var(--white); padding: 36px; max-width: 54%; }
.split-card-text h2 { color: var(--white); font-size: 21px; margin-bottom: 8px; }
.split-card-text p { color: var(--white); opacity: 0.95; font-size: 14.5px; margin-bottom: 16px; }
@media (max-width: 700px) {
  .split-card-row { grid-template-columns: 1fr; }
  .split-card { min-height: 300px; }
  .split-card-text { max-width: 100%; }
}

/* ==========================================================================
   Feature row ("¿Por qué elegir Urologyn?")
   ========================================================================== */
.section { padding: 56px 0; }
.section-title { text-align: center; margin-bottom: 36px; }
.section-title h2 { display: inline-block; border-bottom: 3px solid var(--teal); padding-bottom: 10px; }
.section-title h2 strong { color: var(--teal); }
.section-alt { background: var(--gray-100); }

.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 20px; }
.feature-card .feature-icon { flex-shrink: 0; width: 46px; height: 46px; background: var(--teal-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.feature-card .feature-icon img { width: 24px; height: 24px; }
.feature-card .feature-icon svg { width: 22px; height: 22px; color: var(--teal-dark); }
.feature-card p { margin: 0; font-size: 14.5px; }
@media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; } }

/* 4-up variant (404's "Quizás buscabas") — same card, denser row. */
.feature-row--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .feature-row--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .feature-row--4 { grid-template-columns: 1fr; } }

/* Feature-card used as a quick-link (e.g. 404's "Quizás buscabas") instead
   of a static description block — same visual, but the whole card is one
   link and gets a hover state to read as clickable. */
a.feature-card { text-decoration: none; color: var(--text); align-items: center; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
a.feature-card:hover { border-color: var(--teal); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); }
a.feature-card strong { color: var(--text); font-size: 14.5px; }

/* ==========================================================================
   404 page
   ========================================================================== */
.notfound-hero { text-align: center; padding: 72px 0 56px; }
.notfound-icon {
  width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 50%;
  background: var(--teal-light); display: flex; align-items: center; justify-content: center;
}
.notfound-icon svg { width: 36px; height: 36px; color: var(--teal-dark); }
.notfound-eyebrow { color: var(--tan-dark); font-weight: var(--fw-semibold); letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; margin-bottom: 10px; }
.notfound-hero h1 { margin-bottom: 12px; }
.notfound-hero .lede { color: var(--text-light); max-width: 480px; margin: 0 auto 28px; }

/* ==========================================================================
   Generic content sections
   ========================================================================== */
.prose { max-width: 820px; }
.prose h2 { margin-top: 36px; }
.prose h2:first-child { margin-top: 0; }
/* Procedure pages (PROCEDURE_PAGE_BODY) sit between full-width sections
   (page header, card grids) — the 820px reading width made them look
   oddly indented next to those. Keep .prose's heading spacing, but match
   .container's own max-width instead of removing the cap entirely —
   `none` was wrong, it let the text run edge-to-edge past the header's
   own margins instead of just lining up with them. */
.prose-wide { max-width: var(--max-width); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }

.info-card { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 22px; background: var(--white); position: relative; }
.info-card img.icon-lg { width: 44px; height: 44px; margin-bottom: 12px; }
.info-card h3 { margin-bottom: 8px; }
.info-card p { font-size: 14.5px; margin-bottom: 0; }

/* .info-card-link stretches over the whole card so clicking anywhere on a
   procedure card (/servicios/urologia/, /servicios/ginecologia/) opens that
   procedure's page — it's aria-hidden/untabbable (see PROCEDURE_CARD_HTML
   in pages_data.py) since the visible "Ver más" link below already offers
   the same destination to keyboard/screen-reader users. .info-card-actions
   sits above it (z-index) so its own buttons stay independently clickable
   instead of triggering the card-wide link underneath.

   .info-card--clickable is also a flex column with .info-card-actions
   pinned to the bottom (margin-top: auto): descriptions vary in length, and
   .card-grid already stretches every card in a row to the same height, so
   this keeps "Ver más" / "Solicitar cita" lined up at the same level across
   a row instead of following each card's own text length — the shorter
   cards just carry the extra whitespace above their actions. */
.info-card--clickable { display: flex; flex-direction: column; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.info-card--clickable:hover { border-color: var(--teal); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); }
.info-card-link { position: absolute; inset: 0; z-index: 1; }
.info-card-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: auto; padding-top: 14px; }

/* "Solicitar cita" reads as plain text in the brand gold, not a filled
   button — a boxed CTA on every one of 16-22 cards in a grid read as too
   busy/saturated; "Ver más" stays a real (but compact, not full-width)
   button so the row keeps one clear visual anchor. */
.info-card-cta { background: none; border: none; padding: 11px 2px; margin: 0; color: var(--tan-dark); font-size: 14px; font-weight: var(--fw-semibold); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color 0.15s ease; }
.info-card-cta:hover { color: var(--tan); text-decoration: underline; }
.info-card-cta:focus-visible { outline: 2px solid var(--tan-dark); outline-offset: 3px; border-radius: 2px; }
/* Same destination-matched WhatsApp green as .btn-whatsapp — this is a
   WhatsApp link too (APPT_WHATSAPP_BTN with html_class="info-card-cta
   info-card-cta--whatsapp" in pages_data.py's PROCEDURE_CARD_HTML), it just
   keeps the lighter text-link shape instead of a filled button (see the
   comment above .info-card-cta: a boxed CTA on 16-22 cards in a grid reads
   as too busy — that reasoning still holds, this only changes the color). */
.info-card-cta--whatsapp { color: var(--wa-green-dark); }
.info-card-cta--whatsapp:hover { color: var(--wa-green); }
.info-card-cta--whatsapp:focus-visible { outline-color: var(--wa-green-dark); }

.list-check li { display: flex; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.list-check .icon { color: var(--teal); margin-top: 3px; flex-shrink: 0; }
.list-check a { color: var(--text); text-decoration: underline; text-decoration-color: var(--gray-200); }
.list-check a:hover { color: var(--teal-dark); }

/* ==========================================================================
   Category nav (Diagnóstico / Quirúrgico jump links on service pages) — an
   "Estéticos" pill can be appended later by adding one more tuple to
   CATEGORY_NAV_HTML's callers in pages_data.py, no markup change needed.
   ========================================================================== */
.category-nav { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 0; }
.category-nav-btn { padding: 10px 22px; border-radius: 999px; border: 2px solid var(--teal); color: var(--teal); font-weight: var(--fw-semibold); font-size: 14px; transition: background 0.15s ease, color 0.15s ease; }
.category-nav-btn:hover { background: var(--teal); color: var(--white); }

/* ==========================================================================
   Specialists
   ========================================================================== */
.specialist-card { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 22px; background: var(--white); border-top: 3px solid var(--teal); }
.specialist-card h3 { color: var(--teal-dark); margin-bottom: 6px; }
.specialist-card p { font-size: 14px; margin-bottom: 0; color: var(--text-light); }

/* ==========================================================================
   Location cards (Sedes)
   ========================================================================== */
.sede-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; }
.sede-card img { height: 100%; object-fit: cover; }
.sede-card-body { padding: 28px; }
.sede-card-body h3 { color: var(--teal-dark); }
.sede-card-body ul { font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.sede-card-body ul a { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 700px) { .sede-card { grid-template-columns: 1fr; } .sede-card img { max-height: 220px; } }

/* ==========================================================================
   News / Noticias
   ========================================================================== */
.news-card { border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.news-card img { aspect-ratio: 16/10; object-fit: cover; }
.news-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.news-card h3 { font-size: 16.5px; margin-bottom: 4px; }
.news-card-date { display: block; font-size: 12.5px; color: var(--text-light); margin-bottom: 10px; }
.news-card p { font-size: 14px; color: var(--text-light); flex: 1; }
.news-card .btn-outline { align-self: flex-start; padding: 8px 16px; font-size: 13px; }

.article-banner img { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--radius); margin-bottom: 24px; }
.article-meta { font-size: 13px; color: var(--text-light); margin-bottom: 20px; }

/* Article layout: main column + "más artículos"/CTA sidebar (see
   ARTICLE_SIDEBAR_HTML in pages_data.py). Sidebar sticks while the article
   scrolls, offset below the sticky .site-header so it never sits under it. */
.article-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
.article-main { min-width: 0; }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } }

.article-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 96px; }
@media (max-width: 900px) { .article-sidebar { position: static; } }

.sidebar-card { border: 1px solid var(--gray-200); border-radius: var(--radius); background: var(--white); padding: 20px; }
.sidebar-card-title { font-size: 16px; margin-bottom: 14px; }
.sidebar-post-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.sidebar-post { display: flex; gap: 12px; align-items: flex-start; }
.sidebar-post img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.sidebar-post h4 { font-size: 13.5px; font-weight: var(--fw-semibold); margin: 0 0 4px; line-height: 1.35; color: var(--text); }
.sidebar-post:hover h4 { color: var(--teal-dark); }
.sidebar-post time { font-size: 11.5px; color: var(--text-light); }
.sidebar-see-all { display: inline-block; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--teal); }
.sidebar-see-all:hover { text-decoration: underline; }

.sidebar-cta { background: var(--teal-light); border-color: transparent; }
.sidebar-cta h3 { font-size: 16px; margin-bottom: 8px; color: var(--teal-dark); }
.sidebar-cta p { font-size: 13.5px; color: var(--text); margin-bottom: 14px; }
.sidebar-cta .btn { width: 100%; justify-content: center; }

/* ==========================================================================
   Forms (contacto, PQR, convocatoria)
   ========================================================================== */
.form-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13.5px; font-weight: var(--fw-semibold); }
.form-field input, .form-field select, .form-field textarea {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 11px 12px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--text);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-hint { font-size: 12.5px; color: var(--text-light); }

/* Custom file picker: the native <input type="file"> renders its button
   and "no file chosen" text in the browser/OS locale, which on most
   visitors' setups shows up in English regardless of the page's lang="es"
   — unfixable via HTML/CSS alone. So the native input is visually hidden
   (not display:none — that drops it from the tab order) behind its own
   <label>, which becomes the visible, themeable "choose files" button;
   lead-forms.js keeps the Spanish status text in sync on change. */
.file-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-upload-input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.file-upload-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--teal-dark);
  border: 1px solid var(--teal); border-radius: var(--radius);
  padding: 10px 18px; font-size: 14px; font-weight: var(--fw-semibold);
  cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.file-upload-btn:hover { background: var(--teal-light); }
.file-upload-input:focus-visible + .file-upload-btn { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.file-upload-status { font-size: 13.5px; color: var(--text-light); }
.file-upload-status.has-error { color: #c0392b; }
.file-upload-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 0; }
.file-upload-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 7px 8px 7px 12px; font-size: 13.5px;
}
.file-upload-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-upload-item-size { color: var(--text-light); font-size: 12.5px; flex-shrink: 0; }
.file-upload-item-remove {
  flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%; color: #c0392b; font-size: 16px; line-height: 1; cursor: pointer;
}
.file-upload-item-remove:hover { background: #fbe9e7; }
.form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; margin: 6px 0 18px; cursor: pointer; }
.form-consent input[type="checkbox"] {
  flex-shrink: 0; margin-top: 1px;
  /* 20px, not the browser default ~13px: a visitor on any phone (small
     Android to an iPhone Pro Max) or with larger system text needs a
     checkbox they can actually see and tap, not just read about. */
  width: 20px; height: 20px; accent-color: var(--teal-dark);
}
.form-consent a { color: var(--teal-dark); text-decoration: underline; }
/* Same red used by .appt-field-error/.has-error for skipped required
   fields — a visitor who clicks Enviar/Ir a WhatsApp without checking
   this box gets the identical, already-familiar "you missed something"
   signal instead of a silently inert button. */
.form-consent.has-error input[type="checkbox"] { outline: 2px solid #c0392b; outline-offset: 3px; border-radius: 4px; }
.form-consent-error { color: #c0392b; font-size: 13px; margin: -10px 0 16px 30px; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }

/* Submit feedback for markup-only forms wired up by lead-forms.js
   (contacto, PQR) — same webhook as the appointment flow, see that file's
   header comment. Hidden by default via the [hidden] attribute. */
.form-feedback { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); font-size: 14px; }
.form-feedback--ok { background: var(--teal-light); color: var(--teal-dark); }
.form-feedback--error { background: #fbe9e7; color: #c0392b; }

.contact-info-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.contact-info-list a, .contact-info-list span { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; }
.contact-info-list .icon { color: var(--teal); }

/* ==========================================================================
   Mapa del sitio
   ========================================================================== */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px; }
.sitemap-group h2 { font-size: 16px; margin-bottom: 12px; }
.sitemap-group h2 a { color: var(--text); }
.sitemap-group h2 a:hover { color: var(--teal-dark); }
.sitemap-group ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sitemap-group li a { font-size: 14px; color: var(--text-light); }
.sitemap-group li a:hover { color: var(--teal-dark); text-decoration: underline; }
/* Servicios has far more pages than any other group (every procedure) —
   it spans the full grid width and lays its Urología/Ginecología/Otros
   subheadings out in their own row instead of one tall flat list. */
.sitemap-group--wide { grid-column: 1 / -1; }
.sitemap-subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 4px; }
.sitemap-subgroup h3 { font-size: 14px; font-weight: var(--fw-semibold); color: var(--teal-dark); margin-bottom: 10px; }
.sitemap-subgroup h3 a { color: var(--teal-dark); }
.sitemap-subgroup h3 a:hover { text-decoration: underline; }

/* ==========================================================================
   Callout / CTA band
   ========================================================================== */
.cta-band { background: var(--teal-dark); color: var(--white); border-radius: var(--radius); padding: 40px; text-align: center; }
.cta-band h2 { color: var(--white); }
.cta-band p { opacity: 0.9; }
.cta-section { padding-bottom: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #eef3f3 url(/assets/img/bg-footer.jpg) center/cover no-repeat; padding-top: 48px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-bottom: 32px; }
.footer-grid--with-logo { grid-template-columns: 1.1fr 1fr 1fr 1fr; }
.footer-col--brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.footer-logo { width: 150px; height: auto; }
.footer-supersalud { width: 130px; height: auto; }
.footer-col h3 { color: var(--teal-dark); font-size: 17px; margin-bottom: 14px; }
.footer-label { font-weight: var(--fw-semibold); color: var(--text); margin-bottom: 8px; font-size: 14px; }
.footer-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.footer-list li { font-size: 13.5px; color: var(--text-light); display: flex; align-items: flex-start; gap: 8px; }
.footer-list a { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--text-light); }
.footer-list a:hover { color: var(--teal-dark); }
.footer-list .icon-sm { margin-top: 3px; flex-shrink: 0; }
.footer-social { display: flex; gap: 12px; margin: 6px 0 14px; }
.footer-social a { color: var(--teal-dark); }
.footer-social a:hover { color: var(--teal); }
.footer-link-strong { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-semibold); color: var(--teal-dark); margin-bottom: 14px; }

.footer-bottom {
  border-top: 1px solid #d8e2e2;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-light);
}
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.footer-bottom-links a { color: var(--text-light); }
.footer-bottom-links a:hover { color: var(--teal-dark); }

@media (max-width: 900px) { .footer-grid, .footer-grid--with-logo { grid-template-columns: 1fr; gap: 32px; } }

/* ==========================================================================
   Cookie consent — full-screen preference modal
   Class contract matches assets/js/consent.js's markup exactly.
   ========================================================================== */
.cookie-hidden { display: none !important; }
body.cookie-locked { overflow: hidden; }

.cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 16, 16, 0.6);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.cookie-overlay.is-open { opacity: 1; visibility: visible; }

.cookie-modal {
  position: relative;
  background: var(--color-white);
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 4px;
  padding: 44px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
}
.cookie-close {
  display: none;
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--color-gray-500);
  cursor: pointer;
  padding: 4px;
}
.cookie-overlay.is-closable .cookie-close { display: block; }
.cookie-close:hover { color: var(--color-blue); }

.cookie-skip {
  float: right;
  background: none;
  border: none;
  font-size: 13px;
  text-decoration: underline;
  color: var(--color-black);
  cursor: pointer;
  padding: 0;
  margin-left: 16px;
}
.cookie-skip:hover { color: var(--color-blue); }

.cookie-view h2 { font-size: 22px; margin: 0 0 16px; padding-right: 140px; }
.cookie-view hr { border: none; border-top: 1px solid var(--color-gray-200); margin: 0 0 20px; }
.cookie-view p { font-size: 14px; color: #4a4a4a; margin-bottom: 14px; }
.cookie-view p:last-child { margin-bottom: 0; }
.cookie-view a { color: var(--color-blue); text-decoration: underline; font-weight: var(--fw-regular); }

.cookie-modal-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.cookie-modal-actions .btn { flex: 1; min-width: 220px; text-align: center; padding: 14px 20px; justify-content: center; }

.cookie-modal-links { font-size: 12.5px; line-height: 1.7; }

/* First-visit prompt: a small floating card pinned to the bottom-right
   corner, not a full-width bar — the long disclosure text stays collapsed
   to one line behind "Ver más" by default at every width (not just
   mobile), which is what keeps the card small instead of the text. */
.cookie-banner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: auto;
  z-index: 4900;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.cookie-banner.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.cookie-banner-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--color-gray-500);
  cursor: pointer;
  padding: 4px;
}
.cookie-banner-close:hover { color: var(--color-blue); }

.cookie-banner-inner { display: flex; flex-direction: column; gap: 14px; padding-right: 20px; }
.cookie-banner-text p { font-size: 13px; color: #4a4a4a; margin: 0 0 8px; line-height: 1.5; }
.cookie-banner-text p:first-child { color: var(--color-black); margin-bottom: 6px; }
.cookie-banner-text p:last-child { margin-bottom: 0; }
.cookie-banner-text a { color: var(--color-blue); text-decoration: underline; font-weight: var(--fw-regular); }

.cookie-banner-links { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.cookie-banner-links .cookie-skip { float: none; margin: 0; font-size: 12.5px; }
.cookie-banner-links > span { color: var(--color-gray-500); font-size: 12.5px; }

/* Description + "Ver más" toggle sit on one row so the toggle stays on the
   same line as the truncated text instead of pushing it below. Truncated
   to a single line by default; expanding reveals the full paragraph and
   the card grows to fit it. */
.cookie-banner-desc-row { display: flex; align-items: baseline; gap: 8px; }
.cookie-banner-desc { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cookie-banner-more {
  flex-shrink: 0;
  display: inline;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--color-blue);
  text-decoration: underline;
  cursor: pointer;
}
/* Drop the flex row (which was only there to pin "Ver más" at the end of a
   single truncated line) so the span + button go back to plain inline
   flow — the paragraph wraps across as many lines as it needs, and "Ver
   menos" trails the last word of the last line instead of standing off to
   the side as its own column. */
.cookie-banner.is-expanded .cookie-banner-desc-row { display: block; }
.cookie-banner.is-expanded .cookie-banner-desc { white-space: normal; overflow: visible; text-overflow: clip; }
.cookie-banner.is-expanded .cookie-banner-more { margin-left: 4px; }

.cookie-banner-actions { display: flex; flex-direction: column; gap: 10px; }
.cookie-banner-actions .btn { width: 100%; text-align: center; justify-content: center; white-space: nowrap; padding: 12px 18px; }
/* Plain-text "Configurar preferencias" — no border/fill of its own, so
   "Aceptar y continuar" (the filled .btn) is the one action that visually
   pops. */
.cookie-banner-configure-btn { background: none; border: none; color: var(--teal); padding: 11px 4px; text-align: center; }
.cookie-banner-configure-btn:hover { background: none; color: var(--teal-dark); text-decoration: underline; }

@media (max-width: 480px) {
  /* The card already clamps to the viewport (max-width: calc(100vw - 32px)
     above) — this just tightens padding on very narrow phones. */
  .cookie-banner { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   Procedure-page chrome: body.hide-topbar hides only the thin contact/
   social #siteTopbar strip — .site-header (logo, nav, its own "Solicitar
   cita") is untouched.
   ========================================================================== */
body.hide-topbar #siteTopbar { display: none; }

/* ==========================================================================
   Sticky bottom mobile CTA bar (home + procedure pages). Safe-area handling
   mirrors .cookie-banner above so it clears Safari's own bottom toolbar /
   the iPhone home-indicator. z-index stays below .cookie-overlay (5000)
   and .cookie-banner (4900) so first-time-visitor consent UI always wins.
   ========================================================================== */
.sticky-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--teal);
  color: var(--white);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: 15px;
  text-align: center;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15);
}
.sticky-cta-bar:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
/* Same destination-matched WhatsApp green as .btn-whatsapp (see --wa-green
   above) — build.py adds this modifier only on the WhatsApp-link branch;
   the BOOKING_FORM_ENABLED=True branch (scrolls to #cta-section, not
   WhatsApp) keeps the plain brand-teal bar. */
.sticky-cta-bar--whatsapp { background: var(--wa-green); }

@media (max-width: 700px) {
  .sticky-cta-bar { display: flex; }
  /* Bar height (~56px incl. padding) + safe-area inset, so footer content
     stays fully reachable when scrolled to the bottom. */
  body.has-sticky-cta .site-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* Floating WhatsApp button — desktop only (>700px, the same breakpoint
   .sticky-cta-bar uses in reverse): small screens already have that full-width
   bar fixed to the bottom edge, so a second floating circle there would
   overlap it and crowd the corner. Sized up (64px) so it reads clearly as a
   "chat with us" affordance, not just another small icon. */
.whatsapp-float {
  display: none;
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 2500;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); }
.whatsapp-float-icon { width: 34px; height: 34px; color: var(--white); }
@media (min-width: 701px) {
  .whatsapp-float { display: flex; }
}

html { scroll-behavior: smooth; }
#cta-section { scroll-margin-top: 80px; } /* clears .site-header's sticky height */

.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.cookie-cat-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.cookie-cat { border-top: 1px solid var(--color-gray-200); padding-top: 16px; }
.cookie-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.cookie-cat-head strong { font-size: 14.5px; }
.cookie-cat p { font-size: 13px; margin-bottom: 0; }

.cookie-cat-note {
  margin-top: 10px !important;
  padding: 10px 12px;
  background: var(--color-gray-100);
  border-left: 3px solid var(--color-blue);
  font-size: 12px !important;
  color: #4a4a4a;
}
.cookie-cat-note a { color: var(--color-blue); font-weight: var(--fw-semibold); text-decoration: underline; }

.cookie-cat-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-white);
  background: var(--color-black);
  border-radius: 20px;
  padding: 5px 12px;
}

.cookie-toggle { position: relative; display: inline-block; flex-shrink: 0; width: 50px; height: 30px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cookie-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.cookie-toggle-track { position: absolute; inset: 0; background: #E4E4E7; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); transition: background-color 0.25s ease, box-shadow 0.15s ease; }
.cookie-toggle-thumb {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  background: var(--color-white); border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.14);
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), width 0.15s ease;
}
.cookie-toggle:hover .cookie-toggle-track { background: #d4d4d8; }
.cookie-toggle input:checked + .cookie-toggle-track { background: var(--color-black); }
.cookie-toggle:hover input:checked + .cookie-toggle-track { background: #2b2b2b; }
.cookie-toggle input:checked + .cookie-toggle-track .cookie-toggle-thumb { transform: translateX(20px); }
.cookie-toggle input:active + .cookie-toggle-track .cookie-toggle-thumb { width: 30px; }
.cookie-toggle input:checked:active + .cookie-toggle-track .cookie-toggle-thumb { transform: translateX(14px); }
.cookie-toggle input:focus-visible + .cookie-toggle-track { box-shadow: 0 0 0 3px rgba(0, 142, 153, 0.35); }
@media (prefers-reduced-motion: reduce) {
  .cookie-toggle-track, .cookie-toggle-thumb { transition: none; }
}

.footer-cookie-link {
  background: none; border: none; padding: 0; font-size: 13px; font-family: inherit;
  color: var(--color-gray-500); text-decoration: underline; cursor: pointer;
}
.footer-cookie-link:hover { color: var(--color-blue); }

@media (max-width: 640px) {
  .cookie-modal { padding: 32px 22px; max-height: 92vh; }
  .cookie-view h2 { padding-right: 0; font-size: 19px; }
  .cookie-skip { float: none; display: block; margin: 0 0 16px; }
  .cookie-modal-actions .btn { min-width: 100%; }
}

/* ==========================================================================
   Appointment CTA — step 1 answered inline on the page (see
   pages_data.py's APPT_STEP1_CTA_BLOCK), before the modal ever opens.
   Full-bleed image on one side (edge to edge, not inset like a normal
   content image) — the text column aligns with the site's normal
   .container width via the calc() padding trick below, while the section
   itself stays full-viewport width so the image can reach the edge.
   ========================================================================== */
.appt-cta-section { padding: 0; }
.appt-cta-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; }
.appt-cta-text {
  display: flex; flex-direction: column; justify-content: center;
  background: var(--teal-light);
  padding: 48px 24px 48px max(24px, calc((100vw - var(--max-width)) / 2 + 24px));
}
.appt-step-label { color: var(--teal-dark); margin-bottom: 6px; }
.appt-cta-text h2 { margin-bottom: 18px; }
.appt-cta-image { position: relative; min-height: 240px; }
.appt-cta-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.appt-options--inline { flex-direction: row; flex-wrap: wrap; max-width: none; }
.appt-options--inline .appt-branch-btn { flex: 1; min-width: 140px; text-align: center; justify-content: center; }

@media (max-width: 800px) {
  .appt-cta-grid { grid-template-columns: 1fr; }
  .appt-cta-text { padding: 40px 24px; }
  .appt-cta-image { min-height: 220px; order: -1; }
}

/* /agendar-cita/ only: page-header + appt-cta-section together fill the
   viewport exactly like the home page's hero-fold (--header-h here also
   includes the breadcrumb bar's height, see assets/js/main.js) — the
   footer stays off-screen until the visitor scrolls. Below the grid's own
   800px breakpoint the two-column layout already stacks, so forcing a
   full-height fold there would just stretch empty space; let it flow at
   its natural height instead. */
.appt-page-fold { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h, 100px)); }
.appt-page-fold .page-header { flex: 0 0 auto; }
/* appt-cta-section becomes a flex container itself here so appt-cta-grid
   can fill it via flex-grow — a plain `height: 100%` on appt-cta-grid does
   NOT reliably resolve against a flex-grown (not explicitly-heighted)
   parent's used height, so nest flex-grow instead of chaining percentages. */
.appt-page-fold .appt-cta-section { display: flex; flex: 1 1 0%; min-height: 0; }
.appt-page-fold .appt-cta-grid { flex: 1 1 auto; min-height: 0; height: auto; }
.appt-page-fold .appt-cta-text,
.appt-page-fold .appt-cta-image { min-height: 0; }
@media (max-width: 800px) {
  .appt-page-fold { min-height: 0; display: block; }
}

/* ==========================================================================
   Trust badges (Google rating today; room for university-affiliation logos
   later — see pages_data.py's TRUST_BADGES_HTML).
   ========================================================================== */
.appt-trust-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.appt-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 8px 14px; font-size: 13px; color: var(--text);
}
.appt-badge-icon { width: 18px; height: 18px; flex-shrink: 0; }
/* 5 discrete stars (see TRUST_BADGES_HTML) instead of a percentage-clipped
   overlay row — explicit flex-shrink:0 everywhere here because an SVG
   inside a flex container with none can shrink or distort inconsistently
   across browsers (notably Safari), which is what made these look
   "corridas" (shifted/off) on some phones even though desktop Chrome
   rendered the old markup fine. */
.rating-stars { display: flex; gap: 1px; flex-shrink: 0; }
.rating-stars .icon-sm { width: 14px; height: 14px; flex-shrink: 0; display: block; }
.star { display: inline-flex; flex-shrink: 0; }
.star-full { color: var(--gold); }
.star-empty { color: var(--gray-200); }
/* Half star: a gray base icon plus a gold copy clipped to exactly 50% —
   fixed and symmetric, unlike an arbitrary percentage, so the cut always
   falls cleanly between the star's two halves instead of through a point. */
.star-half { position: relative; color: var(--gray-200); }
.star-half-fill { position: absolute; inset: 0; width: 50%; overflow: hidden; display: flex; color: var(--gold); }
.appt-badge-text { font-weight: var(--fw-semibold); white-space: nowrap; }

/* ==========================================================================
   Appointment modal (assets/js/appointment-form.js) — a real centered
   modal, not a full-page takeover: backdrop dims the whole page (including
   the header) so focus is unambiguous, card is a fixed max-width/max-height
   box. z-index below .cookie-overlay (5000) / .cookie-banner (4900) so
   first-visit consent UI always wins if it were somehow still open.
   Expands to fill the viewport edge-to-edge on small screens (max-width:
   700px) since there's no room for a floating card + backdrop margin there.
   ========================================================================== */
body.appt-open { overflow: hidden; }
body.appt-open .sticky-cta-bar { display: none; }

.appt-modal-backdrop {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(1, 34, 36, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; transition: opacity 0.25s ease;
}
.appt-modal-backdrop.is-open { opacity: 1; }

/* Fixed height (not max-height driven by content) so the Continue button
   lands at the exact same y-position on every step — the card's own two
   columns fill that fixed box: the image edge-to-edge on one side with no
   header/footer cutting into it, the text column a self-contained flex
   layout (scrollable content top, pinned progress bar + buttons bottom) on
   the other. max-height is a safety net for short viewports only, not a
   per-step content response. */
.appt-modal-card {
  position: relative;
  background: var(--white);
  width: 100%; max-width: 920px;
  height: 512px; max-height: 90vh;
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr;
  overflow: hidden;
  transform: translateY(16px) scale(0.98); opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* Container for .appt-col-header's cqw width below — lets Regresar sit
     at the exact same x position on a --no-image step (eps_provider, full
     card width) as on every two-column step, instead of jumping to the
     far edge once the image column disappears. */
  container-type: inline-size;
}
.appt-modal-backdrop.is-open .appt-modal-card { transform: translateY(0) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .appt-modal-backdrop, .appt-modal-card { transition: none; }
}

/* Steps with no "image" (only eps_provider today — see booking_flow.py)
   drop the side column entirely and use the modal's full width, freeing
   enough room for the EPS logo grid to go 4-wide on desktop instead of 2. */
.appt-modal-card--no-image { grid-template-columns: 1fr; }
.appt-modal-card--no-image .appt-col-image { display: none; }

/* grid-template-rows:1fr above forces the single row to the card's actual
   fixed height; min-height:0 here is needed too — grid items default to
   min-height:auto (sized to their content), which would silently let this
   column grow taller than the card and defeat both the fixed height and
   .appt-question-scroll's own overflow-y below. */
.appt-col-question { display: flex; flex-direction: column; padding: 32px 32px 10px; min-width: 0; min-height: 0; }
/* Step label + Regresar share one fixed row above the scrolling content
   instead of Regresar floating in the bottom action stack — a fixed top
   spot means it never moves as the primary button/content height changes
   between steps. max-width is capped to what a normal two-column step's
   own content width is (50% of the card, via the container query on
   .appt-modal-card — NOT 50% of .appt-col-question, which would be wrong
   on a --no-image step since that column is the full card) so Regresar
   lands at the same x position on eps_provider's full-width step too. */
.appt-col-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; margin-bottom: 8px; max-width: calc(50cqw - 64px); }
.appt-col-header .appt-step-label { margin-bottom: 0; }
.appt-col-image { position: relative; }
.appt-col-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Floating over the image (or, in --no-image steps, over plain whitespace)
   rather than sharing a header row with the progress bar — that row is
   gone; this is the only chrome that isn't confined to the text column's
   width. */
.appt-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  background: rgba(255, 255, 255, 0.92); border: none; border-radius: var(--radius);
  color: var(--text); cursor: pointer; font-size: 13px; font-weight: var(--fw-semibold);
  text-decoration: underline; padding: 8px 14px;
}
.appt-close:hover { color: var(--teal-dark); }

/* Vertically centers the step's own title/options/fields/disclaimer within
   the space .appt-col-header and .appt-nav-primary/.appt-progress-bar leave
   free — steps with no nav button (choice steps: insurance_type, the
   date/time question) used to sit pinned to the top with a dead gap below
   before the progress bar; on mobile that also meant a longer thumb reach
   down to the option buttons. `safe center`, not plain `center`: on a step
   whose content is tall enough to need this box's own overflow-y scroll
   (the text-field steps), plain `center` can push the top of the content
   above the scrollable area with no way to scroll up to it — `safe` falls
   back to top-alignment only when centering would do that, leaving short
   steps centered as intended. */
.appt-question-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: safe center; }
.appt-step-label {
  color: var(--teal-dark);
  margin-bottom: 8px;
}
.appt-col-question h2 { font-size: 24px; }
.appt-subtitle { color: var(--text-light); margin-bottom: 18px; }

.appt-step-content { transition: opacity 0.2s ease, transform 0.2s ease; }
.appt-step-content.is-entering { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) {
  .appt-step-content { transition: none; }
}

.appt-options { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
/* Compact grid — used only by the EPS-provider step, which has 7 options
   and no room for a tall single-column list without pushing the
   fixed-height card's content into scroll on every viewport. 2 columns by
   default (narrow viewports, or if a future grid step keeps its image);
   widens to 4 on desktop specifically when the step also dropped its side
   image (see .appt-modal-card--no-image), since that's the only case with
   the extra width to spare. */
.appt-options--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.appt-options--grid .appt-option-btn { justify-content: center; text-align: center; flex-direction: column; gap: 8px; }
.appt-options--grid .appt-option-btn img { height: 28px; }
@media (min-width: 700px) {
  .appt-modal-card--no-image .appt-options--grid { grid-template-columns: repeat(4, 1fr); }
}

/* Shared "answer card" look. .appt-option-btn is the modal's own
   multiple-choice steps (built at runtime by appointment-form.js);
   .appt-branch-btn is the two EPS/Particular buttons embedded on the page
   itself (see pages_data.py's APPT_STEP1_CTA_BLOCK) — deliberately a
   DIFFERENT class, not just a naming preference: appointment-form.js's
   modal-internal choice steps are found by class during testing/debugging,
   and a shared class here previously caused a real bug (clicking what
   looked like a modal button actually re-triggered the page's still-live
   trigger underneath, stacking a second modal). Keep these two rules in
   sync by hand if the look changes — don't just merge the selectors back
   together. */
.appt-option-btn, .appt-branch-btn {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 2px solid var(--gray-200);
  color: var(--text); border-radius: var(--radius); padding: 16px 18px;
  font-size: 16px; font-weight: var(--fw-regular); cursor: pointer; text-align: left;
  min-height: 52px;
}
.appt-option-btn:hover, .appt-branch-btn:hover { border-color: var(--teal); background: var(--teal-light); }

/* Urología/Ginecología switch above the manual service <select> — see
   booking_flow.py's SERVICE_SPECIALTIES / appointment-form.js's
   buildSelectStep. */
.appt-specialty-tabs { display: flex; gap: 8px; margin-top: 8px; }
.appt-specialty-tab {
  flex: 1; padding: 10px 14px; border-radius: var(--radius); border: 2px solid var(--gray-200);
  background: var(--white); color: var(--text); font-size: 14px; font-weight: var(--fw-semibold);
  cursor: pointer; text-align: center;
}
.appt-specialty-tab.is-active { border-color: var(--teal); background: var(--teal-light); color: var(--teal-dark); }

.appt-select-wrap, .appt-fields { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.appt-select, .appt-field input {
  padding: 14px; border-radius: var(--radius); border: 2px solid var(--gray-200);
  background: var(--white); color: var(--text); font-size: 16px; font-family: inherit; min-height: 52px;
}
.appt-select:focus, .appt-field input:focus { outline: none; border-color: var(--teal); }
.appt-field { display: flex; flex-direction: column; gap: 6px; }
/* Label and error share one row (label left, error right) instead of the
   error adding a row below the input — that used to grow the field's own
   height and push every field after it down the column. */
.appt-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.appt-field label { font-size: 14px; color: var(--text-light); }
.appt-field-error { color: #c0392b; font-size: 13px; text-align: right; }
/* Inset, not a wider border — box-shadow never affects box size/layout,
   so the red indicator can't shift or resize the field even though it
   reads as a ring drawn just inside the existing border. */
.appt-field input.has-error { border-color: #c0392b; box-shadow: inset 0 0 0 1px #c0392b; }
/* Same pattern as .appt-field input.has-error, for the manual service
   picker — clicking Continuar with nothing chosen highlights the select
   and shows this message instead of silently doing nothing. */
.appt-select.has-error { border-color: #c0392b; box-shadow: inset 0 0 0 1px #c0392b; }
.appt-select-error { color: #c0392b; font-size: 13px; margin: 6px 0 0; }

.appt-default-service { margin-top: 8px; }
.appt-default-service p { font-size: 18px; font-weight: var(--fw-semibold); }
.appt-link-btn {
  background: none; border: none; color: var(--teal-dark); text-decoration: underline;
  cursor: pointer; font-size: 14px; display: block; margin-bottom: 16px; padding: 0;
}

.appt-summary-list { margin: 12px 0 20px; display: grid; grid-template-columns: 1fr; gap: 14px 16px; }
.appt-summary-item dt { color: var(--text-light); font-size: 13px; }
.appt-summary-item dd { margin: 1px 0 0; font-size: 15px; font-weight: var(--fw-semibold); }
/* Two field-pairs per row once the modal has a full desktop-width question
   column to spare (see the max-width:700px full-screen mobile layout
   below) — lets a 5-6 field summary (EPS branch) fit without scrolling
   instead of one long single-column list. */
@media (min-width: 700px) {
  .appt-summary-list { grid-template-columns: 1fr 1fr; }
}

.appt-thankyou h2 { color: var(--teal-dark); }
.appt-note { color: var(--text-light); font-size: 13.5px; margin: 4px 0 4px; }
.appt-note a { color: var(--teal-dark); text-decoration: underline; }
.appt-fallback-link { display: block; margin-top: 16px; color: var(--teal-dark); font-size: 14px; }

/* Regresar lives in .appt-col-header above (fixed, same row as the step
   label); this is just its own look. Bottom stack is now only the primary
   button + progress pill — flex-shrink:0 so growing content in
   .appt-question-scroll above never compresses them. */
.appt-nav-back {
  flex-shrink: 0;
  background: none; border: none; color: var(--text-light); cursor: pointer;
  font-size: 14px; font-weight: var(--fw-regular); padding: 4px;
  display: flex; align-items: center; gap: 6px;
}
.appt-nav-back:hover { color: var(--teal-dark); }
.appt-nav-back:disabled { visibility: hidden; }
.appt-nav-back svg { width: 18px; height: 18px; }

.appt-nav-primary { flex-shrink: 0; margin-top: 10px; }
.appt-btn-primary {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gold); border: none; border-radius: var(--radius);
  color: var(--white); font-size: 17px; font-weight: var(--fw-semibold);
  text-align: center; text-decoration: none; padding: 16px 24px; min-height: 56px;
  cursor: pointer;
}
.appt-btn-primary:hover { background: var(--gold-dark); }
.appt-btn-primary svg { flex-shrink: 0; }
.appt-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Pill, two-tone (gold = done, light track = remaining) — no thumb/circle.
   Spans only the text column's width (it's inside .appt-col-question), at
   the true bottom of the fixed-height card. */
.appt-progress-bar { flex-shrink: 0; margin-top: 14px; }
.appt-progress-track { height: 6px; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
.appt-progress-fill { height: 100%; background: var(--gold); border-radius: 999px; transition: width 0.3s ease; }

@media (max-width: 700px) {
  .appt-modal-backdrop { padding: 0; }
  .appt-modal-card { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; grid-template-columns: 1fr; }
  .appt-col-image { display: none; }
  /* .appt-close floats top-right of the whole card (see its own rule) to
     sit over the photo on desktop; with no photo here it would otherwise
     land right on top of .appt-col-header's own top-right Regresar. */
  .appt-col-header { margin-top: 26px; max-width: none; }
}

/* ==========================================================================
   /internal/flujo-formulario/ — read-only doc page rendered from
   booking_flow.py (build.py's write_internal_flow_page()).
   ========================================================================== */
.internal-step-card { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.internal-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.internal-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--teal);
  color: var(--white); font-weight: var(--fw-semibold); font-size: 14px; flex-shrink: 0;
}
.internal-step-head h2 { margin: 0; font-size: 18px; flex: 1; }
.internal-step-branch {
  font-size: 12px; font-weight: var(--fw-semibold); color: var(--tan-dark);
  background: var(--topbar-bg); border-radius: var(--radius); padding: 3px 8px; white-space: nowrap;
}
.internal-step-id { color: var(--text-light); font-size: 13px; margin: 0 0 10px; }
.internal-step-subtitle { color: var(--text-light); }
.internal-step-meta { font-weight: var(--fw-semibold); margin-bottom: 4px; }
.internal-step-webhook { color: var(--teal-dark); font-size: 14px; margin-top: 10px; }