/* ============================================================
   Casa Pupa — Experiência (awwwards-grade landing)
   Mobile-first (390px) · organic motion · derived from the logo.
   Tokens come from styles.css. Page-scoped with .xp- prefix.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
::selection { background: var(--lavender-200); color: var(--lavender-900); }

/* warm film-grain + aurora wash behind everything */
.xp-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.xp-bg::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(40vw 40vw at 12% 8%, rgba(234,181,198,0.22), transparent 60%),
    radial-gradient(46vw 46vw at 88% 4%, rgba(187,166,216,0.26), transparent 62%),
    radial-gradient(50vw 50vw at 78% 92%, rgba(175,210,171,0.18), transparent 60%),
    radial-gradient(40vw 40vw at 8% 96%, rgba(248,236,199,0.30), transparent 60%);
  filter: blur(10px);
}
.xp-bg::after { /* subtle warm tint layer */
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background: radial-gradient(60vw 60vw at 50% 120%, rgba(248,236,199,0.10), transparent 70%);
}

.xp-page { position: relative; z-index: 1; }

/* ---- Layout ---- */
.xp-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 22px; }
section { position: relative; }
.xp-sec { padding-block: clamp(40px, 6vw, 72px); }

/* ---- Type helpers ---- */
.xp-eyebrow {
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--lavender-600);
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
}
.xp-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--lavender-400); }
.xp-h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.06;
  letter-spacing: -0.02em; color: var(--text-heading);
  margin: 16px 0 0; text-wrap: balance;
}
.xp-lead {
  font-size: clamp(1.05rem, 3.6vw, 1.3rem); line-height: 1.5;
  color: var(--text-body); margin: 18px 0 0; max-width: 56ch;
}
.xp-em { color: var(--lavender-700); }

/* ============================================================
   Motion system — reveal on scroll (transform/opacity only)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
.reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal-scale.is-in { opacity: 1; transform: none; }

/* top progress bar */
.xp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 100;
  background: linear-gradient(90deg, var(--blush-300), var(--butter-300), var(--lavender-400)); }

/* ============================================================
   NAV
   ============================================================ */
.xp-nav { position: fixed; top: 0; inset-inline: 0; z-index: 90; transition: background .35s, border-color .35s, backdrop-filter .35s; border-bottom: 1px solid transparent; }
.xp-nav.is-scrolled { background: rgba(251,248,253,0.78); backdrop-filter: saturate(1.5) blur(14px); border-bottom-color: var(--border); }
.xp-nav__in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.xp-nav__logo { height: 42px; width: auto; }
.xp-nav__links { display: none; gap: 30px; }
.xp-nav__links a { font-weight: 700; font-size: 0.93rem; color: var(--text-body); text-decoration: none; position: relative; }
.xp-nav__links a::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background: var(--lavender-400); border-radius:2px; transition: width .3s var(--ease-out); }
.xp-nav__links a:hover::after { width: 100%; }

/* ---- Buttons ---- */
.xp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 800; line-height: 1; border: none; cursor: pointer;
  border-radius: 999px; text-decoration: none; white-space: nowrap; transition: transform .18s var(--ease-soft), box-shadow .3s var(--ease-soft), background .3s; }
.xp-btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-glow); }
.xp-btn--primary:hover { background: var(--lavender-800); box-shadow: 0 14px 40px rgba(113,80,160,0.4); }
.xp-btn--ghost { background: rgba(255,255,255,0.6); color: var(--lavender-700); box-shadow: inset 0 0 0 1.5px var(--border-strong); backdrop-filter: blur(6px); }
.xp-btn--ghost:hover { background: #fff; }
.xp-btn--lg { padding: 17px 30px; font-size: 1.08rem; }
.xp-btn--md { padding: 12px 22px; font-size: 0.98rem; }
.xp-btn--sm { padding: 10px 18px; font-size: 0.9rem; }
.xp-btn:active { transform: scale(0.96); }
.xp-btn__mag { display: inline-block; will-change: transform; }

/* ============================================================
   HERO
   ============================================================ */
.xp-hero { min-height: 100svh; display: flex; align-items: center; padding-top: 84px; padding-bottom: 48px; }
.xp-hero__grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; width: 100%; }
.xp-hero__eyebrow { margin-bottom: 18px; }
.xp-hero h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 12vw, 5.4rem); line-height: 0.98; letter-spacing: -0.03em;
  color: var(--text-heading); margin: 0; text-wrap: balance;
}
.xp-hero h1 .xp-script { color: var(--lavender-600); display: inline-block; }
.xp-hero__sub { font-size: clamp(1.05rem, 4vw, 1.32rem); line-height: 1.55; color: var(--text-body); margin: 22px 0 0; max-width: 30ch; }
.xp-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.xp-hero__trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; color: var(--ink-500); font-size: 0.86rem; font-weight: 700; }
.xp-hero__trust span { display: inline-flex; align-items: center; gap: 6px; }

