/* ══════════════════════════════════════════════════════════════════════
   URSO — clone estático de ursocimed.com.br (tema Shopify custom "URSO")
   base.css — reset, variáveis, tipografia, utilitários, container, botões
   ══════════════════════════════════════════════════════════════════════ */

/* Fontes da marca URSO (Buckson + Cera Pro) — descarregadas do original */
@font-face {
  font-family: "Buckson";
  src: url("../fonts/urso-buckson-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cera Pro";
  src: url("../fonts/urso-cera-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cera Pro";
  src: url("../fonts/urso-cera-medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cera Pro";
  src: url("../fonts/urso-cera-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cera Pro";
  src: url("../fonts/urso-cera-black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body-family: "Cera Pro", "Segoe UI", Arial, sans-serif;
  --font-heading-family: "Buckson", "Arial Black", "Segoe UI", sans-serif;
  --font-subtitle-family: var(--font-body-family);
  --font-header-menu-family: var(--font-body-family);
  --font-header-menu-style: normal;

  /* Cores da marca URSO (extraídas do original) */
  --color-urso-bg: #050403;
  --color-urso-dark: #090707;
  --color-urso-card: #1a1715;
  --color-urso-yellow: #f6c500;
  --color-urso-yellow-2: #f7c900;
  --color-urso-cream: #c4bdb1;
  --color-urso-muted: #9c9488;
  --color-urso-dark-muted: #6b6358;
  --color-urso-white: #ffffff;

  --color-bg: var(--color-urso-dark);
  --color-text: var(--color-urso-white);
  --color-text-muted: var(--color-urso-muted);

  /* Layout */
  --container-max: 1360px;
  --container-px: 20px;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body-family);
  background: var(--color-urso-bg);
  color: var(--color-urso-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-heading-family);
  font-weight: 900;
}

/* ── Container ─────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

/* ── Utilitários ───────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

.focus-inset:focus-visible {
  outline: 2px solid var(--color-urso-yellow);
  outline-offset: 2px;
}

/* ── Botão genérico URSO ───────────────────────────────────────────── */
.urso-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.56px;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;
}

.urso-btn--yellow {
  background: var(--color-urso-yellow);
  color: #1a1715;
}
.urso-btn--yellow:hover { filter: brightness(.92); }

.urso-btn--outline {
  background: transparent;
  border: 1px solid var(--color-urso-white);
  color: var(--color-urso-white);
}
.urso-btn--outline:hover { background: rgba(255,255,255,.1); }

.urso-btn__label { line-height: 1; }

.urso-btn__icon { display: inline-flex; align-items: center; justify-content: center; }

/* ── Ticker do footer ──────────────────────────────────────────────── */
.urso-footer__ticker {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  padding: 40px 0 10px;
  user-select: none;
}
.urso-footer__ticker-track {
  display: inline-flex;
  animation: urso-ticker 40s linear infinite;
}
.urso-footer__ticker span {
  font-family: var(--font-heading-family);
  font-size: 180px;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255,255,255,0.07);
  padding-right: 60px;
}
@keyframes urso-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media screen and (max-width: 989px) {
  .urso-footer__ticker span { font-size: 81px; }
}

/* ── Scroll suave + anchor offset (fixo, header sticky) ────────────── */
:target {
  scroll-margin-top: 80px;
}