/**
 * AWA Design System v2 — Grupo Awamotos
 * Arquivo único de unificação visual: tokens, tipografia, botões, inputs, cards.
 * Carregado por último em default_head_blocks.xml — sobrescreve inconsistências
 * sem !important, usando especificidade natural.
 *
 * Gerado em: 2026-03-18
 */

/* ═══════════════════════════════════════════════════════════
   1. TOKENS CANÔNICOS
   Resolve: 12 border-radius conflitantes, 4 fontes concorrentes,
   cores semânticas sem diferenciação, 30+ font-size hardcoded.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* — FONTE ————————————————————————————————————————————— */
  /* Inter via system-font em macOS 13+/Windows 11, fallback Source Sans 3 (já self-hosted) */
  --awa-font: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont,
              'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --awa-font-heading: var(--awa-font);
  --awa-font-body:    var(--awa-font);
  --awa-font-family:  var(--awa-font);   /* alias p/ variável legada */
  --font-family:      var(--awa-font);   /* alias: --font-family vs --awa-font-family */

  /* — CORES PRIMÁRIAS ————————————————————————————————— */
  --awa-red:        #b73337;
  --awa-red-dark:   #8e2629;
  --awa-red-light:  rgba(183, 51, 55, 0.08);
  --awa-red-mid:    rgba(183, 51, 55, 0.16);

  /* — CORES SEMÂNTICAS (diferenciadas do CTA) ————————— */
  --awa-success:       #16a34a;
  --awa-success-light: rgba(22, 163, 74, 0.10);
  --awa-warning:       #d97706;
  --awa-warning-light: rgba(217, 119, 6, 0.10);
  --awa-danger:        #dc2626;
  --awa-danger-light:  rgba(220, 38, 38, 0.10);
  --awa-info:          #0ea5e9;
  --awa-info-light:    rgba(14, 165, 233, 0.10);

  /* — NEUTROS ——————————————————————————————————————— */
  --awa-text:       #111827;
  --awa-text-muted: #6b7280;
  --awa-text-light: #9ca3af;
  --awa-border:     #e5e7eb;
  --awa-border-md:  #d1d5db;
  --awa-bg:         #ffffff;
  --awa-bg-alt:     #f9fafb;
  --awa-bg-hover:   #f3f4f6;

  /* — BORDER-RADIUS (de 12 valores → 4) ——————————— */
  --r-xs:   4px;      /* inputs, tags, badges */
  --r-sm:   8px;      /* botões, cards */
  --r-md:   12px;     /* painéis, modais, gates */
  --r-full: 9999px;   /* pills, FAB, dots ativos */

  /* — TIPOGRAFIA (de 30+ valores → 9) ——————————————— */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;

  /* — ESPAÇAMENTO (base 8px) ————————————————————— */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* — SOMBRAS ——————————————————————————————————— */
  --shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 28px rgba(0, 0, 0, 0.12);
  --shadow-red: 0 4px 14px rgba(183, 51, 55, 0.28);

  /* — TRANSIÇÕES ————————————————————————————————— */
  --t-fast:   0.15s ease;
  --t-base:   0.22s ease;
  --t-slow:   0.38s ease;

  /* — ALTURA MÍNIMA DE TOQUE (WCAG 2.2) —————————— */
  --touch: 44px;
}

/* ═══════════════════════════════════════════════════════════
   2. BASE — html, body, links, headings
   ═══════════════════════════════════════════════════════════ */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--awa-font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--awa-text);
}

/* Headings — escala fluida */
h1, .h1 {
  font-family: var(--awa-font-heading);
  font-size: clamp(24px, 2vw + 16px, 36px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--awa-text);
  margin-bottom: var(--sp-4);
}
h2, .h2 {
  font-family: var(--awa-font-heading);
  font-size: clamp(20px, 1.5vw + 14px, 28px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--awa-text);
}
h3, .h3 {
  font-family: var(--awa-font-heading);
  font-size: clamp(17px, 1vw + 13px, 22px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--awa-text);
}
h4, .h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--awa-text);
}
h5, .h5 { font-size: var(--text-md); font-weight: 600; }
h6, .h6 { font-size: var(--text-base); font-weight: 600; }

/* Links */
a {
  color: var(--awa-red);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--awa-red-dark); }