/* word-by-word hero reveal — animation ends visible; words stay visible if JS never runs */
.xp-word { display: inline-block; }
@keyframes xp-rise { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
.xp-hero.is-ready .xp-word { animation: xp-rise 0.7s var(--ease-out) both; animation-delay: var(--wd, 0s); }

/* hero stage / line-art house */
.xp-stage { position: relative; width: 100%; max-width: 460px; margin-inline: auto; aspect-ratio: 1 / 1; }
.xp-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xp-stage .xp-float { will-change: transform; }
.xp-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: xp-draw 2.4s var(--ease-out) forwards; }
@keyframes xp-draw { to { stroke-dashoffset: 0; } }
.xp-cocoon { transform-box: fill-box; transform-origin: top center; }
.xp-scrollcue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--lavender-500); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.xp-scrollcue__dot { width: 22px; height: 36px; border: 2px solid var(--lavender-300); border-radius: 999px; position: relative; }
.xp-scrollcue__dot::after { content:""; position:absolute; left:50%; top:7px; width:4px; height:7px; border-radius:3px; background: var(--lavender-400); transform: translateX(-50%); animation: xp-scroll 1.6s var(--ease-soft) infinite; }
@keyframes xp-scroll { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

/* ============================================================
   SECTION 02 — Dúvidas (narrative)
   ============================================================ */
.xp-doubts { text-align: center; }

/* ---- mãe + pensamentos (mobile-first: portrait centered, thoughts stacked) ---- */
.xp-doubts__stage { position: relative; margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.xp-doubts__portrait { position: relative; width: clamp(180px, 56vw, 240px); aspect-ratio: 1; flex: none; order: -1; }
.xp-doubts__aura { position: absolute; inset: -22%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 50% 45%, rgba(187,166,216,0.55), rgba(234,181,198,0.32) 45%, transparent 72%);
  filter: blur(6px); animation: xp-aura 6s var(--ease-soft) infinite; }
@keyframes xp-aura { 0%,100%{ transform: scale(1); opacity: .85 } 50%{ transform: scale(1.06); opacity: 1 } }
.xp-doubts__photo { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lg); --is-bg: var(--lavender-100); border: 5px solid #fff; }

.xp-thought { position: relative; max-width: 420px; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 18px 22px; opacity: 0; transform: translateY(18px) scale(0.96);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.xp-thought.is-in { opacity: 1; transform: none; }
.xp-thought p { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.18;
  font-size: clamp(1.15rem, 4.6vw, 1.55rem); color: var(--text-heading); }
.xp-thought b { color: var(--lavender-600); font-weight: 600; }
/* thought-bubble tail (3 shrinking dots toward her head) */
.xp-thought__tail { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 5px; left: 50%; transform: translateX(-50%); top: -34px; }
.xp-thought__tail i { display: block; border-radius: 50%; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.xp-thought__tail i:nth-child(1){ width: 16px; height: 16px; order: 3; }
.xp-thought__tail i:nth-child(2){ width: 10px; height: 10px; order: 2; }
.xp-thought__tail i:nth-child(3){ width: 6px; height: 6px; order: 1; }

.xp-doubts__answer { margin-top: clamp(40px, 9vw, 72px); font-size: clamp(1.15rem, 4.5vw, 1.6rem); color: var(--lavender-700); font-weight: 700; max-width: 24ch; margin-inline: auto; line-height: 1.35; }

/* ============================================================
   SECTION 03 — A Casa (the house opens)
   ============================================================ */
.xp-casa__head { max-width: 640px; }
.xp-casa__reveal { margin-top: 44px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.xp-casa__photo { width: 100%; aspect-ratio: 4 / 3; }
.xp-casa__roof { position: absolute; inset: 0; background: linear-gradient(160deg, var(--lavender-300), var(--blush-300)); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 1.1s var(--ease-out); }
.xp-casa__reveal.is-in .xp-casa__roof { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); pointer-events: none; }
.xp-casa__roof span { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; }
.xp-casa__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.xp-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.7); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 0.9rem; color: var(--lavender-800); backdrop-filter: blur(6px); }

/* ============================================================
   SECTION 04 — O Desenvolvimento (cocoon morph, sticky)
   ============================================================ */
.xp-dev { background: var(--lavender-900); color: var(--lavender-100); border-radius: clamp(28px, 5vw, 56px); margin-inline: 12px; }
.xp-dev__track { position: relative; }
.xp-dev__sticky { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-align: center; padding: 70px 22px; }
.xp-dev__kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lavender-300); margin: 0; display: inline-flex; align-items: center; gap: 8px; transition: opacity .35s var(--ease-soft); }
.xp-dev__kicker::after { content: "↓"; font-size: 0.9rem; animation: xp-nudge 1.6s var(--ease-soft) infinite; }
@keyframes xp-nudge { 0%,100%{ transform: translateY(0); opacity:.6 } 50%{ transform: translateY(4px); opacity:1 } }
.xp-dev__orb { width: clamp(150px, 40vw, 260px); aspect-ratio: 1; border-radius: var(--radius-blob); position: relative; will-change: transform, border-radius;
  background: conic-gradient(from 140deg, var(--blush-300), var(--butter-200), var(--lavender-300), var(--sage-200), var(--blush-300)); box-shadow: 0 30px 90px rgba(0,0,0,0.35); }
