/* ============================================================
   Centro Odontoiatrico Brancacci — Landing Igiene Dentale
   Brand: Montserrat (UI/body) + Zilla Slab (display)
   Palette: warm taupe-gold #BEA085 on light/ivory · espresso footer
   Every rule is scoped under .brancacci-root (each widget's own wrapper)
   so the theme and the rest of the site are never touched.
   ============================================================ */

.brancacci-root{
  /* surfaces */
  --white:#ffffff;
  --bg:#ffffff;
  --surface:#faf6f0;
  --sand:#f2eadf;
  --sand-2:#ece1d2;
  --gold-tint:#f4ebe0;

  /* ink & text */
  --ink:#211c18;
  --body:#544e47;
  --muted:#8b8177;
  --line:rgba(33,28,24,.12);
  --line-2:rgba(33,28,24,.07);

  /* brand */
  --gold:#bea085;
  --gold-deep:#9a7b5e;
  --gold-ink:#795d43;
  --gold-soft:#e6d678;
  --star:#e0b83d;

  /* dark */
  --espresso:#221c18;
  --espresso-2:#2c2521;
  --espresso-line:rgba(255,255,255,.12);

  --wa:#25d366;
  --wa-deep:#1da851;

  /* type */
  --f-display:"Zilla Slab",Georgia,"Times New Roman",serif;
  --f-body:"Montserrat",system-ui,-apple-system,Segoe UI,sans-serif;

  /* radii */
  --r:6px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;

  /* shadow (warm) */
  --sh-sm:0 2px 8px rgba(60,45,30,.06);
  --sh-md:0 14px 34px -12px rgba(70,52,34,.20);
  --sh-lg:0 40px 80px -28px rgba(60,44,28,.34);
  --sh-gold:0 18px 40px -14px rgba(154,123,94,.45);

  /* layout */
  --wrap:1200px;
  --pad:clamp(20px,5vw,40px);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* z-scale */
  --z-nav:1000; --z-sticky:1100; --z-menu:1200;

  font-family:var(--f-body);
  color:var(--body);
  line-height:1.7;
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.brancacci-root *,.brancacci-root *::before,.brancacci-root *::after{box-sizing:border-box}
.brancacci-root img{max-width:100%;display:block}
.brancacci-root a{color:inherit;text-decoration:none}
.brancacci-root em{font-style:italic}
.brancacci-root ::selection{background:var(--gold);color:#fff}

/* Elementor's Kit applies a default 20px margin-block-end between widgets
   (.elementor-widget:not(:last-child){margin-block-end:20px}) — our sections
   sit flush against each other by design (extra spacing, if wanted, is added
   per-widget from Elementor → Advanced → Margin, same convention as every
   other control in this plugin). Same (class,class) specificity as the Kit
   rule + later source order (this stylesheet loads after Elementor's) wins
   the default without blocking that native per-widget override. */
.elementor-widget.brancacci-root{margin-block-end:0;margin-bottom:0}

/* Reserve room for the fixed topbar+nav so no page content hides underneath.
   JS measures the real heights and overrides this precisely on load/resize;
   this is only the fallback for the instant before JS runs (or if it can't). */
body:has(.bx-nav){padding-top:118px}

.brancacci-root .bx-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

/* ── SECTION SHELL ── */
/* --header-h is set by JS to the real fixed topbar+nav height, so jumping to
   an in-page anchor (nav links, "#faq" etc.) never lands with the section's
   top hidden underneath the fixed header. */
.brancacci-root .bx-section{padding-block:clamp(64px,9vw,120px);scroll-margin-top:var(--header-h,118px)}
.brancacci-root .bx-section--sand{background:var(--surface)}
.brancacci-root .bx-section__head{max-width:680px;margin-bottom:clamp(38px,5vw,64px)}
.brancacci-root .bx-section__head.bx-center{margin-inline:auto;text-align:center}

/* ── TYPO PRIMITIVES ── */
.brancacci-root .bx-eyebrow{
  display:inline-block;font-family:var(--f-body);
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:22px;
}
.brancacci-root .bx-eyebrow--dark{color:var(--gold-ink)}
.brancacci-root .bx-eyebrow::before{
  content:"";display:inline-block;width:26px;height:1px;background:currentColor;
  vertical-align:middle;margin-right:12px;opacity:.7;
}

.brancacci-root .bx-h{
  font-family:var(--f-display);font-weight:600;
  color:var(--ink);line-height:1.08;letter-spacing:-.015em;
  font-size:clamp(30px,4.6vw,54px);
  text-wrap:balance;
}
.brancacci-root .bx-h em{color:var(--gold-deep);font-weight:500}
.brancacci-root .bx-h--light,.brancacci-root .bx-h--light em{color:#fff}
.brancacci-root .bx-h--light em{color:var(--gold-soft)}

.brancacci-root .bx-lead{font-size:clamp(16px,1.5vw,18px);color:var(--body);max-width:62ch;margin-top:18px;line-height:1.75}
.brancacci-root .bx-section__head.bx-center .bx-lead{margin-inline:auto}

.brancacci-root .bx-prose p{margin-bottom:1.05em;max-width:64ch}
.brancacci-root .bx-prose p:last-child{margin-bottom:0}
.brancacci-root .bx-prose strong{color:var(--ink);font-weight:600}

.brancacci-root .bx-rule{width:52px;height:2px;background:var(--gold);margin:26px 0;border-radius:2px}
.brancacci-root .bx-hero__copy .bx-rule{margin-inline:0}

/* ── BUTTONS ── */
.brancacci-root .bx-btn{
  --btn-bg:var(--gold);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-body);font-size:13.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;line-height:1;cursor:pointer;border:1.5px solid transparent;
  padding:15px 28px;border-radius:var(--r);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,color .25s,border-color .25s;
  position:relative;white-space:nowrap;
}
.brancacci-root .bx-btn--lg{padding:18px 34px;font-size:14px}
.brancacci-root .bx-btn--block{width:100%}
.brancacci-root .bx-btn--solid{background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--sh-gold)}
.brancacci-root .bx-btn--solid:hover{background:var(--gold-deep);transform:translateY(-3px);box-shadow:0 26px 50px -16px rgba(154,123,94,.6)}
.brancacci-root .bx-btn--solid:active{transform:translateY(-1px)}
.brancacci-root .bx-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.brancacci-root .bx-btn--ghost:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateY(-2px)}
.brancacci-root .bx-btn svg{width:1em;height:1em}
.brancacci-root .bx-btn i{font-size:1em;line-height:1}
.brancacci-root .bx-tick{color:var(--gold-deep);font-weight:700;display:inline-flex}
.brancacci-root .bx-tick svg{width:.9em;height:.9em}
.brancacci-root .bx-tick i{font-size:.9em}
/* WhatsApp icons keep the brand green wherever they appear (Elementor renders
   Font-Awesome-library icons as <i>, not <svg> — every icon rule in this file
   needs both selectors covered). */