a:focus-visible {
  outline: 2px solid var(--awa-red);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Parágrafos */
p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   3. SISTEMA DE BOTÕES
   Resolve: 3 caminhos de estilo diferentes no mesmo site.
   Seletores cobrem PDP + PLP + módulos Rokanthemes + módulos AWA.
   ═══════════════════════════════════════════════════════════ */

/* — PRIMARY ————————————————————————————————————————— */
.action.primary,
.action.tocart,
.btn-cart,
.b2b-primary-btn,
.awa-btn-primary,
button.action.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--touch);        /* 44px WCAG */
  padding: 0 var(--sp-6);
  background: var(--awa-red);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);     /* 8px unificado */
  font-family: var(--awa-font);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: none;           /* sem all-caps */
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-fast);
}
.action.primary:hover,
.action.tocart:hover,
.btn-cart:hover,
.b2b-primary-btn:hover,
.awa-btn-primary:hover,
button.action.primary:hover {
  background: var(--awa-red-dark);
  box-shadow: var(--shadow-red);
  transform: translateY(-1px);
  color: #fff;
}
.action.primary:active,
.action.tocart:active,
.btn-cart:active,
.b2b-primary-btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.action.primary:focus-visible,
.action.tocart:focus-visible,
.btn-cart:focus-visible {
  outline: 2px solid var(--awa-red);
  outline-offset: 2px;
}
.action.primary:disabled,
.action.primary[disabled],
.action.tocart:disabled,
.btn-cart:disabled {
  background: var(--awa-border-md);
  color: var(--awa-text-muted);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  opacity: 0.7;
}

/* — SECONDARY ——————————————————————————————————————— */
.action.secondary,
.btn-secondary,
.awa-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: 0 var(--sp-6);
  background: var(--awa-bg);
  color: var(--awa-red);
  border: 1.5px solid var(--awa-red);
  border-radius: var(--r-sm);
  font-family: var(--awa-font);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.action.secondary:hover,
.btn-secondary:hover,
.awa-btn-secondary:hover {
  background: var(--awa-red);
  color: #fff;
  border-color: var(--awa-red);
}

/* — GHOST ——————————————————————————————————————————— */
.awa-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: 0 var(--sp-6);
  background: transparent;
  color: var(--awa-text);
  border: 1.5px solid var(--awa-border-md);
  border-radius: var(--r-sm);
  font-family: var(--awa-font);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.awa-btn-ghost:hover {
  border-color: var(--awa-red);
  color: var(--awa-red);
  background: var(--awa-red-light);
}

/* — SMALL VARIANT ——————————————————————————————————— */
.action.primary.btn-sm,
.btn-cart.btn-sm,
.awa-btn-sm {
  min-height: 36px;
  padding: 0 var(--sp-4);
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════
   4. INPUTS & FORMULÁRIOS
   Resolve: height inconsistente, focus ring ausente, min="0" vs min="1".
   ═══════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
select,
.input-text,
.select {
  height: var(--touch);           /* 44px */
  border: 1.5px solid var(--awa-border);
  border-radius: var(--r-xs);    /* 4px */
  padding: 0 var(--sp-4);
  font-family: var(--awa-font);
  font-size: var(--text-base);
  color: var(--awa-text);
  background: var(--awa-bg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="search"]:hover,
input[type="password"]:hover,
select:hover,
.input-text:hover { border-color: var(--awa-border-md); }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
.input-text:focus {
  border-color: var(--awa-red);
  box-shadow: 0 0 0 3px var(--awa-red-light);
  outline: none;
}

textarea {
  border: 1.5px solid var(--awa-border);
  border-radius: var(--r-xs);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--awa-font);
  font-size: var(--text-base);
  color: var(--awa-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  resize: vertical;
}
textarea:focus {
  border-color: var(--awa-red);
  box-shadow: 0 0 0 3px var(--awa-red-light);
  outline: none;
}

/* Placeholder */
::placeholder { color: var(--awa-text-muted); opacity: 1; }

/* Focus visível global para acessibilidade de teclado */
:focus-visible {
  outline: 2px solid var(--awa-red);
  outline-offset: 2px;
}

/* Quantity input — específico */
input[type="number"].qty,
.qty-field,
.awa-catalog-qty-box input {
  height: var(--touch);
  width: 64px;
  text-align: center;
  border: 1.5px solid var(--awa-border);
  border-radius: var(--r-xs);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--awa-text);
}
input[type="number"].qty:focus,
.awa-catalog-qty-box input:focus {
  border-color: var(--awa-red);
  box-shadow: 0 0 0 3px var(--awa-red-light);
  outline: none;
}

/* Labels */
label,
.label { font-size: var(--text-sm); font-weight: 600; color: var(--awa-text); }

/* ═══════════════════════════════════════════════════════════
   5. CARDS DE PRODUTO
   Resolve: hover inconsistente entre carousels e PLP.
   ═══════════════════════════════════════════════════════════ */
.product-thumb,
.item-product .product-thumb {
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base), transform var(--t-base);
  background: var(--awa-bg);
  overflow: hidden;
}
.product-thumb:hover,
.item-product:hover .product-thumb {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Imagem — proporção 1:1 */
.product-thumb .product-thumb-link img,
.product-thumb .first-thumb img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
  height: auto;
  padding: var(--sp-2);
  background: var(--awa-bg);
}

