/* LS Estética
   Paleta tirada do cartão digital da marca: sálvia + cobre sobre branco frio. */
:root {
  --sage-900: #26322e;
  --sage-800: #34433e;
  --sage-600: #52655f;
  --sage-400: #8a9b94;
  --sage-200: #cdd7d2;
  --mist: #eef2ef;
  --mist-2: #e2e9e5;
  --paper: #fafbfa;
  --white: #fff;
  --copper: #c58e6e;
  --copper-300: #e2c1ad;
  --copper-700: #9a6548;
  --ink: #24302c;
  --ink-soft: #4f5d58;
  --shadow-rgb: 38, 50, 46;

  --f-display: "Marcellus", "Times New Roman", serif;
  --f-body: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -.005em; }
p { margin: 0; }
svg { flex: none; }
::selection { background: var(--copper-300); color: var(--sage-900); }

:focus-visible { outline: 2px solid var(--copper-700); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--sage-800); color: var(--white); padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 16px; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: 0 1.5em;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 500; font-size: .98rem; text-decoration: none; letter-spacing: .01em;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  position: relative; isolation: isolate; overflow: hidden;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--sage-800); color: var(--white); }
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--copper-700);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transition: clip-path .55s var(--ease);
}
.btn-primary:hover::before { clip-path: polygon(50% -60%, 160% 50%, 50% 160%, -60% 50%); }
.btn-ghost { color: var(--sage-800); border-color: var(--sage-400); }
.btn-ghost:hover { border-color: var(--sage-800); background: var(--white); }
.btn-light { background: var(--paper); color: var(--sage-900); }
.btn-light:hover { background: var(--copper-300); }
.btn-outline-light { color: var(--paper); border-color: rgba(250, 251, 250, .35); }
.btn-outline-light:hover { border-color: var(--paper); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(var(--shadow-rgb), .1);
}
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--sage-800); margin-right: auto; }
.brand-mark { width: 30px; height: 30px; color: var(--copper); }
.brand-word { font-family: var(--f-display); font-size: 1.28rem; text-transform: uppercase; letter-spacing: .1em; line-height: 1; padding-top: 2px; }

.nav { position: relative; display: flex; gap: 6px; }
.nav a {
  position: relative; padding: 10px 14px; text-decoration: none;
  font-size: .95rem; color: var(--ink-soft); transition: color .25s;
}
.nav a:hover, .nav a.is-active { color: var(--sage-900); }
.nav-marker {
  position: absolute; bottom: 0; left: 0; width: 7px; height: 7px;
  background: var(--copper); transform: translateX(var(--x, -40px)) rotate(45deg); opacity: var(--o, 0);
  transition: transform .5s var(--ease), opacity .3s;
}

.btn-wa {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  height: 44px; padding: 0 18px 0 6px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--sage-200); color: var(--sage-800);
  font-weight: 500; font-size: .95rem;
  transition: border-color .3s, background-color .3s;
}
.btn-wa svg {
  width: 32px; height: 32px; padding: 7px; border-radius: 50%;
  background: var(--sage-800); color: var(--white);
  transition: background-color .3s;
}
.btn-wa:hover { border-color: var(--copper); }
.btn-wa:hover svg { background: var(--copper-700); }

.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; position: relative; }
.menu-toggle i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--sage-900); transition: transform .4s var(--ease); }
.menu-toggle i:first-of-type { top: 18px; }
.menu-toggle i:last-of-type { top: 25px; }
.menu-toggle[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }

.menu-sheet {
  position: fixed; inset: var(--header-h) 0 auto; z-index: 49;
  background: var(--paper); padding: 12px var(--gutter) 28px;
  box-shadow: 0 30px 50px -30px rgba(var(--shadow-rgb), .35);
  display: grid; gap: 20px;
}
.menu-sheet[hidden] { display: none; }
.menu-sheet nav { display: grid; }
.menu-sheet nav a {
  font-family: var(--f-display); font-size: 1.6rem; color: var(--sage-800); text-decoration: none;
  padding: 12px 0; border-bottom: 1px solid var(--mist-2);
}
.menu-sheet.is-open nav a { animation: sheetIn .5s var(--ease) both; }
.menu-sheet.is-open nav a:nth-child(2) { animation-delay: .04s; }
.menu-sheet.is-open nav a:nth-child(3) { animation-delay: .08s; }
.menu-sheet.is-open nav a:nth-child(4) { animation-delay: .12s; }
.menu-sheet.is-open nav a:nth-child(5) { animation-delay: .16s; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(28px, 6vw, 72px)) 0 clamp(48px, 7vw, 96px);
  overflow: hidden;
}
.hero-visual::before {
  /* losango de névoa atrás do símbolo, como um halo */
  content: ""; position: absolute; z-index: -1;
  width: 128%; aspect-ratio: 1; left: 50%; top: 40%;
  background: var(--mist);
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 28px;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { position: relative; z-index: 1; }
.hero-place { display: inline-flex; align-items: center; gap: 8px; color: var(--copper-700); font-size: .95rem; margin-bottom: 22px; }
.hero-place svg { width: 18px; height: 18px; }
.hero-title { font-size: clamp(2.3rem, 4.5vw, 3.85rem); color: var(--sage-900); line-height: 1.04; letter-spacing: -.015em; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .line > span { display: inline-block; }
.hero-lead { margin-top: 26px; max-width: 34em; font-size: 1.12rem; line-height: 1.65; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-facts { list-style: none; padding: 0; margin: 38px 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: .95rem; color: var(--ink-soft); }
.hero-facts li, .hero-facts a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.hero-facts svg { width: 18px; height: 18px; color: var(--sage-600); }
.hero-facts .star { color: var(--copper); }
.hero-facts a:hover { color: var(--sage-900); }

.hero-visual { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 24px; }
.facets { width: min(100%, 500px); aspect-ratio: 1; perspective: 900px; }
.facets-svg { width: 100%; height: 100%; overflow: visible; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }

.facet { cursor: pointer; outline: none; }
.facet-bg { fill: var(--white); transition: fill .4s var(--ease); }
.facet:hover .facet-bg { fill: var(--mist-2); }
.facet image {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  transform: scale(1.12); transition: opacity .7s var(--ease), transform 1.4s var(--ease);
}
.facet-tint { fill: var(--sage-900); opacity: 0; transition: opacity .6s var(--ease); }
.facet text {
  font-family: var(--f-display); font-size: 17px; letter-spacing: .02em;
  fill: var(--sage-800); transition: fill .4s; pointer-events: none;
}
.facet.is-active image { opacity: 1; transform: scale(1); }
.facet.is-active .facet-tint { opacity: .42; }
.facet.is-active text { fill: var(--white); }
.facet:focus-visible .facet-bg { fill: var(--copper-300); }
.facets-lines path { stroke: var(--copper); stroke-width: 4.5; }

.facet-caption { width: min(100%, 440px); text-align: center; min-height: 140px; }
.facet-progress { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.facet-progress i { width: 28px; height: 2px; background: var(--sage-200); position: relative; overflow: hidden; border-radius: 2px; }
.facet-progress i::after { content: ""; position: absolute; inset: 0; background: var(--copper-700); transform: scaleX(0); transform-origin: left; }
.facet-progress i.is-done::after { transform: scaleX(1); }
.facet-progress i.is-running::after { animation: progress var(--dur, 4.5s) linear forwards; }
.facet-progress i.is-static::after { transform: scaleX(1); }
@keyframes progress { to { transform: scaleX(1); } }
.facet-caption h2 { font-size: 1.6rem; color: var(--sage-900); }
.facet-caption p { margin-top: 8px; color: var(--ink-soft); }
.facet-caption a {
  display: inline-block; margin-top: 12px; color: var(--copper-700); font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px;
  transition: background-size .35s var(--ease);
}
.facet-caption a:hover { background-size: 0 1px; background-position: 100% 100%; }
.facet-caption.is-swapping > :not(.facet-progress) { animation: capSwap .5s var(--ease); }
@keyframes capSwap { from { opacity: 0; transform: translateY(6px); } }

/* Entrada orquestrada do hero (um único momento) */
.motion .facets-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease-in-out) forwards; }
.motion .facets-lines path:nth-child(2) { animation-delay: .25s; }
.motion .facets-lines path:nth-child(3) { animation-delay: .6s; animation-duration: 1s; }
.motion .facets-lines path:nth-child(4) { animation-delay: .9s; animation-duration: .7s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.motion .facet { opacity: 0; animation: fadeIn .9s var(--ease) 1.1s forwards; }
.motion .hero-title .line > span { transform: translateY(105%); animation: rise 1s var(--ease) forwards; }
.motion .hero-title .line:nth-child(2) > span { animation-delay: .1s; }
.motion .hero-title .line:nth-child(3) > span { animation-delay: .2s; }
.motion .hero-place, .motion .hero-lead, .motion .hero-actions, .motion .hero-facts, .motion .facet-caption { opacity: 0; animation: fadeUp .9s var(--ease) forwards; }
.motion .hero-place { animation-delay: .05s; }
.motion .hero-lead { animation-delay: .4s; }
.motion .hero-actions { animation-delay: .52s; }
.motion .hero-facts { animation-delay: .64s; }
.motion .facet-caption { animation-delay: 1.4s; }
@keyframes rise { to { transform: none; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Faixa de marcas ---------- */
.ribbon { background: var(--sage-800); color: var(--mist); overflow: hidden; padding: 20px 0; }
.ribbon-track { display: flex; align-items: center; gap: 34px; width: max-content; animation: marquee 48s linear infinite; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon span { font-family: var(--f-display); font-size: 1.5rem; white-space: nowrap; }
.ribbon svg { width: 16px; height: 16px; color: var(--copper); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Seções ---------- */
.section { padding: clamp(72px, 10vw, 136px) 0; }
.sec-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 60px); }
.sec-mark { width: 30px; height: 30px; color: var(--copper); margin-bottom: 20px; }
.sec-head h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--sage-900); }
.sec-head p { margin-top: 16px; font-size: 1.08rem; color: var(--ink-soft); max-width: 36em; }
.motion .sec-mark { opacity: 0; transform: rotate(-45deg) scale(.6); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.motion .is-in .sec-mark { opacity: 1; transform: none; }

/* ---------- Produtos ---------- */
.brand-board { display: grid; grid-template-columns: 1fr 340px; gap: clamp(24px, 3vw, 40px); align-items: start; }
.brand-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--sage-200); border-left: 1px solid var(--sage-200);
}
.brand-grid li { border-right: 1px solid var(--sage-200); border-bottom: 1px solid var(--sage-200); }
.brand-grid button {
  position: relative; width: 100%; height: 100%; min-height: 128px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: 18px 18px 16px; text-align: left;
  border: 0; background: transparent; color: var(--sage-900);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.b-name { font-family: var(--f-display); font-size: 1.32rem; line-height: 1.1; }
.b-sub { font-size: .84rem; color: var(--ink-soft); transition: color .35s; }
.b-tick {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  display: grid; place-items: center; color: var(--sage-600);
  transition: transform .5s var(--ease), color .3s;
}
.b-tick::before {
  content: ""; position: absolute; inset: 5px; border: 1px solid currentColor; transform: rotate(45deg);
  transition: background-color .3s, border-color .3s;
}
.b-tick svg { position: relative; width: 14px; height: 14px; transition: transform .45s var(--ease); }
.brand-grid button:hover { background: var(--mist); }
.brand-grid button:hover .b-tick { transform: rotate(90deg); color: var(--copper-700); }
.brand-grid button[aria-pressed="true"] { background: var(--sage-800); color: var(--white); }
.brand-grid button[aria-pressed="true"] .b-sub { color: var(--sage-200); }
.brand-grid button[aria-pressed="true"] .b-tick { color: var(--white); transform: none; }
.brand-grid button[aria-pressed="true"] .b-tick::before { background: var(--copper); border-color: var(--copper); }
.brand-grid button[aria-pressed="true"] .b-tick svg { transform: rotate(45deg); }
.brand-grid button.pop .b-tick { animation: tickPop .45s var(--ease); }
@keyframes tickPop { 50% { transform: scale(1.3); } }
.brand-other .b-name { color: var(--copper-700); }
.brand-grid button[aria-pressed="true"].brand-other .b-name,
.brand-other button[aria-pressed="true"] .b-name { color: var(--copper-300); }

.quote {
  position: sticky; top: calc(var(--header-h) + 20px);
  background: var(--white); padding: 26px 24px 22px;
  border: 1px solid var(--sage-200); border-top: 3px solid var(--copper);
  border-radius: 2px 2px 14px 14px;
}
.quote-head { display: flex; align-items: center; justify-content: space-between; }
.quote-head h3 { font-size: 1.45rem; color: var(--sage-900); }
.quote-count {
  min-width: 34px; height: 34px; display: grid; place-items: center;
  font-weight: 600; font-size: .9rem; color: var(--white); background: var(--sage-800); border-radius: 50%;
  transition: background-color .3s;
}
.quote-count.bump { animation: bump .45s var(--ease); background: var(--copper-700); }
@keyframes bump { 40% { transform: scale(1.25); } }
.quote-empty { margin: 14px 0 6px; color: var(--ink-soft); font-size: .93rem; }
.quote-list { list-style: none; padding: 0; margin: 14px 0 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.quote-list li { animation: chipIn .4s var(--ease); }
.quote-list button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px;
  border-radius: 999px; border: 1px solid var(--sage-200); background: var(--mist);
  font-size: .88rem; color: var(--sage-900);
}
.quote-list button:hover { border-color: var(--copper); }
.quote-list button svg { width: 14px; height: 14px; transform: rotate(45deg); color: var(--ink-soft); }
@keyframes chipIn { from { opacity: 0; transform: scale(.85); } }
.field { display: grid; gap: 6px; margin-top: 16px; }
.field span { font-size: .86rem; font-weight: 500; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  width: 100%; border: 1px solid var(--sage-200); border-radius: 10px; background: var(--paper);
  padding: 11px 13px; font-size: 1rem; resize: vertical;
  transition: border-color .25s, background-color .25s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--sage-600); background: var(--white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage-600) 16%, transparent); }
.quote .btn-block { margin-top: 20px; }
.quote-note { margin-top: 10px; font-size: .82rem; color: var(--ink-soft); text-align: center; }
.quote-note.is-warn { color: var(--copper-700); }
.quote.shake { animation: shake .45s var(--ease); }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

.arrivals { margin-top: clamp(56px, 7vw, 88px); }
.arrivals-title { font-size: 1.5rem; color: var(--sage-900); margin-bottom: 20px; }
.arrivals-track {
  display: grid; grid-auto-flow: column; grid-template-columns: minmax(340px, 1.5fr); grid-auto-columns: minmax(240px, 1fr); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
  scrollbar-width: thin; scrollbar-color: var(--sage-200) transparent;
  cursor: grab;
}
.arrivals-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.arrivals-track.is-dragging * { pointer-events: none; }
.arrival {
  scroll-snap-align: start; padding: 22px 22px 24px;
  border-left: 2px solid var(--copper); background: linear-gradient(90deg, var(--mist), transparent 85%);
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 170px;
}
.arrival h4 { font-size: 1.25rem; color: var(--sage-900); }
.arrival p { margin-top: 6px; color: var(--ink-soft); font-size: .95rem; }
.arrival--photo { grid-row: span 1; flex-direction: row; align-items: center; gap: 18px; padding: 14px; }
.arrival--photo img { width: 110px; height: 140px; object-fit: cover; border-radius: 60px 60px 6px 6px; }
.arrival--photo div { flex: 1; }

/* ---------- Loja ---------- */
.store { background: var(--sage-800); color: var(--paper); padding: clamp(72px, 9vw, 120px) 0; position: relative; overflow: hidden; }
.store::after {
  content: ""; position: absolute; width: 520px; height: 520px; right: -200px; bottom: -260px;
  border: 1px solid rgba(197, 142, 110, .4); transform: rotate(45deg);
  box-shadow: 0 0 0 40px var(--sage-800), 0 0 0 41px rgba(197, 142, 110, .25);
}
.store-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 96px); align-items: center; position: relative; z-index: 1; }
.store-photo { margin: 0; position: relative; }
.store-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 999px 999px 8px 8px; }
.store-photo::before {
  content: ""; position: absolute; inset: -14px -14px auto auto; width: 100%; height: 100%;
  border: 1px solid var(--copper); border-radius: 999px 999px 8px 8px; z-index: -1;
}
.store-copy h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); max-width: 14em; }
.store-points { margin: 34px 0 36px; display: grid; gap: 0; }
.store-points div { padding: 20px 0; border-top: 1px solid rgba(250, 251, 250, .16); display: grid; grid-template-columns: 220px 1fr; gap: 6px 28px; }
.store-points div:last-child { border-bottom: 1px solid rgba(250, 251, 250, .16); }
.store-points dt { font-family: var(--f-display); font-size: 1.25rem; color: var(--copper-300); }
.store-points dd { margin: 0; color: var(--sage-200); }