.brancacci-root .bx-btn--ghost i.fa-whatsapp{color:var(--wa-deep)}
.brancacci-root .bx-btn--ghost:hover i.fa-whatsapp{color:var(--wa)}

/* ══════════ TOPBAR ══════════ */
/* Fixed at the very top; nav (below) reserves --nav-top for it via JS, and
   the page gets a matching top padding so nothing hides underneath either. */
.brancacci-root .bx-topbar{
  position:fixed;top:0;left:0;right:0;z-index:calc(var(--z-nav) + 1);
  background:var(--espresso);color:rgba(255,255,255,.72);font-size:12.5px;letter-spacing:.02em;
}
.brancacci-root .bx-topbar__inner{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:16px}
.brancacci-root .bx-topbar__tag{color:rgba(255,255,255,.6)}
.brancacci-root .bx-topbar__contact{display:inline-flex;align-items:center}
.brancacci-root .bx-topbar__contact a{display:inline-flex;align-items:center;gap:6px;color:var(--gold-soft);font-weight:600;transition:color .2s}
.brancacci-root .bx-topbar__contact a:hover{color:#fff}
.brancacci-root .bx-topbar__contact svg{flex-shrink:0;opacity:.9;width:13px;height:13px}
.brancacci-root .bx-topbar__contact i{flex-shrink:0;opacity:.9;font-size:13px}
.brancacci-root .bx-topbar__sep{opacity:.4;margin-inline:8px}

/* ══════════ NAV ══════════ */
/* Fixed rather than sticky: in Elementor each widget can end up in its own
   short section, which breaks position:sticky (it can only stick within its
   own containing block's height). Fixed always works regardless of how the
   page is built; JS measures the topbar (if present) and sets --nav-top and
   body's top padding so nothing sits underneath it. */
.brancacci-root .bx-nav{
  position:fixed;top:var(--nav-top,40px);left:0;right:0;z-index:var(--z-nav);
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:box-shadow .35s var(--ease),border-color .35s,background .35s,top .2s var(--ease);
}
.brancacci-root .bx-nav.is-scrolled{box-shadow:0 8px 30px -18px rgba(60,44,28,.4);border-bottom-color:var(--line-2)}
.brancacci-root .bx-nav__inner{display:flex;align-items:center;gap:28px;min-height:76px}
.brancacci-root .bx-nav__logo img{height:44px;width:auto;transform-origin:left center;transition:transform .35s var(--ease)}
.brancacci-root .bx-nav.is-scrolled .bx-nav__logo img{transform:scale(.86)}
.brancacci-root .bx-nav__panel{display:contents}
.brancacci-root .bx-nav__links{display:flex;gap:30px;margin-left:auto}
.brancacci-root .bx-nav__links a{
  font-size:14px;font-weight:500;color:var(--ink);letter-spacing:.01em;
  position:relative;padding-block:6px;transition:color .2s;
}
.brancacci-root .bx-nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);border-radius:2px;
}
.brancacci-root .bx-nav__links a:hover{color:var(--gold-deep)}
.brancacci-root .bx-nav__links a:hover::after{transform:scaleX(1)}
.brancacci-root .bx-nav__cta{padding:12px 22px;font-size:12.5px}
.brancacci-root .bx-nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.brancacci-root .bx-nav__burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.brancacci-root .bx-nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.brancacci-root .bx-nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.brancacci-root .bx-nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ══════════ HERO ══════════ */
.brancacci-root .bx-hero{position:relative;overflow:hidden;background:var(--surface)}
.brancacci-root .bx-hero__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 70% at 82% 12%,rgba(190,160,133,.20),transparent 60%),
    radial-gradient(50% 60% at 8% 100%,rgba(230,214,120,.14),transparent 60%);
}
.brancacci-root .bx-hero__bg::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(33,28,24,.045) 1px,transparent 1px);
  background-size:26px 26px;mask-image:linear-gradient(to bottom,#000,transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);
}
.brancacci-root .bx-hero__grid{
  position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,70px);align-items:center;
  padding-block:clamp(48px,7vw,96px);
}
.brancacci-root .bx-hero__title{
  font-family:var(--f-display);font-weight:600;color:var(--ink);
  font-size:clamp(38px,5.4vw,66px);line-height:1.06;letter-spacing:-.02em;margin-bottom:8px;
  text-wrap:balance;
}
.brancacci-root .bx-hero__title em{color:var(--gold-deep);font-weight:500}
.brancacci-root .bx-hero__sub{font-size:clamp(16px,1.5vw,18.5px);color:var(--body);max-width:52ch;margin-bottom:34px;line-height:1.75}
.brancacci-root .bx-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.brancacci-root .bx-hero__reassure{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13.5px;color:var(--muted)}
.brancacci-root .bx-hero__reassure li{display:inline-flex;align-items:center;gap:8px}