.xp-dev__orb::after { content:""; position:absolute; inset: 14%; border-radius: inherit; background: rgba(255,255,255,0.10); backdrop-filter: blur(2px); }
/* numbered progress stepper */
.xp-dev__steps { position: relative; display: flex; justify-content: space-between; gap: 8px; width: 100%; max-width: 520px; }
.xp-dev__track-line { position: absolute; left: 7%; right: 7%; top: 15px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.16); overflow: hidden; }
.xp-dev__track-fill { display: block; height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, var(--blush-300), var(--butter-200), var(--sage-300)); transition: width .25s linear; }
.xp-dev__stage { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--lavender-300); opacity: 0.5; transition: opacity .4s, color .4s; }
.xp-dev__stage b { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 800; background: var(--lavender-800); border: 2px solid rgba(255,255,255,0.18); transition: background .4s, border-color .4s, transform .4s var(--ease-out); }
.xp-dev__stage span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.xp-dev__stage.on { opacity: 1; color: #fff; }
.xp-dev__stage.on b { background: linear-gradient(150deg, var(--lavender-400), var(--blush-300)); border-color: #fff; transform: scale(1.12); }
.xp-dev__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 6vw, 3rem); letter-spacing: -0.02em; color: #fff; margin: 0; min-height: 1.2em; }
.xp-dev__cap { color: var(--lavender-200); max-width: 34ch; margin: 0 auto; line-height: 1.55; min-height: 3em; }

/* ============================================================
   SECTION 05 — Equipe
   ============================================================ */
.xp-team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; }
.xp-member { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--white); }
.xp-member__photo { width: 100%; aspect-ratio: 3 / 4; }
.xp-member__cap { position: absolute; inset-inline: 0; bottom: 0; padding: 16px; background: linear-gradient(to top, rgba(58,44,80,0.82), transparent); color: #fff; }
.xp-member__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.xp-member__role { font-size: 0.82rem; font-weight: 700; opacity: 0.92; }
.xp-member__desc { font-size: 0.8rem; line-height: 1.45; margin-top: 6px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease-out), opacity .35s, margin-top .4s; }
.xp-member:hover .xp-member__desc { max-height: 80px; opacity: 1; }

/* ============================================================
   SECTION 06 — Especialidades (possibility → specialty)
   ============================================================ */