/* ---------- Cursos ---------- */
.cursos { overflow-x: clip; }
.cursos-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.cursos-photo { margin: 0; position: sticky; top: calc(var(--header-h) + 30px); }
.diamond-frame { position: relative; aspect-ratio: 1; width: min(100%, 480px); margin: 0 auto; }
.diamond-frame::before {
  content: ""; position: absolute; inset: 7%; border: 1px solid var(--copper);
  transform: rotate(45deg) translate(4%, 4%);
}
.diamond-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(50% 3%, 97% 50%, 50% 97%, 3% 50%);
  transition: clip-path .9s var(--ease);
}
.diamond-frame:hover img { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cursos-photo figcaption { text-align: center; margin-top: 28px; font-size: .88rem; color: var(--ink-soft); }

.list-title { font-size: 1.3rem; color: var(--sage-900); margin-bottom: 8px; }
.event { border-bottom: 1px solid var(--sage-200); }
.event summary {
  list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
}
.event summary::-webkit-details-marker { display: none; }
.event summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background:
    linear-gradient(var(--sage-800), var(--sage-800)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--sage-800), var(--sage-800)) center / 1.5px 100% no-repeat;
  transition: transform .45s var(--ease);
}
.event[open] summary::after { transform: rotate(135deg); }
.ev-name { font-family: var(--f-display); font-size: 1.45rem; color: var(--sage-900); }
.ev-org { font-size: .9rem; color: var(--copper-700); font-weight: 500; }
.event p { padding: 0 48px 24px 0; color: var(--ink-soft); max-width: 36em; }
.event[open] p { animation: fadeUp .5s var(--ease); }
.event summary:hover .ev-name { color: var(--copper-700); }