/* Nome do produto */
.product-thumb .product-name a,
.item-product .product-name a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--awa-text);
  text-decoration: none;
  transition: color var(--t-fast);
}
.product-thumb .product-name a:hover,
.item-product .product-name a:hover { color: var(--awa-red); }

/* Preço */
.product-thumb .price-box .price,
.item-product .price-box .price {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--awa-red);
}
.product-thumb .price-box .old-price .price {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--awa-text-muted);
  text-decoration: line-through;
}

/* SKU B2B */
.awa-b2b-sku {
  font-size: var(--text-xs);
  color: var(--awa-text-muted);
  letter-spacing: 0.04em;
}

/* Badge de desconto */
.product-thumb .product-label-sale,
.item-product .lbl-percent,
.product-label.onsale {
  background: var(--awa-red);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--r-xs);
  padding: 2px 6px;
  letter-spacing: 0.04em;
}

/* Botão de carrinho dentro de card */
.product-thumb .btn-cart,
.product-thumb .action.tocart {
  width: 100%;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   6. SEARCH BAR — barra de busca arredondada
   ═══════════════════════════════════════════════════════════ */
.block-search .input-text,
.header-search .input-text,
#search {
  height: 42px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--awa-border);
  padding-left: var(--sp-5);
  padding-right: 48px;
  font-size: var(--text-base);
}
.block-search .input-text:focus,
.header-search .input-text:focus,
#search:focus {
  border-color: var(--awa-red);
  box-shadow: 0 0 0 3px var(--awa-red-light);
}

/* ═══════════════════════════════════════════════════════════
   7. HEADER — refinamentos tipográficos e de link
   ═══════════════════════════════════════════════════════════ */

/* Logo */
.header-logo img,
.logo img,
.sticky-logo img { max-width: 160px; height: auto; }

/* Top bar (conta, telefone) */
.top-account a,
.header-top-links a,
.header .top-bar a {
  font-size: var(--text-sm);
  color: var(--awa-text-muted);
  transition: color var(--t-fast);
}
.top-account a:hover,
.header-top-links a:hover { color: var(--awa-red); }

/* Nav principal */
.nav-sections a,
.navigation a,
.header-nav a {
  font-family: var(--awa-font);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--awa-text);
  transition: color var(--t-fast);
}
.nav-sections a:hover,
.navigation a:hover,
.header-nav a:hover { color: var(--awa-red); }

/* Minicart — ícone e contador */
.minicart-wrapper .action.showcart .counter.qty {
  background: var(--awa-red);
  color: #fff;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* Mobile: search + minicart alinhados */
@media (max-width: 767px) {
  .minicart-wrapper { margin-left: auto; }
  .block-search { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   8. FOOTER — tipografia e links
   ═══════════════════════════════════════════════════════════ */
.page_footer,
.footer-content {
  font-family: var(--awa-font);
  font-size: var(--text-sm);
}

/* Headings de coluna */
.page_footer h4,
.page_footer h3,
.page_footer .footer-heading,
.footer-title {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-4);
}

/* Links */
.page_footer a {
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--t-fast);
  text-decoration: none;
}
.page_footer a:hover { color: #fff; }

/* Copyright */
.footer-bottom .copyright,
.footer-bottom p {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
}

/* ═══════════════════════════════════════════════════════════
   9. B2B GATE — visual unificado para cards de acesso
   Resolve: border-radius caótico (14/16px conflitantes),
   mensagem diferente por contexto (resolvida no template).
   ═══════════════════════════════════════════════════════════ */
.awa-b2b-gate-card {
  border-radius: var(--r-md);
  border: 1.5px solid var(--awa-border);
  background: var(--awa-bg-alt);
  padding: var(--sp-4);
}

.awa-b2b-gate-card__badge {
  display: inline-block;
  background: var(--awa-red);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  padding: 3px 10px;
  margin-bottom: var(--sp-2);
}

.awa-b2b-gate-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--awa-text);
  margin-bottom: var(--sp-1);
}

.awa-b2b-gate-card__description {
  font-size: var(--text-sm);
  color: var(--awa-text-muted);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
}

.awa-b2b-gate-card__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.awa-b2b-gate-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 var(--sp-4);
  background: var(--awa-red);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.awa-b2b-gate-card__action:hover {
  background: var(--awa-red-dark);
  color: #fff;
  box-shadow: var(--shadow-red);
}

.awa-b2b-gate-card__action--secondary {
  background: var(--awa-bg);
  color: var(--awa-text-muted);
  border: 1.5px solid var(--awa-border);
}
.awa-b2b-gate-card__action--secondary:hover {
  background: var(--awa-bg-hover);
  color: var(--awa-text);
  border-color: var(--awa-border-md);
  box-shadow: none;
}

