/* Yuu Digital 2027 — componentes em CSS puro (prefixo yu-).
   Cópia do components/bundle.css do sistema de design "Yuu Digital".
   As fontes são carregadas no <head> (layout.php), por isso o @import foi retirado.
   Carregar DEPOIS de tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.yu-slab :focus-visible, .yu-footer :focus-visible { outline-color: var(--lime); }
.poster, .eyebrow { text-transform: uppercase; }
.yu-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-6); }
.yu-icon { width: 1em; height: 1em; flex: none; }

/* ---------- Button ---------- */
.yu-btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  height: 48px; padding: 0 var(--space-2) 0 var(--space-6);
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font: 500 15px/20px var(--font-body); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform .18s ease, background-color .18s ease;
}
.yu-btn--plain { padding: 0 var(--space-6); }
.yu-btn__arrow {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--radius-pill); transition: transform .25s ease;
}
.yu-btn__arrow svg { width: 16px; height: 16px; }
.yu-btn:hover .yu-btn__arrow { transform: rotate(45deg); }
.yu-btn:active { transform: translateY(1px); }
.yu-btn[disabled], .yu-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.yu-btn--ink { background: var(--ink); color: var(--paper); }
.yu-btn--ink .yu-btn__arrow { background: var(--lime); color: var(--on-lime); }
.yu-btn--lime { background: var(--lime); color: var(--on-lime); }
.yu-btn--lime .yu-btn__arrow { background: var(--on-lime); color: var(--lime); }
.yu-btn--violet { background: var(--violet); color: var(--on-violet); }
.yu-btn--violet .yu-btn__arrow { background: var(--lime); color: var(--on-lime); }
.yu-btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.yu-btn--outline .yu-btn__arrow { background: var(--ink); color: var(--paper); }
.yu-slab .yu-btn--outline, .yu-footer .yu-btn--outline { border-color: var(--on-slab); color: var(--on-slab); }
.yu-slab .yu-btn--outline .yu-btn__arrow, .yu-footer .yu-btn--outline .yu-btn__arrow { background: var(--on-slab); color: var(--slab); }
.yu-btn--sm { height: 40px; font-size: 14px; }
.yu-btn--sm .yu-btn__arrow { width: 26px; height: 26px; }

/* ---------- Tag ---------- */
.yu-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font: 500 13px/16px var(--font-body); white-space: nowrap; text-decoration: none;
}
.yu-tag--violet { background: var(--violet); color: var(--on-violet); }
.yu-tag--lime { background: var(--lime); color: var(--on-lime); }
.yu-tag--lavender { background: var(--lavender); color: var(--ink); }
.yu-tag--outline { border-color: var(--ink-muted); color: var(--ink); }
.yu-slab .yu-tag--outline, .yu-footer .yu-tag--outline { border-color: var(--on-slab-muted); color: var(--on-slab); }
.yu-tag--lg { height: 40px; padding: 0 var(--space-4); font-size: 15px; }
a.yu-tag--outline:hover { background: var(--ink); color: var(--paper); }
.yu-slab a.yu-tag--outline:hover, .yu-footer a.yu-tag--outline:hover { background: var(--on-slab); color: var(--slab); }

/* ---------- Highlight (marca-texto) ---------- */
.yu-mark {
  background: var(--lime); color: var(--on-lime);
  padding: 0 .14em .04em; border-radius: .16em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.yu-mark--violet { background: var(--violet); color: var(--on-violet); }
.yu-mark--tilt { display: inline-block; transform: rotate(-1.5deg); }
.yu-disc-inline {
  display: inline-grid; place-items: center; width: .9em; height: .9em; vertical-align: -.08em;
  border-radius: var(--radius-pill); background: var(--violet); color: var(--lime);
  box-shadow: 0 0 0 .06em var(--paper), 0 0 0 .12em var(--lime);
}
.yu-disc-inline svg { width: .5em; height: .5em; }

/* ---------- Sticker (selo giratório) ---------- */
.yu-sticker {
  position: relative; width: 144px; aspect-ratio: 1; flex: none;
  border-radius: var(--radius-pill); background: var(--violet); color: var(--on-violet);
  display: grid; place-items: center;
}
.yu-sticker--lime { background: var(--lime); color: var(--on-lime); }
.yu-sticker__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: yu-spin 18s linear infinite; }
.yu-sticker__ring text { font: 600 11px var(--font-mono); letter-spacing: .2em; fill: currentColor; }
.yu-sticker__core {
  width: 42%; aspect-ratio: 1; border-radius: var(--radius-pill);
  background: var(--lime); color: var(--on-lime); display: grid; place-items: center;
}
.yu-sticker--lime .yu-sticker__core { background: var(--on-lime); color: var(--lime); }
.yu-sticker__core svg { width: 45%; height: 45%; }
a.yu-sticker:hover .yu-sticker__core { transform: rotate(45deg); transition: transform .25s ease; }
@keyframes yu-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .yu-sticker__ring { animation: none; } }