.xp-poss { display: flex; flex-direction: column; gap: 0; margin-top: 36px; border-top: 1px solid var(--border); }
.xp-poss__row { display: flex; flex-direction: column; gap: 10px; padding: 24px 4px; border-bottom: 1px solid var(--border); cursor: default; transition: padding-left .35s var(--ease-out); }
.xp-poss__row:hover { padding-left: 14px; }
.xp-poss__top { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
.xp-poss__word { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 6.5vw, 2.8rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--text-heading); transition: color .3s; }
.xp-poss__row:hover .xp-poss__word { color: var(--lavender-600); }
.xp-poss__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-poss__tag { display: inline-flex; align-items: center; background: var(--white); color: var(--lavender-700); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.01em; padding: 7px 15px; border-radius: 999px; box-shadow: var(--shadow-xs); border: 1px solid var(--border); white-space: nowrap; transition: background .3s var(--ease-soft), color .3s, transform .3s var(--ease-out), box-shadow .3s; }
.xp-poss__row:hover .xp-poss__tag { background: var(--lavender-600); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: transparent; }
.xp-poss__desc { font-size: 0.95rem; color: var(--text-body); line-height: 1.5; max-width: 60ch; }

/* ============================================================
   SECTION 07 — Resultados (progress)
   ============================================================ */
