/* Cheiro Bom Lavanderia Express — paleta e tipografia do panfleto "Divulgação" */

@property --ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  color-scheme: light;

  /* Paleta do panfleto */
  --indigo: #535D82;        /* títulos e texto */
  --pink: #DA6EAC;          /* destaques grandes (3.08:1, só texto ≥ 24px) */
  --teal: #5FC7C7;          /* formas e ícones (decorativo) */
  /* Variações para contraste WCAG */
  --ink: #2A3050;
  --pink-ink: #B8458E;      /* 4.91:1 texto pequeno */
  --teal-title: #2F9C9C;    /* 3.3:1 títulos grandes */
  --teal-ink: #1F7A7A;      /* 5.09:1 texto pequeno */
  --lav: #C9B7E3;
  --blush: #F6DCEA;
  --mint: #E6F6F6;
  --paper: #FFFFFF;
  --mist: #F5F7FB;
  --line: #E3E7F0;

  /* Tipografia do panfleto */
  --f-display: "League Gothic", "Oswald", "Arial Narrow", sans-serif;
  --f-body: "Aleo", Georgia, serif;
  --f-num: "Lato", system-ui, sans-serif;

  --step--1: clamp(.9rem, .86rem + .2vw, 1rem);
  --step-0: clamp(1rem, .95rem + .25vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
  --step-2: clamp(1.55rem, 1.2rem + 1.6vw, 2.5rem);
  --step-3: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);
  --step-4: clamp(3.2rem, 1.4rem + 5vw, 6.4rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --wrap: 1200px;
  --radius: clamp(20px, 2.4vw, 32px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --glass: color-mix(in oklab, white 68%, transparent);
  --shadow: 0 30px 60px -30px rgb(83 93 130 / .35);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font: 400 var(--step-0)/1.65 var(--f-body);
  color: var(--indigo);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ol, ul { margin: 0; padding: 0; list-style: none; }

.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--indigo); color: #fff; padding: .7rem 1rem; border-radius: 12px;
  &:focus { top: 1rem; }
}
:focus-visible { outline: 3px solid var(--pink-ink); outline-offset: 3px; border-radius: 8px; }

/* ── Flores e folhas flutuando ───────────────────────────── */
.brisa { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.p {
  position: absolute; top: 0; left: var(--x);
  width: calc(var(--s) * 1.5); height: calc(var(--s) * 1.5);
  fill: var(--c); opacity: .85;
  filter: drop-shadow(0 4px 6px rgb(83 93 130 / .18));
  animation: brisa var(--d) linear var(--w) infinite;
  will-change: transform;
}
.folha { --nervura: #fff; }
@keyframes brisa {
  0%   { transform: translate(0, -12vh) rotate(0deg); }
  25%  { transform: translate(var(--dx), 22vh) rotate(100deg); }
  50%  { transform: translate(0, 52vh) rotate(190deg); }
  75%  { transform: translate(calc(var(--dx) * -1), 82vh) rotate(290deg); }
  100% { transform: translate(0, 115vh) rotate(380deg); }
}

/* ── Topo com vidro e barra de progresso ─────────────────── */
.topbar {
  position: fixed; inset: .75rem var(--gutter) auto; z-index: 50;
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--wrap); margin-inline: auto;
  padding: .5rem .5rem .5rem 1rem;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgb(255 255 255 / .8);
  border-radius: 999px;
  box-shadow: 0 10px 30px -18px rgb(83 93 130 / .5);
  overflow: hidden;

  .nav { display: flex; align-items: center; gap: .15rem; margin-inline: auto; }
  .nav a {
    font: 400 1.35rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em;
    text-decoration: none; padding: .55rem .7rem; border-radius: 999px; white-space: nowrap;
    transition: background .25s var(--ease), color .25s var(--ease);
    &:hover { background: var(--blush); color: var(--pink-ink); }
  }
  .nav-client { display: inline-flex; align-items: center; gap: .35rem; color: var(--pink-ink); .ico { width: 1rem; height: 1rem; } }

  &::after {
    content: ""; position: absolute; inset: auto 0 0; height: 3px;
    background: linear-gradient(90deg, var(--pink), var(--teal));
    transform-origin: left; scale: 0 1;
  }
}
@supports (animation-timeline: scroll()) {
  .topbar::after { animation: progresso linear both; animation-timeline: scroll(root); }
}
@keyframes progresso { to { scale: 1 1; } }

.brand {
  display: flex; align-items: center; gap: .6rem; text-decoration: none; line-height: 1; white-space: nowrap;
  .brand-ico { width: 2rem; height: 2rem; color: var(--pink); stroke-width: 1.7; }
  strong { display: block; font: 400 1.7rem/.9 "League Gothic", "Arial Narrow", sans-serif; text-transform: uppercase; color: var(--indigo); }
  span span { display: block; font: 400 .95rem/1 "League Gothic", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--pink-ink); }
}