/* ---------- Spark (brilho de 4 pontas) ---------- */
.yu-spark { width: 28px; height: 28px; fill: var(--violet); }
.yu-spark--lime { fill: var(--lime); }

/* ---------- Header ---------- */
.yu-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6);
  height: var(--header-height); border-bottom: 1px solid var(--line); background: var(--paper);
}
.yu-header__nav { display: flex; gap: var(--space-6); }
.yu-header__nav a, .yu-header__link { color: var(--ink); text-decoration: none; font: 500 15px/20px var(--font-body); }
.yu-header__nav a:hover, .yu-header__link:hover, .yu-header__nav a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.yu-header__actions { justify-self: end; display: flex; align-items: center; gap: var(--space-6); }
.yu-header__menu { display: none; }
.yu-wordmark { font: 800 26px/1 var(--font-display); letter-spacing: -.04em; color: var(--ink); text-decoration: none; white-space: nowrap; }
@media (max-width: 860px) {
  .yu-header { grid-template-columns: auto 1fr; }
  .yu-header__nav, .yu-header__link { display: none; }
  .yu-header__menu { display: inline-flex; }
}

/* ---------- Hero ---------- */
.yu-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; padding: var(--space-24) 0 var(--space-16); }
.yu-hero__title { margin: 0; max-width: 15ch; }
.yu-hero__sub { margin: 0; max-width: 560px; color: var(--ink-muted); }
.yu-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.yu-hero__tags { position: absolute; top: var(--space-8); right: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.yu-hero__note { margin: 0; color: var(--ink-muted); }

/* ---------- Slab ---------- */
.yu-slab {
  background: var(--slab); color: var(--on-slab); border: 1px solid var(--line-slab);
  border-radius: var(--radius-xl); padding: var(--space-16) var(--space-12);
}
.yu-slab--violet { background: var(--violet); color: var(--on-violet); border-color: var(--violet); }
.yu-slab__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8);
  padding-bottom: var(--space-6); margin-bottom: var(--space-12); border-bottom: 1px solid var(--line-slab);
}
.yu-slab__title { margin: 0; }
.yu-slab__lede { margin: 0; max-width: 360px; color: var(--on-slab-muted); }

/* ---------- Grids ---------- */
.yu-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.yu-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }

/* ---------- Media placeholder ---------- */
.yu-ph {
  position: relative; width: 100%; height: 100%; display: grid; place-items: end start; padding: var(--space-3);
  background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(163,163,157,.18) 11px 12px), var(--slab-raised);
  font: 500 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-slab-muted);
}

/* ---------- ServiceCard ---------- */
.yu-service {
  display: flex; flex-direction: column; gap: var(--space-4); min-height: 100%;
  background: var(--slab-raised); color: var(--on-slab); border-radius: var(--radius-lg);
  padding: var(--space-6); text-decoration: none;
}
.yu-service__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-slab); }
.yu-service__title { margin: 0; color: var(--lime); }
.yu-service__go {
  flex: none; width: 48px; height: 48px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--slab); color: var(--on-slab); transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.yu-service__go svg { width: 20px; height: 20px; }
.yu-service__text { margin: 0; color: var(--on-slab-muted); }
.yu-service__media { margin-top: auto; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: var(--slab); }
.yu-service__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .3s ease; }
.yu-service:hover .yu-service__go { background: var(--lime); color: var(--on-lime); transform: rotate(45deg); }
.yu-service:hover .yu-service__media img { filter: none; }
.yu-service--featured { background: var(--violet); color: var(--on-violet); }
.yu-service--featured .yu-service__title { color: var(--on-violet); }
.yu-service--featured .yu-service__text { color: var(--on-violet-muted); }
.yu-service--featured .yu-service__top { border-color: rgba(255,255,255,.28); }
.yu-service--featured .yu-service__go { background: var(--lime); color: var(--on-lime); }

/* ---------- CaseCard ---------- */
.yu-case { display: flex; flex-direction: column; gap: var(--space-3); color: inherit; text-decoration: none; }
.yu-case__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--slab-raised); }
.yu-case__media--arc { border-top-left-radius: 70% 90%; }
.yu-case__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .3s ease; }
.yu-case:hover .yu-case__media img { filter: none; }
.yu-case__media .yu-sticker { position: absolute; top: var(--space-4); right: var(--space-4); width: 112px; }
.yu-case__title { margin: var(--space-2) 0 0; color: var(--violet-ink); }
.yu-case__meta { margin: 0; color: var(--ink-muted); }