.xp-res__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 44px; }
.xp-res__card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-xs); }
.xp-res__top { display: flex; align-items: center; justify-content: space-between; }
.xp-res__label { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text-heading); }
.xp-res__icon { font-size: 1.5rem; }
.xp-res__bar { height: 10px; border-radius: 999px; background: var(--lavender-100); margin-top: 16px; overflow: hidden; }
.xp-res__fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--lavender-400), var(--blush-300)); transition: width 1.4s var(--ease-out); }
.xp-res__note { margin-top: 14px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* ============================================================
   SECTION 08 — Tour (horizontal scroll)
   ============================================================ */
.xp-tour__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.xp-tour__hint { font-size: 0.82rem; font-weight: 700; color: var(--lavender-500); display: inline-flex; align-items: center; gap: 8px; }
.xp-tour__scroller { display: flex; gap: 16px; margin-top: 32px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.xp-tour__scroller::-webkit-scrollbar { display: none; }
.xp-tour__card { flex: 0 0 78%; max-width: 360px; scroll-snap-align: center; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--white); position: relative; }
.xp-tour__photo { width: 100%; aspect-ratio: 4 / 5; }
.xp-tour__cap { position: absolute; inset-inline: 0; bottom: 0; padding: 18px; background: linear-gradient(to top, rgba(58,44,80,0.8), transparent); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }

/* ============================================================
   SECTION 09 — Depoimentos
   ============================================================ */
.xp-quote { background: linear-gradient(155deg, var(--lavender-200), var(--blush-200) 70%, var(--butter-200)); border-radius: var(--radius-xl); padding: clamp(28px, 7vw, 60px); box-shadow: var(--shadow-lg); }
.xp-quote__mark { font-family: var(--font-display); font-size: 3.4rem; line-height: 0.4; color: rgba(255,255,255,0.7); }
.xp-quote__text { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 5vw, 2.2rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--lavender-900); margin: 18px 0 0; text-wrap: balance; }
.xp-quote__by { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.xp-quote__av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: var(--shadow-sm); }
.xp-quote__name { font-weight: 800; color: var(--lavender-900); }
.xp-quote__role { font-size: 0.85rem; color: var(--lavender-700); font-weight: 700; }
.xp-quote__small { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
.xp-mini { background: rgba(255,255,255,0.7); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; backdrop-filter: blur(6px); }
.xp-mini__text { color: var(--text-heading); font-weight: 600; line-height: 1.45; }
.xp-mini__by { font-size: 0.82rem; color: var(--lavender-700); font-weight: 700; margin-top: 10px; }
.xp-quote__disc { text-align: center; color: var(--text-muted); font-size: 0.78rem; margin-top: 22px; }

/* ============================================================
   SECTION 10 — CTA final
   ============================================================ */
.xp-cta { text-align: center; }
.xp-cta__split { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 1000px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--white); }
/* left aside: solid plum panel + framed photo (guaranteed contrast, drop stays free) */
.xp-cta__aside { position: relative; background: linear-gradient(160deg, var(--lavender-800), var(--lavender-900)); color: #fff; padding: clamp(26px, 5vw, 44px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.xp-cta__photo { width: 100%; height: clamp(150px, 22vw, 200px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); --is-bg: rgba(255,255,255,0.08); flex: none; }
.xp-cta__eyebrow { color: var(--lavender-200) !important; margin: 4px 0 0; }
.xp-cta__aside h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 4.4vw, 2.3rem); line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin: 0; text-wrap: balance; }
.xp-cta__aside-sub { color: var(--lavender-100); line-height: 1.5; margin: 0; font-size: 0.98rem; }
.xp-cta__points { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.xp-cta__points li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.92rem; color: #fff; }
.xp-cta__points li::before { content: "🦋"; font-size: 0.95rem; }
.xp-cta__panel { background: var(--white); padding: clamp(28px, 5vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.xp-form { display: flex; flex-direction: column; gap: 13px; text-align: left; }
.xp-field label { font-weight: 800; font-size: 0.85rem; color: var(--text-heading); display: block; margin-bottom: 6px; }
.xp-field input, .xp-field textarea { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--text-body); background: var(--cream); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); padding: 13px 16px; outline: none; transition: border .2s, box-shadow .2s; }
.xp-field input:focus, .xp-field textarea:focus { border-color: var(--lavender-400); box-shadow: var(--shadow-focus); background: #fff; }
.xp-form__alt { margin-top: 4px; font-size: 0.86rem; color: var(--text-muted); }
.xp-form__alt a { color: var(--lavender-700); font-weight: 800; text-decoration: none; }
.xp-sent { text-align: center; padding: 18px 0; }
.xp-sent__emoji { font-size: 3rem; }
.xp-sent h3 { font-family: var(--font-display); font-weight: 600; color: var(--text-heading); font-size: 1.5rem; margin: 12px 0 6px; }

/* ============================================================
   FOOTER
   ============================================================ */
.xp-foot { background: var(--lavender-900); color: var(--lavender-200); padding: 64px 0 28px; margin-top: clamp(24px,4vw,48px); }
.xp-foot__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.xp-foot__logo { height: 56px; width: auto; filter: brightness(0) invert(1); opacity: 0.95; }
.xp-foot h4 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #fff; margin: 0 0 12px; }
.xp-foot p { margin: 0; line-height: 1.6; font-size: 0.92rem; }
.xp-foot__bar { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.78rem; color: var(--lavender-300); }

/* floating sticky mobile CTA */
.xp-fab { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; transform: translateY(140%); transition: transform .5s var(--ease-out); }
.xp-fab.is-on { transform: none; }
.xp-fab .xp-btn { width: 100%; box-shadow: 0 12px 36px rgba(113,80,160,0.45); }

/* image-slot styling inside this page */
image-slot { width: 100%; height: 100%; display: block; --is-bg: var(--lavender-100); }

/* ============================================================
   RESPONSIVE — expand from 390px base
   ============================================================ */
@media (min-width: 680px) {
  .xp-wrap { padding-inline: 32px; }
  .xp-team__grid { grid-template-columns: repeat(3, 1fr); }
  .xp-res__grid { grid-template-columns: 1fr 1fr; }
  .xp-quote__small { grid-template-columns: 1fr 1fr; }
  .xp-poss__row { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .xp-poss__desc { max-width: 34ch; text-align: right; flex: none; }
  .xp-tour__card { flex-basis: 48%; }
  .xp-foot__grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .xp-cta__split { grid-template-columns: 1fr 1fr; }
  .xp-cta__aside { min-height: 100%; }
}
@media (min-width: 980px) {
  .xp-nav__links { display: flex; }
  .xp-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 48px; }
  .xp-stage { max-width: 520px; }
  .xp-team__grid { grid-template-columns: repeat(4, 1fr); }
  .xp-res__grid { grid-template-columns: repeat(4, 1fr); }
  .xp-tour__card { flex-basis: 32%; }
  .xp-fab { display: none; }
  .xp-dev { margin-inline: 0; }

  /* dúvidas: grid 3 colunas, mãe no centro, sem transform no retrato (reveal não quebra a centralização) */
  .xp-doubts__stage { display: grid; grid-template-columns: minmax(0,1fr) 280px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 64px; row-gap: 48px; align-items: center; max-width: 1040px; margin: 48px auto 0; }
  .xp-doubts__portrait { grid-column: 2; grid-row: 1; width: 280px; position: relative; order: 0; }
  .xp-thought { position: relative; width: 100%; max-width: 330px; }
  .xp-thought--1 { grid-column: 1; grid-row: 1; justify-self: end; text-align: left; margin-bottom: 90px; }
  .xp-thought--2 { grid-column: 3; grid-row: 1; justify-self: start; text-align: left; margin-bottom: 90px; }
  .xp-thought--3 { grid-column: 1 / -1; grid-row: 2; justify-self: center; text-align: center; max-width: 380px; }
  /* tails: dots shrink toward her head */
  .xp-thought--1 .xp-thought__tail { flex-direction: row-reverse; align-items: center; left: auto; right: -50px; top: auto; bottom: -6px; transform: none; }
  .xp-thought--2 .xp-thought__tail { flex-direction: row; align-items: center; left: -50px; right: auto; top: auto; bottom: -6px; transform: none; }
  .xp-thought--3 .xp-thought__tail { flex-direction: column; left: 50%; right: auto; top: -40px; bottom: auto; transform: translateX(-50%); }
  .xp-thought.is-in { transform: none; animation: xp-thought-float 7s var(--ease-soft) infinite; }
  .xp-thought--2.is-in { animation-delay: -2.3s; }
  .xp-thought--3.is-in { animation-delay: -4.6s; }
  @keyframes xp-thought-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-scale, .xp-word { opacity: 1 !important; transform: none !important; }
  .xp-draw { stroke-dashoffset: 0 !important; }
}

img.xp-casa__photo,img.xp-tour__photo,img.xp-cta__photo{display:block;width:100%;object-fit:cover}
img.xp-casa__photo{aspect-ratio:4/3;height:auto}

/* equipe: 2 profissionais fixos + cartão da equipe */
.xp-member--team{background:var(--lavender-100);box-shadow:none;border:1px solid var(--border);grid-column:1/-1}
.xp-team-card{height:100%;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.xp-team-card__title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,4vw,1.6rem);line-height:1.2;color:var(--text-heading);margin:0;text-wrap:balance}
.xp-team-card__tags{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:680px){.xp-team__grid{grid-template-columns:1fr 1fr 1.2fr !important}.xp-member--team{grid-column:auto}.xp-team-card{padding:32px}}

/* resposta às dúvidas: cartão ancorado em vez de texto solto */
.xp-answer{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:920px;margin:clamp(36px,6vw,56px) auto 0;padding:clamp(22px,4vw,32px);background:#fff;border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);text-align:left}
.xp-answer__mark{flex:none;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;background:linear-gradient(150deg,var(--lavender-100),var(--blush-100))}
.xp-answer__text{flex:1;min-width:0}
.xp-answer__title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,3.6vw,1.65rem);line-height:1.2;letter-spacing:-0.01em;color:var(--text-heading);margin:0}
.xp-answer__sub{margin:8px 0 0;font-size:1rem;line-height:1.55;color:var(--text-body);max-width:58ch}
.xp-answer__cta{flex:none}
@media (min-width:860px){.xp-answer{flex-direction:row;align-items:center;gap:24px}}

