/* =========================================================
   Union Detail — camada de identidade visual
   Carregada DEPOIS do CSS base. Só troca cor e tipografia.
   Nenhuma medida, margem, raio, grid ou animação é alterada aqui.
   Fonte: design-system-union-detail.md
   ========================================================= */

:root {
  /* ---------- Tokens do design system (referência) ---------- */
  --color-brand: #e10600;
  --color-brand-2: #ff2b23;
  --color-brand-text: #ff2b23;
  --color-brand-press: #c40500;
  --color-wa: #25d366;
  --color-wa-press: #1fb457;
  --color-on-wa: #04210f;
  --color-bg: #08090b;
  --color-bg-2: #101216;
  --color-surface: #14171d;
  --color-line: #25282f;
  --color-text: #f4f5f7;
  --color-muted: #a2a8b4;
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

  /* ---------- Tema base (formato HSL que a página consome) ---------- */
  --background: 220 16% 4%;          /* #08090B */
  --foreground: 220 16% 96%;         /* #F4F5F7 */
  --card: 220 18% 10%;               /* #14171D */
  --card-foreground: 220 16% 96%;
  --popover: 220 18% 10%;
  --popover-foreground: 220 16% 96%;
  --primary: 2 100% 44%;             /* #E10600 */
  --primary-foreground: 0 0% 100%;   /* branco sobre vermelho (5,0:1) */
  --secondary: 222 21% 12%;          /* #191D26 */
  --secondary-foreground: 220 16% 96%;
  --muted: 220 16% 7%;               /* #101216 */
  --muted-foreground: 220 11% 67%;   /* #A2A8B4 */
  --accent: 2 100% 38%;              /* #C40500 */
  --accent-foreground: 0 0% 100%;
  --border: 222 12% 16%;             /* #25282F */
  --input: 222 12% 16%;
  --ring: 2 100% 57%;                /* #FF2B23 */
  --brand-text: 2 100% 57%;          /* #FF2B23 — vermelho de texto pequeno */
  --wa: 142 70% 49%;                 /* #25D366 */
  --on-wa: 142 78% 7%;               /* #04210F */

  /* Variáveis herdadas do layout (nomes mantidos, valores da Union) */
  --stopbox-green: 2 100% 44%;
  --stopbox-green-light: 2 100% 57%;
  --stopbox-green-dark: 2 100% 38%;
  --stopbox-dark: 220 16% 4%;
  --stopbox-gray: 220 18% 10%;
  --gradient-green: linear-gradient(135deg, #e10600, #ff2b23);
  --gradient-dark: linear-gradient(180deg, #08090b, #101216);
  --gradient-card: linear-gradient(160deg, #191d26, #0e1015);
  --shadow-green: 0 4px 30px -5px rgba(225, 6, 0, .3);
  --shadow-glow: 0 0 60px rgba(225, 6, 0, .15);
}

/* ---------- Tipografia: fonte de sistema (Segoe UI) ---------- */
body { font-family: var(--font-sans); }

/* ---------- Vermelho de texto pequeno (passa AA) ---------- */
/* Eyebrows, tags, links em hover. Ícones (svg) seguem no vermelho da marca. */
.text-primary:not(svg),
.hover\:text-primary:hover:not(svg) { color: hsl(var(--brand-text)); }

/* ---------- Botão vermelho (não-WhatsApp, ex.: rota no Maps) ---------- */
.btn-primary {
  --tw-shadow: 0 0 25px rgba(225, 6, 0, .5), 0 0 50px rgba(225, 6, 0, .25);
}
.btn-primary:hover {
  --tw-shadow: 0 0 35px rgba(225, 6, 0, .7), 0 0 70px rgba(225, 6, 0, .35);
}

/* ---------- Botões de CTA — componente .btn do design system ---------- */
/* Base: pílula, peso 700, 16px 28px, hover sobe 3px (sem o zoom antigo) */
.btn-primary {
  border-radius: 999px;
  padding: 16px 28px;
  font-weight: 700;
  font-size: 1.02rem;
  transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .2s cubic-bezier(.2,.7,.2,1), background-color .2s;
}
.btn-primary:hover { --tw-scale-x: 1; --tw-scale-y: 1; --tw-translate-y: -3px; }
.btn-primary:active { --tw-translate-y: 0px; }

/* Primário WhatsApp: vermelho da marca, texto branco, ícone à esquerda */
a.btn-primary[href*="api.whatsapp.com"] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  --tw-shadow: 0 10px 24px rgba(225, 6, 0, .35);
  align-items: center;
  justify-content: center;
  gap: 10px;
}
a.btn-primary[href*="api.whatsapp.com"]:hover { --tw-shadow: 0 16px 34px rgba(225, 6, 0, .45); }
a.btn-primary[href*="api.whatsapp.com"]:active { background-color: #c40500; }
a.btn-primary[href*="api.whatsapp.com"]::before {
  content: "";
  display: inline-block;
  width: 20px; height: 20px;
  margin-right: 10px;
  vertical-align: -4px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413z%22/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413z%22/%3E%3C/svg%3E") center / contain no-repeat;
}
/* quando o botão já é flex, o gap cuida do espaçamento */
a.btn-primary.lg\:flex[href*="api.whatsapp.com"]::before { margin-right: 0; }

/* Botão pequeno do header (.btn--sm) */
header a.btn-primary { padding: 11px 20px; font-size: .92rem; }

/* Vermelho (rota no Maps): sombra da marca */
.btn-primary:not([href*="api.whatsapp.com"]) { --tw-shadow: 0 10px 24px rgba(225, 6, 0, .35); }
.btn-primary:not([href*="api.whatsapp.com"]):hover { --tw-shadow: 0 16px 34px rgba(225, 6, 0, .45); }
.btn-primary:not([href*="api.whatsapp.com"]):active { background-color: #c40500; }

/* Ghost marca do hero ("Conheça os Serviços") no mesmo formato pílula */
a.btn-outline[href="#servicos"] { border-radius: 999px; padding: 16px 28px; font-weight: 700; font-size: 1.02rem; }

/* Pill de rota (rodapé): surface, borda line, 44px de altura mínima */
.union-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 9px 16px;
  border-radius: 999px;
  background: #14171d; border: 1px solid #25282f;
  color: #f4f5f7; font-size: .88rem; font-weight: 700;
  transition: border-color .2s, color .2s;
}
.union-pill:hover { border-color: #ff2b23; color: #ff2b23; }

/* ---------- Foco visível (o DS exige; a base não tinha) ---------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #08090b, 0 0 0 5px #ff2b23;
}

/* ---------- Mobile: botão do Instagram da galeria em uma linha só ---------- */
@media (max-width: 767px) {
  #galeria a.btn-outline > span:last-child { display: none; }
  #galeria a.btn-outline { white-space: nowrap; }
}


/* =========================================================
   SERVIÇOS — acordeão (estrutura/animação do modelo, ID Union)
   ========================================================= */
.ud-svc-head { display: grid; gap: 32px; margin-bottom: 48px; align-items: end; }
.ud-svc-cta { display: flex; flex-direction: column; align-items: flex-start; }
.ud-svc-cta small { margin-top: 12px; font-size: .8rem; color: hsl(var(--muted-foreground)); font-weight: 500; }
@media (min-width: 1024px) {
  .ud-svc-head { grid-template-columns: 7fr 5fr; margin-bottom: 56px; }
  .ud-svc-cta { align-items: flex-end; }
}

.ud-acc { list-style: none; margin: 0; padding: 0; border-top: 1px solid hsl(var(--border)); }
.ud-acc-item { border-bottom: 1px solid hsl(var(--border)); position: relative; }
.ud-acc-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 16px; transition: background .2s; }
.ud-acc-row:hover { background: rgba(255, 255, 255, .025); }
.ud-acc-item.open .ud-acc-row { background: rgba(225, 6, 0, .04); }
@media (min-width: 1024px) { .ud-acc-row { gap: 12px; padding: 0 24px; } }

/* barrinha lateral do item aberto */
.ud-acc-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #e10600; transform-origin: top; transform: scaleY(0); opacity: 0; transition: transform .3s, opacity .3s; }
.ud-acc-item.open .ud-acc-bar { transform: scaleY(1); opacity: 1; }

.ud-acc-trigger { flex: 1; display: flex; align-items: center; gap: 12px; padding: 20px 0; text-align: left; min-width: 0; background: none; border: 0; color: inherit; cursor: pointer; }
@media (min-width: 640px) { .ud-acc-trigger { gap: 20px; } }
@media (min-width: 1024px) { .ud-acc-trigger { padding: 24px 0; } }
.ud-acc-num { display: none; font-size: 11px; font-weight: 700; letter-spacing: .3em; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
@media (min-width: 640px) { .ud-acc-num { display: inline; } }
.ud-acc-icon { width: 44px; height: 44px; border-radius: .75rem; background: hsl(var(--primary) / .1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: hsl(var(--primary)); transition: background .3s, color .3s; }
.ud-acc-item.open .ud-acc-icon { background: hsl(var(--primary)); color: #fff; }
.ud-acc-titles { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.ud-acc-title { font-size: 1.06rem; font-weight: 700; line-height: 1.2; color: hsl(var(--foreground)); }
@media (min-width: 1024px) { .ud-acc-title { font-size: 1.35rem; } }

.ud-acc-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ud-acc-quote, .ud-acc-quote-m { background: hsl(var(--primary)); color: #fff; border-radius: 999px; transition: background .2s, transform .15s; }
.ud-acc-quote:hover, .ud-acc-quote-m:hover { background: #c40500; }
.ud-acc-quote { display: none; align-items: center; gap: 6px; padding: 8px 14px; font-size: .8rem; font-weight: 700; box-shadow: 0 4px 14px rgba(225, 6, 0, .3); }
.ud-acc-quote-m { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.ud-acc-quote::before, .ud-acc-quote-m::before {
  content: ""; width: 14px; height: 14px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413z%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.ud-acc-quote-m::before { width: 17px; height: 17px; }
@media (min-width: 640px) { .ud-acc-quote { display: inline-flex; } .ud-acc-quote-m { display: none; } }

/* "+" vira "×" */
.ud-acc-toggle { width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .3s cubic-bezier(.16,1,.3,1); }
.ud-acc-toggle:hover { border-color: hsl(var(--primary) / .45); }
.ud-acc-toggle svg { width: 16px; height: 16px; }
.ud-acc-item.open .ud-acc-toggle { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: #fff; transform: rotate(45deg); }

/* painel com altura animada (grid 0fr -> 1fr) */
.ud-acc-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1), opacity .4s cubic-bezier(.16,1,.3,1); }
.ud-acc-item.open .ud-acc-panel { grid-template-rows: 1fr; opacity: 1; }
.ud-acc-panel > div { overflow: hidden; }
.ud-acc-body { display: grid; gap: 20px; padding: 4px 16px 28px; }
@media (min-width: 1024px) { .ud-acc-body { padding: 4px 64px 32px; } .ud-acc-desc { max-width: 720px; } }
.ud-acc-desc { font-size: .95rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
@media (min-width: 1024px) { .ud-acc-desc { font-size: 1.04rem; } }
.ud-acc-cta-col { display: flex; }
a.btn-primary.ud-acc-cta { display: inline-block; padding: 12px 22px; font-size: .9rem; }

/* título com brilho percorrendo (animação do modelo, cores Union) */
.text-gradient.ud-shine {
  background-image: linear-gradient(100deg, #e10600 18%, #ff2b23 40%, #ffb3ad, #ff2b23 60%, #e10600 82%);
  background-size: 250% 100%; background-position: 200% center;
  -webkit-text-fill-color: transparent; animation: ud-shine 6s ease-in-out infinite;
}
@keyframes ud-shine { 0%, 100% { background-position: 200% center; } 50% { background-position: -50% center; } }

/* pulso no botão principal (anel vermelho) */
.ud-pulse { position: relative; isolation: isolate; }
.ud-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; animation: ud-pulse 2.6s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes ud-pulse { 0% { box-shadow: 0 0 0 0 rgba(225, 6, 0, .5); } 100% { box-shadow: 0 0 0 20px rgba(225, 6, 0, 0); } }

/* =========================================================
   INSTAGRAM — celular flutuando (estrutura/animação do modelo, ID Union)
   ========================================================= */
.ud-insta { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 860px; padding: 96px 0;
  background: linear-gradient(135deg, #101216 0%, #08090b 60%, #14171d 100%); border-top: 1px solid hsl(var(--border) / .5); border-bottom: 1px solid hsl(var(--border) / .5); }
@media (min-width: 1024px) { .ud-insta { min-height: 940px; padding: 128px 0; } }
.ud-insta > .container { width: 100%; }
.ud-insta-glow { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 520px; height: 520px; opacity: .2; pointer-events: none; background: radial-gradient(circle, #e10600 0%, transparent 70%); }
.ud-insta-grain { position: absolute; inset: 0; opacity: .3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); }
.ud-insta-grid { display: grid; gap: 48px; align-items: center; }
.ud-insta-phone-col { display: flex; justify-content: center; order: 2; }
.ud-insta-text { order: 1; text-align: center; }
.ud-insta-lead { margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) {
  .ud-insta-grid { grid-template-columns: 5fr 7fr; gap: 64px; }
  .ud-insta-phone-col { order: 1; }
  .ud-insta-text { order: 2; text-align: left; }
  .ud-insta-lead { margin-left: 0; }
}
.ud-insta-btns { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
@media (min-width: 1024px) { .ud-insta-btns { justify-content: flex-start; } }
a.btn-outline.ud-btn-ig { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 15px 26px; font-weight: 700; font-size: 1rem; }
.ud-insta-sep { margin: 40px 0; height: 1px; background: hsl(var(--border)); }
.ud-insta-info { display: grid; gap: 24px; text-align: left; }
@media (min-width: 640px) { .ud-insta-info { grid-template-columns: repeat(3, 1fr); } }
.ud-insta-info > div { display: flex; gap: 12px; align-items: flex-start; }
.ud-insta-ico { width: 18px; height: 18px; margin-top: 2px; color: hsl(var(--primary)); flex-shrink: 0; }
.ud-k { font-size: 10px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.ud-v { display: block; font-size: .85rem; color: hsl(var(--foreground)); margin-top: 4px; line-height: 1.45; }
.ud-v-strong { font-weight: 700; font-size: .92rem; transition: color .2s; }
.ud-v-strong:hover { color: hsl(var(--brand-text)); }

/* celular */
.ud-phone { position: relative; width: 300px; height: 620px; margin: 0 auto; animation: ud-float 5.5s ease-in-out infinite; }
@keyframes ud-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.ud-phone-halo { position: absolute; inset: -40px; border-radius: 80px; pointer-events: none; filter: blur(40px); background: radial-gradient(ellipse, rgba(225, 6, 0, .22) 0%, transparent 65%); }
.ud-phone-body { position: absolute; inset: 0; border-radius: 52px; padding: 10px; background: linear-gradient(155deg, #2a2c31 0%, #0a0b0d 45%, #191d26 100%);
  box-shadow: 0 0 0 1.5px #3a3d45, 0 50px 100px rgba(0, 0, 0, .55), 0 20px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05); }
.ud-phone-btn { position: absolute; width: 3px; background: #171a20; }
.ud-phone-btn.l { left: -2px; border-radius: 4px 0 0 4px; }
.ud-phone-btn.r { right: -2px; border-radius: 0 4px 4px 0; }
.ud-phone-screen { position: relative; display: block; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: #0b1014; }
.ud-phone-island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; background: #000; border-radius: 999px; z-index: 3; }
.ud-phone-screen img { position: absolute; top: 44px; left: 0; width: 100%; height: calc(100% - 44px); object-fit: cover; object-position: top; }
.ud-phone-glare { position: absolute; inset: 0 0 auto; height: 128px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, transparent 100%); }
@media (max-width: 359px) { .ud-phone { width: 270px; height: 558px; } }

@media (prefers-reduced-motion: reduce) {
  .ud-phone, .text-gradient.ud-shine, .ud-pulse::after { animation: none; }
}

/* =========================================================
   CURSOS — faixas infinitas (tags + fotos), só CSS
   ========================================================= */
.ud-mq {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.ud-mq-imgs { margin-top: 40px; }
@media (min-width: 768px) { .ud-mq-imgs { margin-top: 48px; } }

/* trilho = 2 cópias idênticas; anda exatamente 50% => loop sem pulo */
.ud-mq-track { display: flex; width: max-content; will-change: transform; animation: ud-marquee linear infinite; }
.ud-mq-group { display: flex; flex-shrink: 0; gap: 10px; padding-right: 10px; }
@keyframes ud-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.ud-mq-tags   { animation-duration: 60s; }   /* mais lenta */
.ud-mq-photos { animation-duration: 45s; }   /* um pouco mais rápida */

/* pílulas */
.ud-pill {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(244, 245, 247, .14); background: rgba(244, 245, 247, .03);
  color: hsl(var(--foreground)); font-size: 14px; font-weight: 700; line-height: 1.2;
}
.ud-pill svg { width: 15px; height: 15px; color: hsl(var(--brand-text)); flex-shrink: 0; }

/* cards 3:4 — ~2 no celular, 4 no tablet, ~6 no desktop */
.ud-mq-card { flex-shrink: 0; width: calc((100vw - 10px) / 2); aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: hsl(var(--card)); }
@media (min-width: 640px)  { .ud-mq-card { width: calc((100vw - 30px) / 4); } }
@media (min-width: 1024px) { .ud-mq-card { width: calc((100vw - 50px) / 6); max-width: 300px; } }
.ud-mq-card img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }

@media (prefers-reduced-motion: reduce) { .ud-mq-track { animation: none; } }

/* título dos cursos: garante as 2 linhas pedidas em telas estreitas */
@media (max-width: 767px) { .ud-cursos-title { font-size: min(2.25rem, 7.3vw); line-height: 1.15; } }