/* V11 — fontes determinísticas no hosting e proteção responsiva para viewports difíceis. */
@font-face {
  font-family: "Mix Display V11";
  src: url("../assets-v16/oswald.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Mix Text V11";
  src: url("../assets-v16/open-sans.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Mix Accent V11";
  src: url("../assets-v16/bevan.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Mix Signature V11";
  src: url("../assets-v16/allura.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --display: "Mix Display V11", "Arial Narrow", Impact, sans-serif;
  --body: "Mix Text V11", "Segoe UI", Arial, sans-serif;
  --accent: "Mix Accent V11", Georgia, serif;
}

html,
body { width: 100%; max-width: 100%; overflow-x: clip; }
main,
.site-footer,
section,
.section-shell,
.section-head,
.location-grid,
.category-rail,
.range-track { min-width: 0; }
img,
video,
svg { max-width: 100%; }
h1,
h2,
h3,
h4,
p,
address { overflow-wrap: normal; word-break: normal; }

/* Só símbolos desenhados em CSS/SVG permanecem no mobile; glifos-emoji são removidos pelo JS. */
@media (max-width: 820px) {
  :root { --rail: 0px; }
  .side-rail { display: none !important; }
  .progress { left: 0 !important; }
  .site-header { left: 0 !important; width: 100% !important; }
  main,
  .site-footer { margin-left: 0 !important; width: 100% !important; }
  .location-actions .btn { white-space: normal; text-align: center; }
  .location-actions .btn--outline { min-width: 92px; }
}

/* Fallback estável para aparelhos estreitos, navegadores antigos e webviews. */
@media (max-width: 430px) {
  :root { --section-pad: 78px; }
  .section-shell { width: 100%; padding-inline: 18px; }
  .section-head { gap: 24px; }
  .section-head h2,
  .range-v4 .range-intro h2 { max-width: 100%; font-size: clamp(54px, 18vw, 78px) !important; }
  .section-head p { max-width: 100%; }
  .btn { max-width: 100%; }
  .range-v4 .range-track { padding-inline: 18px; }
  .range-v4 .mix-card { flex-basis: calc(100vw - 44px); min-height: 520px; }
  .category-rail { scroll-padding-inline: 18px; }
  .category-tile { max-width: calc(100vw - 44px); }
  .experience-v4-head,
  .reviews-v4-head { left: 18px; right: 18px; }
  .experience-copy-stack { left: 18px; right: 18px; }
  .review-card-v4 { width: calc(100vw - 72px); }
  .location-grid { grid-template-columns: minmax(0,1fr) !important; }
  #unidades .location-card { width: 100%; min-height: 0; }
  #unidades .location-card h3 { font-size: clamp(38px, 12vw, 58px); }
  .location-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .location-actions .btn { width: 100%; padding-inline: 10px; }
  .channel-hub-v4 .channel-card { min-width: 0; }
}

@media (max-width: 360px) {
  .section-shell { padding-inline: 14px; }
  .section-head h2,
  .range-v4 .range-intro h2 { font-size: clamp(48px, 17vw, 64px) !important; }
  .range-v4 .mix-card { flex-basis: calc(100vw - 34px); min-height: 500px; }
  .experience-v4-head,
  .reviews-v4-head,
  .experience-copy-stack { left: 14px; right: 14px; }
  .review-card-v4 { width: calc(100vw - 52px); padding-inline: 20px; }
  .location-actions { grid-template-columns: 1fr; }
}

@supports not (overflow: clip) {
  html,
  body { overflow-x: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}