.notify { margin-top: 40px; padding: 28px; background: var(--mist); border-radius: 18px; }
.notify h3 { font-size: 1.35rem; color: var(--sage-900); }
.notify-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.notify .btn { margin-top: 20px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23777777' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; padding-right: 36px; }

/* ---------- Clínica ---------- */
.clinica { background: var(--mist); position: relative; overflow: hidden; }
.clinica-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.clinica-portrait { position: relative; aspect-ratio: 4/5.2; max-width: 460px; width: 100%; margin: 0 auto; }
.arch { position: absolute; inset: 14% 6% 0; background: var(--sage-600); border-radius: 999px 999px 0 0; }
.portrait-mark {
  position: absolute; width: 92%; aspect-ratio: 1; left: 4%; top: 0; color: var(--copper);
  opacity: .9; transform: translateY(var(--py, 0px)) rotate(var(--pr, 0deg));
}
.clinica-portrait img {
  position: absolute; bottom: 0; left: 50%; height: 100%; width: auto; max-width: none;
  transform: translateX(-50%) translateY(var(--iy, 0px));
  filter: contrast(1.04);
  -webkit-mask-image: linear-gradient(#000 88%, transparent);
  mask-image: linear-gradient(#000 88%, transparent);
}
.clinica-kicker { color: var(--copper-700); font-weight: 500; margin-bottom: 14px; }
.clinica-copy h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); color: var(--sage-900); max-width: 15em; }
.clinica-lead { margin-top: 18px; color: var(--ink-soft); font-size: 1.08rem; max-width: 34em; }

.care { margin-top: 34px; background: var(--white); border-radius: 18px; padding: 8px 8px 26px; }
.care-tabs { position: relative; display: flex; background: var(--mist); border-radius: 12px; padding: 4px; }
.care-tabs button {
  position: relative; z-index: 1; flex: 1; border: 0; background: none; padding: 12px 10px;
  font-weight: 500; font-size: .95rem; color: var(--ink-soft); border-radius: 9px; transition: color .3s;
}
.care-tabs button[aria-selected="true"] { color: var(--white); }
.care-ink {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 9px;
  background: var(--sage-800); transform: translateX(var(--x, 4px)); width: var(--w, 0);
  transition: transform .5s var(--ease), width .5s var(--ease);
}
.care-panel { padding: 22px 20px 0; }
.care-panel:not([hidden]) { animation: fadeUp .5s var(--ease); }
.care-panel h3 { font-size: 1.45rem; color: var(--sage-900); }
.care-panel p { margin-top: 8px; color: var(--ink-soft); }
.care-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  color: var(--copper-700); font-weight: 500; text-decoration: none;
}
.care-cta::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; transform: rotate(45deg); transition: background-color .3s, transform .4s var(--ease); }
.care-cta:hover::before { background: currentColor; transform: rotate(225deg); }