/* hero media */
.brancacci-root .bx-hero__media{position:relative}
.brancacci-root .bx-hero__photo{
  position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);
  aspect-ratio:4/5;
  /* Parallax moves the whole card (frame + photo) as one rigid unit — the photo is
     never cropped/zoomed to fake overscan, it just floats at its own scroll speed. */
  transform:translate3d(0,var(--py,0px),0);will-change:transform;
}
.brancacci-root .bx-hero__photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);border-radius:inherit}
.brancacci-root .bx-hero__photo img{width:100%;height:100%;object-fit:cover}
.brancacci-root .bx-hero__badge{
  position:absolute;top:46%;left:-26px;background:#fff;border-radius:var(--r-lg);
  padding:16px 20px;text-align:center;box-shadow:var(--sh-md);
  transform:translate(var(--badge-x,0px),var(--badge-y,0px));
}
.brancacci-root .bx-hero__badge-stars{color:var(--star);font-size:14px;letter-spacing:2px}
.brancacci-root .bx-hero__badge-stars svg{width:.85em;height:.85em}
.brancacci-root .bx-hero__badge-stars i{font-size:.85em}
.brancacci-root .bx-hero__badge-num{font-family:var(--f-display);font-size:34px;font-weight:700;color:var(--ink);line-height:1;margin-top:2px}
.brancacci-root .bx-hero__badge-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.brancacci-root .bx-hero__chip{
  position:absolute;bottom:-22px;right:-14px;background:var(--espresso);color:#fff;
  border-radius:var(--r-lg);padding:16px 24px;box-shadow:var(--sh-md);text-align:center;
  transform:translate(var(--chip-x,0px),var(--chip-y,0px));
}
.brancacci-root .bx-hero__chip-num{display:block;font-family:var(--f-display);font-size:38px;font-weight:700;line-height:1;color:var(--gold-soft)}
.brancacci-root .bx-hero__chip-num i{font-style:normal;font-size:22px}
.brancacci-root .bx-hero__chip-lbl{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:6px}

/* ══════════ TRUST BAR ══════════ */
.brancacci-root .bx-trust{background:var(--espresso);color:#fff}
.brancacci-root .bx-trust__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.brancacci-root .bx-trust__item{
  padding:clamp(28px,4vw,44px) 20px;text-align:center;
  border-right:1px solid var(--espresso-line);
}
.brancacci-root .bx-trust__item:last-child{border-right:0}
.brancacci-root .bx-trust__num{
  font-family:var(--f-display);font-size:clamp(30px,3.4vw,42px);font-weight:700;color:var(--star);line-height:1;
  display:flex;align-items:center;justify-content:center;gap:2px;min-height:clamp(30px,3.4vw,42px);
}
.brancacci-root .bx-trust__num i{font-style:normal;font-size:.6em;vertical-align:super;margin-left:2px}
.brancacci-root .bx-trust__num--stars{letter-spacing:3px;font-size:clamp(22px,2.4vw,30px)}
.brancacci-root .bx-trust__num--stars svg{width:.8em;height:.8em}
.brancacci-root .bx-trust__num--stars i{font-size:.8em}
.brancacci-root .bx-trust__num--sm{font-size:clamp(26px,3vw,38px)}
.brancacci-root .bx-trust__u{font-size:.42em;font-family:var(--f-body);font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-left:4px}
.brancacci-root .bx-trust__lbl{font-size:12.5px;letter-spacing:.03em;color:rgba(255,255,255,.62);margin-top:12px;line-height:1.5}

/* ══════════ PERCHÉ ══════════ */
.brancacci-root .bx-perche__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,72px)}
.brancacci-root .bx-perche__head{position:sticky;top:110px;align-self:start}
.brancacci-root .bx-pullquote{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(21px,2.3vw,27px);line-height:1.4;color:var(--ink);
  padding:44px 30px 28px;background:var(--gold-tint);border-radius:var(--r-lg);
  position:relative;max-width:60ch;
  /* This is a real <blockquote> — browsers/themes give that tag a default
     margin (indent) and often a border (the theme's is a teal left rule);
     reset both explicitly instead of just adding margin-top. */
  border:none;margin:34px 0 0;
}
.brancacci-root .bx-pullquote::before{
  content:"\201C";font-family:var(--f-display);font-size:70px;color:var(--gold);
  position:absolute;top:2px;left:16px;line-height:1;opacity:.4;
}