/* ── Botões ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .8rem 1.5rem;
  font: 700 1rem/1 var(--f-num); letter-spacing: .01em; text-decoration: none;
  color: #fff; background: var(--indigo);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 14px 30px -14px rgb(83 93 130 / .8);
  transition: translate .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  &:hover { translate: 0 -2px; background: var(--ink); box-shadow: 0 20px 36px -16px rgb(83 93 130 / .9); }
  &:active { translate: 0 0; }
  .ico { transition: translate .3s var(--ease); }
  &:hover .ico { translate: 3px 0; }
}
.btn-sm { min-height: 44px; padding: .6rem 1.1rem; font-size: .95rem; }
.btn-ghost {
  color: var(--indigo); background: var(--glass); box-shadow: inset 0 0 0 1.5px var(--indigo);
  backdrop-filter: blur(10px);
  &:hover { background: #fff; }
}

/* ── Círculos em gradiente (assinatura do panfleto) ──────── */
.orb {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(var(--ang), var(--o1), var(--o2));
  animation: orb-gira 16s linear infinite, orb-flutua 14s ease-in-out infinite alternate;
}
.orb-pink { --o1: #DA6EAC; --o2: #F6E4EF; width: clamp(320px, 48vw, 720px); aspect-ratio: 1; top: -12%; right: -10%; }
.orb-teal { --o1: #5FC7C7; --o2: #F2FBFB; width: clamp(200px, 26vw, 400px); aspect-ratio: 1; bottom: -8%; left: 32%; animation-delay: -5s; }
.orb-lav  { --o1: #8E93B8; --o2: #F3CFE3; width: clamp(90px, 10vw, 160px); aspect-ratio: 1; top: 12%; left: 22%; opacity: .55; animation-delay: -9s; }
.orb-sm   { width: clamp(160px, 20vw, 300px); top: 6%; right: -6%; left: auto; bottom: auto; opacity: .7; }
@keyframes orb-gira { to { --ang: 360deg; } }
@keyframes orb-flutua { to { translate: 0 -28px; scale: 1.04; } }

/* ── Seções ──────────────────────────────────────────────── */
.section {
  position: relative; isolation: isolate;
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
  padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
}
main { position: relative; z-index: 2; }
.section-mist { background: linear-gradient(180deg, rgb(245 247 251 / .75), transparent); }
.section-head {
  position: relative; z-index: 1;
  display: grid; gap: .9rem; max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.5rem);
  &.center { margin-inline: auto; text-align: center; justify-items: center; }
  h2 { font: 700 var(--step-2)/1.2 var(--f-body); color: var(--indigo); }
}
.kicker { font: 400 var(--step-3)/.95 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.k-pink { color: var(--pink); }
.k-teal { color: var(--teal-title); }
.lead { font-size: var(--step-1); line-height: 1.55; font-weight: 300; }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  display: grid; align-items: center; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  min-height: 100svh;
  padding-block: 7.5rem 4rem;
  padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
}
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr .95fr; } }

.hero-copy { position: relative; z-index: 1; display: grid; gap: 1.5rem; }
.tag {
  display: inline-flex; align-items: center; gap: .5rem; justify-self: start;
  padding: .45rem .9rem .45rem .6rem; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--line);
  font-weight: 700; font-size: var(--step--1);
  .ico { color: var(--pink); }
}
.hero h1 {
  font: 400 var(--step-4)/.96 var(--f-display); text-transform: uppercase; letter-spacing: .005em;
  color: var(--indigo);
  span { display: block; }
  .t-teal { color: var(--teal-title); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero h1 span { animation: sobe .9s var(--ease) both; }
    .hero h1 span + span { animation-delay: .12s; }
  }
}
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.triad {
  display: grid; gap: .9rem; margin-top: .5rem;
  li { display: grid; grid-template-columns: 3.2rem 1fr; align-items: center; gap: .9rem; border-left: 0; }
  b {
    font: 400 2.6rem/1 var(--f-display); color: var(--pink);
    padding-right: .8rem; border-right: 2.5px solid var(--indigo);
  }
}