/* Mapa do rosto: a paciente marca o que quer cuidar */
.facemap {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 64px); align-items: center;
  background: var(--white); border-radius: 28px; padding: clamp(20px, 4vw, 52px);
}
.fm-stage { display: grid; justify-items: center; gap: 14px; }
.fm-face {
  position: relative; width: min(100%, 380px); aspect-ratio: 300 / 380;
  background: radial-gradient(closest-side, var(--mist) 70%, transparent 100%);
}
.fm-drawing { position: absolute; inset: 0; width: 100%; height: 100%; }
.fm-drawing path { stroke: var(--sage-800); stroke-width: 1.6; }
.fm-drawing .fm-hair { stroke: var(--sage-400); }
.motion .fm-drawing path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-in-out); }
.motion .facemap.is-in .fm-drawing path { stroke-dashoffset: 0; }
.motion .facemap.is-in .fm-drawing path:nth-child(n+3) { transition-delay: .25s; }
.motion .facemap.is-in .fm-drawing path:nth-child(n+6) { transition-delay: .5s; }

.fm-pt {
  position: absolute; left: calc(var(--x) / 300 * 100%); top: calc(var(--y) / 380 * 100%);
  width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; background: none; display: grid; place-items: center; z-index: 1;
}
.fm-pt::before {
  /* brilho que acende quando o ponto é marcado */
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(197, 142, 110, .32), transparent);
  opacity: 0; transform: scale(.4); transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.fm-pt i {
  position: relative; width: 14px; height: 14px; transform: rotate(45deg);
  border: 1.5px solid var(--copper-700); background: var(--white);
  transition: background-color .3s, transform .45s var(--ease), border-color .3s;
}
.fm-pt i::after {
  content: ""; position: absolute; inset: -7px; border: 1px solid var(--copper);
  opacity: 0; animation: fmPulse 2.4s var(--ease) infinite; animation-delay: var(--d, 0s);
}
@keyframes fmPulse { 0% { opacity: .9; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
.fm-pt:hover i, .fm-pt.is-hint i { transform: rotate(45deg) scale(1.35); }
.fm-pt[aria-pressed="true"] i { background: var(--copper); border-color: var(--copper); transform: rotate(225deg) scale(1.2); }
.fm-pt[aria-pressed="true"] i::after { animation: none; }
.fm-pt[aria-pressed="true"]::before { opacity: 1; transform: none; }
.fm-pt:focus-visible { outline: none; }
.fm-pt:focus-visible i { outline: 2px solid var(--sage-800); outline-offset: 4px; }
.fm-tip {
  position: absolute; bottom: calc(100% - 2px); left: 50%; transform: translate(-50%, 6px);
  white-space: nowrap; pointer-events: none;
  background: var(--sage-900); color: var(--paper); font-size: .8rem; padding: 6px 10px; border-radius: 8px;
  opacity: 0; transition: opacity .25s, transform .35s var(--ease);
}
.fm-pt:hover .fm-tip, .fm-pt:focus-visible .fm-tip, .fm-pt.show-tip .fm-tip, .fm-pt.is-hint .fm-tip { opacity: 1; transform: translate(-50%, 0); }
.fm-pt[data-side="left"] .fm-tip { left: auto; right: 50%; transform: translate(0, 6px); }
.fm-pt[data-side="left"]:hover .fm-tip, .fm-pt[data-side="left"]:focus-visible .fm-tip, .fm-pt[data-side="left"].show-tip .fm-tip, .fm-pt[data-side="left"].is-hint .fm-tip { transform: none; }
.fm-pt[data-side="right"] .fm-tip { left: 50%; transform: translate(0, 6px); }
.fm-pt[data-side="right"]:hover .fm-tip, .fm-pt[data-side="right"]:focus-visible .fm-tip, .fm-pt[data-side="right"].show-tip .fm-tip, .fm-pt[data-side="right"].is-hint .fm-tip { transform: none; }
.fm-hint { font-size: .88rem; color: var(--ink-soft); }

.fm-panel h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--sage-900); }
.fm-lead { margin-top: 10px; color: var(--ink-soft); max-width: 34em; }
.fm-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.fm-list button {
  width: 100%; display: grid; grid-template-columns: 16px 1fr; gap: 2px 12px; align-items: center;
  padding: 11px 4px; border: 0; border-bottom: 1px solid var(--mist-2); background: none; text-align: left;
  transition: background-color .25s;
}
.fm-list button:hover, .fm-list button.is-hint { background: var(--mist); }
.fm-list .chk {
  grid-row: span 2; width: 12px; height: 12px; margin-left: 2px; transform: rotate(45deg);
  border: 1.5px solid var(--sage-400); transition: background-color .3s, border-color .3s, transform .45s var(--ease);
}
.fm-list .nm { font-size: .95rem; color: var(--ink); line-height: 1.3; }
.fm-list .ar { font-size: .78rem; color: var(--copper-700); }
.fm-list button[aria-pressed="true"] .chk { background: var(--copper); border-color: var(--copper); transform: rotate(225deg); }
.fm-list button[aria-pressed="true"] .nm { color: var(--sage-900); font-weight: 500; }