/* ══════════ PRIMA / DOPO SLIDER ══════════ */
.brancacci-root .bx-ba__stage{max-width:900px;margin-inline:auto}
.brancacci-root .bx-ba__compare{
  position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);
  aspect-ratio:16/10;user-select:none;touch-action:pan-y;cursor:ew-resize;
}
.brancacci-root .bx-ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.brancacci-root .bx-ba__img--before{filter:saturate(.72) brightness(.9) sepia(.28) hue-rotate(-8deg)}
.brancacci-root .bx-ba__clip{position:absolute;inset:0;width:50%;overflow:hidden}
.brancacci-root .bx-ba__clip .bx-ba__img{width:auto}
.brancacci-root .bx-ba__clip .bx-ba__img--before{width:100vw;max-width:900px}
.brancacci-root .bx-ba__tag{
  position:absolute;top:18px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 14px;border-radius:var(--r-pill);backdrop-filter:blur(6px);color:#fff;z-index:3;
}
.brancacci-root .bx-ba__tag--before{left:18px;background:rgba(34,28,24,.6)}
.brancacci-root .bx-ba__tag--after{right:18px;background:rgba(190,160,133,.85)}
.brancacci-root .bx-ba__handle{
  position:absolute;top:0;bottom:0;left:50%;width:44px;transform:translateX(-50%);
  z-index:4;cursor:ew-resize;display:flex;align-items:center;justify-content:center;
}
.brancacci-root .bx-ba__handle-line{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.brancacci-root .bx-ba__handle-grip{
  width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--sh-md);
  display:flex;align-items:center;justify-content:center;gap:1px;color:var(--gold-deep);font-size:18px;font-weight:700;
  position:relative;
}
.brancacci-root .bx-ba__handle:focus-visible{outline:none}
.brancacci-root .bx-ba__handle:focus-visible .bx-ba__handle-grip{outline:3px solid var(--gold);outline-offset:3px}
.brancacci-root .bx-ba__note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:18px;font-style:italic}

/* ══════════ SEDUTA (STEPS) ══════════ */
.brancacci-root .bx-seduta__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,72px);align-items:start}
.brancacci-root .bx-seduta__aside-inner{position:sticky;top:110px}
.brancacci-root .bx-seduta__photo{margin-top:32px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);aspect-ratio:4/3}
.brancacci-root .bx-seduta__photo img{width:100%;height:100%;object-fit:cover}
.brancacci-root .bx-steps{list-style:none}
.brancacci-root .bx-step{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:30px 0;border-top:1px solid var(--line);position:relative}
.brancacci-root .bx-step:last-child{border-bottom:1px solid var(--line)}
.brancacci-root .bx-step__num{
  font-family:var(--f-display);font-size:30px;font-weight:600;line-height:1;
  color:var(--gold);width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--gold-tint);
  flex-shrink:0;transition:transform .4s var(--ease),background .3s,color .3s;
}
.brancacci-root .bx-step:hover .bx-step__num{background:var(--gold);color:#fff;transform:scale(1.06)}
.brancacci-root .bx-step__title{font-family:var(--f-display);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:8px}
.brancacci-root .bx-step__content p{font-size:15px;color:var(--body);max-width:56ch}

/* ══════════ DOTTORESSA ══════════ */
.brancacci-root .bx-dottoressa__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,68px);align-items:center}
.brancacci-root .bx-dottoressa__photo{
  position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:3/4;
}
.brancacci-root .bx-dottoressa__photo img{width:100%;height:100%;object-fit:cover}
.brancacci-root .bx-dottoressa__cap{
  position:absolute;left:0;right:0;bottom:0;padding:34px 22px 16px;color:#fff;font-size:12px;
  letter-spacing:.05em;background:linear-gradient(to top,rgba(34,28,24,.72),transparent);
}
.brancacci-root .bx-dottoressa__role{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink);margin:6px 0 20px}
.brancacci-root .bx-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.brancacci-root .bx-chips li{
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink);
  padding:9px 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
}