.hero-visual { position: relative; z-index: 1; justify-self: center; width: min(100%, 580px); }
.hero-img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  box-shadow: var(--shadow), 0 0 0 clamp(8px, 1.4vw, 16px) rgb(255 255 255 / .55);
}
.chip {
  position: absolute; display: grid; gap: .1rem; padding: .7rem 1rem; border-radius: 18px;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgb(255 255 255 / .85); box-shadow: 0 16px 40px -20px rgb(83 93 130 / .6);
  animation: flutua 6s ease-in-out infinite alternate;
  strong { font: 900 clamp(1.1rem, .9rem + 1vw, 1.5rem)/1 var(--f-num); color: var(--indigo); }
  span { font-size: .85rem; line-height: 1.2; color: var(--indigo); }
}
.chip-a { top: 6%; left: -4%; }
.chip-b { top: 40%; right: -6%; animation-delay: -2s; strong { color: var(--pink-ink); } }
.chip-c { bottom: 2%; right: 10%; animation-delay: -4s; }
.hero-wm { position: absolute; left: -2%; bottom: -4%; --w: clamp(96px, 15vw, 170px); }
@keyframes flutua { to { translate: 0 -12px; } }
@keyframes sobe { from { opacity: 0; translate: 0 40px; } }

/* ── Máquina de lavar animada (CSS puro) ─────────────────── */
.wm {
  --w: 150px; --spin: 3s;
  position: relative; width: var(--w); aspect-ratio: 5 / 6; flex: none;
  border-radius: calc(var(--w) * .12);
  padding: 0; font: inherit; cursor: pointer;
  background: linear-gradient(165deg, #fff 30%, #E8ECF5);
  border: 2px solid #D5DBE9;
  box-shadow: inset 0 calc(var(--w) * -.05) 0 #DCE1EE, 0 22px 40px -22px rgb(83 93 130 / .6);
}
.wm-panel {
  position: absolute; inset: 7% 9% auto; height: 15%; border-radius: calc(var(--w) * .05);
  background: #E3E8F2;
  &::before {
    content: ""; position: absolute; left: 8%; top: 25%; width: 42%; height: 50%; border-radius: 4px;
    background: linear-gradient(90deg, var(--indigo), #6E78A0);
  }
  &::after {
    content: ""; position: absolute; right: 10%; top: 50%; width: calc(var(--w) * .07); aspect-ratio: 1;
    translate: 0 -50%; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink);
    animation: pisca 1.2s steps(2) infinite;
  }
}
.wm-door {
  position: absolute; left: 50%; top: 61%; width: 68%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; overflow: hidden; background: #DCE3F0;
  border: calc(var(--w) * .045) solid #C3CBDF;
  box-shadow: inset 0 0 0 calc(var(--w) * .015) #fff;
  &::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 3;
    background: linear-gradient(135deg, rgb(255 255 255 / .75) 0 16%, transparent 38%);
  }
}
.wm-drum {
  position: absolute; inset: 6%; border-radius: 50%; z-index: 1;
  background: conic-gradient(var(--pink) 0 48deg, transparent 0 96deg, var(--teal) 0 158deg,
    transparent 0 205deg, var(--lav) 0 262deg, transparent 0 300deg, #F4B9D6 0 340deg, transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 36% 100%);
          mask: radial-gradient(circle, transparent 0 34%, #000 36% 100%);
  filter: blur(.6px);
  animation: gira var(--spin) linear infinite;
}
.wm-water {
  position: absolute; inset: 0; z-index: 2;
  &::before {
    content: ""; position: absolute; left: -50%; top: var(--nivel); width: 200%; aspect-ratio: 1; border-radius: 42%;
    background: rgb(95 199 199 / .42);
    animation: gira 5s linear infinite;
  }
}
.wm-bubbles {
  position: absolute; inset: 0; z-index: 2;
  &::before, &::after {
    content: ""; position: absolute; bottom: 12%; left: 35%;
    width: 9%; aspect-ratio: 1; border-radius: 50%;
    border: 1.5px solid rgb(255 255 255 / .9);
    box-shadow: calc(var(--w) * .12) calc(var(--w) * .06) 0 -1px rgb(255 255 255 / .8);
    animation: bolha 2.4s ease-in infinite;
  }
  &::after { left: 55%; width: 6%; animation-delay: -1.2s; }
}
/* Parada por padrão; anima no hover (mouse) ou ao tocar/clicar (.ligada) */
.wm, .wm *, .wm::before, .wm::after, .wm *::before, .wm *::after { animation-play-state: paused; }
.wm.ligada, .wm.ligada *, .wm.ligada::before, .wm.ligada::after, .wm.ligada *::before, .wm.ligada *::after { animation-play-state: running; }
@media (hover: hover) {
  .wm:hover, .wm:hover *, .wm:hover::before, .wm:hover::after, .wm:hover *::before, .wm:hover *::after { animation-play-state: running; }
}
.wm { transition: scale .3s var(--ease); }
.wm:hover, .wm.ligada { scale: 1.04; }
/* Estados */
.wm--idle {
  .wm-drum { --spin: 6s; opacity: .55; }
  .wm-water, .wm-bubbles { display: none; }
  .wm-panel::before { background: repeating-conic-gradient(var(--indigo) 0 25%, #fff 0 50%) 0 0 / 6px 6px; width: 22%; left: 10%; top: 15%; height: 70%; }
}
.wm--fill {
  --spin: 7s;
  .wm-water::before { animation: gira 5s linear infinite, enche 4.5s ease-in-out infinite alternate; }
}
.wm--spin {
  --spin: .8s;
  animation: treme .12s linear infinite alternate;
  .wm-water::before { --nivel: 64%; animation-duration: 1.4s; }
  .wm-panel::after { background: var(--teal); box-shadow: 0 0 10px var(--teal); animation-duration: .4s; }
}
.wm--done {
  .wm-drum { animation: gira 12s linear infinite; opacity: .9; }
  .wm-water, .wm-bubbles { display: none; }
  .wm-door { box-shadow: inset 0 0 0 calc(var(--w) * .015) #fff, 0 0 0 4px rgb(95 199 199 / .35); }
  .wm-panel::after { background: var(--teal); box-shadow: 0 0 12px var(--teal); animation: none; }
  &::before, &::after {
    content: ""; position: absolute; width: 14%; aspect-ratio: 1; background: var(--pink);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: brilho 2s ease-in-out infinite;
  }
  &::before { top: -6%; right: -6%; }
  &::after { top: 30%; left: -9%; width: 9%; background: var(--teal); animation-delay: -1s; }
}
@keyframes gira { to { rotate: 360deg; } }
@keyframes pisca { 50% { opacity: .25; } }
@keyframes treme { from { translate: -.6px 0; } to { translate: .6px -.6px; } }
@keyframes enche { from { --nivel: 100%; } }
@keyframes bolha { from { opacity: 0; translate: 0 0; } 20% { opacity: 1; } to { opacity: 0; translate: 0 calc(var(--w) * -.45); } }
@keyframes brilho { 50% { scale: .4; rotate: 45deg; opacity: .5; } }
@property --nivel { syntax: "<percentage>"; initial-value: 58%; inherits: true; }

/* ── Ciclo ──────────────────────────────────────────────── */
.ciclo-grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: none;
}
.ciclo-item {
  display: grid; justify-items: center; text-align: center; gap: .6rem;
  padding: 2rem 1.25rem 1.75rem; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--mist), #fff);
  border: 1px solid var(--line);
  transition: translate .4s var(--ease), box-shadow .4s var(--ease);
  &:hover { translate: 0 -6px; box-shadow: var(--shadow); }
  .wm { --w: 128px; margin-bottom: .8rem; }
  h3 { font: 700 var(--step-1)/1.2 var(--f-body); }
  p { font-size: var(--step--1); line-height: 1.55; }
}
.n, .step::before {
  display: grid; place-items: center; width: 3.2rem; aspect-ratio: 1; border-radius: 50%;
  font: 700 1.2rem/1 var(--f-num); color: var(--pink-ink);
  background: linear-gradient(135deg, var(--teal), #EAF8F8 85%);
}

/* ── Problema (bento) ────────────────────────────────────── */
.bento {
  position: relative; z-index: 1;
  display: grid; gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.card {
  display: grid; align-content: start; gap: .9rem;
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 50px -40px rgb(83 93 130 / .6);
  h3 { font: 700 var(--step-1)/1.25 var(--f-body); }
  p { font-size: var(--step--1); line-height: 1.7; }
  .check { width: 2.4rem; height: 2.4rem; color: var(--teal-title); stroke-width: 3; }
}
.card-dark {
  color: #fff; border: 0;
  background: radial-gradient(120% 120% at 0% 0%, #6A6FA0, var(--indigo) 45%, #6D4E86);
  .check { color: var(--teal); }
}

/* ── Solução: abas HTMX + View Transitions ───────────────── */
.tabs {
  position: relative; z-index: 1;
  display: inline-flex; gap: .3rem; padding: .35rem; margin-bottom: 2rem;
  border-radius: 999px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 10px 30px -20px rgb(83 93 130 / .6);
  button {
    min-height: 48px; padding: .7rem 1.4rem; border: 0; border-radius: 999px; cursor: pointer;
    font: 400 1.45rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em;
    color: var(--indigo); background: transparent;
    transition: background .3s var(--ease), color .3s var(--ease);
    &:hover { background: var(--mint); }
    &[aria-selected="true"] { background: var(--indigo); color: #fff; }
    &.htmx-request { opacity: .7; }
  }
}
.painel {
  position: relative; z-index: 1; container-type: inline-size;
  view-transition-name: painel;
}
.painel-lead { font: 700 var(--step-2)/1.2 var(--f-body); margin-bottom: 1.75rem; }
.steps { display: grid; gap: 1rem; counter-reset: passo; }
@container (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step {
  counter-increment: passo;
  display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .35rem; align-items: start; align-content: start;
  padding: 1.4rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
  &::before { content: counter(passo, decimal-leading-zero); grid-row: span 2; }
  h3 { font: 700 var(--step-0)/1.3 var(--f-body); align-self: center; }
  p { grid-column: 2; font-size: var(--step--1); line-height: 1.65; }
}
.reqs { display: grid; gap: .4rem; margin-top: .6rem; grid-column: 2;
  li { display: flex; gap: .5rem; font-size: var(--step--1); line-height: 1.5; }
  .ico { color: var(--teal-title); margin-top: .15rem; }
}
.painel-cta { margin-top: 1.75rem; }

::view-transition-old(painel) { animation: vt-sai .22s ease-in both; }
::view-transition-new(painel) { animation: vt-entra .45s var(--ease) both; }
@keyframes vt-sai { to { opacity: 0; translate: 0 -12px; filter: blur(4px); } }
@keyframes vt-entra { from { opacity: 0; translate: 0 18px; filter: blur(6px); } }

/* ── Contato ────────────────────────────────────────────── */
.contact-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.3fr .7fr; } }
.tiles { display: grid; gap: .9rem; position: relative; z-index: 1; }
.tile {
  display: flex; align-items: center; gap: 1rem; text-decoration: none;
  padding: 1rem 1.25rem; border-radius: var(--radius);
  background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line);
  transition: translate .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  &:hover { translate: 6px 0; box-shadow: var(--shadow); border-color: #F2CFE2; }
  > .ico {
    width: 3.4rem; height: 3.4rem; padding: .8rem; border-radius: 50%;
    color: #fff; background: var(--pink);
  }
  span { display: grid; min-width: 0; }
  small { font-size: var(--step--1); display: flex; align-items: center; gap: .5rem; }
  strong { font: 700 var(--step-1)/1.25 var(--f-num); color: var(--indigo); }
  .break { overflow-wrap: anywhere; font-size: clamp(1rem, .85rem + .7vw, 1.4rem); }
}
.tile-insta > .ico { background: linear-gradient(135deg, var(--pink), #8E93B8 60%, var(--teal)); }
.badge {
  font: 700 .7rem/1 var(--f-num); font-style: normal; text-transform: uppercase; letter-spacing: .08em;
  color: #fff; background: var(--pink-ink); padding: .3rem .5rem; border-radius: 999px;
}
.contact-img.round { aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: var(--shadow); }
.contact-img { width: min(100%, 420px); justify-self: center; filter: drop-shadow(0 30px 30px rgb(83 93 130 / .25)); }

/* ── Rodapé ─────────────────────────────────────────────── */
.footer {
  position: relative; z-index: 45;
  display: grid; gap: .4rem; justify-items: center; text-align: center;
  padding: 3rem var(--gutter); color: #fff;
  background: linear-gradient(135deg, var(--indigo), #6D4E86);
  font-size: var(--step--1);
  strong { font: 400 1.6rem/1 var(--f-display); text-transform: uppercase; }
  a { text-decoration-color: var(--teal); text-underline-offset: 3px; }
  .fine { opacity: .8; font-size: .85rem; }
}

/* ── Ações do topo, idiomas (Popover API) e menu ─────────── */
.topbar-actions { display: flex; align-items: center; gap: .4rem; }
.lang-btn, .menu-btn {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .7rem;
  font: 700 .9rem/1 var(--f-num); color: var(--indigo); cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
  &:hover { background: var(--mint); border-color: #CFEAEA; }
  img { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
  .ico { width: 1rem; height: 1rem; }
}
.lang-btn { anchor-name: --idioma; }
.menu-btn { display: none; place-items: center; width: 44px; padding: 0; anchor-name: --menu; .ico { width: 1.3rem; height: 1.3rem; } }

.pop {
  margin: 0; padding: .5rem; min-width: 230px;
  background: color-mix(in oklab, white 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 30px 60px -20px rgb(83 93 130 / .45);
  color: var(--indigo);
  opacity: 0; translate: 0 -8px; scale: .98;
  transition: opacity .2s var(--ease), translate .25s var(--ease), scale .25s var(--ease), display .25s allow-discrete, overlay .25s allow-discrete;
  &:popover-open { opacity: 1; translate: 0 0; scale: 1; }
  &::backdrop { background: transparent; }
  a {
    display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: .55rem .8rem;
    border-radius: 14px; text-decoration: none; font: 400 1rem/1.2 var(--f-num);
    &:hover { background: var(--blush); }
  }
  a[aria-current="true"] { background: var(--indigo); color: #fff; font-weight: 700; }
  img { width: 24px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
}
@starting-style { .pop:popover-open { opacity: 0; translate: 0 -8px; scale: .98; } }
.pop-title { padding: .4rem .8rem .3rem; font: 700 .75rem/1 var(--f-num); text-transform: uppercase; letter-spacing: .1em; color: var(--pink-ink); }
.lang-menu { position-anchor: --idioma; }
.menu-pop { position-anchor: --menu; nav { display: grid; } a { font: 400 1.5rem/1 var(--f-display); text-transform: uppercase; } }
@supports (position-anchor: --x) {
  .lang-menu, .menu-pop { inset: auto; top: anchor(bottom); right: anchor(right); margin-top: .6rem; }
}
@supports not (position-anchor: --x) {
  .lang-menu, .menu-pop { inset: 5rem var(--gutter) auto auto; }
}

/* ── Páginas internas ────────────────────────────────────── */
.page-hero {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; align-items: center; gap: 2rem; grid-template-columns: 1fr;
  min-height: 62svh; padding-block: 8.5rem 3rem;
  padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
  .orb-pink { top: -30%; right: -12%; }
  .orb-teal { bottom: -45%; right: 12%; left: auto; }
}
@media (min-width: 900px) { .page-hero:has(.client-visual) { grid-template-columns: 1.2fr .8fr; } }
.page-hero-copy {
  position: relative; z-index: 1; display: grid; gap: 1.1rem; max-width: 62ch; justify-items: start;
  h1 { font: 700 var(--step-3)/1.08 var(--f-body); color: var(--indigo); }
}
.client-visual { position: relative; z-index: 1; justify-self: center; }
.client-wm { --w: clamp(150px, 22vw, 240px); }

.mvv {
  display: grid; gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.mvv-card, .feature {
  display: grid; align-content: start; gap: .9rem;
  padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 50px -40px rgb(83 93 130 / .6);
  h2 { font: 400 var(--step-3)/.95 var(--f-display); text-transform: uppercase; color: var(--indigo); }
  h3 { font: 700 var(--step-1)/1.25 var(--f-body); }
  p { font-size: var(--step-0); line-height: 1.7; }
}
.mvv-dark { color: #fff; border: 0; background: radial-gradient(120% 120% at 0% 0%, #6A6FA0, var(--indigo) 45%, #6D4E86);
  h2 { color: #fff; }
  .mvv-ico { background: rgb(255 255 255 / .15); color: #fff; }
}
.mvv-ico {
  display: grid; place-items: center; width: 3.6rem; aspect-ratio: 1; border-radius: 50%;
  color: var(--pink-ink); background: linear-gradient(135deg, var(--teal), #EAF8F8 85%);
  .ico { width: 1.6rem; height: 1.6rem; }
}
.pending { font-style: italic; opacity: .75; }

.soon {
  display: grid; justify-items: center; text-align: center; gap: 1rem;
  max-width: 640px; margin: 0 auto clamp(2.5rem, 6vw, 4rem); padding: clamp(2rem, 5vw, 3rem);
  border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(14px);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  h2 { font: 700 var(--step-2)/1.2 var(--f-body); }
}
.badge-lg { font-size: .85rem; padding: .45rem .8rem; }
.features { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; }

/* ── Para hotéis: números em destaque ─────────────────────── */
.facts-section { padding-block: 0 clamp(2rem, 5vw, 3rem); }
.facts {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.fact {
  display: grid; gap: .3rem; padding: 1.4rem 1.5rem; border-radius: var(--radius);
  background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line);
  box-shadow: 0 20px 50px -40px rgb(83 93 130 / .6);
  strong { font: 400 var(--step-3)/1 var(--f-display); color: var(--indigo); }
  span { font-size: var(--step--1); line-height: 1.4; }
  &:nth-child(2) strong { color: var(--pink); }
  &:nth-child(4) strong { color: var(--teal-title); }
}

/* ── Perguntas frequentes (details nativo) ───────────────── */
.faq { display: grid; gap: .8rem; max-width: 880px; }
.faq-item {
  border-radius: 22px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 20px 50px -44px rgb(83 93 130 / .6);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  &[open] { border-color: #CFEAEA; box-shadow: var(--shadow); }
  summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.4rem; cursor: pointer; list-style: none;
    &::-webkit-details-marker { display: none; }
    h3 { font: 700 var(--step-0)/1.35 var(--f-body); }
    .ico { flex: none; width: 1.4rem; height: 1.4rem; color: var(--pink-ink); transition: rotate .3s var(--ease); }
  }
  &[open] summary .ico { rotate: 180deg; }
  p { padding: 0 1.4rem 1.3rem; font-size: var(--step-0); line-height: 1.7; }
}
.painel-cta { margin-top: 1.75rem; }

/* ── Idiomas: CJK sem as fontes latinas condensadas; alemão com hifenização ── */
:lang(zh), :lang(ja) {
  --f-display: "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Yu Gothic", "Noto Sans CJK SC", "Noto Sans JP", sans-serif;
  --f-body: var(--f-display);
  --step-4: clamp(2.4rem, 1.2rem + 3.6vw, 4.4rem);
  --step-3: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  line-break: strict;
  word-break: auto-phrase;
  .hero h1, .kicker, .mvv-card h2 { font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
}
:lang(de) { hyphens: auto; }

/* ── Revelação por scroll (nativa) ───────────────────────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: sobe linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}

/* ── Responsivo ─────────────────────────────────────────── */
@media (max-width: 1240px) {
  .topbar .nav { display: none; }
  .topbar-actions { margin-left: auto; }
  .menu-btn { display: grid; }
}
@media (max-width: 520px) {
  .btn-wa span, .lang-short { display: none; }
  .btn-wa { padding-inline: .8rem; }
}
@media (max-width: 700px) {
  .p:nth-child(even) { display: none; }
  .chip-a { left: 0; }
  .chip-b { right: 0; }
  .brand span span { font-size: .8rem; }
}

/* ── Movimento reduzido ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .brisa { display: none; }
  ::view-transition-old(painel), ::view-transition-new(painel) { animation: none; }
}