.fm-period { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.fm-period > span { font-size: .9rem; font-weight: 500; color: var(--ink-soft); }
.fm-seg { position: relative; display: inline-flex; background: var(--mist); border-radius: 999px; padding: 3px; }
.fm-seg button { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-size: .9rem; color: var(--ink-soft); transition: background-color .3s, color .3s; }
.fm-seg button[aria-checked="true"] { background: var(--sage-800); color: var(--white); }
.fm-foot { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding-top: 22px; border-top: 1px solid var(--mist-2); }
.fm-summary { color: var(--ink-soft); font-size: .95rem; }
.fm-summary b { color: var(--sage-900); font-weight: 600; }

/* ---------- Avaliações ---------- */
.reviews { background: var(--mist); }
.reviews .histogram i { background: var(--white); }
.reviews-grid { display: grid; grid-template-columns: 340px 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.score-num { font-family: var(--f-display); font-size: clamp(6rem, 12vw, 9rem); line-height: .9; color: var(--sage-900); letter-spacing: -.03em; }
.score-stars { display: flex; gap: 4px; margin-top: 14px; color: var(--copper); }
.score-stars svg { width: 24px; height: 24px; }
.score-stars .partial { -webkit-mask: linear-gradient(90deg, #000 80%, rgba(0,0,0,.25) 80%); mask: linear-gradient(90deg, #000 80%, rgba(0,0,0,.25) 80%); }
.score-meta { margin-top: 10px; color: var(--ink-soft); }
.histogram { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 8px; }
.histogram li { display: grid; grid-template-columns: 14px 1fr 22px; gap: 12px; align-items: center; font-size: .88rem; color: var(--ink-soft); }
.histogram b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.histogram i { height: 6px; background: var(--mist-2); border-radius: 4px; overflow: hidden; }
.histogram em { display: block; height: 100%; background: var(--copper); border-radius: 4px; width: calc(var(--v) / 13 * 100%); transform-origin: left; }
.motion .histogram em { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.motion .is-in .histogram em { transform: none; }
.motion .is-in .histogram li:nth-child(2) em { transition-delay: .12s; }
.score-links { margin-top: 26px; }
.score-links a { color: var(--copper-700); font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.score-links a:hover { background-size: 0 1px; background-position: 100% 100%; transition: background-size .35s var(--ease); }

.quotes { min-width: 0; }
.quotes-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 46%); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab;
  padding: 4px 2px 8px;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.quotes-track.at-end { -webkit-mask-image: none; mask-image: none; }
.quotes-track::-webkit-scrollbar { display: none; }
.quotes-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.quotes-track.is-dragging * { pointer-events: none; user-select: none; }
.q {
  scroll-snap-align: start; margin: 0; padding: 30px 28px 26px;
  background: var(--white); border: 1px solid var(--mist-2); border-radius: 22px 22px 22px 4px;
  display: flex; flex-direction: column; position: relative;
}
.q::before {
  content: "“"; position: absolute; top: 4px; right: 22px;
  font-family: var(--f-display); font-size: 5.5rem; line-height: 1; color: var(--copper-300);
}
.q-stars { display: flex; gap: 2px; color: var(--copper); }
.q-stars svg { width: 16px; height: 16px; }
.q-stars .off { color: var(--sage-200); }
.q blockquote { margin: 18px 0 22px; font-family: var(--f-display); font-size: 1.3rem; line-height: 1.4; color: var(--sage-900); flex: 1; }
.q figcaption { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); }
.q figcaption small { font-weight: 400; color: var(--ink-soft); font-size: .82rem; }
.q-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-600); color: var(--white); font-size: .9rem; }
.q-reply { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--sage-200); display: flex; gap: 8px; font-size: .88rem; color: var(--ink-soft); }
.q-reply svg { width: 14px; height: 14px; color: var(--copper); margin-top: 4px; }
.quotes-nav { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.quotes-nav button {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--sage-200); background: var(--white);
  display: grid; place-items: center; color: var(--sage-800); transition: border-color .3s, background-color .3s, color .3s;
}
.quotes-nav button svg { width: 20px; height: 20px; }
.quotes-nav button:hover { background: var(--sage-800); color: var(--white); border-color: var(--sage-800); }
.quotes-dots { display: flex; gap: 8px; }
.quotes-dots button { width: 8px; height: 8px; padding: 0; border-radius: 0; border: 0; background: var(--sage-200); transform: rotate(45deg); transition: background-color .3s, transform .3s; }
.quotes-dots button[aria-current="true"] { background: var(--copper-700); transform: rotate(45deg) scale(1.3); }
.quotes-dots button:hover { background: var(--sage-600); color: inherit; }

/* ---------- Visite ---------- */
.visit { background: var(--sage-900); color: var(--paper); padding: clamp(72px, 9vw, 120px) 0; }
.visit-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 5vw, 72px); align-items: stretch; }
.visit-copy h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
.status { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(250, 251, 250, .08); font-size: .92rem; }
.status i { width: 9px; height: 9px; border-radius: 50%; background: var(--sage-400); position: relative; }
.status.is-open i { background: #9fd3a8; }
.status.is-open i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #9fd3a8; animation: ping 2s var(--ease) infinite; }
@keyframes ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.visit address { font-style: normal; margin-top: 26px; color: var(--sage-200); line-height: 1.75; font-size: 1.05rem; }
.hours { margin-top: 24px; border-collapse: collapse; width: 100%; max-width: 380px; font-size: .95rem; }
.hours th, .hours td { padding: 8px 0; border-bottom: 1px solid rgba(250, 251, 250, .1); text-align: left; font-weight: 400; color: var(--sage-200); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--copper-300); font-weight: 600; }
.hours tr.is-today th::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--copper); transform: rotate(45deg); margin: 0 10px 2px 0; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.visit-map { position: relative; border-radius: 18px 220px 18px 18px; overflow: hidden; min-height: 420px; background: var(--sage-800); }
.visit-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.45) contrast(.96); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--sage-200); padding: 64px 0 28px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px 48px; }
.footer-mark { width: 36px; height: 36px; color: var(--copper); }
.footer-word { font-family: var(--f-display); font-size: 1.4rem; text-transform: uppercase; letter-spacing: .1em; color: var(--paper); margin: 14px 0 8px; }
.footer-brand p:last-child { max-width: 26em; }
.footer-nav, .footer-social { display: grid; gap: 10px; align-content: start; }
.footer-nav a, .footer-social a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; width: fit-content; transition: color .25s; }
.footer-nav a:hover, .footer-social a:hover { color: var(--copper-300); }
.footer-social svg { width: 18px; height: 18px; }
.footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 24px; margin-top: 12px; border-top: 1px solid color-mix(in srgb, var(--sage-200) 14%, transparent); font-size: .85rem; color: var(--sage-400); }
.footer-credit { margin-left: auto; }
.footer-credit a { color: var(--copper-300); text-decoration: none; }
.footer-credit a:hover { text-decoration: underline; }