/* ---------- Stat ---------- */
.yu-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.yu-stat { display: flex; flex-direction: column; gap: var(--space-2); }
.yu-stat__num { margin: 0; }
.yu-stat__plus { color: var(--violet-ink); }
.yu-stat__label { margin: 0; color: var(--ink-muted); max-width: 22ch; }
.yu-slab .yu-stat__plus { color: var(--lime); }
.yu-slab .yu-stat__label { color: var(--on-slab-muted); }

/* ---------- Steps (Como funciona) ---------- */
.yu-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.yu-step { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 2px solid var(--ink); }
.yu-step__n { color: var(--violet-ink); }
.yu-step__title { margin: 0; }
.yu-step__text { margin: 0; color: var(--ink-muted); }
.yu-step--loop { border-top-color: var(--violet); }

/* ---------- FAQ ---------- */
.yu-faq { border-top: 1px solid var(--line); }
.yu-faq__item { border-bottom: 1px solid var(--line); }
.yu-faq__item > summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-6);
  padding: var(--space-6) 0; cursor: pointer;
}
.yu-faq__item > summary::-webkit-details-marker { display: none; }
.yu-faq__q { margin: 0; }
.yu-faq__icon {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--ink); color: var(--paper); transition: transform .25s ease, background-color .25s ease;
}
.yu-faq__icon svg { width: 18px; height: 18px; }
.yu-faq__item[open] .yu-faq__icon { transform: rotate(45deg); background: var(--violet); color: var(--on-violet); }
.yu-faq__a { margin: 0; padding: 0 0 var(--space-6); max-width: 720px; color: var(--ink-muted); }

/* ---------- Field / Input ---------- */
.yu-field { display: flex; flex-direction: column; gap: var(--space-2); }
.yu-field__label { font: 500 15px/20px var(--font-body); color: var(--ink); }
.yu-input {
  width: 100%; height: 52px; padding: 0 var(--space-4);
  border: 1.5px solid var(--ink-muted); border-radius: var(--radius-md);
  background: var(--paper-raised); color: var(--ink); font: 400 16px/24px var(--font-body);
}
.yu-input::placeholder { color: var(--ink-muted); }
.yu-input:hover { border-color: var(--ink); }
.yu-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
textarea.yu-input { height: auto; min-height: 128px; padding: var(--space-3) var(--space-4); resize: vertical; }
.yu-field__msg { display: flex; align-items: center; gap: 6px; font: 500 13px/16px var(--font-body); color: var(--ink-muted); }
.yu-field--error .yu-input { border-color: var(--danger); }
.yu-field--error .yu-field__msg { color: var(--danger); }

/* ---------- PlatformStrip ---------- */
.yu-platforms {
  list-style: none; margin: 0; padding: var(--space-12) 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6) var(--space-12);
  border-block: 1px solid var(--line);
}
.yu-platforms li { font: 700 24px/1 var(--font-display); letter-spacing: -.02em; color: var(--ink-muted); }

/* ---------- Footer ---------- */
.yu-footer { background: var(--slab); color: var(--on-slab); border: 1px solid var(--line-slab); border-radius: var(--radius-xl); padding: var(--space-16) var(--space-12) var(--space-8); }
.yu-footer__cta { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; padding-bottom: var(--space-16); }
.yu-footer__eyebrow { margin: 0; color: var(--lime); }
.yu-footer__title { margin: 0; max-width: 18ch; }
.yu-footer__lede { margin: 0; max-width: 460px; color: var(--on-slab-muted); }
.yu-footer__cta .yu-sticker { position: absolute; right: 0; bottom: var(--space-12); }
.yu-footer__base { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); flex-wrap: wrap; padding-top: var(--space-8); border-top: 1px solid var(--line-slab); }
.yu-footer__brand { display: flex; flex-direction: column; gap: var(--space-1); }
.yu-footer__brand .yu-wordmark { color: var(--lime); font-size: 22px; margin-bottom: var(--space-2); }
.yu-footer__brand p { margin: 0; }
.yu-footer__brand a { color: inherit; }
.yu-footer__links { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); }
.yu-footer__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.yu-footer__legal { display: flex; gap: var(--space-6); color: var(--on-slab-muted); }
.yu-footer__legal a { color: var(--on-slab-muted); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .yu-grid-3, .yu-grid-2, .yu-stats { grid-template-columns: 1fr; }
  .yu-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yu-slab__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .display-xl { font-size: 56px; }
  .display-l { font-size: 44px; }
  .poster { font-size: 36px; }
  .heading-1 { font-size: 36px; }
  .stat { font-size: 56px; }
  .yu-slab, .yu-footer { border-radius: var(--radius-lg); padding: var(--space-12) var(--space-6); }
  .yu-hero { padding: var(--space-16) 0 var(--space-12); }
  .yu-hero__tags { position: static; flex-direction: row; }
  .yu-steps { grid-template-columns: 1fr; }
  .yu-footer__cta .yu-sticker { position: static; }
  .yu-footer__links { align-items: flex-start; }
  .yu-footer__chips { justify-content: flex-start; }
}