/* ==========================================================================
   WildSmile redesign — design tokens + shared components (header, footer, home)
   Scope: every new selector is prefixed "ws2-" so it can never collide with
   the existing 16k-line main.css / Bootstrap 4 that every page still loads.
   Fonts: reuses the brand webfonts already hosted in /frontend/assets/fonts
   (see fonts.css) — Proxima Nova Light/Semibold + DIN Next Heavy/Bold —
   no new font files needed.
   ========================================================================== */

:root{
  --ws2-paper:#F3F5FC;
  --ws2-paper-raised:#FFFFFF;
  --ws2-ink:#0A1636;
  --ws2-ink-soft:#4A5578;
  --ws2-ink-faint:#7C87AC;
  --ws2-blue:#0027A9;
  --ws2-blue-deep:#001B76;
  --ws2-blue-bright:#3357E8;
  --ws2-orange:#FF3D2B;
  --ws2-orange-deep:#E22615;
  --ws2-mist:#E7ECFA;
  --ws2-mist-2:#DCE3F6;
  --ws2-line:#D7DEF2;
  --ws2-good:#1A9A5C;
  --ws2-good-mist:#E1F2E7;
  --ws2-gold:#E2A93B;
  --ws2-gold-mist:#FAEFD8;
  --ws2-orange-mist:#FDE3DE;
  --ws2-shadow: 0 1px 2px rgba(10,22,54,.05), 0 12px 28px -12px rgba(10,22,54,.16);
  --ws2-shadow-lg: 0 20px 60px -20px rgba(10,22,54,.35);
  --ws2-font-body: 'Proxima N W01 Light', Helvetica, Arial, sans-serif;
  --ws2-font-ui: 'Proxima N W01 Smbd', Helvetica, Arial, sans-serif;
  --ws2-font-display: 'DIN Next LT W01 Heavy', Helvetica, Arial, sans-serif;
}

/* Don't rely on Bootstrap's global box-sizing:border-box reset — set our own,
   scoped to our components, so padding is included in width/height regardless
   of whether main.css is present. box-sizing has no other intentional value
   anywhere in this file, so a blanket reset here is safe (unlike text-transform,
   this can't fight a utility class). */
.ws2-home, .ws2-home *, .ws2-home *::before, .ws2-home *::after,
.ws2-header, .ws2-header *, .ws2-header *::before, .ws2-header *::after,
.ws2-footer, .ws2-footer *, .ws2-footer *::before, .ws2-footer *::after{
  box-sizing:border-box;
}

.ws2-eyebrow{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ws2-orange); margin:0; }
.ws2-lede{ font-family:var(--ws2-font-body); font-size:clamp(1.05rem,.98rem + .3vw,1.2rem); color:var(--ws2-ink-soft); line-height:1.65; max-width:46ch; margin:0; }

/* ---------- Buttons ---------- */
.ws2-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.85rem 1.65rem; border-radius:100px;
  font-family:var(--ws2-font-ui); font-weight:600; font-size:.95rem; border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap; text-decoration:none; }
.ws2-btn:hover, .ws2-btn:focus, .ws2-btn:active{ transform:translateY(-2px); color:inherit; text-decoration:none !important; }
/* Defensive: couldn't pin down which legacy rule paints an underline on hover
   (not text-decoration in the files I checked — possibly a ::after slide-in
   underline from Bootstrap). Neutralising any pseudo-element on our own
   buttons is harmless since we never use one ourselves. */
.ws2-btn::before, .ws2-btn::after{ content:none !important; }
/* Icons inside buttons never set their own stroke color, and CSS stroke defaults to
   none - same invisible-icon bug as .ws2-search-page .btn svg, just on the general
   button class instead of the search-page-scoped one. */