/* ---------- Flutuantes ---------- */
.fab {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 40;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sage-800); color: var(--white);
  box-shadow: 0 0 0 4px rgba(197, 142, 110, .35), 0 14px 30px -10px rgba(var(--shadow-rgb), .55);
  transform: translateY(120px); transition: transform .5s var(--ease), background-color .3s;
}
.fab svg { width: 26px; height: 26px; }
.fab.is-visible { transform: none; }
.fab:hover { background: var(--copper-700); }
.tray {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px;
  background: var(--sage-900); color: var(--paper); border-radius: 999px; text-decoration: none; font-size: .95rem;
  border: 1px solid rgba(197, 142, 110, .55); white-space: nowrap;
  box-shadow: 0 16px 34px -12px rgba(var(--shadow-rgb), .6);
  transform: translate(-50%, 0); transition: transform .45s var(--ease), opacity .3s;
}
.tray[hidden] { display: inline-flex; transform: translate(-50%, 140px); opacity: 0; pointer-events: none; }
.tray svg { width: 22px; height: 22px; color: var(--copper); }
.tray b { color: var(--copper-300); }

/* ---------- Revelações discretas ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Paletas alternativas para comparar (?tema=cacau | ameixa | petroleo | grafite).
   O cobre da marca fica igual; muda só o tom escuro e os neutros. */