/* PDP gate (diferente do card compacto) */
.awa-b2b-pdp-gate {
  border-radius: var(--r-md);
  background: var(--awa-bg-alt);
  border: 1.5px solid var(--awa-border);
}

/* ═══════════════════════════════════════════════════════════
   10. ALERTAS E MENSAGENS — cores semânticas diferenciadas
   Resolve: success/warning/info todos vermelhos como CTA.
   ═══════════════════════════════════════════════════════════ */
.message.success,
.messages .success,
.alert-success {
  background: var(--awa-success-light);
  border-left: 3px solid var(--awa-success);
  color: #064e3b;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.message.warning,
.messages .warning,
.alert-warning {
  background: var(--awa-warning-light);
  border-left: 3px solid var(--awa-warning);
  color: #451a03;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.message.error,
.messages .error,
.alert-error {
  background: var(--awa-danger-light);
  border-left: 3px solid var(--awa-danger);
  color: #450a0a;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.message.info,
.messages .info,
.alert-info {
  background: var(--awa-info-light);
  border-left: 3px solid var(--awa-info);
  color: #0c4a6e;
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}

/* ═══════════════════════════════════════════════════════════
   11. PAGINAÇÃO
   ═══════════════════════════════════════════════════════════ */
.pages-items .item a,
.pages-items .item .page {
  min-width: var(--touch);
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--awa-text-muted);
  border: 1.5px solid var(--awa-border);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.pages-items .item a:hover,
.pages-items .item .page:hover {
  border-color: var(--awa-red);
  color: var(--awa-red);
}
.pages-items .item.current .page {
  background: var(--awa-red);
  border-color: var(--awa-red);
  color: #fff;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   12. BREADCRUMBS
   ═══════════════════════════════════════════════════════════ */
.breadcrumbs .items {
  font-size: var(--text-sm);
  color: var(--awa-text-muted);
}
.breadcrumbs .items .item a {
  color: var(--awa-text-muted);
  transition: color var(--t-fast);
}
.breadcrumbs .items .item a:hover { color: var(--awa-red); }
.breadcrumbs .items .item.last strong { color: var(--awa-text); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   13. BADGES / TAGS / LABELS
   ═══════════════════════════════════════════════════════════ */
.awa-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.awa-badge--primary { background: var(--awa-red); color: #fff; }
.awa-badge--success { background: var(--awa-success); color: #fff; }
.awa-badge--warning { background: var(--awa-warning); color: #fff; }
.awa-badge--neutral { background: var(--awa-bg-alt); color: var(--awa-text-muted); border: 1px solid var(--awa-border); }

/* ═══════════════════════════════════════════════════════════
   14. SECTION HEADERS — padrão eyebrow + título + link
   ═══════════════════════════════════════════════════════════ */
.awa-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--awa-border);
}
.awa-section-header__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--awa-red);
  margin-bottom: 4px;
}
.awa-section-header__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--awa-text);
  margin: 0;
  line-height: 1.2;
}
.awa-section-header__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--awa-red);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast), gap var(--t-fast);
}
.awa-section-header__link:hover {
  color: var(--awa-red-dark);
  gap: 7px;
}
@media (max-width: 480px) {
  .awa-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
  .awa-section-header__title { font-size: var(--text-xl); }
}

/* ═══════════════════════════════════════════════════════════
   15. OWL CAROUSEL — nav buttons refinados
   ═══════════════════════════════════════════════════════════ */
.owl-controls .owl-buttons div,
.owl-nav .owl-prev,
.owl-nav .owl-next {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--awa-bg);
  border: 1.5px solid var(--awa-border);
  color: var(--awa-text-muted);
  box-shadow: var(--shadow-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.owl-controls .owl-buttons div:hover,
.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
  border-color: var(--awa-red);
  color: var(--awa-red);
  box-shadow: 0 3px 10px var(--awa-red-mid);
}

/* Dots */
.owl-controls .owl-page span,
.owl-dots .owl-dot span {
  width: 7px;
  height: 7px;
  background: var(--awa-border-md);
  border-radius: 50%;
  transition: background var(--t-fast), width var(--t-fast);
}
.owl-controls .owl-page.active span,
.owl-dots .owl-dot.active span {
  background: var(--awa-red);
  width: 20px;
  border-radius: var(--r-full);
}

/* ═══════════════════════════════════════════════════════════
   16. UTILITÁRIOS
   ═══════════════════════════════════════════════════════════ */

/* Screen-reader only */
.sr-only,
.awa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link acessibilidade */
.skip-to-content:focus {
  position: fixed;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 999999;
  padding: var(--sp-3) var(--sp-6);
  background: var(--awa-text);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
}

/* Reduced motion — respeita preferência do sistema */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}