/* ══════════ RECENSIONI ══════════ */
.brancacci-root .bx-rating-line{display:inline-flex;align-items:center;gap:12px;margin-top:20px;font-size:14px;color:var(--body);flex-wrap:wrap;justify-content:center}
.brancacci-root .bx-rating-line__stars{color:var(--star);letter-spacing:3px;font-size:18px}
.brancacci-root .bx-rating-line__stars svg{width:.85em;height:.85em}
.brancacci-root .bx-rating-line__stars i{font-size:.85em}
.brancacci-root .bx-rating-line__txt strong{color:var(--ink);font-weight:700}
.brancacci-root .bx-rating-line__src{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.brancacci-root .bx-rating-line__src svg{width:15px;height:15px}
.brancacci-root .bx-rating-line__src i{font-size:15px}

.brancacci-root .bx-reviews-embed{
  max-width:820px;margin:0 auto;text-align:center;color:var(--muted);
  border:1.5px dashed var(--line);border-radius:var(--r-xl);background:var(--surface);
  padding:clamp(40px,6vw,60px) clamp(24px,4vw,40px);
}
.brancacci-root .bx-reviews-embed svg{color:var(--gold-deep);margin-bottom:14px;width:26px;height:26px}
.brancacci-root .bx-reviews-embed i{color:var(--gold-deep);margin-bottom:14px;font-size:26px;display:block}
.brancacci-root .bx-reviews-embed strong{display:block;font-family:var(--f-body);font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px}
.brancacci-root .bx-reviews-embed span{display:block;font-size:13.5px;line-height:1.65;max-width:46ch;margin-inline:auto}
.brancacci-root .bx-reviews-live{max-width:900px;margin:0 auto}

/* ══════════ FAQ ══════════ */
.brancacci-root .bx-faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,64px);align-items:start}
.brancacci-root .bx-faq__head{position:sticky;top:110px}
.brancacci-root .bx-faq__head .bx-btn{margin-top:24px}
.brancacci-root .bx-faq__list{display:flex;flex-direction:column}
.brancacci-root .bx-faq__item{border-bottom:1px solid var(--line)}
.brancacci-root .bx-faq__item summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 4px;position:relative;
  font-family:var(--f-body);font-size:16.5px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;transition:color .2s;
}
.brancacci-root .bx-faq__item summary::-webkit-details-marker{display:none}
.brancacci-root .bx-faq__item summary::after{
  content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;
  background:
    linear-gradient(var(--gold-deep),var(--gold-deep)) center/14px 2px no-repeat,
    linear-gradient(var(--gold-deep),var(--gold-deep)) center/2px 14px no-repeat;
  transform:translateY(-50%) rotate(0);transition:transform .35s var(--ease);
}
.brancacci-root .bx-faq__item[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.brancacci-root .bx-faq__item summary:hover{color:var(--gold-deep)}
.brancacci-root .bx-faq__a{padding:0 44px 26px 4px;font-size:15px;color:var(--body);line-height:1.75;max-width:64ch}
.brancacci-root .bx-faq__item[open] .bx-faq__a{animation:bxFaqIn .4s var(--ease)}
@keyframes bxFaqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ══════════ FORM / CTA ══════════ */
.brancacci-root .bx-form{background:var(--espresso);color:rgba(255,255,255,.8);position:relative;overflow:hidden}
.brancacci-root .bx-form::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(50% 60% at 88% 8%,rgba(190,160,133,.22),transparent 60%),
    radial-gradient(46% 50% at 0% 100%,rgba(230,214,120,.10),transparent 60%);
}
.brancacci-root .bx-form__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.brancacci-root .bx-form__lead{font-size:16px;color:rgba(255,255,255,.72);margin:20px 0 26px;max-width:46ch;line-height:1.75}
.brancacci-root .bx-form__points{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.brancacci-root .bx-form__points li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:rgba(255,255,255,.85)}
.brancacci-root .bx-form__points .bx-tick{color:var(--gold-soft)}
.brancacci-root .bx-form__wa{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--gold-soft);transition:color .2s}
.brancacci-root .bx-form__wa svg{color:var(--wa);width:1em;height:1em}
.brancacci-root .bx-form__wa i{color:var(--wa);font-size:1em}
.brancacci-root .bx-form__wa:hover{color:#fff}

/* The card styles both our own placeholder mock-form AND the real embedded
   Elementor Pro Form — targeted by tag/type, since Pro's own markup doesn't
   share our class names. */
.brancacci-root .bx-form__card{
  background:#fff;border-radius:var(--r-xl);padding:clamp(26px,3vw,40px);box-shadow:var(--sh-lg);color:var(--body);
}
.brancacci-root .bx-form__card label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.brancacci-root .bx-form__card p{margin-bottom:16px}
/* Elementor Pro Form: nessuno spazio nativo tra un gruppo campo (label+input)
   e il gruppo successivo — solo la label ha margin-bottom verso il proprio
   campo, quindi tutto risultava "attaccato". Aggiungiamo qui lo spazio SOTTO
   ogni gruppo (uniforme per select/testo HTML/bottone), azzerando il margine
   nativo del paragrafo del testo HTML per non sommare i due spazi. */
.brancacci-root .bx-form__card .elementor-field-group{margin-bottom:22px}
.brancacci-root .bx-form__card .elementor-field-group:last-child{margin-bottom:0}
.brancacci-root .bx-form__card .elementor-field-type-html p{margin-bottom:0}
/* Gap orizzontale tra colonne affiancate (es. Nome | Cognome): Elementor usa
   width:50% fisso (non calc() con variabile gap), quindi un column-gap sul
   flex container le manderebbe a capo. Trucco sicuro: margine negativo sul
   wrapper + padding interno sulle colonne — il totale resta 100%, l'input si
   allinea comunque al bordo della card. */
.brancacci-root .bx-form__card .elementor-form-fields-wrapper{margin-inline:-10px}
.brancacci-root .bx-form__card .elementor-field-group{padding-inline:10px;box-sizing:border-box}
.brancacci-root .bx-form__card input[type=text],
.brancacci-root .bx-form__card input[type=tel],
.brancacci-root .bx-form__card input[type=email],
.brancacci-root .bx-form__card input[type=number],
.brancacci-root .bx-form__card select,
.brancacci-root .bx-form__card textarea{
  width:100%;padding:14px 16px;font-family:var(--f-body);font-size:15px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.brancacci-root .bx-form__card input::placeholder,.brancacci-root .bx-form__card textarea::placeholder{color:#a89f95}
.brancacci-root .bx-form__card input:focus,.brancacci-root .bx-form__card select:focus,.brancacci-root .bx-form__card textarea:focus{
  outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 4px rgba(190,160,133,.16);
}
.brancacci-root .bx-form__card input[type=checkbox]{accent-color:var(--gold-deep);width:18px;height:18px}
.brancacci-root .bx-form__card button[type=submit],
.brancacci-root .bx-form__card .elementor-button{
  width:100%;display:block;text-align:center;padding:16px;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;background:var(--gold);color:#fff;border:0;border-radius:var(--r);
  cursor:pointer;transition:background .25s,transform .3s var(--ease);
}
.brancacci-root .bx-form__card button[type=submit]:hover,
.brancacci-root .bx-form__card .elementor-button:hover{background:var(--gold-deep)}
.brancacci-root .bx-mockform__note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px}
.brancacci-root .bx-mockform.is-sent button[type=submit]{background:var(--wa-deep);pointer-events:none}

/* ══════════ FOOTER ══════════ */
.brancacci-root .bx-footer{background:var(--espresso-2);color:rgba(255,255,255,.6);font-size:14px}
.brancacci-root .bx-footer__grid{
  display:grid;grid-template-columns:minmax(220px,1fr) 2.15fr;gap:clamp(36px,5vw,64px);
  padding-block:clamp(52px,6vw,80px);align-items:start;
}
.brancacci-root .bx-footer__brand{padding-top:2px}
.brancacci-root .bx-footer__logo{height:56px;width:auto;margin-bottom:22px}
.brancacci-root .bx-footer__note{max-width:32ch;line-height:1.7;color:rgba(255,255,255,.55);font-size:14.5px}
.brancacci-root .bx-footer__stars{margin-top:18px;color:var(--star);letter-spacing:2px;font-size:15px}
.brancacci-root .bx-footer__stars svg{width:.8em;height:.8em}
.brancacci-root .bx-footer__stars i{font-size:.8em}
.brancacci-root .bx-footer__stars span{color:rgba(255,255,255,.6);font-size:12.5px;letter-spacing:.02em;margin-left:6px}

.brancacci-root .bx-footer__social{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.brancacci-root .bx-footer__social-ico{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--espresso-line);background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);
  transition:color .25s,border-color .25s,background .25s,transform .3s var(--ease);
}
.brancacci-root .bx-footer__social-ico svg{width:16px;height:16px}
.brancacci-root .bx-footer__social-ico i{font-size:16px}
.brancacci-root .bx-footer__social-ico:hover{color:var(--gold-soft);border-color:rgba(230,214,120,.5);background:rgba(230,214,120,.12);transform:translateY(-3px)}

/* Contatti gets the most room (it carries the one genuinely long string, the
   e-mail) — Orari the least (it's just two short compact columns of its own,
   day + time, via .bx-footer__hours below). */
.brancacci-root .bx-footer__nav{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr);gap:clamp(18px,2.4vw,32px);
  border-left:1px solid var(--espresso-line);padding-left:clamp(28px,4vw,48px);
}
.brancacci-root .bx-footer__col h4{
  font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:20px;
}
.brancacci-root .bx-footer__col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.brancacci-root .bx-footer__col{min-width:0}
/* display:flex (block-level), not inline-flex: an inline-flex box sizes to
   its unbroken max-content width and only clips/overlaps neighbouring
   columns instead of wrapping. */