:root[data-tema="cacau"] {
  --sage-900: #2a201c; --sage-800: #3b2d27; --sage-600: #6e564b; --sage-400: #a59087; --sage-200: #ded3cd;
  --mist: #f5f0ed; --mist-2: #ece3de; --paper: #fcfaf9; --ink: #2e2420; --ink-soft: #64554e; --shadow-rgb: 42, 32, 28;
}
:root[data-tema="ameixa"] {
  --sage-900: #2b1b23; --sage-800: #462a39; --sage-600: #7a5567; --sage-400: #ad93a0; --sage-200: #e4d6dd;
  --mist: #f7f1f3; --mist-2: #efe4e8; --paper: #fdfbfc; --ink: #2f1f27; --ink-soft: #66525c; --shadow-rgb: 43, 27, 35;
}
:root[data-tema="petroleo"] {
  --sage-900: #15232c; --sage-800: #1f3442; --sage-600: #4a6374; --sage-400: #8c9eab; --sage-200: #d0d9df;
  --mist: #eff3f6; --mist-2: #e2e9ee; --paper: #fbfcfd; --ink: #1b2a33; --ink-soft: #4e5f6a; --shadow-rgb: 21, 35, 44;
}
:root[data-tema="grafite"] {
  --sage-900: #1e1e20; --sage-800: #2e2e31; --sage-600: #5c5c61; --sage-400: #98989d; --sage-200: #d8d7d6;
  --mist: #f4f2f0; --mist-2: #e9e6e3; --paper: #fcfbfa; --ink: #232325; --ink-soft: #5a5a5e; --shadow-rgb: 30, 30, 32;
}

/* Seletor de paleta (só aparece no modo de comparação) */
.theme-picker {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px;
  background: var(--white); box-shadow: 0 10px 30px -10px rgba(var(--shadow-rgb), .45); border: 1px solid var(--mist-2);
}
.theme-picker button {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; padding: 3px;
  background: none; position: relative;
}
.theme-picker button i { display: block; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, var(--sw) 55%, #c58e6e 55%); }
.theme-picker button[aria-pressed="true"] { border-color: var(--copper-700); }
.theme-picker span { font-size: .8rem; color: var(--ink-soft); padding: 0 10px 0 6px; white-space: nowrap; }
@media (max-width: 560px) { .theme-picker span { display: none; } .theme-picker { bottom: calc(86px + env(safe-area-inset-bottom)); } }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .store-points div { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .nav, .btn-wa--header { display: none; }
  .menu-toggle { display: block; }
  .hero-grid { grid-template-columns: 1fr; }
  .facets { width: min(100%, 380px); }
  .brand-board { grid-template-columns: 1fr; }
  .quote { position: static; }
  .store-grid, .cursos-grid, .clinica-grid, .reviews-grid, .visit-grid { grid-template-columns: 1fr; }
  .store-photo { max-width: 340px; }
  .cursos-photo { position: static; }
  .diamond-frame { width: min(86%, 320px); }
  .clinica-portrait { max-width: 340px; }
  .facemap { grid-template-columns: 1fr; }
  .fm-face { width: min(100%, 320px); }
  .quotes-track { grid-auto-columns: minmax(260px, 82%); }
  .visit-map { min-height: 340px; border-radius: 18px 120px 18px 18px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  body { font-size: .98rem; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-lead { font-size: 1.04rem; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-grid button { min-height: 108px; padding: 14px 14px 13px; }
  .b-name { font-size: 1.12rem; }
  .b-tick { top: 8px; right: 8px; }
  .notify-row { grid-template-columns: 1fr; }
  .fm-list { grid-template-columns: 1fr; }
  .fm-foot .btn { width: 100%; }
  .facemap { border-radius: 22px; }
  .notify { padding: 22px 18px; }
  .notify .btn { width: 100%; }
  .event summary { padding-right: 36px; }
  .ev-name { font-size: 1.25rem; }
  .care-tabs button { font-size: .88rem; padding: 11px 4px; }
  .visit-actions .btn { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-credit { margin-left: 0; }
  .ribbon span { font-size: 1.25rem; }
  .q blockquote { font-size: 1.18rem; }
  .tray { left: 16px; transform: none; }
  .tray[hidden] { transform: translateY(140px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .ribbon-track { animation: none; }
}