.ws2-btn svg{ width:16px; height:16px; stroke:currentColor; flex:none; }
.ws2-btn-orange{ background:var(--ws2-orange); color:#fff; box-shadow:0 10px 24px -8px rgba(255,61,43,.5); }
.ws2-btn-orange:hover{ background:var(--ws2-orange-deep); color:#fff; }
.ws2-btn-ghost-dark{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
.ws2-btn-ghost-dark:hover{ background:rgba(255,255,255,.12); color:#fff; }
.ws2-btn-outline{ background:transparent; border-color:var(--ws2-line); color:var(--ws2-ink); }
.ws2-btn-outline:hover{ background:var(--ws2-mist); color:var(--ws2-ink); }
.ws2-btn-text{ background:none; padding:.3rem 0; color:var(--ws2-blue); font-family:var(--ws2-font-ui); font-weight:600; text-decoration:none; }
.ws2-btn-text:hover, .ws2-btn-text:focus, .ws2-btn-text:active{ text-decoration:none !important; color:var(--ws2-blue); }
.ws2-btn-text::before, .ws2-btn-text::after{ content:none !important; }

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Baseline reset — without this, anything here without its own color/size falls back
   to main.css's global `body{color:#0027a9;font-size:1.125rem}` and the uppercase
   h1-h6 rule, since those are still loaded on every page. Scoped to h1-h6 specifically
   (not a blanket `*`) so it can't out-cascade our own uppercase utility classes
   (eyebrow, badges, tags), which apply to p/span, not headings. */
.ws2-header h1, .ws2-header h2, .ws2-header h3, .ws2-header h4, .ws2-header h5, .ws2-header h6{ text-transform:none; }
.ws2-header{ position:sticky; top:0; z-index:1000; background:rgba(243,245,252,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--ws2-line);
  color:var(--ws2-ink); font-family:var(--ws2-font-body); font-size:1rem; line-height:1.5; }
.ws2-header__bar{ max-width:1280px; margin:0 auto; padding:0 clamp(20px,4vw,48px); display:flex; align-items:center; gap:1.5rem; height:78px; }
.ws2-header__logo{ display:flex; align-items:center; flex:none; }
.ws2-header__logo svg{ height:28px; width:auto; }
.ws2-header__logo .ws2-mark{ fill:var(--ws2-orange); }
.ws2-header__logo .ws2-word{ fill:var(--ws2-blue); }
.ws2-header__nav{ display:flex; align-items:center; gap:1.5rem; margin-right:auto; margin-left:1.5rem; }
.ws2-header__nav a{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.82rem; color:var(--ws2-ink-soft); text-decoration:none; transition:color .15s ease; white-space:nowrap; }
.ws2-header__nav a:hover{ color:var(--ws2-blue); text-decoration:none; }
.ws2-header__actions{ display:flex; align-items:center; gap:.6rem; }
.ws2-header__tel{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.88rem; color:var(--ws2-ink-soft); text-decoration:none; padding:0 .6rem; white-space:nowrap; }
.ws2-header__tel:hover{ color:var(--ws2-blue); text-decoration:none; }

.ws2-dd{ position:relative; }
.ws2-dd__btn{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.85rem; color:var(--ws2-ink-soft); background:none; border:none; padding:.5rem .6rem; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; }
.ws2-dd__btn:hover{ background:var(--ws2-mist); color:var(--ws2-ink); }
.ws2-dd__btn img{ width:16px; height:auto; border-radius:2px; }
.ws2-dd .dropdown-menu{ font-family:var(--ws2-font-body); border-radius:12px; border:1px solid var(--ws2-line); box-shadow:var(--ws2-shadow-lg); padding:.4rem; }
.ws2-dd .dropdown-item{ border-radius:8px; padding:.5rem .7rem; font-size:.9rem; }
.ws2-dd .dropdown-item:active,.ws2-dd .dropdown-item:hover{ background:var(--ws2-mist); color:var(--ws2-ink); }

.ws2-header__toggle{ display:none; background:none; border:none; cursor:pointer; padding:.4rem; }
.ws2-header__toggle svg{ width:24px; height:24px; stroke:var(--ws2-ink); }

.ws2-header__mobile-panel{ display:none; }
.ws2-header__mobile-panel.is-open{ display:block; position:absolute; top:78px; left:0; right:0; background:var(--ws2-paper); border-bottom:1px solid var(--ws2-line); box-shadow:var(--ws2-shadow-lg); padding:1.2rem clamp(20px,4vw,48px) 1.6rem; }
.ws2-header__mobile-panel .ws2-header__nav{ flex-direction:column; align-items:flex-start; gap:1rem; margin:0 0 1.2rem; }
.ws2-header__mobile-row{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; padding-top:1rem; border-top:1px solid var(--ws2-line); }

@media (max-width: 991px){
  .ws2-header__bar .ws2-header__nav{ display:none; }
  .ws2-header__actions .ws2-dd,
  .ws2-header__actions .ws2-header__tel{ display:none; }
  .ws2-header__toggle{ display:inline-flex; }
}

.ws2-header__mobile-flags{ display:flex; gap:.7rem; }
.ws2-header__mobile-flags a{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:32px; border-radius:8px; border:1px solid var(--ws2-line); overflow:hidden; }
.ws2-header__mobile-flags a.is-active{ border-color:var(--ws2-blue); box-shadow:0 0 0 2px rgba(51,87,232,.15); }
.ws2-header__mobile-flags img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ws2-footer h1, .ws2-footer h2, .ws2-footer h3, .ws2-footer h4, .ws2-footer h5, .ws2-footer h6{ text-transform:none; }
.ws2-footer{ background:var(--ws2-ink); color:rgba(255,255,255,.82); padding-block:clamp(3rem,6vw,4.5rem) 0; margin-top:clamp(3rem,6vw,5rem);
  font-family:var(--ws2-font-body); font-size:1rem; line-height:1.5; }
.ws2-footer a{ text-decoration:none; }
/* Cookie consent popup (main.css #popup-content, legacy markup — not restyled) lives
   inside .ws2-footer in the DOM but keeps its own white card. Without this, the
   footer's near-white text color inherits into it, making the title/text invisible
   on that white background. */
.ws2-footer #cookie-popup{ color:#0027a9; }
.ws2-footer__top{ max-width:1280px; margin:0 auto; padding:0 clamp(20px,4vw,48px); display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:2.5rem; padding-bottom:2.8rem; border-bottom:1px solid rgba(255,255,255,.14); }
.ws2-footer__brand svg{ height:26px; width:auto; margin-bottom:1.1rem; }
.ws2-footer__brand .ws2-mark{ fill:var(--ws2-orange); }
.ws2-footer__brand .ws2-word{ fill:#fff; }
.ws2-footer__brand p{ font-family:var(--ws2-font-body); font-size:.9rem; color:rgba(255,255,255,.62); max-width:30ch; margin:0; }
.ws2-footer__col h4{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 1rem; }
.ws2-footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.ws2-footer__col a{ font-family:var(--ws2-font-body); font-size:.9rem; color:rgba(255,255,255,.78); transition:color .15s ease; }
.ws2-footer__col a:hover{ color:#fff; }

.ws2-footer__newsletter{ max-width:1280px; margin:2.6rem auto 0; padding:0 clamp(20px,4vw,48px); }
.ws2-footer__newsletter-inner{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:1.6rem clamp(1.4rem,3vw,2.2rem); display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 1.6rem; justify-content:space-between; }
.ws2-footer__newsletter-inner p{ font-family:var(--ws2-font-ui); font-weight:600; font-size:1rem; color:#fff; margin:0; }
.ws2-footer__newsletter-form{ display:flex; gap:.7rem; flex:1; min-width:280px; max-width:440px; }
.ws2-footer__newsletter-form input{ flex:1; padding:.8rem 1rem; border-radius:100px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; font-family:var(--ws2-font-body); font-size:.92rem; }
.ws2-footer__newsletter-form input::placeholder{ color:rgba(255,255,255,.5); }
.ws2-footer__newsletter-form input:focus{ outline:none; border-color:var(--ws2-orange); }

.ws2-footer__bottom{ max-width:1280px; margin:2.4rem auto 0; padding:1.6rem clamp(20px,4vw,48px) 2rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.ws2-footer__social{ display:flex; gap:.7rem; list-style:none; margin:0; padding:0; }
.ws2-footer__social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background-color .15s ease; }
.ws2-footer__social a:hover{ background:var(--ws2-orange); }
.ws2-footer__social svg{ width:16px; height:16px; fill:#fff; }
.ws2-footer__social img{ width:16px; height:16px; filter:brightness(0) invert(1); }
.ws2-footer__copy{ font-family:var(--ws2-font-body); font-size:.82rem; color:rgba(255,255,255,.45); }

@media (max-width: 991px){
  .ws2-footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px){
  .ws2-footer__top{ grid-template-columns:1fr; }
  .ws2-footer__newsletter-inner{ flex-direction:column; align-items:flex-start; }
  .ws2-footer__newsletter-form{ width:100%; max-width:none; }
}

/* ==========================================================================
   HOME PAGE (scoped under .ws2-home so it never leaks into other pages)
   ========================================================================== */
.ws2-home h1, .ws2-home h2, .ws2-home h3, .ws2-home h4, .ws2-home h5, .ws2-home h6{ text-transform:none; }
.ws2-home{ font-family:var(--ws2-font-body); color:var(--ws2-ink); background:var(--ws2-paper); overflow-x:hidden;
  font-size:1rem; line-height:1.6; }
.ws2-home h1,.ws2-home h2,.ws2-home h3,.ws2-home h4{ font-family:var(--ws2-font-ui); font-weight:600; margin:0; color:var(--ws2-ink); text-transform:none; }
.ws2-home p{ margin:0; }
.ws2-home .ws2-wrap{ max-width:1220px; margin:0 auto; padding-inline:clamp(20px,5vw,48px); }

/* Promo banner — 1:1 port of the artifact's promo-banner (real promo.title/end_at
   instead of its hardcoded "Verão 30" campaign copy). */
.ws2-promo-banner{ background:linear-gradient(100deg, #FF3D2B 0%, #C41E0F 48%, #001B76 100%); color:#fff; position:relative; }
.ws2-promo-banner .ws2-wrap{ display:flex; align-items:center; gap:1.1rem; padding:.65rem 1.5rem; max-width:1220px; margin:0 auto; }
.ws2-promo-badge{ display:inline-flex; align-items:center; gap:.4rem; flex:none; font-weight:700; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; background:rgba(255,255,255,.18); padding:.3rem .7rem .3rem .55rem; border-radius:100px; }
.ws2-promo-badge svg{ width:14px; height:14px; }
.ws2-promo-banner p{ flex:1 1 auto; min-width:0; margin:0; font-size:.92rem; }
.ws2-promo-banner p strong{ font-weight:700; }
.ws2-promo-cta{ flex:none; background:#fff; color:#C41E0F; font-weight:600; font-size:.85rem; padding:.45rem 1.1rem; border-radius:100px; white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease; }
.ws2-promo-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.22); color:#C41E0F; }
.ws2-promo-close{ flex:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; border-radius:50%; color:rgba(255,255,255,.8); cursor:pointer; transition:background .15s ease, color .15s ease; }
.ws2-promo-close:hover{ background:rgba(255,255,255,.16); color:#fff; }
.ws2-promo-close svg{ width:16px; height:16px; }
@media (max-width:720px){
  .ws2-promo-badge{ display:none; }
  .ws2-promo-banner p{ font-size:.83rem; }
}

/* Contact panel — same dark, bold-contrast treatment and two-column layout as
   .ws2-network (text+real content on the left, the actual functional piece on the
   right, both filling the panel), instead of a small card floating alone in a lot of
   empty dark space. */
.ws2-contact-panel{ background:var(--ws2-blue-deep); color:#fff; border-radius:24px; padding:clamp(2rem,4vw,3rem); }
.ws2-contact-panel h2{ color:#fff; }
.ws2-contact-panel .ws2-lede{ color:rgba(255,255,255,.78); margin-top:.8rem; }
.ws2-contact-panel__inner{ display:grid; grid-template-columns:1fr 1fr; gap:2.6rem; align-items:center; }
.ws2-contact-panel__tel{ display:inline-flex; align-items:center; gap:.6rem; margin-top:1.6rem; font-family:var(--ws2-font-ui); font-weight:700; font-size:1.15rem; color:#fff; text-decoration:none; }
.ws2-contact-panel__tel svg{ width:20px; height:20px; stroke:var(--ws2-orange); flex:none; }
@media (max-width:760px){ .ws2-contact-panel__inner{ grid-template-columns:1fr; } }

/* Contact form (components/contacts/contact_form.scala.html) — reskin for the homepage
   embed only. The component's Bootstrap grid/classes (.container, .row, .form-group,
   .form-control, #recaptcha-button/#fallback-button .btn) are untouched structurally;
   this just restyles them to match the rest of the redesign. Scoped under .ws2-home so
   the other pages still using the component keep their current look.
   No nested card — fields sit directly on the dark panel (translucent fill, not a
   separate light box), one full-width field per row (2-up made Nome/E-Mail cramped). */
.ws2-home .contacts-form.pb-6{ padding-bottom:0 !important; }
.ws2-home .contacts-form{ padding:0; }
.ws2-home .contacts-form .container{ max-width:440px; width:100%; padding-inline:0; margin:0 auto; }
.ws2-home .contacts-form__block.bg-sky{ background:none !important; }
.ws2-home .contacts-form__block{ display:flex; flex-direction:column; gap:1.1rem; background:none; border:none; box-shadow:none; padding:0; }
.ws2-home .contacts-form .row.form-group{ display:flex; flex-direction:column; margin:0; }
/* Bootstrap's .col-md-4/.col-md-8 (label / input wrapper, both direct children of
   .row.form-group) still set max-width:33%/66% at this viewport - reset every direct
   child to full width instead of overriding label/.form-control alone, which left the
   intermediate wrapper div still constrained and produced the misaligned/ghost boxes. */
.ws2-home .contacts-form .row.form-group > *{ flex:none; max-width:100%; width:100%; padding:0; }
.ws2-home .contacts-form label{ font-family:var(--ws2-font-ui); font-weight:600; font-size:1rem; color:#fff; padding:0 0 .5rem !important; text-transform:none; }
.ws2-home .contacts-form .form-control{ flex:1 1 auto; max-width:100%; width:100%; font-family:var(--ws2-font-body); font-size:.98rem; color:#fff; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.28); border-radius:12px; padding:.85rem 1rem; height:auto; box-shadow:none; }
.ws2-home .contacts-form .form-control::placeholder{ color:rgba(255,255,255,.4); }
.ws2-home .contacts-form .form-control:focus{ outline:none; border-color:#fff; background:rgba(255,255,255,.14); }
.ws2-home .contacts-form textarea.form-control{ min-height:96px; resize:vertical; }
.ws2-home .contacts-form .text-ref{ display:block; margin-top:.5rem; font-size:.78rem; color:rgba(255,255,255,.55); }
.ws2-home .contacts-form .row.justify-content-center{ margin-top:1.3rem; }
.ws2-home .contacts-form #recaptcha-button .btn,
.ws2-home .contacts-form #fallback-button .btn{ display:inline-flex; align-items:center; justify-content:center; background:var(--ws2-orange); color:#fff; font-family:var(--ws2-font-ui); font-weight:700; font-size:.9rem; border:none; border-radius:100px; padding:.95rem 2.6rem; width:auto; box-shadow:0 10px 24px -8px rgba(255,61,43,.5); text-transform:none; transition:transform .18s ease, background-color .18s ease; }
.ws2-home .contacts-form #recaptcha-button .btn:hover,
.ws2-home .contacts-form #fallback-button .btn:hover{ background:var(--ws2-orange-deep); transform:translateY(-2px); }
/* :not(.ws2-hero) — the hero manages its own padding (arc + gradient need padding-bottom:0);
   this generic rule has higher specificity than .ws2-hero alone (class+element beats class)
   and was silently overriding it, which is what caused the extra 96px blue band below the arc. */
.ws2-home section:not(.ws2-hero):not(.ws2-stats):not(.ws2-page-hero){ padding-block:clamp(3.2rem,6vw,6rem); }
.ws2-home .ws2-section-head{ max-width:640px; margin-bottom:clamp(2rem,4vw,3rem); }
.ws2-home .ws2-section-head h2{ font-size:clamp(1.8rem,1.4rem + 1.6vw,2.6rem); margin-top:.5rem; line-height:1.14; }
.ws2-home .ws2-section-head.ws2-center{ margin-inline:auto; text-align:center; }

/* Hero */
.ws2-hero{ position:relative; background:linear-gradient(160deg, var(--ws2-blue-deep) 0%, var(--ws2-blue) 62%, var(--ws2-blue-bright) 100%); color:#fff; overflow:hidden; padding-top:clamp(2.8rem,4vw,4rem); padding-bottom:0; }
.ws2-hero::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 1.6px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 78% 38%, black, transparent 72%); mask-image:radial-gradient(ellipse 60% 55% at 78% 38%, black, transparent 72%); pointer-events:none; }
.ws2-hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,3rem); align-items:center; padding-bottom:clamp(3.5rem,6vw,5.5rem); }
.ws2-hero h1{ color:#fff; font-family:var(--ws2-font-display); font-weight:400; font-size:clamp(2.4rem,1.9rem + 2.4vw,4rem); line-height:1.06; letter-spacing:0; margin-block:1rem 1.2rem; text-transform:none; }
.ws2-hero .ws2-eyebrow{ color:#FFC9BF; }
.ws2-hero .ws2-lede{ color:rgba(255,255,255,.86); max-width:44ch; font-size:clamp(1.02rem,1rem + .2vw,1.15rem); }
.ws2-hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.ws2-hero__trust{ display:flex; flex-wrap:wrap; gap:clamp(1.4rem,3vw,2.4rem); margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.22); }
.ws2-hero__trust div{ display:flex; flex-direction:column; gap:.1rem; }
.ws2-hero__trust .ws2-num{ font-family:var(--ws2-font-display); font-weight:400; font-size:1.6rem; }
.ws2-hero__trust .ws2-lbl{ font-family:var(--ws2-font-ui); font-size:.76rem; color:rgba(255,255,255,.72); }

.ws2-hero__stage{ position:relative; min-height:400px; }
.ws2-hero__card{ position:relative; z-index:2; background:var(--ws2-paper-raised); color:var(--ws2-ink); border-radius:22px; padding:1.8rem 1.8rem 1.5rem; width:min(340px,100%); margin-inline:auto; box-shadow:var(--ws2-shadow-lg); transform:rotate(-3deg); overflow:hidden; }
.ws2-hero__card-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.ws2-hero__card .ws2-plan-tag{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ws2-orange); }
.ws2-hero__card h3{ font-size:1.4rem; margin-top:.3rem; }
.ws2-hero__price{ font-family:var(--ws2-font-display); font-weight:400; font-size:1.3rem; margin-top:.5rem; }
.ws2-hero__price .ws2-hero__price-unit{ font-size:.95rem; font-family:var(--ws2-font-body); color:var(--ws2-ink-faint); }
/* Hero card auto-rotates through the three plan teasers (see script at the bottom of root.scala.html). */
.ws2-hero__card-face{ transition:opacity .22s ease; }
.ws2-hero__card-face.is-fading{ opacity:0; }
.ws2-hero__dots{ display:flex; gap:.4rem; justify-content:center; margin-top:1.1rem; }
.ws2-hero__dot{ width:7px; height:7px; padding:0; border:none; border-radius:50%; background:var(--ws2-line); cursor:pointer; transition:background .2s ease, transform .2s ease; }
.ws2-hero__dot.is-active{ background:var(--ws2-blue); transform:scale(1.5); }
@media (prefers-reduced-motion: reduce){
  .ws2-hero__card-face{ transition:none; }
}
.ws2-perf{ position:relative; height:2px; border-top:2px dashed var(--ws2-line); margin:1.1rem -1.8rem 1rem; }
.ws2-perf::before,.ws2-perf::after{ content:""; position:absolute; top:50%; width:20px; height:20px; background:var(--ws2-paper); border-radius:50%; transform:translateY(-50%); }
.ws2-perf::before{ left:-10px; } .ws2-perf::after{ right:-10px; }
.ws2-hero__card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.ws2-hero__card li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.88rem; color:var(--ws2-ink-soft); }
.ws2-hero__card li svg{ flex:none; width:15px; height:15px; margin-top:.2rem; stroke:var(--ws2-blue); }

/* Overshoot the arc by a couple of px on every edge — at fractional browser-zoom
   levels (anything but exactly 100%) a flush 100%-width SVG can round to slightly
   less than its container and leave a hairline gap showing the page background
   through the hero. Oversizing is harmless (the extra px is clipped by the
   section); undersizing is the bug, so we deliberately avoid landing on it. */
.ws2-arc{ display:block; width:100%; line-height:0; margin:-2px -2px -1px; }
.ws2-arc svg{ width:calc(100% + 4px); height:clamp(36px,6vw,80px); display:block; }

/* Stats */
.ws2-stats{ background:var(--ws2-paper); padding-block:clamp(2rem,3.5vw,3rem); border-bottom:1px solid var(--ws2-line); }
/* flex + justify-content:center, not a fixed-column grid — the number of counters
   comes from Prismic and can vary (3 today, could be 4+ later); a fixed
   repeat(4,1fr) grid leaves a phantom empty column when there are fewer items,
   which visually shifts the real ones off-center. */
.ws2-stats__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem clamp(2rem,6vw,4.5rem); }
.ws2-stats__tile{ flex:0 1 150px; }
.ws2-stats__tile{ text-align:center; }
.ws2-stats__tile .ws2-num{ font-family:var(--ws2-font-ui); font-weight:400; font-size:clamp(2rem,1.5rem + 1.5vw,2.7rem); color:var(--ws2-blue); }
.ws2-stats__tile .ws2-lbl{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.82rem; color:var(--ws2-ink-soft); margin-top:.25rem; }

/* How it works */
.ws2-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2rem); counter-reset:ws2step; position:relative; }
.ws2-steps::before{ content:""; position:absolute; top:24px; left:24px; right:24px; height:1px; background:var(--ws2-line); z-index:0; }
.ws2-step{ position:relative; counter-increment:ws2step; display:block; padding:1rem; margin:-1rem; border-radius:16px; text-decoration:none; color:inherit; transition:background-color .2s ease, transform .2s ease; }
.ws2-step:hover{ background:var(--ws2-mist); transform:translateY(-3px); }
.ws2-step:focus-visible{ outline:2px solid var(--ws2-blue); outline-offset:2px; }
.ws2-step-icon{ position:relative; z-index:1; width:48px; height:48px; border-radius:50%; background:var(--ws2-paper); border:1px solid var(--ws2-line); display:flex; align-items:center; justify-content:center; color:var(--ws2-blue); margin-bottom:.9rem; }
.ws2-step-icon svg{ width:20px; height:20px; stroke:currentColor; }
.ws2-step-num{ font-family:var(--ws2-font-display); font-weight:400; font-size:1.1rem; color:var(--ws2-orange); margin:0 0 .5rem; }
.ws2-step-body{ min-width:0; }
.ws2-step-num::before{ content:counter(ws2step,decimal-leading-zero); }
.ws2-step h3{ font-size:1.22rem; margin-bottom:.5rem; }
.ws2-step p{ color:var(--ws2-ink-soft); font-size:.95rem; }
.ws2-step-go{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.7rem; font-family:var(--ws2-font-ui); font-weight:600; font-size:.84rem; color:var(--ws2-blue); }
.ws2-step-go svg{ width:14px; height:14px; stroke:var(--ws2-blue); transition:transform .18s ease; }
.ws2-step:hover .ws2-step-go svg{ transform:translateX(3px); }

/* Plans teaser */
.ws2-plans{ background:var(--ws2-mist); }
.ws2-plans__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.ws2-plan-card{ position:relative; background:var(--ws2-paper-raised); border:1px solid var(--ws2-line); border-radius:22px; padding:1.9rem 1.7rem 2rem; display:flex; flex-direction:column; box-shadow:var(--ws2-shadow); transition:transform .2s ease, box-shadow .2s ease; }
.ws2-plan-card:hover{ transform:translateY(-5px); box-shadow:var(--ws2-shadow-lg); }
.ws2-plan-card.ws2-featured{ background:linear-gradient(165deg, var(--ws2-blue-deep), var(--ws2-blue)); border-color:transparent; color:#fff; }
.ws2-plan-card.ws2-featured .ws2-plan-tag{ color:#FFD9CF; }
.ws2-plan-card.ws2-featured h3{ color:#fff; }
.ws2-plan-card.ws2-featured .ws2-plan-desc{ color:rgba(255,255,255,.78); }
.ws2-plan-card.ws2-featured .ws2-perf{ border-color:rgba(255,255,255,.3); }
.ws2-plan-card.ws2-featured .ws2-perf::before,.ws2-plan-card.ws2-featured .ws2-perf::after{ background:var(--ws2-blue); }
.ws2-plan-card.ws2-featured li{ color:rgba(255,255,255,.92); }
.ws2-plan-card.ws2-featured li svg{ stroke:#FFD9CF; }
/* Badge now floats centered on the card's top edge (poking above the border),
   not inline at top-left — matches the artifact's current version. */
.ws2-plan-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); z-index:2; font-family:var(--ws2-font-ui); font-weight:600; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; background:var(--ws2-orange); color:#fff; padding:.42rem .95rem; border-radius:100px; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.2); }
/* Diagonal corner ribbon (promo discount chip, e.g. "-30%") — hidden unless a promo is active. */
.ws2-plan-ribbon-wrap{ position:absolute; top:0; right:0; width:100px; height:100px; overflow:hidden; border-radius:0 22px 0 0; pointer-events:none; }
.ws2-plan-ribbon{ position:absolute; top:18px; right:-32px; width:132px; transform:rotate(45deg); background:var(--ws2-orange); color:#fff; text-align:center; font-family:var(--ws2-font-ui); font-weight:800; font-size:.85rem; letter-spacing:.01em; padding:.35rem 0; box-shadow:0 2px 8px rgba(0,0,0,.22); }
/* "até DD/MM" note shown under the price only while the discount ribbon is active. */
.ws2-price-until{ font-size:.78rem; font-weight:600; color:var(--ws2-orange); margin-top:.3rem; }
.ws2-plan-card.ws2-featured .ws2-price-until{ color:#FFD9CF; }
.ws2-plan-tag{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ws2-orange); }
.ws2-plan-card h3{ font-size:1.5rem; margin-top:.3rem; }
.ws2-plan-desc{ color:var(--ws2-ink-soft); font-size:.88rem; margin-top:.5rem; min-height:2.6em; }
/* Pre-promo original price, shown above the live price row only when a promo discount applies. */
.ws2-home .ws2-price-row-old, .ws2-checkout .ws2-price-row-old{ font-size:.92rem; font-weight:500; color:var(--ws2-ink-faint); margin-top:1.6rem; }
.ws2-price-row-old del{ text-decoration:line-through; }
.ws2-plan-card.ws2-featured .ws2-price-row-old{ color:rgba(255,255,255,.55); }
.ws2-price-row-old + .ws2-price-row{ margin-top:.05rem; }
.ws2-price-row{ margin-top:1.1rem; display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; font-family:var(--ws2-font-display); }
.ws2-price-row .ws2-amount{ font-weight:400; font-size:1.7rem; }
.ws2-price-row .ws2-per{ font-size:.85rem; font-family:var(--ws2-font-body); color:var(--ws2-ink-faint); }
.ws2-price-sub{ font-size:.78rem; color:var(--ws2-ink-faint); margin-top:.35rem; }
.ws2-plan-card.ws2-featured .ws2-price-sub{ color:rgba(255,255,255,.68); }
.ws2-minors-note{ font-size:.78rem; color:var(--ws2-ink-faint); margin-top:.6rem; padding-top:.6rem; border-top:1px dashed var(--ws2-line); }
.ws2-plan-card.ws2-featured .ws2-minors-note{ color:rgba(255,255,255,.68); border-color:rgba(255,255,255,.2); }
.ws2-plan-card .ws2-perf{ margin-inline:-1.7rem; }
.ws2-plan-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; flex:1; }
.ws2-plan-card li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.9rem; color:var(--ws2-ink-soft); }
.ws2-plan-card li svg{ flex:none; width:16px; height:16px; margin-top:.2rem; stroke:var(--ws2-blue); }
/* Bumps the differentiating number/perk in each feature line (avg discount %, free
   services count, free toothbrushes) so Smart vs Premium reads at a glance instead
   of blending into the paragraph-weight list text. */
.ws2-feat-value{ font-weight:700; font-size:1.05em; color:var(--ws2-ink); }
.ws2-plan-card.ws2-featured .ws2-feat-value{ color:#fff; }
.ws2-plan-card .ws2-btn{ margin-top:1.4rem; width:100%; }
.ws2-plan-card.ws2-featured .ws2-btn-outline{ border-color:rgba(255,255,255,.5); color:#fff; }
.ws2-plan-card.ws2-featured .ws2-btn-outline:hover{ background:rgba(255,255,255,.14); }
/* .ws2-plans prefix bumps specificity above .ws2-home p{margin:0} (class+element beats
   a single class), which was silently zeroing margin-top regardless of what's set here. */
.ws2-plans .ws2-plans__note{ text-align:center; font-size:.84rem; color:var(--ws2-ink-faint); margin-top:2.8rem; }
.ws2-plans__foot{ text-align:center; margin-top:2.2rem; }
.ws2-feat-dash{ color:var(--ws2-ink-faint); font-weight:700; }
.ws2-plan-card.ws2-featured .ws2-feat-dash{ color:rgba(255,255,255,.4); }

/* Compare-plans configurator (individual/família, duração, periodicidade, nº pessoas) */
.ws2-configurator{ background:var(--ws2-paper-raised); border:1px solid var(--ws2-line); border-radius:22px; box-shadow:var(--ws2-shadow); padding:clamp(1.4rem,3vw,2rem); position:relative; top:-2.2rem; margin-bottom:-1.4rem; }
.ws2-config-row{ display:flex; flex-wrap:wrap; gap:clamp(1.4rem,3vw,2.6rem); align-items:flex-end; }
.ws2-config-row--members{ margin-top:1.4rem; padding-top:1.4rem; border-top:1px dashed var(--ws2-line); }
.ws2-config-note:not(:empty){ margin-top:1rem; }
.ws2-ctl-label{ font-family:var(--ws2-font-ui); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ws2-ink-faint); margin-bottom:.6rem; display:block; }
.ws2-segmented{ display:inline-flex; background:var(--ws2-mist); border-radius:100px; padding:.3rem; gap:.2rem; }
.ws2-segmented button{ padding:.55rem 1.15rem; border-radius:100px; border:none; background:none; font-family:var(--ws2-font-ui); font-weight:600; font-size:.88rem; color:var(--ws2-ink-soft); cursor:pointer; transition:background-color .18s ease, color .18s ease; display:inline-flex; align-items:center; gap:.4rem; }
.ws2-segmented button.is-active{ background:var(--ws2-blue); color:#fff; }
.ws2-save-badge{ font-size:.68rem; font-weight:700; background:var(--ws2-orange); color:#fff; padding:.12rem .4rem; border-radius:100px; }
.ws2-segmented button.is-active .ws2-save-badge{ background:rgba(255,255,255,.28); }
.ws2-stepper{ display:inline-flex; align-items:center; gap:.85rem; background:var(--ws2-mist); border-radius:100px; padding:.35rem .5rem; }
.ws2-stepper button{ width:30px; height:30px; border-radius:50%; border:none; background:var(--ws2-paper-raised); color:var(--ws2-blue); font-size:1.05rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--ws2-shadow); transition:transform .15s ease; line-height:1; }
.ws2-stepper button:hover:not(:disabled){ transform:scale(1.08); }
.ws2-stepper button:disabled{ opacity:.35; cursor:not-allowed; }
.ws2-stepper-value{ font-family:var(--ws2-font-ui); font-weight:700; font-size:.95rem; min-width:1.3em; text-align:center; }
.ws2-config-note{ font-size:.82rem; color:var(--ws2-ink-faint); }

/* Per-member age chips, one per person added via the stepper above — real pricing
   needs each person's age (minors are free below a per-plan threshold), so a plain
   headcount alone isn't enough. */
.ws2-member-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
.ws2-member-chip{ display:inline-flex; align-items:center; background:var(--ws2-mist); border-radius:100px; padding:.4rem 1rem; }
.ws2-member-chip__age{ border:none; background:none; font-family:var(--ws2-font-ui); font-weight:600; font-size:.85rem; color:var(--ws2-ink); cursor:pointer; }

.ws2-savings-note{ display:none; align-items:center; gap:.5rem; margin-top:1.6rem; font-size:.88rem; color:var(--ws2-ink-soft); }
.ws2-savings-note.is-visible{ display:flex; }
.ws2-savings-note .ws2-dot{ width:10px; height:10px; border-radius:50%; background:var(--ws2-orange); flex:none; }

.ws2-arc-divider{ display:block; width:100%; line-height:0; margin:-2px -2px -1px; }
.ws2-arc-divider svg{ width:calc(100% + 4px); height:clamp(36px,6vw,80px); display:block; }

@media (max-width: 860px){
  .ws2-configurator{ top:0; margin-bottom:0; margin-top:2rem; }
  .ws2-config-row{ align-items:flex-start; }
}

/* Benefits grid */
.ws2-benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ws2-line); border:1px solid var(--ws2-line); border-radius:22px; overflow:hidden; }
.ws2-benefit-cell{ background:var(--ws2-paper-raised); padding:2rem 1.8rem; display:flex; flex-direction:column; gap:.85rem; }
.ws2-benefit-cell svg{ width:28px; height:28px; stroke:var(--ws2-orange); }
.ws2-benefit-cell h3{ font-size:1.08rem; }
.ws2-benefit-cell p{ color:var(--ws2-ink-soft); font-size:.9rem; }

/* Treatments */
.ws2-treat__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.ws2-treat-card{ position:relative; border-radius:22px; padding:2rem 1.8rem; min-height:250px; display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem; background:var(--ws2-mist); overflow:hidden; border:1px solid var(--ws2-line); transition:transform .2s ease; text-decoration:none; color:var(--ws2-ink); }
.ws2-treat-card:hover{ transform:translateY(-5px); color:var(--ws2-ink); text-decoration:none; }
.ws2-treat-card .ws2-glyph{ position:absolute; top:1.7rem; left:1.8rem; width:44px; height:44px; stroke:var(--ws2-blue); }
.ws2-treat-card h3{ font-size:1.25rem; }
.ws2-treat-card p{ color:var(--ws2-ink-soft); font-size:.88rem; }
.ws2-treat-card .ws2-go{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.4rem; font-family:var(--ws2-font-ui); font-weight:600; font-size:.84rem; color:var(--ws2-blue); }
.ws2-treat-card .ws2-go svg{ width:14px; height:14px; stroke:var(--ws2-blue); transition:transform .18s ease; }
.ws2-treat-card:hover .ws2-go svg{ transform:translateX(3px); }

/* Network / cities */
.ws2-network{ background:var(--ws2-blue-deep); color:#fff; border-radius:24px; }
/* Stacked, not a 2-col grid — the right-hand column used to hold a decorative graphic;
   now that real content (search bar, then real per-city photo cards below) fills the
   panel top-to-bottom instead, each piece just wants the full width. */
.ws2-network__inner{ padding:clamp(2.4rem,5vw,4rem); display:flex; flex-direction:column; gap:2.2rem; }
.ws2-network__intro{ max-width:640px; }
.ws2-network h2{ color:#fff; }
.ws2-network .ws2-lede{ color:rgba(255,255,255,.78); }
.ws2-network__search{ margin-top:.4rem; }
/* Extra .ws2-network ancestor bumps specificity above .ws2-search-page .search-console
   (same 2-class specificity, but that rule sits later in this file and would otherwise
   win on source order alone). */
.ws2-network .ws2-network__search .search-console{ background:none; padding-block:0; }
.ws2-network .ws2-network__search .search-console .wrap{ max-width:none; margin:0; padding-inline:0; }
.ws2-network__search-mobile-cta{ display:none; }
@media (max-width: 640px){
  .ws2-network__search .search-console{ display:none; }
  .ws2-network__search-mobile-cta{ display:flex; width:100%; white-space:normal; text-align:center; height:auto; }
}

/* Real per-city photo cards (clinicLocations, one per Prismic clinic_location) —
   replaces a former abstract "radar circle" graphic that didn't read as clinics.
   Photo + city name + search link, same city-picking function the old pre-redesign
   site had (see git history), reskinned into a card grid. */
.ws2-network__cities{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:1rem; }
.ws2-city-card{ position:relative; display:block; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background-color:rgba(255,255,255,.08); background-size:cover; background-position:center; text-decoration:none; transition:transform .2s ease; }
.ws2-city-card:hover{ transform:translateY(-4px); }
.ws2-city-card__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,15,60,0) 42%, rgba(0,10,40,.88) 100%); }
.ws2-city-card__name{ position:absolute; left:1rem; right:1rem; bottom:2.5rem; z-index:1; font-family:var(--ws2-font-ui); font-weight:700; font-size:1.02rem; color:#fff; }
.ws2-city-card__go{ position:absolute; left:1rem; bottom:.85rem; z-index:1; display:inline-flex; align-items:center; gap:.35rem; font-family:var(--ws2-font-ui); font-weight:600; font-size:.78rem; color:#FFD9CF; }
.ws2-city-card__go svg{ width:13px; height:13px; stroke:currentColor; transition:transform .18s ease; }
.ws2-city-card:hover .ws2-city-card__go svg{ transform:translateX(3px); }

/* Blog */
.ws2-blog__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.ws2-blog-card{ display:flex; flex-direction:column; gap:.85rem; text-decoration:none; color:var(--ws2-ink); }
.ws2-blog-card:hover{ color:var(--ws2-ink); text-decoration:none; }
.ws2-blog-thumb{ border-radius:18px; aspect-ratio:4/3; background:var(--ws2-mist); position:relative; overflow:hidden; border:1px solid var(--ws2-line); }
.ws2-blog-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ws2-blog-tag{ font-family:var(--ws2-font-ui); font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ws2-orange); }
.ws2-blog-card h3{ font-size:1.12rem; line-height:1.32; }
.ws2-blog-card p{ color:var(--ws2-ink-soft); font-size:.88rem; }

/* Final CTA */
.ws2-final-cta{ background:radial-gradient(120% 140% at 20% 0%, var(--ws2-blue-bright), var(--ws2-blue-deep) 60%); color:#fff; border-radius:24px; text-align:center; padding:clamp(2.8rem,6vw,4.5rem) clamp(1.5rem,5vw,3rem); }
.ws2-final-cta h2{ color:#fff; font-size:clamp(1.9rem,1.5rem + 2vw,2.9rem); max-width:20ch; margin-inline:auto; }
.ws2-final-cta .ws2-lede{ color:rgba(255,255,255,.82); margin-inline:auto; margin-top:.9rem; }
.ws2-final-cta .ws2-hero__ctas{ justify-content:center; margin-top:2rem; }

/* ==========================================================================
   PLANS PAGE — accordion (FAQ + coverage), testimonials, corporate CTA
   ========================================================================== */
.ws2-page-hero{ position:relative; background:linear-gradient(160deg, var(--ws2-blue-deep) 0%, var(--ws2-blue) 62%, var(--ws2-blue-bright) 100%); color:#fff; overflow:hidden; padding-top:clamp(2.6rem,4vw,3.6rem); padding-bottom:0; }
.ws2-page-hero::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 1.6px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 55% 70% at 85% 20%, black, transparent 72%); mask-image:radial-gradient(ellipse 55% 70% at 85% 20%, black, transparent 72%); pointer-events:none; }
.ws2-page-hero__inner{ position:relative; z-index:1; max-width:680px; padding-bottom:clamp(2.6rem,5vw,4rem); }
.ws2-page-hero h1{ color:#fff; font-family:var(--ws2-font-display); font-weight:400; font-size:clamp(2.1rem,1.7rem + 2vw,3.4rem); line-height:1.08; margin-block:.8rem 1rem; text-transform:none; }
.ws2-page-hero .ws2-lede{ color:rgba(255,255,255,.86); max-width:52ch; }
.ws2-page-hero .ws2-note{ margin-top:1.2rem; font-family:var(--ws2-font-body); font-size:.85rem; color:rgba(255,255,255,.62); max-width:56ch; }
.ws2-page-hero .ws2-eyebrow{ color:#FFC9BF; }

.ws2-accordion{ display:flex; flex-direction:column; gap:.9rem; max-width:820px; }
.ws2-accordion details{ background:var(--ws2-paper-raised); border:1px solid var(--ws2-line); border-radius:16px; padding:1.1rem 1.4rem; }
.ws2-accordion summary{ cursor:pointer; font-family:var(--ws2-font-ui); font-weight:600; font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.ws2-accordion summary::-webkit-details-marker{ display:none; }
.ws2-accordion summary .ws2-chev{ flex:none; width:20px; height:20px; stroke:var(--ws2-blue); transition:transform .2s ease; }
.ws2-accordion details[open] summary .ws2-chev{ transform:rotate(180deg); }
.ws2-accordion .ws2-accordion-body{ color:var(--ws2-ink-soft); font-size:.94rem; line-height:1.7; padding-top:.9rem; font-family:var(--ws2-font-body); }
.ws2-accordion .ws2-accordion-body strong{ color:var(--ws2-ink); font-family:var(--ws2-font-ui); font-weight:600; }

.ws2-coverage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2rem; }
.ws2-coverage-grid .ws2-accordion details{ padding:.9rem 1.2rem; }
.ws2-coverage-grid .ws2-accordion summary{ font-size:.96rem; }

.ws2-testi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.4rem; }
.ws2-testi-card{ background:var(--ws2-mist); border-radius:20px; padding:1.7rem 1.6rem; display:flex; flex-direction:column; gap:1rem; }
.ws2-testi-card svg{ width:26px; height:20px; fill:var(--ws2-blue-bright); opacity:.5; }
.ws2-testi-card q{ font-family:var(--ws2-font-display); font-weight:400; font-style:italic; font-size:1.05rem; line-height:1.45; quotes:none; color:var(--ws2-ink); }
.ws2-testi-card .ws2-who{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.8rem; color:var(--ws2-ink-faint); }

@media (max-width: 980px){
  .ws2-hero__grid{ grid-template-columns:1fr; }
  .ws2-hero__stage{ min-height:320px; margin-top:1rem; }
  .ws2-steps{ grid-template-columns:1fr; }
  .ws2-steps::before{ display:none; }
  .ws2-step{ display:flex; align-items:flex-start; gap:1rem; }
  .ws2-step-icon{ flex:none; margin-bottom:0; }
  .ws2-plans__grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .ws2-benefits{ grid-template-columns:1fr; }
  .ws2-treat__grid{ grid-template-columns:1fr; }
  .ws2-blog__grid{ grid-template-columns:1fr; }
  .ws2-coverage-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   PRICING TABLE RESKIN (.ws2-pricing wraps the untouched Knockout component —
   see compare_plans.scala.html). Every rule here is presentational only: no
   data-bind, id, name or form-related attribute is targeted or relied upon.
   Two things CANNOT be changed from here, because they're set as inline
   style attributes (static or Knockout-written) and inline always beats an
   external stylesheet: the live price number's color/font-weight/font-size,
   and the strike-through original price's color/font-size. Everything else
   — layout, card chrome, spacing, non-price typography, the button, the
   member-count control, the "best seller" ribbon — is fair game.
   Some rules need !important: this legacy component's own CSS is ~700 lines
   of narrow, single-purpose selectors (many already using bare class
   selectors of the same specificity as what we'd write), so matching or
   beating each one individually isn't practical for a reskin pass.
   ========================================================================== */
.ws2-pricing{ font-family:var(--ws2-font-body); }
.ws2-pricing h1{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ws2-ink-faint); margin-bottom:1rem; }

/* Member count control → looks like the ws2 stepper */
.ws2-pricing .family-members__list-members{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.ws2-pricing .family-members__member{ display:flex; align-items:center; gap:.5rem; background:var(--ws2-mist); border-radius:100px; padding:.5rem .6rem .5rem 1rem; }
.ws2-pricing .family-members__member-icon svg{ width:22px; height:22px; fill:var(--ws2-blue); }
.ws2-pricing .family-members__member-delete svg{ width:18px; height:18px; fill:var(--ws2-orange); cursor:pointer; }
.ws2-pricing .family-members__member-ages select{ border:none; background:none; font-family:var(--ws2-font-ui); font-weight:600; font-size:.85rem; color:var(--ws2-ink); }
.ws2-pricing .family-members__add-new-btn{ width:38px; height:38px; border-radius:50%; background:var(--ws2-paper-raised); border:1.5px solid var(--ws2-line); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--ws2-shadow); }
.ws2-pricing .family-members__add-new-btn svg{ width:18px; height:18px; fill:var(--ws2-blue); }

/* Row of cards, gap instead of the old negative-margin hack */
.ws2-pricing .plans{ display:flex !important; flex-wrap:wrap; gap:1.4rem; margin:2rem 0 0 !important; align-items:stretch !important; }
.ws2-pricing .plans__item{ flex:1 1 250px !important; width:auto !important; margin:0 !important; }

/* The old "labels only" ghost column doesn't fit a card layout — its labels
   are reinstated inline in each card instead (see .plans__title--content below),
   so hiding it here is a like-for-like swap, not a loss of information. */
.ws2-pricing .plans__item--titles-for-desktop{ display:none !important; }

.ws2-pricing .plans__item{ background:var(--ws2-paper-raised) !important; border:1px solid var(--ws2-line) !important; border-radius:22px !important; box-shadow:var(--ws2-shadow); transition:transform .2s ease, box-shadow .2s ease; overflow:hidden; }
.ws2-pricing .plans__item:hover{ transform:translateY(-4px); box-shadow:var(--ws2-shadow-lg); }
.ws2-pricing .plans__item::after{ content:none !important; }
.ws2-pricing .plans__item--pay .plans__header{ background:none !important; }
.ws2-pricing .plans__item--free{ color:var(--ws2-ink-soft) !important; }
.ws2-pricing .plans__item--pay{ color:var(--ws2-ink) !important; }

.ws2-pricing .plans__header{ padding:1.6rem 1.6rem 0; }
.ws2-pricing .plans__col{ padding:.5rem 1.6rem !important; justify-content:flex-start !important; text-align:left; }
.ws2-pricing .plans__col::after{ left:1.6rem !important; right:1.6rem !important; border-bottom:1px dashed var(--ws2-line) !important; }
.ws2-pricing .plans__col--footer{ padding:1.2rem 1.6rem 1.6rem !important; }
.ws2-pricing .plans__col--footer::after{ content:none !important; }

.ws2-pricing .plans__title--header{ font-family:var(--ws2-font-display); font-weight:400; text-transform:none !important; font-size:1.5rem !important; text-align:left !important; }
.ws2-pricing .plans__text--header{ text-align:left !important; }
.ws2-pricing .plans__text--header p{ color:var(--ws2-ink-soft); font-family:var(--ws2-font-body); font-size:.88rem !important; }
.ws2-pricing .plans__property--header{ display:flex !important; justify-content:flex-start !important; padding-top:.8rem; }
.ws2-pricing .plans__price--header .plans__price{ align-items:flex-start !important; }

/* Feature rows: compact, bullet-style — a small checkmark accent + tighter
   type so 5 rows read closer to the artifact's clean bullet list, while
   staying exactly the same .plans__col--content elements the legacy
   height-equalizer and mobile "ver mais" toggle (main.js planTableCellHeight /
   planSpoilerCell) already depend on — only what's inside each row changed. */
.ws2-pricing .plans__col--content{ position:relative; padding-left:2.1rem !important; }
.ws2-pricing .plans__col--content::before{ content:""; position:absolute; left:1.6rem; top:.65rem; width:14px; height:14px; border-radius:50%; background:var(--ws2-mist); }
/* Toothbrushes/generic-benefit rows already carry a real ✓/– icon (.plans__checked/.plans__dash) — skip the generic dot there so it isn't doubled up. */
.ws2-pricing .plans__col--content:has(.plans__checked)::before,
.ws2-pricing .plans__col--content:has(.plans__dash)::before{ content:none; }
.ws2-pricing .plans__col--content:has(.plans__checked),
.ws2-pricing .plans__col--content:has(.plans__dash){ padding-left:1.6rem !important; display:flex !important; align-items:center; gap:.6rem; }
.ws2-pricing .plans__col--content:has(.plans__checked) .plans__title--content,
.ws2-pricing .plans__col--content:has(.plans__dash) .plans__title--content{ width:auto !important; margin-bottom:0; }
.ws2-pricing .plans__col--content:has(.plans__checked) .plans__property,
.ws2-pricing .plans__col--content:has(.plans__dash) .plans__property{ padding-top:0; }
.ws2-pricing .plans__title--content{ display:block !important; font-family:var(--ws2-font-ui) !important; font-weight:600 !important; font-size:.68rem !important; letter-spacing:.05em; text-transform:uppercase; color:var(--ws2-ink-faint) !important; text-align:left !important; width:100% !important; margin-bottom:.15rem; }
.ws2-pricing .plans__text--content{ display:block !important; text-align:left !important; width:100%; }
.ws2-pricing .plans__text--content p{ font-size:.76rem !important; color:var(--ws2-ink-faint); margin:0; }
.ws2-pricing .plans__property{ justify-content:flex-start !important; }
.ws2-pricing .plans__number{ font-family:var(--ws2-font-display) !important; font-weight:400 !important; font-size:.92rem; color:var(--ws2-blue); justify-content:flex-start !important; }
.ws2-pricing .plans__property-text{ text-align:left !important; font-size:.85rem !important; color:var(--ws2-ink-soft); }
.ws2-pricing .plans__checked svg{ width:19px; height:19px; }
.ws2-pricing .plans__checked svg polygon,
.ws2-pricing .plans__checked svg path{ fill:var(--ws2-good) !important; }
.ws2-pricing .plans__dash{ background-color:var(--ws2-ink-faint) !important; }

/* Price number itself keeps its Knockout-driven inline color/weight/size —
   we can still improve the currency symbol, "/mês" label and spacing around it. */
.ws2-pricing .plans__price-text{ font-family:var(--ws2-font-body) !important; color:var(--ws2-ink-faint); }
.ws2-pricing .plans__price-original{ font-family:var(--ws2-font-body); }

.ws2-pricing .plans__button .btn{ width:100% !important; border-radius:100px !important; font-family:var(--ws2-font-ui) !important; font-weight:600 !important; padding:.85rem 1.2rem !important; border:none !important; text-transform:none !important; letter-spacing:0 !important; }
.ws2-pricing .plans__button .btn-blue{ background:var(--ws2-orange) !important; box-shadow:0 10px 24px -8px rgba(255,61,43,.5); }
.ws2-pricing .plans__button .btn-blue:hover{ background:var(--ws2-orange-deep) !important; }
.ws2-pricing .plans__button .btn-gray{ background:var(--ws2-mist) !important; color:var(--ws2-ink) !important; }

/* Smart card = the artifact's "featured" treatment: solid blue gradient card
   instead of white + a badge. The live price number/currency/original-price
   colors are inline (Knockout-written or static per-plan, see the template)
   because inline always beats this stylesheet — they're already set to white
   there for the smart plan, so this only needs the surrounding chrome. */
.ws2-pricing .plans__item[data-plan-name="smart"]{ background:linear-gradient(165deg, var(--ws2-blue-deep), var(--ws2-blue)) !important; border-color:transparent !important; }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__title--header{ color:#fff !important; }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__text--header p{ color:rgba(255,255,255,.78) !important; }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__col::after{ border-bottom-color:rgba(255,255,255,.18) !important; }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__col--content::before{ background:rgba(255,255,255,.16); }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__title--content{ color:rgba(255,255,255,.6) !important; }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__text--content p{ color:rgba(255,255,255,.55) !important; }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__property-text{ color:rgba(255,255,255,.85) !important; }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__number{ color:#fff !important; }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__number a,
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__property a{ color:rgba(255,255,255,.85) !important; text-decoration:underline; }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__price-text{ color:rgba(255,255,255,.65) !important; }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__dash{ background-color:rgba(255,255,255,.4) !important; }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__button .btn-blue{ background:#fff !important; color:var(--ws2-blue) !important; box-shadow:none; }
.ws2-pricing .plans__item[data-plan-name="smart"] .plans__button .btn-blue:hover{ background:var(--ws2-mist) !important; }
/* "Best seller" badge is styled inline in the template (see label_best_seller block) — reads fine on the gradient as-is. */

/* Configurator card. The template's own local <style> (in compare_plans.scala.html)
   turns .ws-plan-controls into the card chrome (background/border/radius/shadow) —
   see .ws-plan-controls there. What used to be a separate bottom .choose panel now
   lives INSIDE .ws-plan-controls (moved in the template, not just restyled), so it
   reads as one unified configurator like the artifact. .choose itself is
   display:contents so its .choose__item children become direct flex children of
   .ws-plan-controls, sitting next to the member-count control. Nothing about the
   radio inputs/data-bind/name/value/id was touched — only their container and
   presentation. The native radio is visually hidden (sr-only clip technique) but
   stays in the DOM inside its <label>, so clicking the pill still fires it. */
.ws2-pricing .choose{ display:contents; }
.ws2-pricing .choose__item{ border:none !important; background:none !important; margin:0 !important; padding:0 !important; flex:0 0 auto; }
.ws2-pricing .choose__item::before,
.ws2-pricing .choose__item::after{ content:none !important; }
.ws2-pricing .choose__item-inner{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:.5rem .6rem; }
.ws2-pricing .choose__title{ flex:0 0 100%; font-family:var(--ws2-font-ui); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ws2-ink-faint); }
.ws2-pricing .choose__title strong{ font-family:var(--ws2-font-ui); }
.ws2-pricing .choose__title p{ margin:0; }
.ws2-pricing .choose__check{ flex:0 0 auto; font-family:var(--ws2-font-body); font-size:1rem; margin:0; }
.ws2-pricing .choose__label{ margin:0; }
.ws2-pricing .choose__label input[type="radio"]{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ws2-pricing .choose__value{ display:block; margin-left:0; }
.ws2-pricing .choose__label-name{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.15rem; border-radius:100px; background:var(--ws2-mist); transition:background-color .15s ease, color .15s ease; }
.ws2-pricing .choose__label-name span:first-child{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.85rem; color:var(--ws2-ink-soft); transition:color .15s ease; }
.ws2-pricing .choose__label input:checked + .choose__value .choose__label-name{ background:var(--ws2-blue); }
.ws2-pricing .choose__label input:checked + .choose__value .choose__label-name span:first-child{ color:#fff; }
.ws2-pricing .choose__hint{ font-family:var(--ws2-font-body); font-size:.74rem; color:var(--ws2-ink-faint); margin-top:.3rem; max-width:22ch; }
.ws2-pricing .info-popup-2 svg path{ fill:var(--ws2-ink-faint); }

/* The payasyougo radio gets Knockout's `disable: isFamilyMode()` (native disabled
   attribute) plus a `ws-choose-disabled` class on its <label> — the component's
   own local <style> already dims + disables pointer-events on that class, so
   nothing further is needed here. */

/* ==========================================================================
   CHECKOUT WIZARD (signup / choose_plan / members_and_billing / payment_plans_2
   / thank_you*). Each step is still its own real Play route/controller/form —
   see the comment in signup.scala.html for why. What ties them together into
   one wizard *feel* is: identical chrome (this CSS) on every step, and native
   cross-document View Transitions below, so navigating step-to-step cross-fades
   instead of hard-flashing, with zero extra JS and zero backend changes.
   ========================================================================== */
@view-transition{ navigation: auto; }

.ws2-checkout{ font-family:var(--ws2-font-body); color:var(--ws2-ink); background:var(--ws2-paper); min-height:100vh; }
.ws2-checkout h1,.ws2-checkout h2,.ws2-checkout h3,.ws2-checkout h4{ font-family:var(--ws2-font-ui); font-weight:600; margin:0; color:var(--ws2-ink); text-transform:none; }
.ws2-checkout .ws2-wrap{ max-width:1220px; margin:0 auto; padding-inline:clamp(20px,5vw,48px); }

.ws2-checkout-header{ position:sticky; top:0; z-index:50; background:rgba(243,245,252,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--ws2-line); }
.ws2-checkout-header .ws2-wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:72px; }
.ws2-checkout-header .ws2-mark{ fill:var(--ws2-orange); }
.ws2-checkout-header .ws2-word{ fill:var(--ws2-blue); }
.ws2-checkout-trust{ display:flex; align-items:center; gap:.5rem; font-family:var(--ws2-font-ui); font-weight:600; font-size:.85rem; color:var(--ws2-good); }
.ws2-checkout-trust svg{ width:18px; height:18px; stroke:var(--ws2-good); }
.ws2-checkout-exit{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.85rem; color:var(--ws2-ink-soft); text-decoration:none; }
.ws2-checkout-exit:hover{ color:var(--ws2-blue); text-decoration:none; }

.ws2-progress-wrap{ padding-block:2rem 0; }
.ws2-progress{ display:flex; max-width:640px; margin-inline:auto; }
.ws2-progress-step{ display:flex; flex-direction:column; align-items:center; gap:.55rem; flex:1; position:relative; }
.ws2-progress-step .dot{ width:34px; height:34px; border-radius:50%; background:var(--ws2-paper-raised); border:2px solid var(--ws2-line); display:flex; align-items:center; justify-content:center; font-family:var(--ws2-font-ui); font-weight:700; font-size:.85rem; color:var(--ws2-ink-faint); transition:all .2s ease; z-index:1; }
.ws2-progress-step .lbl{ font-family:var(--ws2-font-ui); font-size:.72rem; font-weight:600; color:var(--ws2-ink-faint); text-align:center; }
.ws2-progress-step .line{ position:absolute; top:17px; left:calc(-50% + 17px); width:calc(100% - 34px); height:2px; background:var(--ws2-line); z-index:0; }
.ws2-progress-step:first-child .line{ display:none; }
.ws2-progress-step.is-done .dot{ background:var(--ws2-blue); border-color:var(--ws2-blue); color:#fff; }
.ws2-progress-step.is-done .line{ background:var(--ws2-blue); }
.ws2-progress-step.is-done .lbl{ color:var(--ws2-ink); }
.ws2-progress-step.is-active .dot{ background:var(--ws2-paper-raised); border-color:var(--ws2-orange); color:var(--ws2-orange); box-shadow:0 0 0 4px rgba(255,61,43,.14); }
.ws2-progress-step.is-active .lbl{ color:var(--ws2-ink); }
@media (max-width: 560px){ .ws2-progress-step .lbl{ display:none; } }

.ws2-wizard-shell{ display:grid; grid-template-columns:1fr 340px; gap:2rem; align-items:start; padding-block:2rem clamp(3rem,6vw,5rem); }
@media (max-width: 900px){ .ws2-wizard-shell{ grid-template-columns:1fr; } .ws2-summary-card{ order:-1; } }

.ws2-panel-card{ background:var(--ws2-paper-raised); border:1px solid var(--ws2-line); border-radius:22px; box-shadow:var(--ws2-shadow); padding:clamp(1.6rem,3vw,2.4rem); }
.ws2-panel-head{ margin-bottom:1.6rem; }
.ws2-panel-head h2{ font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem); margin-top:.4rem; }
.ws2-panel-head p{ color:var(--ws2-ink-soft); font-size:.92rem; margin-top:.5rem; }

.ws2-fieldset-title{ font-family:var(--ws2-font-ui); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ws2-ink-faint); margin:1.6rem 0 .9rem; }
.ws2-fieldset-title:first-of-type{ margin-top:0; }

.ws2-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; }
@media (max-width: 560px){ .ws2-form-grid{ grid-template-columns:1fr; } }
.ws2-field{ display:flex; flex-direction:column; gap:.4rem; }
.ws2-field.full{ grid-column:1 / -1; }
.ws2-field label{ font-family:var(--ws2-font-ui); font-weight:600; font-size:.85rem; color:var(--ws2-ink); }
.ws2-field label .opt{ font-family:var(--ws2-font-body); font-weight:400; color:var(--ws2-ink-faint); }
.ws2-field input,.ws2-field select{ font-family:var(--ws2-font-body); font-size:.95rem; color:var(--ws2-ink); background:var(--ws2-paper-raised); border:1.5px solid var(--ws2-line); border-radius:12px; padding:.75rem .9rem; width:100%; }
.ws2-field input:focus,.ws2-field select:focus{ outline:none; border-color:var(--ws2-blue); }
.ws2-field-hint{ font-size:.84rem; color:var(--ws2-ink-faint); }

.ws2-check-line{ display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; color:var(--ws2-ink-soft); cursor:pointer; }
/* main.css:7823 strips -webkit/-moz-appearance from every input (incl. checkboxes) site-wide
   with no custom checked-state visual to replace it — restore the native box here so the
   checkbox is actually visible/checkable. */
.ws2-check-line input[type="checkbox"]{ appearance:auto; -webkit-appearance:auto; -moz-appearance:auto; width:16px; height:16px; margin-top:.2rem; flex:none; border:1px solid var(--ws2-line); }
.ws2-check-line a{ color:var(--ws2-blue); text-decoration:underline; }

/* Real error markup comes from components/renderValidationErrorsJsCode.scala.html
   (shared by other real forms outside the checkout flow too) — .input-error /
   .input-error__icon / .input-error__message, not ws2-prefixed. Reskin in place
   rather than renaming a shared component. */
.ws2-checkout .input-error{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--ws2-orange-deep); margin-top:.3rem; font-family:var(--ws2-font-body); }
.ws2-checkout .input-error__icon{ width:14px; height:14px; border-radius:50%; background:var(--ws2-orange-deep); flex:none; }
.ws2-checkout .field-hint,.ws2-checkout .field-hint p{ font-size:.84rem; color:var(--ws2-ink-faint); }
.ws2-checkout .checkbox-box{ display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; color:var(--ws2-ink-soft); cursor:pointer; }
.ws2-checkout .checkbox-box a{ color:var(--ws2-blue); }

.ws2-panel-nav{ display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; }

.ws2-summary-card{ background:var(--ws2-paper-raised); border:1px solid var(--ws2-line); border-radius:22px; box-shadow:var(--ws2-shadow); padding:1.8rem; position:sticky; top:96px; }
.ws2-summary-card .ws2-plan-tag{ display:block; }
.ws2-summary-card h3{ font-size:1.3rem; margin-top:.2rem; }
.ws2-summary-card .ws2-amount{ font-family:var(--ws2-font-display); font-weight:400; font-size:1.8rem; margin-top:.8rem; display:block; }
.ws2-summary-card .ws2-amount .per{ font-size:.85rem; font-family:var(--ws2-font-body); color:var(--ws2-ink-faint); }
@media (max-width: 900px){ .ws2-summary-card{ position:static; top:auto; } }
.ws2-summary-list{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.ws2-summary-list li{ display:flex; justify-content:space-between; gap:.8rem; font-size:.86rem; color:var(--ws2-ink-soft); }
.ws2-summary-list li b{ font-family:var(--ws2-font-ui); font-weight:600; color:var(--ws2-ink); }
.ws2-summary-help{ display:flex; gap:.6rem; margin-top:1.2rem; padding-top:1.2rem; border-top:1px dashed var(--ws2-line); font-size:.78rem; color:var(--ws2-ink-faint); line-height:1.5; }
.ws2-summary-help svg{ width:18px; height:18px; flex:none; stroke:var(--ws2-ink-faint); }

.ws2-mini-segmented{ display:inline-flex; background:var(--ws2-mist); border-radius:100px; padding:.25rem; gap:.15rem; }
.ws2-mini-segmented button{ padding:.4rem .85rem; border-radius:100px; border:none; background:none; font-family:var(--ws2-font-ui); font-weight:600; font-size:.78rem; color:var(--ws2-ink-soft); cursor:pointer; transition:background-color .18s ease, color .18s ease; }
.ws2-mini-segmented button.is-active{ background:var(--ws2-blue); color:#fff; }

.ws2-plan-select-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width: 700px){ .ws2-plan-select-grid{ grid-template-columns:1fr; } }
.ws2-plan-select{ position:relative; border:1.5px solid var(--ws2-line); border-radius:18px; padding:1.3rem 1.2rem; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.ws2-plan-select.is-selected{ border-color:var(--ws2-blue); box-shadow:0 0 0 3px rgba(0,39,169,.1); }
.ws2-plan-select .radio-dot{ position:absolute; top:1.1rem; right:1.1rem; width:20px; height:20px; border-radius:50%; border:2px solid var(--ws2-line); }
.ws2-plan-select.is-selected .radio-dot{ border-color:var(--ws2-blue); background:var(--ws2-blue); box-shadow:inset 0 0 0 3px #fff; }
.ws2-plan-select .ws2-plan-ribbon-wrap{ border-radius:0 18px 0 0; }
.ws2-plan-select h4{ font-size:1.15rem; margin-top:.2rem; }
.ws2-plan-select .amount{ font-family:var(--ws2-font-display); font-weight:400; font-size:1.6rem; margin-top:.6rem; display:inline-block; }
.ws2-plan-select .per{ font-size:.82rem; color:var(--ws2-ink-faint); margin-left:.2rem; }
.ws2-plan-select .minors-note{ font-size:.76rem; color:var(--ws2-ink-faint); margin-top:.6rem; }

.ws2-choice-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.ws2-choice-card{ border:1.5px solid var(--ws2-line); border-radius:12px; padding:.7rem 1.1rem; font-family:var(--ws2-font-ui); font-weight:600; font-size:.85rem; color:var(--ws2-ink-soft); cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.ws2-choice-card.is-selected{ border-color:var(--ws2-blue); background:var(--ws2-blue); color:#fff; }

.ws2-member-card{ border:1px dashed var(--ws2-line); border-radius:14px; padding:1.1rem; margin-top:1rem; position:relative; }
.ws2-member-tag{ font-family:var(--ws2-font-ui); font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ws2-ink-faint); display:block; margin-bottom:.8rem; }

.ws2-pay-methods{ display:flex; flex-direction:column; gap:.7rem; margin-top:1rem; }
.ws2-pay-method{ display:flex; align-items:center; gap:.8rem; border:1.5px solid var(--ws2-line); border-radius:14px; padding:.9rem 1.1rem; cursor:pointer; font-family:var(--ws2-font-ui); font-weight:600; font-size:.92rem; color:var(--ws2-ink); transition:border-color .15s ease, box-shadow .15s ease; }
.ws2-pay-method svg{ width:22px; height:22px; stroke:var(--ws2-ink-soft); flex:none; }
.ws2-pay-method .radio-dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--ws2-line); flex:none; }
.ws2-pay-method.is-selected,.ws2-pay-method:has(input:checked){ border-color:var(--ws2-blue); box-shadow:0 0 0 3px rgba(0,39,169,.1); }
.ws2-pay-method.is-selected .radio-dot,.ws2-pay-method:has(input:checked) .radio-dot{ border-color:var(--ws2-blue); background:var(--ws2-blue); box-shadow:inset 0 0 0 3px #fff; }
.ws2-pay-detail{ display:none; margin-top:1.2rem; }
.ws2-pay-detail.is-visible{ display:block; }
.ws2-sepa-note{ font-size:.8rem; color:var(--ws2-ink-faint); margin-top:.8rem; line-height:1.5; }

.ws2-success-panel{ text-align:center; padding-block:1rem; }
.ws2-success-icon{ width:64px; height:64px; border-radius:50%; background:var(--ws2-good); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; }
.ws2-success-icon svg{ width:32px; height:32px; }
.ws2-success-panel h2{ font-size:clamp(1.5rem,1.2rem + 1vw,2rem); margin-top:.4rem; }
.ws2-success-panel .ws2-lede{ margin-inline:auto; margin-top:.6rem; }
.ws2-success-next{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem; text-align:left; }
@media (max-width: 700px){ .ws2-success-next{ grid-template-columns:1fr; } }
.ws2-success-next .n{ font-family:var(--ws2-font-display); font-weight:400; color:var(--ws2-orange); margin:0; }
.ws2-success-next h4{ font-size:1rem; margin-top:.2rem; }
.ws2-success-next p{ font-size:.86rem; color:var(--ws2-ink-soft); margin-top:.3rem; }
.ws2-success-ctas{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

.ws2-slim-footer{ border-top:1px solid var(--ws2-line); padding-block:1.6rem; margin-top:2rem; }
.ws2-slim-footer .ws2-wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.82rem; color:var(--ws2-ink-faint); }

/* ---------- Scroll-reveal (fade + rise), toggled by IntersectionObserver JS ---------- */
.ws2-reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.ws2-reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .ws2-reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   CLINIC SEARCH RESULTS — 1:1 port of the approved clinic-search artifact.
   Class names below are the artifact's own (.clinic-card, .search-bar, .tag,
   .doctor-chip, .pagination, .map-panel, etc), NOT the pre-redesign legacy
   ones — main.css's old .search-result*/.clinic-card__contacts* rules never
   apply here since this markup doesn't use those classes any more. A few
   classes ARE still the real ones main.js's SearchResultsPage requires
   (.clinic-card, .clinic-card__contacts-map, .search-result__map,
   .search-result__map-content, #search-result__map-wr) — called out below. */
.ws2-search-page{ font-family:var(--ws2-font-body); color:var(--ws2-ink); background:var(--ws2-paper); }
.ws2-search-page h1,.ws2-search-page h3{ font-family:var(--ws2-font-ui); font-weight:700; text-transform:none; text-wrap:balance; }

/* ---------- Search console ---------- */
.ws2-search-page .search-console{ background:var(--ws2-paper); padding-block:1.1rem; }
.ws2-search-page .search-console .wrap{ max-width:1240px; margin:0 auto; padding-inline:clamp(18px,4vw,40px); }
.ws2-search-page .search-bar{ display:flex; align-items:stretch; gap:.6rem; background:var(--ws2-paper-raised); border:1.5px solid var(--ws2-line); border-radius:16px; padding:.5rem; box-shadow:var(--ws2-shadow); flex-wrap:wrap; }
.ws2-search-page .search-field{ position:relative; flex:2 1 220px; display:flex; align-items:center; gap:.6rem; padding:.5rem .8rem; }
.ws2-search-page .search-field.select-field{ flex:1 1 140px; border-left:1px solid var(--ws2-line); }
.ws2-search-page .search-field svg{ width:18px; height:18px; stroke:var(--ws2-ink-faint); flex:none; }
.ws2-search-page .search-field input,
.ws2-search-page .search-field select{ border:none; background:none; font-family:var(--ws2-font-body); font-size:.9rem; color:var(--ws2-ink); width:100%; padding:.3rem 0; appearance:none; }
.ws2-search-page .search-field input{ cursor:text; }
.ws2-search-page .search-field select{ cursor:pointer; padding-right:1.2rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C87AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right center; background-size:16px; }
.ws2-search-page .search-field input:focus,
.ws2-search-page .search-field select:focus{ outline:none; }
.ws2-search-page .search-field input::placeholder{ color:var(--ws2-ink-faint); }
.ws2-search-page .search-bar .btn-coral{ flex:0 0 auto; align-self:center; margin-left:.2rem; }
.ws2-search-page .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.72rem 1.3rem; border-radius:100px; font-family:var(--ws2-font-ui); font-weight:700; font-size:.86rem; line-height:1; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; text-transform:none; text-decoration:none; }
.ws2-search-page .btn svg{ width:16px; height:16px; stroke:currentColor; flex:none; }
.ws2-search-page .btn-coral{ background:var(--ws2-orange); color:#fff; box-shadow:0 8px 20px -8px rgba(255,61,43,.55); }
.ws2-search-page .btn-coral:hover{ background:var(--ws2-orange-deep); }
.ws2-search-page .btn-outline{ background:transparent; border-color:var(--ws2-line); color:var(--ws2-ink); }
.ws2-search-page .btn-outline:hover{ background:var(--ws2-mist); }
.ws2-search-page .btn-text{ background:none; color:var(--ws2-blue); font-weight:700; padding:.4rem 0; font-family:var(--ws2-font-ui); font-size:.86rem; }

/* ---------- Results shell ---------- */
.ws2-search-page .results-shell{ padding-block:1.6rem clamp(3rem,6vw,5rem); }
.ws2-search-page .results-shell .wrap{ max-width:1240px; margin:0 auto; padding-inline:clamp(18px,4vw,40px); }
.ws2-search-page .results-summary{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-bottom:1.2rem; }
.ws2-search-page .results-summary h1{ font-size:1.3rem; }
.ws2-search-page .results-summary .count{ color:var(--ws2-orange); }
.ws2-search-page .fallback-note{ display:flex; gap:.7rem; align-items:flex-start; background:var(--ws2-mist); border:1px solid var(--ws2-line); border-radius:14px; padding:.9rem 1.1rem; margin-bottom:1.2rem; font-size:.86rem; color:var(--ws2-ink-soft); }
.ws2-search-page .fallback-note svg{ width:18px; height:18px; stroke:var(--ws2-blue); flex:none; margin-top:.1rem; }
.ws2-search-page .fallback-note b{ color:var(--ws2-ink); }

.ws2-search-page .results-grid{ display:grid; grid-template-columns:1fr 420px; gap:1.6rem; align-items:start; }
.ws2-search-page .results-list{ display:flex; flex-direction:column; gap:1rem; min-width:0; }
@media (max-width: 980px){
  .ws2-search-page .results-grid{ grid-template-columns:1fr; }
  .ws2-search-page .search-result__map{ position:static !important; height:340px !important; min-height:0 !important; order:-1; }
}

/* ---------- Clinic card ---------- */
/* main.css's own unscoped .clinic-card rule sets display:flex + flex-wrap:wrap (its old
   2-column masonry layout) and never gets fully beaten since this rule didn't redeclare
   flex-wrap at all — it kept bleeding through, letting .clinic-card__media/__body wrap
   onto their own lines and escape the card's bounds instead of staying in a single row.
   !important throughout since main.css also sets background/border-top here. */
.ws2-search-page .clinic-card{ position:relative; display:flex !important; flex-direction:row; flex-wrap:nowrap !important; gap:1.1rem; background:var(--ws2-paper-raised) !important; border:1.5px solid var(--ws2-line) !important; border-radius:18px; padding:1.1rem !important; box-shadow:var(--ws2-shadow); transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; scroll-margin-top:180px; }
.ws2-search-page .clinic-card:hover{ border-color:var(--ws2-blue); box-shadow:var(--ws2-shadow-lg); transform:translateY(-2px); }
.ws2-search-page .clinic-card__media{ position:relative; flex:0 0 108px; width:108px; height:108px; border-radius:14px; overflow:hidden; background:var(--ws2-mist); }
.ws2-search-page .clinic-card__media svg,
.ws2-search-page .clinic-card__media img{ width:100%; height:100%; object-fit:cover; }
.ws2-search-page .clinic-card__body{ flex:1; min-width:0; }
.ws2-search-page .clinic-card__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem .8rem; align-items:flex-start; min-width:0; max-width:100%; }
.ws2-search-page .clinic-card__name{ font-size:1.05rem; min-width:0; }
.ws2-search-page .clinic-card__name a{ color:var(--ws2-ink); }
.ws2-search-page .clinic-card__rating{ display:flex; align-items:center; gap:.35rem; font-size:.82rem; color:var(--ws2-ink-soft); white-space:nowrap; flex:none; }
.ws2-search-page .clinic-card__rating svg{ width:14px; height:14px; fill:var(--ws2-gold); }
.ws2-search-page .clinic-card__rating b{ color:var(--ws2-ink); }
/* Real badges (components/clinics/clinic_badge.scala.html — same component the clinic-
   detail page uses, real Prismic text). It renders its own inline-styled pill div; this
   just constrains it to the artifact's compact badge-row layout. */
.ws2-search-page .clinic-badge-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.ws2-search-page .clinic-badge-row > div{ border-radius:8px !important; padding:.28rem .6rem !important; font-size:.68rem !important; font-weight:800 !important; white-space:nowrap; }
/* clinic_badge.scala.html's icon is a detailed wide medallion illustration (viewBox
   246x115.5) meant for a much bigger badge on the clinic-detail page — squashed into a
   small square it reads as illegible noise, not a recognisable icon. Text alone is clear
   enough at this compact size, so the icon (and its inline-width wrapper) is hidden here
   rather than force-fit. */
.ws2-search-page .clinic-badge-row .individual-clinic__services-price-price-popup{ display:none !important; }
.ws2-search-page .clinic-card__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; min-width:0; max-width:100%; }
/* Real treatment names (featured_treatment_name from Prismic) can be long — e.g.
   "Restauração directa definitiva em amálgama de uma face". flex-wrap on the row above
   only wraps sibling tags onto new lines; it doesn't stop a single tag wider than the
   card from overflowing it. min-width:0 lets this flex item shrink and wrap its own
   text (default white-space:normal already allows that) instead of forcing the row —
   and the whole card — wider than intended. */
.ws2-search-page .tag{ font-size:.74rem; font-weight:600; color:var(--ws2-blue); background:var(--ws2-mist); border-radius:100px; padding:.25rem .65rem; min-width:0; max-width:100%; }
.ws2-search-page .clinic-card__meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:.7rem 0 0; padding:0; font-size:.82rem; color:var(--ws2-ink-soft); min-width:0; max-width:100%; }
.ws2-search-page .clinic-card__meta li{ display:flex; align-items:center; gap:.4rem; list-style:none; min-width:0; max-width:100%; }
.ws2-search-page .clinic-card__meta svg{ width:15px; height:15px; stroke:var(--ws2-ink-faint); flex:none; }
.ws2-search-page .reveal-phone{ background:none; border:none; padding:0; color:var(--ws2-blue); font-weight:700; font-size:.82rem; cursor:pointer; text-decoration:underline; text-underline-offset:2px; font-family:inherit; }
.ws2-search-page .clinic-card__doctors{ display:flex; gap:.6rem; margin-top:.85rem; overflow-x:auto; padding-bottom:.2rem; min-width:0; max-width:100%; }
.ws2-search-page .doctor-chip{ flex:0 0 auto; display:flex; align-items:center; gap:.5rem; background:var(--ws2-mist); border-radius:100px; padding:.3rem .8rem .3rem .3rem; }
.ws2-search-page .doctor-chip img,
.ws2-search-page .doctor-chip .ph{ width:26px; height:26px; border-radius:50%; object-fit:cover; background:var(--ws2-line); }
.ws2-search-page .doctor-chip span{ font-size:.76rem; font-weight:600; color:var(--ws2-ink); white-space:nowrap; }
/* .clinic-card__dist's text includes the real searched location-name (whatever the
   visitor typed — can be a full street address, not just a city), which without
   min-width:0/wrap here could push .clinic-card__foot (and the whole card) wider than
   the card, forcing an unwanted horizontal scroll — the exact bug class this page kept
   hitting earlier, just triggered by a long address instead of a Slick carousel this
   time. flex-wrap + letting the dist span shrink/wrap keeps it contained instead. */
.ws2-search-page .clinic-card__foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem; margin-top:.9rem; padding-top:.9rem; border-top:1px dashed var(--ws2-line); min-width:0; max-width:100%; }
.ws2-search-page .clinic-card__dist{ font-size:.78rem; color:var(--ws2-ink-faint); min-width:0; flex:1 1 auto; }
.ws2-search-page .clinic-card__dist b{ color:var(--ws2-ink); }
/* Required by main.js's createGoogleMapImage(card), which does
   card.querySelector('.clinic-card__contacts-map').appendChild(...) unconditionally
   per card — without this element that throws and aborts the rest of init(). Not part
   of the artifact design, kept hidden. */
.ws2-search-page .clinic-card__contacts-map{ display:none !important; }
@media (max-width: 640px){
  .ws2-search-page .clinic-card{ flex-direction:column; }
  .ws2-search-page .clinic-card__media{ width:100%; height:140px; }
}

/* ---------- Map ---------- */
/* .search-result__map / .search-result__map-content / #search-result__map-wr are the
   real classes main.js's fixedGoogleMap()/initGoogleMap() require — the artifact's own
   .map-panel is decorative styling layered onto the same elements (no separate wrapper
   needed), and the fake .map-surface/.map-pin/.map-note mockup pieces are dropped since
   a real interactive Google Map renders here instead. */
/* .search-result__map is still main.js's real class (fixedGoogleMap()), and main.css
   has old unscoped rules for it (flex:0 0 25.27%; max-width:25.27%; display:none below
   991px) from the pre-redesign 3-column layout — none of that applies to this grid
   column, so every leftover legacy sizing/display property is reset here. */
.ws2-search-page .search-result__map{ display:block !important; flex:none !important; width:auto !important; max-width:none !important; position:sticky; top:200px; height:calc(100vh - 240px); min-height:420px; border-radius:20px !important; overflow:hidden !important; border:1.5px solid var(--ws2-line); box-shadow:var(--ws2-shadow); background:var(--ws2-mist); }
/* google.maps.Map(container, ...) measures the container's box size once at construction
   time (new t() in the SearchResultsPage.init() → initGoogleMap() chain, which runs on
   $(document).ready). An inset:0 overlay depending on the *parent*'s position:sticky to
   size itself measured smaller/wrong at that moment — visually confirmed: real tiles only
   filled the top slice of the box, the rest stayed the plain CSS background. Plain
   width/height:100% in normal flow (like the original main.css .search-result__map-content
   { height:489px }, just percentage instead of a fixed px) gives Maps an unambiguous size
   up front instead. */
.ws2-search-page .search-result__map-content{ width:100%; height:100%; border-radius:inherit; overflow:hidden; }
.ws2-search-page #search-result__map-wr{ width:100%; height:100%; border-radius:inherit; overflow:hidden; }
/* main.js's fixedRelativeParent also toggles .fixed/.fixed-bottom-wrapper on this
   element on scroll (an old JS-driven sticky polyfill main.css still has rules for);
   harmless to let it keep running, just force it back to the normal-flow sizing above so
   it can't fight our own native `position:sticky` on the parent. */
.ws2-search-page .search-result__map-content.fixed,
.ws2-search-page .search-result__map-content.fixed-bottom-wrapper{ position:static !important; width:100% !important; height:100% !important; top:auto !important; }
/* Pins: brand red for every marker, no partner/destacada color split (and no legend for
   it) per explicit request — real per-marker distinction was confusing without a way to
   tell which pin belongs to which clinic; that's a separate open problem, not solved by
   color alone. main.js still assigns .custom-marker__content--premium vs the base class
   per hit's real show_partner_badge flag; only the paint color is forced to match here. */
.ws2-search-page .custom-marker__content svg{ fill:var(--ws2-orange) !important; }

/* ---------- Pagination ---------- */
/* main.css has an old unscoped .pagination{display:flex;flex-direction:column;width:100%;
   margin:3px 10px;} rule (a different, pre-redesign pagination widget) — flex-direction
   is the one property that bleeds through undetected since this rule doesn't redeclare
   it, stacking the buttons vertically instead of in a row. */
.ws2-search-page .pagination{ display:flex !important; flex-direction:row !important; width:auto !important; margin:2.2rem 0 0 !important; align-items:center; justify-content:center; gap:.4rem; flex-wrap:wrap; }
.ws2-search-page .pagination button,
.ws2-search-page .pagination .pg-num{ min-width:38px; height:38px; border-radius:10px; border:1.5px solid var(--ws2-line); background:var(--ws2-paper-raised); color:var(--ws2-ink-soft); font-family:var(--ws2-font-ui); font-weight:700; font-size:.86rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0 .5rem; }
.ws2-search-page .pagination .pg-num.is-active{ background:var(--ws2-blue); border-color:var(--ws2-blue); color:#fff; }
.ws2-search-page .pagination button svg{ width:16px; height:16px; stroke:currentColor; }
.ws2-search-page .pagination button:disabled{ opacity:.35; pointer-events:none; }
.ws2-search-page .load-more{ text-align:center; margin-top:1rem; }
.ws2-slim-footer a{ color:var(--ws2-ink-faint); }

/* ==========================================================================
   CLINIC DETAIL — 1:1 port of the approved clinic-detail artifact.
   main.css has a couple of unscoped rules that collide with reused class names
   here and need explicit resets: `dialog{display:block}` (breaks the native
   hidden-until-shown behavior of <dialog> — reset below) and a print-only
   `.badge{border:1px solid #000}` (harmless, only matters when printing, but
   overridden defensively anyway). Every other class below is new, not a real
   legacy one. */
.ws2-clinic-detail{ font-family:var(--ws2-font-body); color:var(--ws2-ink); background:var(--ws2-paper); }
.ws2-clinic-detail h1,.ws2-clinic-detail h2,.ws2-clinic-detail h3,.ws2-clinic-detail h4{ font-family:var(--ws2-font-ui); font-weight:700; text-transform:none; text-wrap:balance; }
.ws2-clinic-detail p{ margin:0; }
.ws2-clinic-detail ul{ margin:0; padding:0; list-style:none; }
.ws2-clinic-detail .wrap{ max-width:1180px; margin:0 auto; padding-inline:clamp(18px,4vw,40px); }

.ws2-clinic-detail .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.72rem 1.3rem; border-radius:100px; font-family:var(--ws2-font-ui); font-weight:700; font-size:.86rem; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; text-transform:none; text-decoration:none; }
.ws2-clinic-detail .btn-coral{ background:var(--ws2-orange); color:#fff; box-shadow:0 8px 20px -8px rgba(255,61,43,.55); }
.ws2-clinic-detail .btn-coral:hover{ background:var(--ws2-orange-deep); color:#fff; }
.ws2-clinic-detail .btn-outline{ background:transparent; border-color:var(--ws2-line); color:var(--ws2-ink); }
.ws2-clinic-detail .btn-outline:hover{ background:var(--ws2-mist); }
.ws2-clinic-detail .btn-block{ width:100%; }
.ws2-clinic-detail .btn-text{ background:none; border:none; color:var(--ws2-blue); font-weight:700; font-family:var(--ws2-font-ui); font-size:.86rem; padding:.4rem 0; cursor:pointer; }

/* ---------- Breadcrumb ---------- */
.ws2-clinic-detail .breadcrumb{ padding-block:1rem .4rem; font-size:.82rem; color:var(--ws2-ink-faint); display:flex; align-items:center; gap:.4rem; }
.ws2-clinic-detail .breadcrumb a{ color:var(--ws2-ink-faint); font-weight:600; }
.ws2-clinic-detail .breadcrumb a:hover{ color:var(--ws2-blue); }
.ws2-clinic-detail .breadcrumb svg{ width:14px; height:14px; stroke:var(--ws2-ink-faint); }

/* ---------- Gallery hero ---------- */
.ws2-clinic-detail .gallery{ display:grid; grid-template-columns:1.6fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:.5rem; height:340px; border-radius:20px; overflow:hidden; margin-top:.6rem; }
.ws2-clinic-detail .gallery > button{ position:relative; padding:0; border:none; cursor:pointer; overflow:hidden; background:var(--ws2-mist); }
.ws2-clinic-detail .gallery > button:first-child{ grid-row:1 / 3; }
.ws2-clinic-detail .gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.ws2-clinic-detail .gallery > button:hover img{ transform:scale(1.05); }
.ws2-clinic-detail .gallery-more{ position:absolute; right:.8rem; bottom:.8rem; background:rgba(10,22,54,.72); backdrop-filter:blur(4px); color:#fff; font-weight:700; font-size:.78rem; padding:.5rem .9rem; border-radius:100px; display:flex; align-items:center; gap:.4rem; }
.ws2-clinic-detail .gallery-more svg{ width:15px; height:15px; }
@media (max-width: 760px){ .ws2-clinic-detail .gallery{ grid-template-columns:1fr 1fr; height:220px; } .ws2-clinic-detail .gallery > button:nth-child(n+4){ display:none; } .ws2-clinic-detail .gallery > button:first-child{ grid-column:1/3; } }

/* ---------- Layout ---------- */
.ws2-clinic-detail .detail-shell{ display:grid; grid-template-columns:1fr 356px; gap:2.4rem; align-items:start; padding-block:2.2rem clamp(3rem,6vw,5rem); min-width:0; }
/* Grid items default to min-width:auto, which forces this column as wide as its
   widest child's intrinsic content - the .team-row's own overflow-x:auto only works
   once this column is actually allowed to shrink below that (e.g. a clinic with many
   dentists), otherwise the extra width leaks out and stretches the whole page. */
.ws2-clinic-detail .detail-main{ min-width:0; }
@media (max-width: 900px){ .ws2-clinic-detail .detail-shell{ grid-template-columns:1fr; } .ws2-clinic-detail .booking-rail{ order:-1; position:static !important; } }

/* ---------- Title block ---------- */
.ws2-clinic-detail .title-block{ display:flex; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; align-items:flex-start; }
.ws2-clinic-detail .title-block h1{ font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem); }
.ws2-clinic-detail .badge-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.ws2-clinic-detail .badge-row > div{ border-radius:100px !important; padding:.35rem .8rem !important; font-size:.76rem !important; font-weight:700 !important; }
.ws2-clinic-detail .badge-row .individual-clinic__services-price-price-popup{ display:none !important; } /* real icon: wide illustration, not a small glyph — see search page for the same fix */
.ws2-clinic-detail .tag-row{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.7rem; }
.ws2-clinic-detail .tag{ font-size:.78rem; font-weight:600; color:var(--ws2-ink-soft); background:var(--ws2-paper-raised); border:1px solid var(--ws2-line); border-radius:100px; padding:.3rem .75rem; }
.ws2-clinic-detail .rating-inline{ display:flex; align-items:center; gap:.6rem; flex:none; }
.ws2-clinic-detail .rating-inline .stars__back,
.ws2-clinic-detail .rating-big .stars__back{ width:90px; height:8px; border-radius:100px; background:var(--ws2-line) !important; overflow:hidden; }
.ws2-clinic-detail .stars__front{ background:var(--ws2-gold) !important; height:100%; }
.ws2-clinic-detail .rating-inline b, .ws2-clinic-detail .rating-big .num{ font-size:1.05rem; font-family:var(--ws2-font-display); font-weight:400; }
.ws2-clinic-detail .rating-inline a{ font-size:.82rem; color:var(--ws2-blue); font-weight:600; }
.ws2-clinic-detail .stars__info{ display:none; }

/* ---------- Section shell ---------- */
.ws2-clinic-detail .section{ margin-top:2.4rem; padding-top:2.2rem; border-top:1px solid var(--ws2-line); min-width:0; }
.ws2-clinic-detail .section h2{ font-size:1.15rem; }
.ws2-clinic-detail .section-lede{ color:var(--ws2-ink-soft); font-size:.9rem; margin-top:.35rem; max-width:60ch; }

/* ---------- Pricing table ---------- */
.ws2-clinic-detail .pricing-table{ margin-top:1.2rem; border:1px solid var(--ws2-line); border-radius:16px; overflow:hidden; background:var(--ws2-paper-raised); box-shadow:var(--ws2-shadow); }
.ws2-clinic-detail .pricing-row{ display:grid; grid-template-columns:1.6fr repeat(4, .95fr); align-items:center; gap:.5rem; padding:.85rem 1.1rem; }
.ws2-clinic-detail .pricing-row + .pricing-row{ border-top:1px dashed var(--ws2-line); }
.ws2-clinic-detail .pricing-row.head{ background:var(--ws2-mist); font-family:var(--ws2-font-ui); font-weight:700; font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ws2-ink-faint); }
.ws2-clinic-detail .pricing-row .treat-name{ font-weight:700; font-size:.92rem; }
.ws2-clinic-detail .pricing-row .price{ font-family:var(--ws2-font-ui); font-weight:700; font-size:.95rem; }
.ws2-clinic-detail .pricing-row .price.best{ color:var(--ws2-good); }
.ws2-clinic-detail .pricing-cell{ text-align:center; }
@media (max-width: 700px){ .ws2-clinic-detail .pricing-row{ grid-template-columns:1fr; gap:.3rem; } .ws2-clinic-detail .pricing-row.head{ display:none; } .ws2-clinic-detail .pricing-cell{ text-align:left; display:flex; justify-content:space-between; font-size:.85rem; } .ws2-clinic-detail .pricing-cell::before{ content:attr(data-label); color:var(--ws2-ink-faint); font-weight:600; } }
.ws2-clinic-detail .pricing-foot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; margin-top:1rem; }

/* ---------- Team ---------- */
.ws2-clinic-detail .team-row{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding:.3rem .1rem 1rem; margin-top:1rem; min-width:0; scroll-behavior:auto; }
.ws2-clinic-detail .team-row__track{ display:flex; gap:1.1rem; width:max-content; }
.ws2-clinic-detail .dentist-card{ flex:0 0 176px; text-align:center; }
/* Only teams long enough to need scrolling get the .is-carousel treatment (see
   clinic_details.scala.html - the card list is rendered twice back-to-back so the
   auto-scroll driven from main.js can loop scrollLeft seamlessly at the midpoint).
   Auto-scroll is JS-driven (not a CSS transform animation) specifically so the row
   stays natively draggable/swipeable/wheel-scrollable at the same time. */
.ws2-clinic-detail .team-row.is-carousel{ cursor:grab; }
.ws2-clinic-detail .team-row.is-carousel:active{ cursor:grabbing; }
.ws2-clinic-detail .dentist-card .ph{ width:100%; aspect-ratio:1; border-radius:16px; overflow:hidden; margin-bottom:.7rem; object-fit:cover; display:block; }
/* default_doctor.png is a tall portrait (head-to-waist); cover-crop centered high on
   the face so the square avatar doesn't end up mostly white coat. */
.ws2-clinic-detail .dentist-card .ph--avatar{ object-position:center 12%; }
.ws2-clinic-detail .dentist-card h4{ font-size:.95rem; }
.ws2-clinic-detail .dentist-card p{ font-size:.78rem; color:var(--ws2-ink-faint); margin-top:.2rem; }

/* ---------- Facilities ---------- */
.ws2-clinic-detail .facility-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:.8rem; margin-top:1.2rem; }
.ws2-clinic-detail .facility{ display:flex; align-items:center; gap:.7rem; background:var(--ws2-paper-raised); border:1px solid var(--ws2-line); border-radius:14px; padding:.8rem 1rem; font-size:.85rem; font-weight:600; }
.ws2-clinic-detail .facility img{ width:20px; height:20px; flex:none; }

/* ---------- Photo grid ---------- */
.ws2-clinic-detail .photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:1.2rem; }
.ws2-clinic-detail .photo-grid button{ padding:0; border:none; cursor:pointer; border-radius:12px; overflow:hidden; aspect-ratio:1; background:var(--ws2-mist); }
.ws2-clinic-detail .photo-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 700px){ .ws2-clinic-detail .photo-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Reviews ---------- */
.ws2-clinic-detail .rating-summary{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-top:1.1rem; }
.ws2-clinic-detail .rating-big{ text-align:center; }
.ws2-clinic-detail .rating-big .num{ font-size:2.6rem; line-height:1; }
.ws2-clinic-detail .rating-big .stars__back{ margin:.5rem auto; }
.ws2-clinic-detail .rating-big span{ font-size:.78rem; color:var(--ws2-ink-faint); }
.ws2-clinic-detail .review-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.4rem; }
@media (max-width: 700px){ .ws2-clinic-detail .review-grid{ grid-template-columns:1fr; } }
.ws2-clinic-detail .review-card{ background:var(--ws2-paper-raised); border:1px solid var(--ws2-line); border-radius:16px; padding:1.1rem; }
.ws2-clinic-detail .review-card__top{ display:flex; align-items:center; gap:.7rem; }
.ws2-clinic-detail .review-card__top .ph{ width:38px; height:38px; border-radius:50%; flex:none; background:var(--ws2-line); }
.ws2-clinic-detail .review-card__top b{ display:block; font-size:.88rem; }
.ws2-clinic-detail .review-card__top .stars__back{ width:60px; height:6px; margin-top:.2rem; }
.ws2-clinic-detail .review-card p{ font-size:.86rem; color:var(--ws2-ink-soft); margin-top:.7rem; }

/* ---------- Booking rail ---------- */
.ws2-clinic-detail .booking-rail{ position:sticky; top:88px; }
.ws2-clinic-detail .booking-card{ background:var(--ws2-paper-raised); border:1.5px solid var(--ws2-line); border-radius:20px; padding:1.4rem; box-shadow:var(--ws2-shadow-lg); }
/* main.css's .fixed/.fixed-bottom-wrapper toggle (from the old scroll-based
   fixedRelativeParent JS polyfill main.js's clinicPage.fixedAside() still runs) fights
   native position:sticky above if left alone — neutralize it the same way as the map page. */
.ws2-clinic-detail .booking-card.fixed,
.ws2-clinic-detail .booking-card.fixed-bottom-wrapper{ position:static !important; width:100% !important; top:auto !important; }
.ws2-clinic-detail .booking-card__addr{ display:flex; gap:.6rem; align-items:flex-start; font-size:.86rem; color:var(--ws2-ink-soft); margin-top:1rem; }
.ws2-clinic-detail .booking-card__addr svg{ width:17px; height:17px; stroke:var(--ws2-ink-faint); flex:none; margin-top:.1rem; }
.ws2-clinic-detail .booking-card__row{ display:flex; gap:.6rem; align-items:flex-start; font-size:.86rem; color:var(--ws2-ink-soft); margin-top:.6rem; }
.ws2-clinic-detail .booking-card__row svg{ width:17px; height:17px; stroke:var(--ws2-ink-faint); flex:none; margin-top:.1rem; }
.ws2-clinic-detail .reveal-phone{ background:none; border:none; padding:0; color:var(--ws2-blue); font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:2px; font-size:.86rem; font-family:inherit; }
.ws2-clinic-detail .booking-card__cta{ margin-top:1.2rem; }
.ws2-clinic-detail .booking-card hr{ border:none; border-top:1px dashed var(--ws2-line); margin:1.1rem 0; }
.ws2-clinic-detail .mini-review{ display:flex; gap:.6rem; }
.ws2-clinic-detail .mini-review .ph{ width:32px; height:32px; border-radius:50%; flex:none; background:var(--ws2-line); }
.ws2-clinic-detail .mini-review .stars__back{ width:50px; height:6px; margin-top:.25rem; }
.ws2-clinic-detail .mini-review p{ font-size:.8rem; color:var(--ws2-ink-soft); margin-top:.3rem; font-style:italic; }

/* ---------- Appointment form ---------- */
.ws2-clinic-detail .appt-panel{ background:var(--ws2-paper-raised); border:1.5px solid var(--ws2-line); border-radius:22px; padding:clamp(1.4rem,3vw,2.2rem); margin-top:1.4rem; box-shadow:var(--ws2-shadow); }
.ws2-clinic-detail .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; margin-top:1.2rem; }
.ws2-clinic-detail .field{ display:flex; flex-direction:column; gap:.4rem; }
.ws2-clinic-detail .field.full{ grid-column:1/-1; }
.ws2-clinic-detail .field label{ font-weight:600; font-size:.85rem; font-family:var(--ws2-font-ui); }
.ws2-clinic-detail .field input,
.ws2-clinic-detail .field select,
.ws2-clinic-detail .field textarea{ font-family:var(--ws2-font-body); font-size:.92rem; color:var(--ws2-ink); background:var(--ws2-paper); border:1.5px solid var(--ws2-line); border-radius:12px; padding:.72rem .9rem; width:100%; }
.ws2-clinic-detail .field textarea{ resize:vertical; min-height:90px; }
.ws2-clinic-detail .field input:focus,
.ws2-clinic-detail .field select:focus,
.ws2-clinic-detail .field textarea:focus{ outline:none; border-color:var(--ws2-blue); }
.ws2-clinic-detail .input-error{ font-size:.78rem; color:var(--ws2-orange); margin-top:.2rem; }
.ws2-clinic-detail .choice-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.ws2-clinic-detail .choice-pill{ border:1.5px solid var(--ws2-line); border-radius:100px; padding:.6rem 1.1rem; font-weight:600; font-size:.85rem; cursor:pointer; color:var(--ws2-ink-soft); }
.ws2-clinic-detail .choice-pill input{ position:absolute; opacity:0; width:0; height:0; }
.ws2-clinic-detail .choice-pill.is-checked{ border-color:var(--ws2-blue); background:var(--ws2-mist); color:var(--ws2-blue); }
.ws2-clinic-detail .form-note{ font-size:.78rem; color:var(--ws2-ink-faint); margin-top:1rem; }

/* ---------- Nearby ---------- */
.ws2-clinic-detail .nearby-row{ display:flex; gap:1rem; overflow-x:auto; padding:.3rem .1rem 1rem; margin-top:1.1rem; min-width:0; }
.ws2-clinic-detail .nearby-card{ flex:0 0 260px; background:var(--ws2-paper-raised); border:1px solid var(--ws2-line); border-radius:16px; padding:.9rem; box-shadow:var(--ws2-shadow); }
.ws2-clinic-detail .nearby-card .ph{ width:100%; height:110px; border-radius:12px; margin-bottom:.7rem; object-fit:cover; display:block; background:var(--ws2-mist); }
.ws2-clinic-detail .nearby-card h4{ font-size:.92rem; }
.ws2-clinic-detail .nearby-card h4 a{ color:var(--ws2-ink); }
.ws2-clinic-detail .nearby-card .meta{ font-size:.78rem; color:var(--ws2-ink-faint); margin-top:.3rem; }
.ws2-clinic-detail .nearby-card .btn{ margin-top:.8rem; width:100%; padding:.6rem 1rem; font-size:.8rem; }

/* ---------- Dialog / lightbox ---------- */
/* main.css has an unscoped `dialog{display:block}` rule (an old HTML5-element reset)
   that beats the browser's native "hidden until [open]" default for <dialog> — without
   this, both dialogs below would render visible on page load instead of staying closed
   until .showModal() is called. */
.ws2-clinic-detail dialog:not([open]){ display:none !important; }
.ws2-clinic-detail dialog{ border:none; border-radius:20px; padding:0; max-width:640px; width:92vw; background:var(--ws2-paper-raised); color:var(--ws2-ink); box-shadow:var(--ws2-shadow-lg); }
.ws2-clinic-detail dialog::backdrop{ background:rgba(10,22,54,.55); backdrop-filter:blur(2px); }
.ws2-clinic-detail .dialog-head{ display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.4rem; border-bottom:1px solid var(--ws2-line); }
.ws2-clinic-detail .dialog-head h3{ font-size:1.05rem; }
.ws2-clinic-detail .dialog-close{ background:var(--ws2-mist); border:none; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
.ws2-clinic-detail .dialog-close svg{ width:16px; height:16px; stroke:var(--ws2-ink); }
.ws2-clinic-detail .dialog-body{ padding:1.4rem; max-height:70vh; overflow-y:auto; }
.ws2-clinic-detail #lightbox .dialog-body{ padding:0; position:relative; }
.ws2-clinic-detail #lightbox-img{ width:100%; display:block; }
.ws2-clinic-detail .lightbox-nav{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 .6rem; pointer-events:none; }
.ws2-clinic-detail .lightbox-nav button{ pointer-events:auto; width:38px; height:38px; border-radius:50%; border:none; background:rgba(10,22,54,.6); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ws2-clinic-detail .lightbox-nav svg{ width:18px; height:18px; }

@media (max-width: 640px){ .ws2-clinic-detail .form-grid{ grid-template-columns:1fr; } }