.brancacci-root .bx-footer__col a{display:flex;width:100%;align-items:center;gap:8px;transition:color .2s;min-width:0}
/* The e-mail must never wrap (client's call — a broken address reads worse
   than the column being wide enough): first column only, kept on one line
   no matter what. The nav grid ratio + the raised stack breakpoint below
   are what actually guarantee the room this needs. */
.brancacci-root .bx-footer__col:nth-child(1) a span{white-space:nowrap}
.brancacci-root .bx-footer__col a span{min-width:0}
.brancacci-root .bx-footer__col a:hover{color:#fff}
.brancacci-root .bx-footer__col svg{flex-shrink:0;opacity:.85;width:14px;height:14px}
.brancacci-root .bx-footer__col i{flex-shrink:0;opacity:.85;font-size:14px}
.brancacci-root .bx-footer__hours{gap:14px}
.brancacci-root .bx-footer__hours li{display:grid;grid-template-columns:78px 1fr;gap:8px;align-items:baseline;white-space:nowrap}
.brancacci-root .bx-footer__hours-day{color:rgba(255,255,255,.78);font-weight:600;font-size:13.5px}
.brancacci-root .bx-footer__hours-time{color:rgba(255,255,255,.52);font-size:13px;line-height:1.5}

.brancacci-root .bx-footer__bar{border-top:1px solid var(--espresso-line)}
.brancacci-root .bx-footer__bar-inner{display:flex;flex-direction:column;gap:14px;padding-block:22px;font-size:12.5px;color:rgba(255,255,255,.42)}
.brancacci-root .bx-footer__copy{margin:0}
.brancacci-root .bx-footer__bar-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px}
.brancacci-root .bx-footer__legal{display:flex;flex-wrap:wrap;gap:8px 24px}
.brancacci-root .bx-footer__credits{margin:0 0 0 auto}
.brancacci-root .bx-footer__bar a,.brancacci-root .bx-footer__credits a{color:var(--gold-soft)}
.brancacci-root .bx-footer__bar a:hover,.brancacci-root .bx-footer__credits a:hover{color:#fff}
.brancacci-root .bx-footer__credits strong{color:rgba(255,255,255,.68);font-weight:600}

/* ══════════ STICKY MOBILE CTA ══════════ */
.brancacci-root .bx-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);display:none;
  grid-template-columns:1fr 1.3fr;background:var(--espresso);
  box-shadow:0 -10px 30px -8px rgba(0,0,0,.4);
  padding-bottom:env(safe-area-inset-bottom);
}
.brancacci-root .bx-sticky-cta a{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 10px;
  font-size:14px;font-weight:600;letter-spacing:.03em;
}
.brancacci-root .bx-sticky-cta a svg{width:1em;height:1em}
.brancacci-root .bx-sticky-cta a i{font-size:1em}
.brancacci-root .bx-sticky-cta__call{color:var(--gold-soft);border-right:1px solid var(--espresso-line)}
.brancacci-root .bx-sticky-cta__book{background:var(--gold);color:#fff;text-transform:uppercase;font-size:13px}

/* ══════════ REVEAL ON SCROLL ══════════ */
/* Content is visible by default; only JS-capable clients gate it for the reveal.
   Without JS (or if JS fails) nothing ships blank. */
.has-js .brancacci-root [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.has-js .brancacci-root [data-reveal].is-in{opacity:1;transform:none}

/* Bespoke reveals: each element enters the way its own content suggests, not one uniform fade. */
.has-js .brancacci-root .bx-hero__media[data-reveal]{transform:scale(.94) translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.has-js .brancacci-root .bx-hero__media[data-reveal].is-in{transform:none}

/* This element carries BOTH the reveal (fade+slide) and the parallax float (--py,
   updated live by JS via setProperty, never via inline `transform`) in one declaration —
   keeps them from fighting over the `transform` property. */
.has-js .brancacci-root .bx-dottoressa__photo[data-reveal]{transform:translateY(26px) translate3d(0,var(--py,0px),0)}
.has-js .brancacci-root .bx-dottoressa__photo[data-reveal].is-in{transform:translate3d(0,var(--py,0px),0)}

/* ══════════ CUSTOM CURSOR (fine-pointer only) ══════════ */
/* JS owns the full `transform` string every frame (translate + scale); CSS only transitions
   opacity/color so nothing here ever animates a layout property. */
.bx-cursor-dot,.bx-cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:1300;
  border-radius:50%;opacity:0;transition:opacity .25s,border-color .3s,background .3s;
  will-change:transform;
}
.bx-cursor-dot{width:7px;height:7px;background:var(--gold-deep)}
.bx-cursor-ring{width:38px;height:38px;border:1.5px solid rgba(154,123,94,.5)}
.bx-cursor-dot.is-visible,.bx-cursor-ring.is-visible{opacity:1}
.bx-cursor-ring.is-active{border-color:var(--gold);background:rgba(190,160,133,.12)}
html.bx-has-fine-cursor{cursor:none}
html.bx-has-fine-cursor a,html.bx-has-fine-cursor button,html.bx-has-fine-cursor summary{cursor:none}
html.bx-has-fine-cursor input,html.bx-has-fine-cursor textarea,html.bx-has-fine-cursor select{cursor:auto}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1000px){
  .brancacci-root .bx-hero__grid{grid-template-columns:1fr;gap:44px}
  .brancacci-root .bx-hero__media{max-width:440px;margin-inline:auto;order:-1}
  .brancacci-root .bx-hero__copy{text-align:center}
  .brancacci-root .bx-hero__copy .bx-eyebrow::before{display:none}
  .brancacci-root .bx-hero__copy .bx-rule{margin-inline:auto}
  .brancacci-root .bx-hero__cta,.brancacci-root .bx-hero__reassure{justify-content:center}
  .brancacci-root .bx-hero__sub{margin-inline:auto}
  .brancacci-root .bx-perche__grid,.brancacci-root .bx-seduta__grid,.brancacci-root .bx-dottoressa__grid,.brancacci-root .bx-faq__grid,.brancacci-root .bx-form__grid{grid-template-columns:1fr}
  .brancacci-root .bx-perche__head,.brancacci-root .bx-seduta__aside-inner,.brancacci-root .bx-faq__head{position:static}
  .brancacci-root .bx-dottoressa__photo{max-width:420px;margin-inline:auto}
  .brancacci-root .bx-footer__grid{grid-template-columns:1fr}
  /* Stacked to one column starting here (not just under 560px): the e-mail
     in the first column must never wrap, and the 560–1000px range is where
     3 narrow columns used to leave too little room for it to fit on one
     line — stacking earlier removes that squeeze entirely. */
  .brancacci-root .bx-footer__nav{grid-template-columns:1fr;gap:30px;border-left:0;padding-left:0;border-top:1px solid var(--espresso-line);padding-top:32px}
}
@media (max-width:768px){
  .brancacci-root .bx-nav__burger{display:flex}
  .brancacci-root .bx-nav__panel{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:#fff;padding:10px var(--pad) 22px;box-shadow:var(--sh-md);border-top:1px solid var(--line-2);
  }
  .brancacci-root .bx-nav.is-open .bx-nav__panel{display:flex}
  .brancacci-root .bx-nav__links{flex-direction:column;gap:0;margin-left:0}
  .brancacci-root .bx-nav__links a{padding:16px 2px;border-bottom:1px solid var(--line-2);font-size:16px}
  .brancacci-root .bx-nav__links a::after{display:none}
  .brancacci-root .bx-nav__cta{display:inline-flex;width:100%;margin-top:16px;padding:16px}
  .brancacci-root .bx-sticky-cta{display:grid}
  /* Centered footer legal links/credits, same breakpoint as the sticky bar
     above: .bx-footer__bar-row is its own flex row with justify-content:
     space-between, so text-align/justify-content on an ancestor doesn't
     reach it — it needs centering directly, plus the credits' margin-left:
     auto (which pushes it to the far right) reset. */
  .brancacci-root .bx-footer__bar-inner{text-align:center}
  .brancacci-root .bx-footer__bar-row{justify-content:center}
  .brancacci-root .bx-footer__legal{justify-content:center}
  .brancacci-root .bx-footer__credits{margin:0}
  .brancacci-root .bx-hero__badge{left:0}
  .brancacci-root .bx-hero__chip{right:0}
  /* Iubenda's persistent "reopen cookie preferences" icon — confirmed live on
     this site as button.iubenda-cs-preferences-link (position:fixed;bottom:0;
     left:0), NOT #iubenda-cs-banner (the actual first-visit consent banner,
     which must stay untouched for legal reasons) and NOT .floatable-wrapper
     (that wrapper class exists in Iubenda's generic script but this specific
     site/config renders the button directly, without it — kept both
     selectors so the rule still works if Iubenda's markup changes). Overlaps
     our fixed Chiama/Prenota bar on mobile — hide it there, only on pages
     that actually have our sticky bar.
     The class is repeated on purpose: Iubenda's own rule for this button is
     `.iubenda-tp-btn:not(...):not(...)` — each :not() counts as a class for
     specificity, so its selector out-specifies a plain single-class rule
     (verified live: it otherwise silently loses and the icon stays visible).
     Repeating the class raises ours by the same amount. */
  body:has(.bx-sticky-cta) .iubenda-cs-preferences-link.iubenda-cs-preferences-link,
  body:has(.bx-sticky-cta) .floatable-wrapper{display:none !important}
}
@media (max-width:560px){
  .brancacci-root .bx-trust__grid{grid-template-columns:1fr}
  .brancacci-root .bx-trust__item{border-right:0;border-bottom:1px solid var(--espresso-line)}
  .brancacci-root .bx-trust__item:last-child{border-bottom:0}
  .brancacci-root .bx-hero__title{font-size:clamp(27px,7.6vw,42px)}
  .brancacci-root .bx-btn{width:100%}
  .brancacci-root .bx-hero__cta{flex-direction:column}
  .brancacci-root .bx-topbar__tag{display:none}
  .brancacci-root .bx-topbar__inner{justify-content:center}
  .brancacci-root .bx-topbar{font-size:12px}
}

/* ══════════ REDUCED MOTION ══════════ */
@media (prefers-reduced-motion:reduce){
  .brancacci-root,.brancacci-root *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .has-js .brancacci-root [data-reveal]{opacity:1;transform:none}
}