/* hero h1: 2 linhas no desktop, tamanho contido */
.xp-hero h1{font-size:clamp(2.5rem,9.5vw,3.9rem);line-height:1.02;max-width:13ch}
@media (min-width:980px){.xp-hero h1{font-size:clamp(3rem,4.4vw,4rem);max-width:none}.xp-hero{padding-top:110px}}

/* ===== CTA hover states ===== */
.xp-btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .3s var(--ease-soft),color .3s,border-color .3s}
.xp-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(187,166,216,.6)}
.xp-btn--primary{background:linear-gradient(135deg,var(--lavender-700),var(--lavender-600));}
.xp-btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,var(--lavender-800),var(--lavender-700) 55%,#9a6fb8);opacity:0;transition:opacity .35s var(--ease-soft)}
.xp-btn--primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .7s var(--ease-out)}
.xp-btn--primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(113,80,160,.42),0 0 0 6px rgba(187,166,216,.22)}
.xp-btn--primary:hover::before{opacity:1}
.xp-btn--primary:hover::after{left:120%}
.xp-btn--ghost:hover{background:#fff;color:var(--lavender-800);box-shadow:inset 0 0 0 2px var(--lavender-400),0 12px 28px rgba(113,80,160,.16);transform:translateY(-3px)}
.xp-btn:active{transform:translateY(0) scale(.97);transition-duration:.12s}
@media (prefers-reduced-motion:reduce){.xp-btn:hover{transform:none}.xp-btn--primary::after{display:none}}

@media (min-width:980px){.xp-hero__grid{grid-template-columns:1.3fr 0.7fr}.xp-hero h1{font-size:clamp(2.8rem,4vw,3.6rem)}}

/* footer: logo original sobre selo claro (sem inverter) + links de contato */
.xp-foot__logo{filter:none !important;opacity:1 !important;height:auto;width:150px;background:#fff;padding:12px 16px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);box-sizing:content-box}
.xp-foot__contact{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.xp-foot__contact a{color:var(--lavender-100);text-decoration:none;font-weight:700;border-bottom:1.5px solid rgba(224,202,237,.35);padding-bottom:2px;transition:color .25s,border-color .25s}
.xp-foot__contact a:hover{color:#fff;border-color:var(--blush-300)}

/* ===== FOOTER (v2: hierarquia em 4 colunas) ===== */
.xp-foot{padding:clamp(48px,7vw,72px) 0 24px}
.xp-foot__top{display:grid;grid-template-columns:1fr;gap:36px}
.xp-foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.xp-foot__logo{width:132px}
.xp-foot__tagline{margin:0;color:var(--lavender-200);line-height:1.6;font-size:.95rem;max-width:34ch}
.xp-foot__label{margin:0 0 14px;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lavender-300)}
.xp-foot__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.xp-foot__list a,.xp-foot__plain{color:var(--lavender-100);text-decoration:none;font-weight:600;font-size:.95rem;line-height:1.5}
.xp-foot__list a{display:inline-flex;flex-direction:column;transition:color .25s}
.xp-foot__list a:hover{color:#fff}
.xp-foot__list a:hover .xp-foot__k{color:var(--blush-300)}
.xp-foot__k{font-size:.72rem;font-weight:700;color:var(--lavender-300);letter-spacing:.04em;transition:color .25s}
.xp-foot__bar{margin-top:clamp(36px,5vw,56px);padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:.8rem;color:var(--lavender-300)}
@media (min-width:680px){.xp-foot__top{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.xp-foot__top{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}}

/* ===== FOOTER v3: linha de marca + 3 cartões iguais ===== */
.xp-foot__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.xp-foot__nav{display:flex;flex-wrap:wrap;gap:10px 28px}
.xp-foot__nav a{color:var(--lavender-100);text-decoration:none;font-weight:700;font-size:.95rem;transition:color .25s}
.xp-foot__nav a:hover{color:#fff}
.xp-foot__info{display:grid;grid-template-columns:1fr;gap:14px;margin-top:clamp(28px,4vw,40px)}
.xp-foot__item{display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box;padding:20px 22px;border-radius:var(--radius-lg);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);text-decoration:none;transition:background .3s,border-color .3s,transform .35s var(--ease-out)}
.xp-foot__item:hover{background:rgba(255,255,255,.09);border-color:rgba(234,181,198,.5);transform:translateY(-3px)}
.xp-foot__label{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lavender-300)}
.xp-foot__value{font-family:var(--font-display);font-weight:600;font-size:1.1rem;line-height:1.3;color:#fff;flex:1}
.xp-foot__more{font-size:.85rem;font-weight:700;color:var(--lavender-200);transition:color .25s}
.xp-foot__item:hover .xp-foot__more{color:var(--blush-300)}
@media (min-width:680px){.xp-foot__info{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:979px){.xp-foot__nav{order:3;width:100%}}

/* tour: drag sem conflito com snap/arrasto de imagem + setas + progresso */
.xp-tour__scroller{cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.xp-tour__scroller:focus-visible{box-shadow:0 0 0 3px var(--lavender-300);border-radius:var(--radius-lg)}
.xp-tour__scroller.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.xp-tour__scroller img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.xp-tour__controls{display:flex;align-items:center;gap:10px}
.xp-tour__arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--border-strong);background:#fff;color:var(--lavender-700);font-size:1.15rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-xs);transition:background .25s,color .25s,transform .3s var(--ease-out),opacity .25s,border-color .25s}
.xp-tour__arrow:hover:not(:disabled){background:var(--lavender-700);color:#fff;border-color:transparent;transform:translateY(-2px)}
.xp-tour__arrow:disabled{opacity:.35;cursor:default}
.xp-tour__progress{height:4px;border-radius:4px;background:var(--lavender-100);margin-top:8px;overflow:hidden}
.xp-tour__progress i{display:block;height:100%;width:8%;border-radius:4px;background:linear-gradient(90deg,var(--lavender-400),var(--blush-300));transition:width .2s linear}
@media (max-width:679px){.xp-tour__arrow{display:none}}

.xp-tour__card{scroll-snap-align:start}
.xp-tour__scroller{scroll-padding-inline:0}

.xp-foot__routes{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.xp-foot__route{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,0.1);color:#fff;font-weight:800;font-size:0.82rem;text-decoration:none;border:1px solid rgba(255,255,255,0.18);transition:background .25s,border-color .25s,transform .3s var(--ease-out)}
.xp-foot__route:hover{background:var(--blush-300);color:var(--lavender-900);border-color:transparent;transform:translateY(-2px)}

/* depoimentos reais (Google) */
.xp-rv__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px}
.xp-rv__badge{display:inline-flex;align-items:center;gap:14px;padding:12px 20px 12px 16px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);text-decoration:none;transition:transform .3s var(--ease-out),box-shadow .3s}
.xp-rv__badge:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.xp-rv__score{font-family:var(--font-display);font-weight:600;font-size:2.2rem;line-height:1;color:var(--text-heading)}
.xp-rv__badge-txt{display:flex;flex-direction:column;gap:2px}
.xp-rv__badge-txt small{font-size:.82rem;font-weight:700;color:var(--ink-500)}
.xp-rv__stars{color:#e4a72b;letter-spacing:2px;font-size:1rem;line-height:1}
.xp-rv__stars--dark{color:#a36b00;font-size:.85rem}
.xp-rv__featured{margin:0}
.xp-rv__featured blockquote{margin:18px 0 0}
.xp-rv__grid{columns:1;column-gap:16px;margin-top:16px}
.xp-rv__card{break-inside:avoid;margin:0 0 16px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:14px;transition:transform .3s var(--ease-out),box-shadow .3s}
.xp-rv__card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.xp-rv__card blockquote{margin:0;color:var(--text-heading);font-size:1rem;line-height:1.55;font-weight:500}
.xp-rv__card figcaption{display:flex;align-items:center;gap:12px}
.xp-rv__card figcaption b{display:block;color:var(--text-heading);font-size:.92rem}
.xp-rv__card figcaption small{font-size:.78rem;color:var(--ink-500);font-weight:700}
.xp-rv__av{width:40px;height:40px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--lavender-900)}
.xp-rv__av--blush{background:var(--blush-200)}.xp-rv__av--sage{background:var(--sage-200)}.xp-rv__av--butter{background:var(--butter-200)}.xp-rv__av--lavender{background:var(--lavender-200)}
.xp-rv__av--white{width:52px;height:52px;background:rgba(255,255,255,.75);font-size:1.3rem}
.xp-rv__more{display:flex;justify-content:center;margin-top:12px}
@media (min-width:680px){.xp-rv__grid{columns:2}}
@media (min-width:980px){.xp-rv__grid{columns:3}}

.xp-cta__photo{height:clamp(190px,30vw,260px);object-fit:cover;object-position:center 60%}
.xp-cta__aside,.xp-cta__aside h2,.xp-cta__aside-sub{text-align:left}

.xp-member__partner{display:inline-flex;align-self:flex-start;margin:2px 0 4px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.22);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(4px)}

/* botão flutuante WhatsApp */
.xp-wa-float{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:10px;height:58px;padding:0 14px;border-radius:999px;background:#25D366;color:#fff;font-weight:800;font-size:.95rem;text-decoration:none;box-shadow:0 10px 28px rgba(18,140,70,.35);transition:transform .3s var(--ease-out),box-shadow .3s}
.xp-wa-float:hover{color:#fff;transform:translateY(-3px);box-shadow:0 16px 36px rgba(18,140,70,.42)}
.xp-wa-float__label{display:none;padding-right:6px}
@media (min-width:680px){.xp-wa-float{right:24px;bottom:24px;padding:0 18px 0 14px}.xp-wa-float__label{display:inline}}
@media print{.xp-wa-float{display:none}}

/* mobile polish: touch targets ≥44px, labels ≥12px */
@media (max-width:679px){
  .xp-btn--sm{min-height:44px;padding-inline:18px}
  .xp-foot__route{min-height:44px;padding-inline:16px}
  .xp-foot a:not(.xp-foot__item):not(.xp-btn):not(.xp-foot__route){display:inline-flex;align-items:center;min-height:44px}
  .xp-nav__in>a:first-child{display:inline-flex;align-items:center;min-height:44px}
  .xp-dev__stage span{font-size:.78rem}
  .xp-member__partner{font-size:.75rem}
}