/* ------------------------------------------------------------------
   Landing page styles. Theme colors come from :root (settings.json):
   --primary, --accent, --dark. Mobile-first.
------------------------------------------------------------------ */
:root {
  --primary: #0f766e;
  --accent: #f26522;
  --dark: #0b1f33;
  --wa: #25d366;
  --wa-dark: #1ebe5b;
  --bg: #ffffff;
  --bg-soft: #f4f7f9;
  --text: #1f2a37;
  --muted: #5b6776;
  --line: #e3e8ee;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(11, 31, 51, .08);
  --font-head: "Jost", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; font-size: 16px; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3 { font-family: var(--font-head); color: var(--dark); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.container { width: min(1180px, 100% - 2rem); margin-inline: auto; }
.container.narrow { max-width: 820px; }
section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.section-head p { color: var(--muted); font-size: 1.05rem; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 999px; font-weight: 600; font-family: var(--font-head); font-size: 1rem; border: 2px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap; line-height: 1.2; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-dark); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--dark); }
.btn-lg { padding: 1.05rem 1.8rem; font-size: 1.08rem; }
.btn-sm { padding: .6rem 1rem; font-size: .9rem; }
.btn-block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.cta-row.center { justify-content: center; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.logo { display: inline-flex; align-items: center; }
.logo-img { height: 34px; width: auto; max-width: min(60vw, 320px); object-fit: contain; }
.site-footer .logo-img { filter: brightness(0) invert(1); opacity: .95; }
.logo-text { white-space: nowrap; font-family: var(--font-head); font-size: clamp(.95rem, 3.4vw, 1.25rem); letter-spacing: .04em; color: var(--dark); text-transform: uppercase; }
.logo-text strong { font-weight: 700; }
.logo-text span { font-weight: 500; color: var(--primary); }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.btn-call { background: var(--primary); color: #fff; }
.btn-call:hover { background: color-mix(in srgb, var(--primary) 85%, #000); }
.header-phone { font-variant-numeric: tabular-nums; }
.header-phone span, .header-cta, .btn-wa.btn-sm span { display: none; }
.header-phone.btn-sm, .btn-wa.btn-sm { padding: .6rem .8rem; }
@media (min-width: 720px) { .header-phone span, .btn-wa.btn-sm span { display: inline; } .header-phone.btn-sm, .btn-wa.btn-sm { padding: .6rem 1rem; } }
@media (min-width: 980px) { .header-cta { display: inline-flex; } }

/* Hero */
.hero { background: radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--primary) 14%, #fff) 0%, #fff 60%); padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: 0; overflow: hidden; }
.hero-grid { display: grid; gap: 2rem; align-items: end; }
.eyebrow { font-family: var(--font-head); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--primary); margin-bottom: 1rem; }
.hero .lead { font-size: 1.12rem; color: var(--muted); max-width: 560px; }
.highlight { font-weight: 600; color: var(--accent); font-size: 1.05rem; border-left: 3px solid var(--accent); padding-left: .8rem; }
.badges { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1.2rem; }
.badges li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.badges .ico { color: var(--primary); width: 1.5em; height: 1.5em; margin-top: .1em; }
.badges strong { display: block; color: var(--dark); }
.badges span { color: var(--muted); font-size: .82rem; }
.hero-media { position: relative; justify-self: center; width: min(360px, 80%); }
.hero-media img { position: relative; z-index: 1; width: 100%; }
.hero-blob { position: absolute; inset: 12% -10% 0 -10%; background: linear-gradient(160deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #fff)); border-radius: 48% 52% 40% 60% / 55% 45% 55% 45%; opacity: .9; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 3rem; }
  .hero-media { width: 100%; max-width: 460px; justify-self: end; }
  .hero-copy { padding-bottom: 3rem; }
}

/* Reels */
.reels { background: var(--dark); color: #fff; }
.reels h2 { color: #fff; }
.reels .section-head p { color: rgba(255,255,255,.7); }
.reels-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .25rem 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.reels-track::-webkit-scrollbar { display: none; }
.reel { position: relative; flex: 0 0 min(72vw, 280px); aspect-ratio: 9 / 16; margin: 0; border-radius: 18px; overflow: hidden; background: #000; scroll-snap-align: center; cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel-btn { position: absolute; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(20,20,20,.55); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .15s; }
.reel-btn:hover { background: rgba(20,20,20,.8); transform: scale(1.06); }
.reel-btn .ico { width: 1.3em; height: 1.3em; }
.reel-mute { left: .7rem; bottom: .7rem; }
.reel-full { right: .7rem; bottom: .7rem; }
.reel-next { right: .7rem; top: .7rem; }
.reel-mute .on { display: none; } .reel.is-unmuted .reel-mute .on { display: block; } .reel.is-unmuted .reel-mute .off { display: none; }
.reel-paused { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--dark); display: none; place-items: center; pointer-events: none; }
.reel-paused .ico { width: 1.6em; height: 1.6em; margin-left: 3px; }
.reel.is-paused .reel-paused { display: grid; }
.reel figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 3.6rem 3.4rem .9rem; background: linear-gradient(to top, rgba(0,0,0,.8), transparent); font-size: .85rem; font-weight: 500; line-height: 1.35; pointer-events: none; }
.reel-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); z-index: 2; }
.reel-progress i { display: block; height: 100%; width: 0; background: var(--accent); }
.reels-nav { display: none; justify-content: center; gap: .6rem; margin-top: .5rem; }
.reels-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-size: 1.5rem; cursor: pointer; }
.reels-nav button:hover { background: rgba(255,255,255,.12); }
@media (min-width: 900px) { .reels-nav { display: flex; } .reels-track { justify-content: safe center; } }

/* Reel modal */
.reel-modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; }
.reel-modal[hidden] { display: none; }
.reel-modal video { max-height: 78vh; max-width: min(92vw, 440px); aspect-ratio: 9 / 16; border-radius: 16px; background: #000; }
.reel-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; display: grid; place-items: center; cursor: pointer; }
.reel-close .ico { width: 1.5em; height: 1.5em; }

/* Proof */
.proof { background: var(--bg-soft); }
.proof-grid { display: grid; gap: 2rem; align-items: center; }
.proof-media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.proof-copy p { color: var(--muted); font-size: 1.05rem; }
.stats { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.stats strong { display: block; font-family: var(--font-head); font-size: 2rem; color: var(--primary); line-height: 1; }
.stats span { font-size: .85rem; color: var(--muted); }
@media (min-width: 900px) { .proof-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* Benefits */
.cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-icon { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary); display: grid; place-items: center; margin-bottom: 1rem; }
.card-icon .ico { width: 1.7em; height: 1.7em; }
.card p { color: var(--muted); margin: 0; font-size: .95rem; }

/* Steps */
.steps { background: linear-gradient(180deg, #fff, var(--bg-soft)); }
.steps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: step; }
.steps-list li { position: relative; padding: 1.5rem 1.4rem 1.4rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); }
.step-num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 700; margin-bottom: .8rem; }
.steps-list p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Lead form */
.lead-section { background: var(--primary); color: #fff; }
.lead-section h2 { color: #fff; }
.lead-grid { display: grid; gap: 2rem; align-items: start; }
.lead-pitch p { color: rgba(255,255,255,.85); font-size: 1.05rem; }
.campaign { display: inline-flex; gap: .5rem; align-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); padding: .6rem .9rem; border-radius: 12px; font-weight: 600; color: #fff !important; }
.campaign .ico { color: #ffd166; }
.check-list { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .5rem; }
.check-list li { display: flex; gap: .5rem; align-items: center; }
.check-list .ico { color: #ffd166; }
.lead-form { background: #fff; color: var(--text); border-radius: 20px; padding: 1.6rem; box-shadow: 0 25px 60px rgba(0,0,0,.25); display: grid; gap: .9rem; }
.lead-form label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--dark); }
.lead-form input[type=text], .lead-form input[type=tel], .lead-form input[type=email], .lead-form textarea { width: 100%; font: inherit; font-size: 1rem; padding: .8rem .9rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fbfcfd; transition: border-color .15s; }
.lead-form input:focus, .lead-form textarea:focus { outline: none; border-color: var(--primary); background: #fff; }
.lead-form textarea { resize: vertical; }
.lead-form .consent { grid-template-columns: auto 1fr; align-items: start; font-weight: 400; color: var(--muted); font-size: .8rem; }
.lead-form .consent input { margin-top: .2rem; }
/* Privacy link inside the consent line: a readable target, not just the "›" character */
.consent-link { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; padding: .15rem 0; }
.consent-link:hover { color: var(--accent); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-msg, .alert { padding: .8rem 1rem; border-radius: 12px; font-size: .9rem; font-weight: 500; }
.form-msg.error, .alert-error { background: #fdecea; color: #b42318; }
.form-msg.ok, .alert-ok { background: #e6f6ee; color: #067647; }
.btn[disabled] { opacity: .7; cursor: wait; transform: none; }
@media (min-width: 900px) { .lead-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } .lead-form { padding: 2.2rem; } }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: .3rem 0; }
.faq summary { cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; padding: .9rem 2rem .9rem 0; list-style: none; position: relative; color: var(--dark); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: .7rem; font-size: 1.4rem; color: var(--primary); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); margin: 0 0 1rem; }

/* Map */

/* Footer */
.site-footer { background: var(--dark); color: rgba(255,255,255,.8); padding: 3rem 0 6rem; font-size: .92rem; }
.footer-grid { display: grid; gap: 2rem; }
.site-footer a { color: #fff; }
.site-footer .muted { color: rgba(255,255,255,.6); }
.site-footer .ico { color: var(--accent); margin-right: .3rem; }
.footer-logo .logo-text, .footer-logo .logo-text span { color: #fff; }
.footer-logo { margin-bottom: .8rem; }
.social { display: flex; gap: .6rem; margin-top: 1rem; }
.social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.social .ico { color: #fff; margin: 0; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .site-footer { padding-bottom: 3rem; } }

/* Sticky mobile bar + floating WhatsApp */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr 1.3fr; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,.08); padding-bottom: env(safe-area-inset-bottom); }
.sticky-bar a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .3rem; font-size: .72rem; font-weight: 600; color: var(--dark); }
.sticky-bar .ico { width: 1.5em; height: 1.5em; }
.sticky-bar .call { color: #fff; background: var(--primary); }
.sticky-bar .wa { color: #fff; background: var(--wa); }
.sticky-bar .form { color: #fff; background: var(--accent); }
.wa-float { display: none; position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; place-items: center; box-shadow: 0 10px 25px rgba(37,211,102,.45); animation: pulse 2.2s infinite; }
.wa-float .ico { width: 2em; height: 2em; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@media (min-width: 800px) { .sticky-bar { display: none; } .wa-float { display: grid; } }

/* Thanks + prose pages */
.thanks { min-height: 60vh; display: flex; align-items: center; }
.thanks-card { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 3rem 2rem; box-shadow: var(--shadow); }
.thanks-icon { width: 80px; height: 80px; border-radius: 50%; background: #e6f6ee; color: #067647; display: grid; place-items: center; margin: 0 auto 1.5rem; }
.thanks-icon .ico { width: 2.4em; height: 2.4em; }
.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.15rem; margin: 2rem 0 .6rem; }
.prose p { color: var(--muted); }
.prose ul { color: var(--muted); margin: 0 0 1rem; padding-left: 1.2rem; }
.prose li { margin-bottom: .45rem; }
.prose strong { color: var(--dark); }
@media (max-width: 599px) { .prose h1 { font-size: 1.5rem; } .prose h2 { font-size: 1.05rem; margin-top: 1.6rem; } }
.page { min-height: 50vh; }

/* Reveal animation */
@media (prefers-reduced-motion: no-preference) {
  html.js .card, html.js .steps-list li, html.js .proof-copy, html.js .proof-media { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .in-view { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------
   Motion + mobile-first ordering (reels first on phones)
------------------------------------------------------------------ */
main { display: flex; flex-direction: column; }
main > * { width: 100%; }

/* Ticker strip */
.ticker { background: var(--dark); color: #fff; overflow: hidden; padding: .55rem 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.ticker-track { display: flex; gap: 2.2rem; width: max-content; animation: ticker 28s linear infinite; font-family: var(--font-head); font-weight: 600; font-size: .85rem; letter-spacing: .02em; white-space: nowrap; }
.ticker-track span { display: inline-flex; align-items: center; gap: .4rem; }
.ticker-track .ico { color: #ffd166; width: 1.1em; height: 1.1em; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Hero entrance + floating portrait */
@media (prefers-reduced-motion: no-preference) {
  .anim-in > * { opacity: 0; transform: translateY(16px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .anim-in > *:nth-child(1) { animation-delay: .05s; } .anim-in > *:nth-child(2) { animation-delay: .15s; }
  .anim-in > *:nth-child(3) { animation-delay: .25s; } .anim-in > *:nth-child(4) { animation-delay: .35s; }
  .anim-in > *:nth-child(5) { animation-delay: .45s; } .anim-in > *:nth-child(6) { animation-delay: .55s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .hero-media img { animation: floaty 6s ease-in-out infinite; }
  @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .hero-blob { animation: blob 12s ease-in-out infinite; }
  @keyframes blob { 0%, 100% { border-radius: 48% 52% 40% 60% / 55% 45% 55% 45%; } 50% { border-radius: 55% 45% 58% 42% / 45% 58% 42% 55%; } }
  .btn-accent { position: relative; overflow: hidden; }
  .btn-accent::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite; }
  @keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
  .reel { transition: transform .25s ease; }
  .reel:hover { transform: translateY(-4px); }
  }

/* Phones: videos first, then ticker, then hero */
@media (max-width: 899px) {
  .reels-experience { order: -2; padding: 1.4rem 0 1.6rem; }
  .ticker { order: -1; }
  .reels .section-head { margin-bottom: 1rem; }
  .reels h2 { font-size: 1.35rem; margin-bottom: .2rem; }
  .reels .section-head p { font-size: .9rem; margin: 0; }
  .reels-track { padding-left: 1rem; padding-right: 1rem; margin-inline: -1rem; }
  .reel { flex-basis: 46vw; scroll-snap-align: start; border-radius: 14px; }
  .reels-track { gap: .6rem; }
  .reel-btn { width: 34px; height: 34px; }
  .reel-mute { left: .5rem; bottom: .5rem; } .reel-full { right: .5rem; bottom: .5rem; } .reel-next { right: .5rem; top: .5rem; }
  .reel figcaption { font-size: .72rem; padding: 2rem .5rem 2.9rem .5rem; }
  .hero { padding-top: 2rem; }
  .hero-media { width: min(300px, 64%); }
  .badges { grid-template-columns: 1fr 1fr; }
}

/* Phone field with country code */
.phone-field { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: .5rem; }
.phone-field select { font: inherit; font-size: .95rem; padding: .8rem .5rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fbfcfd; min-width: 0; }
.phone-field select:focus { outline: none; border-color: var(--primary); background: #fff; }

/* Map directions button + footer link */
.dir-link { font-weight: 600; margin-left: .3rem; white-space: nowrap; }
.lead-form select { width: 100%; font: inherit; font-size: 1rem; padding: .8rem .9rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fbfcfd; }
.lead-form select:focus { outline: none; border-color: var(--primary); background: #fff; }

/* ------------------------------------------------------------------
   Persuasion sections: campaign bar, CTA band, before/after, doctor,
   package, testimonials, multi-step form, exit modal
------------------------------------------------------------------ */

.cta-band { background: linear-gradient(120deg, var(--dark), color-mix(in srgb, var(--dark) 70%, var(--primary))); color: #fff; padding: 3rem 0; }
.cta-band h2 { color: #fff; margin-bottom: .4rem; }
.cta-band p { color: rgba(255,255,255,.8); margin: 0; max-width: 640px; }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

.ba-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ba { margin: 0; }
.ba-frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: #000; user-select: none; box-shadow: var(--shadow); }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after { clip-path: inset(0 0 0 50%); }
.ba-label { position: absolute; top: .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; background: rgba(0,0,0,.55); color: #fff; padding: .25rem .5rem; border-radius: 6px; }
.ba-label.l { left: .7rem; } .ba-label.r { right: .7rem; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--dark); display: grid; place-items: center; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.ba-frame input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba figcaption { text-align: center; color: var(--muted); font-size: .9rem; margin-top: .6rem; }

.doctor { background: var(--bg-soft); }
.doctor-grid { display: grid; gap: 2rem; align-items: center; }
.doctor-media { position: relative; justify-self: center; width: min(340px, 80%); }
.doctor-media::before { content: ""; position: absolute; inset: 10% -6% 0; background: linear-gradient(160deg, var(--dark), var(--primary)); border-radius: 46% 54% 42% 58% / 56% 44% 56% 44%; }
.doctor-media img { position: relative; width: 100%; }
.doctor-role { font-weight: 600; color: var(--primary); margin-top: -.3rem; }
.check-list.dark li { color: var(--text); } .check-list.dark .ico { color: var(--primary); }
@media (min-width: 900px) { .doctor-grid { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }

.package-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); display: grid; gap: 1.5rem; padding: 2rem; max-width: 980px; margin: 0 auto; }
.package-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.package-list li { display: flex; gap: .5rem; align-items: flex-start; }
.package-list .ico { color: var(--primary); margin-top: .15em; }
.package-cta { display: grid; gap: .7rem; justify-items: center; text-align: center; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.package-cta strong { font-family: var(--font-head); font-size: 1.25rem; color: var(--dark); }
@media (min-width: 900px) { .package-card { grid-template-columns: 1.4fr .8fr; align-items: center; } .package-cta { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 2rem; } }

.google-badge { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .4rem 1rem; margin-top: .5rem; color: var(--dark); }
.google-badge .g { font-family: var(--font-head); font-weight: 700; color: #4285f4; font-size: 1.2rem; }
.google-badge strong { font-size: 1.1rem; } .google-badge .stars { color: #fbbc04; letter-spacing: .05em; }
.t-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.t-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.t-stars { color: #fbbc04; letter-spacing: .05em; } .t-stars span { color: var(--line); }
.t-card p { margin: 0; color: var(--text); flex: 1; }
.t-card footer { font-size: .9rem; color: var(--muted); }

/* multi-step form */
.steps-progress { display: grid; gap: .4rem; }
.step-of { font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.steps-progress .bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.steps-progress .bar i { display: block; height: 100%; width: 33%; background: var(--accent); transition: width .3s; }
.lead-form .step { border: 0; padding: 0; margin: 0; display: grid; gap: .9rem; min-width: 0; }
.lead-form .legend { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--dark); padding: 0; margin: 0 0 .3rem; }
.q-label { font-size: .85rem; font-weight: 600; color: var(--dark); margin: .3rem 0 0; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.choice { position: relative; display: grid; justify-items: center; gap: .4rem; padding: .8rem .5rem; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; text-align: center; font-size: .82rem; font-weight: 600; color: var(--dark); transition: border-color .15s, background .15s; overflow-wrap: anywhere; hyphens: auto; }
.choice input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choice-ico { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 44 / 50; overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, #fff), #fff); transition: background .15s; }
.choice-ico svg { width: 56px; height: 56px; }
/* The box gets its height from aspect-ratio, and a percentage height on the image does not resolve
   against that, so the image kept its own 440x560 height and was cropped. Absolute inset fills it. */
.choice-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; opacity: .88; transition: opacity .18s, transform .18s; }
.choice:hover .choice-ico img { opacity: 1; }
.choice:has(input:checked) .choice-ico { background: #fff; }
.choice:has(input:checked) .choice-ico img { opacity: 1; transform: scale(1.04); }
@media (max-width: 600px) { .choice-ico { aspect-ratio: 1 / 1; } .choice { padding: .6rem .4rem; font-size: .78rem; } }
@media (prefers-reduced-motion: reduce) { .choice-ico img { transition: none; } .choice:has(input:checked) .choice-ico img { transform: none; } }
.choice:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--line)); }
.choice:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.choice:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, #fff); box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--primary) 55%, transparent); }
/* Brief hint on the tiles when Continue is tapped without a choice */
.choice-grid.needs-choice .choice { border-color: #e4b4ae; }
.choice-grid.needs-choice { animation: choice-nudge .5s ease; }
@keyframes choice-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .choice-grid.needs-choice { animation: none; } }
.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pill span { display: inline-block; padding: .55rem .95rem; border: 2px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--dark); transition: all .15s; }
.pill:has(input:checked) span { border-color: var(--primary); background: var(--primary); color: #fff; }
.step-nav { display: flex; justify-content: space-between; gap: .6rem; align-items: center; }
.step-nav .btn-lg { flex: 1; }
.photos-field { display: grid; gap: .4rem; }
.photos-field .lbl { font-size: .85rem; font-weight: 600; color: var(--dark); }
.photo-previews { display: flex; gap: .5rem; flex-wrap: wrap; }
.photo-previews:empty { display: none; }
.photo-previews .ph { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.photo-previews img { width: 100%; height: 100%; object-fit: cover; }
.photo-previews .ph button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; }
.field-error { border-color: #b42318 !important; }
/* consent row: the checkbox itself is what needs attention */
.consent.field-error { color: #b42318; }
.consent.field-error input { outline: 2px solid #b42318; outline-offset: 2px; }

/* exit-intent modal */
/* Privacy policy pop-up (opened from the consent line in the form) */
.privacy-modal { position: fixed; inset: 0; z-index: 120; background: rgba(11,31,51,.7); display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(3px); }
.privacy-modal[hidden] { display: none; }
.privacy-card { display: flex; flex-direction: column; background: #fff; border-radius: 20px; width: min(680px, 100%); max-height: min(86vh, 820px); box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: rise .3s ease; overflow: hidden; }
.privacy-head { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); }
.privacy-head h2 { margin: 0; font-size: 1.15rem; flex: 1; min-width: 0; }
.privacy-close { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg-soft); color: var(--dark); display: grid; place-items: center; cursor: pointer; }
.privacy-close:hover { background: var(--line); }
.privacy-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .2rem 1.3rem 1rem; overscroll-behavior: contain; }
.privacy-scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }
.privacy-scroll h2:first-of-type { margin-top: 1.2rem; }
.privacy-scroll p, .privacy-scroll li { font-size: .92rem; }
.privacy-foot { padding: .9rem 1.3rem; border-top: 1px solid var(--line); text-align: right; }
.privacy-foot .btn { padding: .7rem 1.6rem; }
@media (max-width: 599px) {
  .privacy-modal { padding: 0; align-items: flex-end; }
  .privacy-card { max-height: 92vh; border-radius: 18px 18px 0 0; }
  .privacy-head { padding: .9rem 1rem; }
  .privacy-head h2 { font-size: 1.02rem; }
  .privacy-scroll { padding: .2rem 1rem 1rem; }
  .privacy-foot { padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); text-align: center; }
  .privacy-foot .btn { width: 100%; }
}

.exit-modal { position: fixed; inset: 0; z-index: 110; background: rgba(11,31,51,.7); display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(3px); }
.exit-modal[hidden] { display: none; }
.exit-card { position: relative; background: #fff; border-radius: 24px; padding: 2.4rem 2rem 2rem; max-width: 440px; width: 100%; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: rise .35s ease; }
.exit-close { position: absolute; top: .8rem; right: .8rem; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg-soft); color: var(--dark); display: grid; place-items: center; cursor: pointer; }
.exit-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; margin: 0 auto 1rem; }
.exit-icon .ico { width: 2em; height: 2em; }
.exit-card h3 { font-size: 1.5rem; }
.exit-card p { color: var(--muted); }
.exit-secondary { display: inline-block; margin-top: .8rem; font-weight: 600; }
.lead-form .step[hidden], [hidden] { display: none !important; }

/* Thank-you photo step */
.thanks-card { max-width: 760px; margin: 0 auto; }
.photo-step { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.photo-step h2 { font-size: 1.4rem; }
.photo-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin: 1.2rem 0; }
.photo-slot { position: relative; border: 2px dashed var(--line); border-radius: 14px; background: #fff; padding: .4rem; cursor: pointer; display: grid; gap: .3rem; justify-items: center; font: inherit; color: var(--dark); transition: border-color .15s; }
.photo-slot:hover { border-color: var(--primary); }
.photo-slot .slot-ico svg { width: 100%; height: auto; display: block; border-radius: 10px; }
.photo-slot img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.photo-slot.filled { border-style: solid; border-color: var(--primary); }
.photo-slot.filled .slot-ico { display: none; }
.slot-label { font-size: .75rem; font-weight: 600; }
.slot-plus { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 1rem; line-height: 1; }
.photo-slot.filled .slot-plus { background: var(--primary); font-size: .8rem; }
.photo-step.done .photo-slots, .photo-step.done #photo-send, .photo-step.done .small { display: none; }
@media (max-width: 600px) { .photo-slots { grid-template-columns: repeat(3, 1fr); } .slot-label { font-size: .7rem; } }
.photo-guide { width: 100%; border-radius: 14px; margin: 1rem 0 .4rem; }

/* Language switcher */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .85rem; color: var(--dark); background: #fff; user-select: none; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + .4rem); list-style: none; margin: 0; padding: .4rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); min-width: 160px; z-index: 60; }
.lang-menu li a { display: block; padding: .5rem .7rem; border-radius: 8px; color: var(--dark); white-space: nowrap; }
.lang-menu li a:hover, .lang-menu li a.active { background: var(--bg-soft); color: var(--primary); }
.lang-flag { font-size: 1.05em; }
/* SVG flag files instead of emoji, so Windows shows a flag and not the "IT" region letters */
img.lang-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: none; display: inline-block; }
.lang-menu li a img.lang-flag { vertical-align: -2px; margin-right: .4rem; }
@media (max-width: 420px) { .lang-menu .lang-code { display: none; } .lang-menu summary img.lang-flag { width: 21px; height: 15px; } }
.footer-langs a { display: inline-block; margin: 0 .6rem .4rem 0; color: rgba(255,255,255,.75); font-size: .85rem; }
.footer-langs a.active { color: #fff; font-weight: 600; text-decoration: underline; }

/* Anchor target keeps the form title clear of the sticky header */
/* Deep links (#testimonials, #before-after …) land below the sticky campaign bar + header. */
section[id] { scroll-margin-top: calc(var(--bar-h, 0px) + 84px); }
@media (max-width: 899px) { section[id] { scroll-margin-top: calc(var(--bar-h, 0px) + 72px); } }
#lead-form { scroll-margin-top: 84px; }
@media (max-width: 899px) { #lead-form { scroll-margin-top: 72px; } }

/* Proof image overlay labels (one per panel) */
.proof-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.proof-media img { border-radius: 0; box-shadow: none; display: block; }
.proof-labels { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); padding: 2.6rem .5rem .6rem; gap: .4rem; background: linear-gradient(to top, rgba(0,0,0,.75), transparent); pointer-events: none; }
.proof-labels span { justify-self: center; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.35); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .proof-labels span { font-size: .62rem; padding: .3rem .5rem; letter-spacing: .02em; } .proof-labels { padding-top: 2rem; } }

/* Form section on phones: hide the campaign box and checklist so the form starts right after the title */
@media (max-width: 899px) {
  .lead-pitch .campaign, .lead-pitch .check-list { display: none; }
}

/* Phones: compact green intro so the first form step fits on one screen */
@media (max-width: 899px) {
  .lead-section { padding: 1.1rem 0 2rem; }
  .lead-grid { gap: 1rem; }
  .lead-pitch h2 { font-size: clamp(1.35rem, 5.4vw, 1.7rem); margin-bottom: .3rem; }
  /* two lines are enough here; the campaign bar above already eats into the screen */
  .lead-pitch p { font-size: .92rem; line-height: 1.4; color: rgba(255,255,255,.88); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lead-form { padding: 1.1rem 1rem 1.2rem; border-radius: 16px; gap: .75rem; }
  .lead-form .legend { font-size: 1.12rem; margin-bottom: .1rem; }
  .lead-form .step { gap: .7rem; }
  .steps-progress { gap: .3rem; }
  .lead-form .step > .muted.small { margin: -.35rem 0 0; }
}
/* Phones: three tiles per row, so all five options and the Continue button fit on one screen */
@media (max-width: 600px) {
  .choice-grid.areas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  /* Labels differ a lot per language (de/sq are long); long words break instead of overflowing */
  .choice-grid.areas .choice { padding: .45rem .25rem .55rem; gap: .3rem; font-size: .7rem; line-height: 1.18; }
  /* square keeps the whole illustration visible without making the row too tall */
  .choice-grid.areas .choice-ico { aspect-ratio: 1 / 1; border-radius: 8px; }
}
@media (max-width: 480px) {
  .lead-section { padding: 1.2rem 0 2rem; }
  .lead-pitch p { font-size: .88rem; }
  .lead-form { padding: 1rem .85rem 1.1rem; }
  .choice-grid { gap: .5rem; }
}
/* Desktop: the five options sit on one row, so step 1 ends within the first screen there too */
@media (min-width: 900px) {
  .choice-grid.areas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
  .choice-grid.areas .choice { padding: .5rem .3rem .6rem; gap: .35rem; font-size: .74rem; line-height: 1.2; }
}

/* Short phone screens: drop the intro text so step 1 still ends above the sticky bar */
@media (max-width: 899px) and (max-height: 720px) {
  .lead-section { padding: .8rem 0 1.5rem; }
  .lead-grid { gap: .8rem; }
  .lead-pitch h2 { font-size: 1.2rem; margin-bottom: 0; }
  .lead-pitch p { display: none; }
  .lead-form .step > .muted.small { display: none; }
  .lead-form .legend { font-size: 1.05rem; }
  .lead-form { gap: .6rem; }
  .choice-grid.areas .choice { font-size: .66rem; padding: .4rem .2rem .45rem; }
  .choice-grid.areas .choice-ico { aspect-ratio: 5 / 4; }
}

/* ---- Horizontal overflow fixes (page must never scroll sideways) ---- */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
main > * { min-width: 0; }
.lead-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .lead-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lead-grid > * { min-width: 0; max-width: 100%; }
.ticker { max-width: 100%; contain: inline-size; }
.ticker-track { will-change: transform; }
/* Header: fit 360-390px phones */
@media (max-width: 480px) {
  .header-inner { gap: .5rem; min-height: 60px; }
  .logo-img { max-width: 42vw; height: 28px; }
  .header-actions { gap: .4rem; }
  .header-phone.btn-sm, .btn-wa.btn-sm { padding: .5rem .6rem; }
  .lang-menu summary { padding: .35rem .45rem; font-size: .8rem; }
}

/* Campaign bar v3: compact single line */
.campaign-bar { position: relative; z-index: 51; color: #fff; background: linear-gradient(90deg, var(--dark), color-mix(in srgb, var(--dark) 45%, var(--primary))); border-bottom: 1px solid rgba(255,255,255,.08); }
.campaign-inner { display: flex; align-items: center; gap: .75rem; padding: .45rem 0; font-size: .88rem; }
.campaign-label { display: inline-flex; align-items: center; gap: .3rem; background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 999px; white-space: nowrap; }
.campaign-label .ico { width: 1em; height: 1em; color: #ffe08a; }
.campaign-text { flex: 1; min-width: 0; color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campaign-text strong { color: #ffe08a; }
.countdown { display: inline-flex; align-items: center; gap: .2rem; font-family: var(--font-head); font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.countdown .ico { width: 1em; height: 1em; color: #ffe08a; margin-right: .15rem; }
.countdown small { font-weight: 600; font-size: .7em; opacity: .8; margin-right: .3rem; }
.campaign-cta { display: inline-flex; align-items: center; gap: .3rem; color: #fff; font-weight: 700; font-family: var(--font-head); white-space: nowrap; border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.campaign-cta:hover { color: #ffe08a; }
.campaign-close { background: transparent; border: 0; color: rgba(255,255,255,.6); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .1rem; }
.campaign-close:hover { color: #fff; }
.campaign-bar.hidden { display: none; }
@media (max-width: 899px) {
  .campaign-inner { flex-wrap: wrap; gap: .4rem .6rem; padding: .5rem 0; font-size: .8rem; }
  .campaign-label { order: 1; }
  .countdown { order: 2; margin-left: auto; font-size: .78rem; padding: .2rem .5rem; }
  .campaign-close { order: 3; }
  .campaign-text { order: 4; flex-basis: 100%; white-space: normal; line-height: 1.35; }
  .campaign-cta { order: 5; }
}

/* Map card */
.map { padding-top: 0; }
.map-card { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--bg-soft); }
.map-card iframe { width: 100%; height: 440px; border: 0; display: block; filter: grayscale(.25) contrast(1.02); }
.map-info { position: absolute; left: 1.2rem; bottom: 1.2rem; max-width: 340px; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-radius: 18px; padding: 1.1rem 1.2rem; box-shadow: 0 14px 40px rgba(11,31,51,.18); display: grid; gap: .5rem; }
.map-logo .logo-img { height: 24px; }
.map-info p { margin: 0; font-size: .9rem; color: var(--text); display: flex; gap: .45rem; align-items: flex-start; }
.map-info .ico { color: var(--primary); flex: none; margin-top: .15em; }
.map-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
@media (max-width: 720px) {
  .map-card iframe { height: 300px; }
  .map-info { position: static; max-width: none; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }
}
/* Fieldsets must never grow past the card (browser default min-inline-size: min-content) */
.lead-form .step { min-width: 0; max-width: 100%; }
.lead-form label, .lead-form .phone-field, .lead-form .choice-grid, .lead-form .choice-row { min-width: 0; max-width: 100%; }
.lead-form select, .lead-form input, .lead-form textarea { min-width: 0; max-width: 100%; box-sizing: border-box; }
.phone-field select { text-overflow: ellipsis; }
/* Grid tracks capped at container width (children can't widen the card) */
.lead-form, .lead-form .step, .lead-form label { grid-template-columns: minmax(0, 1fr); }
.lead-form .consent { grid-template-columns: auto minmax(0, 1fr); }
.lead-form .step > * { max-width: 100%; }

/* Promo (clinic tour) reels: lighter variant */
.reels-promo { background: var(--bg-soft); color: var(--text); }
.reels-promo h2 { color: var(--dark); }
.reels-promo .section-head p { color: var(--muted); }
.reels-promo .reels-nav button { border-color: var(--line); color: var(--dark); }
.reels-promo .reels-nav button:hover { background: #fff; }

/* Treatments & technologies tiles */
.treatments { background: #fff; }
.tiles { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, var(--dark), color-mix(in srgb, var(--dark) 55%, var(--primary))); color: #fff; display: grid; place-items: center; text-align: center; padding: .8rem; border: 1px solid var(--line); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
/* Brand-tinted scrim: unifies bright and dark photos and keeps the label readable. */
.tile.has-img::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to top, color-mix(in srgb, var(--dark) 92%, transparent) 0%, color-mix(in srgb, var(--dark) 60%, transparent) 32%, rgba(11,31,51,.10) 62%, rgba(11,31,51,.22) 100%); }
.tile.has-img { padding: 0; border-color: color-mix(in srgb, var(--dark) 12%, var(--line)); }
.tile.has-img:hover img { transform: scale(1.05); }
.tile-ico { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; margin-bottom: 2.2rem; }
.tile-ico .ico { width: 1.6em; height: 1.6em; color: #ffd166; }
.tile-label { position: absolute; left: .6rem; right: .6rem; bottom: .7rem; z-index: 1; font-family: var(--font-head); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.tile.has-img .tile-label { left: .75rem; right: .75rem; bottom: .8rem; line-height: 1.25; }
@media (max-width: 600px) { .tiles { grid-template-columns: repeat(2, 1fr); gap: .6rem; } .tile { aspect-ratio: 1 / 1; } .tile-label { font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) { .tile img, .tile.has-img:hover img { transition: none; transform: none; } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 601px) and (max-width: 899px) { .tiles { grid-template-columns: repeat(3, 1fr); } }

/* Campaign bar v3.1: centered, balanced */
.campaign-inner { position: relative; justify-content: center; gap: 1.1rem; padding: .55rem 2.2rem .55rem 0; }
.campaign-text { flex: 0 1 auto; }
.campaign-cta { background: #fff; color: var(--dark); border: 0; border-radius: 999px; padding: .38rem .9rem; font-size: .82rem; box-shadow: 0 4px 12px rgba(0,0,0,.15); transition: transform .15s, background .15s; }
.campaign-cta:hover { color: var(--dark); background: #ffe08a; transform: translateY(-1px); }
.campaign-cta .ico { color: var(--accent); }
.campaign-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.campaign-close:hover { background: rgba(255,255,255,.12); }
.countdown { background: rgba(0,0,0,.25); }
@media (max-width: 899px) {
  .campaign-inner { justify-content: flex-start; padding: .55rem 2rem .6rem 0; row-gap: .45rem; }
  .campaign-text { flex-basis: 100%; }
  .campaign-cta { order: 5; margin-left: 0; }
  .countdown { order: 2; margin-left: auto; }
  .campaign-close { top: .7rem; transform: none; }
}

/* Sticky campaign bar that compacts on scroll (badge + countdown only) */
.campaign-bar { position: sticky; top: 0; z-index: 52; transition: box-shadow .2s; }
.campaign-bar.compact { box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.campaign-bar.compact .campaign-inner { padding: .3rem 2.2rem .3rem 0; justify-content: center; gap: .8rem; }
.campaign-bar.compact .campaign-text, .campaign-bar.compact .campaign-cta { display: none; }
.campaign-bar.compact .campaign-label { font-size: .62rem; padding: .22rem .55rem; }
.campaign-bar.compact .countdown { font-size: .82rem; padding: .18rem .55rem; }
.site-header { top: var(--bar-h, 0px); }
@media (max-width: 899px) {
  .campaign-bar.compact .campaign-inner { flex-wrap: nowrap; padding: .3rem 2rem .3rem 0; justify-content: center; }
  .campaign-bar.compact .countdown { margin-left: 0; order: 2; }
  .campaign-bar.compact .campaign-close { top: 50%; transform: translateY(-50%); }
}

/* Campaign bar: message + CTA share one flow on phones */
.campaign-msg { display: contents; }
@media (min-width: 900px) { .campaign-inner .countdown { order: 3; } .campaign-msg .campaign-text { order: 2; } .campaign-msg .campaign-cta { order: 4; } }
@media (max-width: 899px) {
  .campaign-msg { display: block; order: 4; flex-basis: 100%; line-height: 1.45; }
  .campaign-msg .campaign-text { display: inline; }
  .campaign-msg .campaign-cta { display: inline-flex; vertical-align: middle; margin-left: .35rem; padding: .22rem .7rem; font-size: .78rem; }
  .campaign-bar.compact .campaign-msg { display: none; }
}
@media (max-width: 899px) { .campaign-msg { font-size: .78rem; line-height: 1.4; } .campaign-msg .campaign-cta { padding: .18rem .6rem; font-size: .74rem; margin-left: .25rem; } }
@media (max-width: 899px) { .campaign-msg .campaign-cta .ico { display: none; } .campaign-msg .campaign-cta { padding: .16rem .55rem; font-size: .72rem; } .campaign-inner { padding-right: 1.7rem; } }

/* Campaign bar: inline text CTA on phones, whole bar clickable */
.campaign-bar { cursor: pointer; }
.campaign-bar .campaign-close { cursor: pointer; }
@media (max-width: 899px) {
  .campaign-msg .campaign-cta { display: inline; background: none; box-shadow: none; padding: 0; margin-left: .3rem; font-size: inherit; color: #ffe08a; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,224,138,.6); white-space: nowrap; }
  .campaign-msg .campaign-cta .ico { display: inline-block; width: .9em; height: .9em; vertical-align: -.1em; color: #ffe08a; }
  .campaign-msg .campaign-cta:hover { color: #fff; }
}
/* Doctor photo as a framed card (photo has its own background) */
.doctor-media::before { inset: auto; top: 1.2rem; left: -1.2rem; right: 1.2rem; bottom: -1.2rem; border-radius: 28px; background: linear-gradient(160deg, var(--primary), var(--dark)); opacity: .9; }
.doctor-media img { border-radius: 24px; box-shadow: 0 20px 50px rgba(11,31,51,.22); }

/* Before/after composite gallery + lightbox */
.ba-single a { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #000; }
.ba-single img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .3s; }
.ba-single a:hover img { transform: scale(1.03); }
.ba-more { text-align: center; margin-top: 1.5rem; }
@media (max-width: 600px) { .ba-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; } }
.img-modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.img-modal[hidden] { display: none; }
.img-modal img { max-width: min(96vw, 1100px); max-height: 92vh; border-radius: 14px; }

/* ============================================================
   Duzeltmeler
   ============================================================ */

/* Cikis penceresindeki buton: uzun etiketler kesilmesin, alt satira insin. */
.exit-card .btn { white-space: normal; line-height: 1.3; }

/* Form bolumu: alt yazi satir kirpmasi yok, cumle hicbir ekranda yarida kalmasin. */
@media (max-width: 899px) {
  .lead-pitch p { display: block; -webkit-line-clamp: none; overflow: visible; }
}
/* iPhone'da Safari cubuklari dusunce kullanilabilir yukseklik ~714px kaliyor ve
   mevcut bir kural formun alt yazisini tamamen gizliyordu. */
@media (max-width: 899px) and (max-height: 720px) {
  .lead-pitch p { display: block; }
}

/* Kampanya seridi mobilde: mesaj + buton iki satirda kalsin. */
@media (max-width: 899px) {
  .campaign-msg { font-size: .73rem; line-height: 1.35; }
  .campaign-msg .campaign-cta { font-size: inherit; }
}
@media (max-width: 360px) {
  .campaign-msg { font-size: .69rem; line-height: 1.32; }
}

/* Kayan serit: bosluklar flex "gap" ile veriliyordu, bu yuzden kaydirma tam bir
   tur etmiyor ve her dongude yarim bosluk kadar geri sicriyordu. Bosluk ogelerin
   sag kenar bosluguna tasindi; dort kopya basildigi icin bir tur = dortte bir. */
.ticker-track { gap: 0; }
.ticker-track > span { margin-right: 2.2rem; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-25%); } }

/* ------------------------------------------------------------------
   Aranabilir ulke kodu secici (.cc-select)
   Native <select> DOM'da kalir, sadece gorunmez olur: form verisi,
   sunucu tarafi ve JS'siz tarayici davranisi aynen korunur.
------------------------------------------------------------------- */
.cc-select { position: relative; min-width: 0; }

/* JS devreye girdiginde native select'i gizle (ama formda kalsin) */
.cc-select.cc-ready > select {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  opacity: 0; pointer-events: none;
}

/* Secili ulkeyi gosteren, listeyi acan dugme */
.cc-btn {
  width: 100%; display: flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .95rem; padding: .8rem .6rem;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fbfcfd;
  color: inherit; cursor: pointer; text-align: left; box-sizing: border-box;
}
.cc-btn .cc-flag { font-size: 1.05rem; line-height: 1; flex: none; }
.cc-btn .cc-dial { font-variant-numeric: tabular-nums; }
.cc-btn .cc-caret { margin-left: auto; flex: none; opacity: .45; transition: transform .15s ease; }
.cc-btn:hover { background: #fff; }
.cc-btn:focus-visible { outline: none; border-color: var(--primary); background: #fff; }
.cc-select.cc-open .cc-btn { border-color: var(--primary); background: #fff; }
.cc-select.cc-open .cc-caret { transform: rotate(180deg); }
.cc-select.field-error .cc-btn { border-color: #dc2626; }

/* Asagi dogru acilan panel */
.cc-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  min-width: 100%; width: 310px; max-width: 86vw;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(11, 31, 51, .18); overflow: hidden;
}
.cc-search { padding: .5rem; border-bottom: 1px solid var(--line); }
.cc-search input {
  width: 100%; font: inherit; font-size: .92rem; padding: .55rem .7rem;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fbfcfd;
  box-sizing: border-box;
}
.cc-search input:focus { outline: none; border-color: var(--primary); background: #fff; }

.cc-list {
  list-style: none; margin: 0; padding: .25rem;
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
}
.cc-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .55rem; border-radius: 9px; cursor: pointer; font-size: .92rem;
}
/* Aramada elenen satirlar: .cc-item display:flex oldugu icin [hidden] tek basina yetmez */
.cc-item[hidden] { display: none; }
.cc-item .cc-flag { font-size: 1.05rem; line-height: 1; flex: none; }
.cc-item .cc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-item .cc-dial { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.cc-item.cc-active { background: rgba(15, 118, 110, .12); }
.cc-item[aria-selected="true"] { font-weight: 700; }
.cc-empty { margin: 0; padding: .9rem; text-align: center; color: var(--muted); font-size: .9rem; }