/* Base comum dos protótipos da Gou: fontes, cores, cursor, abertura, sanfona, selo */

/* Tipografia: Hero New para quase tudo (90%), Addington itálico só para destaques (10%) */
@font-face { font-family: "Addington"; src: url("../fontes/AddingtonCF-LightItalic.woff2") format("woff2"), url("../fontes/AddingtonCF-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Addington"; src: url("../fontes/AddingtonCF-BoldItalic.woff2") format("woff2"), url("../fontes/AddingtonCF-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Addington"; src: url("../fontes/AddingtonCF-ExtraBoldItalic.woff2") format("woff2"), url("../fontes/AddingtonCF-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "HeroNew"; src: url("../fontes/Hero-New-Regular.woff2") format("woff2"), url("../fontes/Hero-New-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "HeroNew"; src: url("../fontes/Hero-New-SemiBold.woff2") format("woff2"), url("../fontes/Hero-New-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "HeroNew"; src: url("../fontes/Hero-New-Bold.woff2") format("woff2"), url("../fontes/Hero-New-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  --creme: #EDEBDE;
  --amarelo: #FFF536;
  --grafite: #212121;
  --noite: #141313;
  --roxo: #6B15BB;
  --italico: "Addington", Georgia, serif;
  --texto: "HeroNew", "Helvetica Neue", Arial, sans-serif;
  --display: var(--texto);
  --rotulo: var(--texto);
  --gutter: clamp(16px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font-family: var(--texto); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rotulo { font-family: var(--rotulo); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.titulo { font-family: var(--texto); font-weight: 600; letter-spacing: -.035em; line-height: .9; }
.destaque { font-family: var(--italico); font-weight: 300; font-style: italic; letter-spacing: -.01em; }
.link { display: inline-flex; gap: 10px; align-items: center; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: background-size .35s; }
.link:hover { background-size: 30% 1px; }
.placeholder { outline: 1px dashed currentColor; outline-offset: 4px; opacity: .7; }

/* Logo por máscara: a cor vem de currentColor */
.logo-gou { display: inline-block; aspect-ratio: 3.15; height: 26px; background: currentColor;
  -webkit-mask: url("/wp-content/uploads/gou/img/gou-wordmark-creme.png") center / 128% 148% no-repeat;
          mask: url("/wp-content/uploads/gou/img/gou-wordmark-creme.png") center / 128% 148% no-repeat; }
.logo-g { display: inline-block; aspect-ratio: 1; height: 28px; background: currentColor;
  -webkit-mask: url("/wp-content/uploads/gou/img/gou-simbolo-g-creme.png") center / 300% 300% no-repeat;
          mask: url("/wp-content/uploads/gou/img/gou-simbolo-g-creme.png") center / 300% 300% no-repeat; }

/* Vídeo de fundo (YouTube) cobrindo o container */
.video-cover { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #000 center / cover no-repeat; }
.video-cover iframe { position: absolute; top: 50%; left: 50%; width: 100cqw; height: 56.25cqw; min-height: 100cqh; min-width: 177.78cqh; transform: translate(-50%, -50%) scale(1.02); border: 0; pointer-events: none; }

/* Abertura */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--gutter); transition: opacity .7s ease, visibility .7s; cursor: pointer; }
.intro__linha { width: 100%; display: flex; justify-content: space-between; gap: 24px; }
.intro__linha span { opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; }
.intro__linha span.on { opacity: 1; transform: none; }
.intro.fora { opacity: 0; visibility: hidden; }
@media (max-width: 700px) { .intro__linha { flex-direction: column; align-items: center; text-align: center; gap: 14px; } }

/* Cursor */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; mix-blend-mode: difference; color: #fff; }
.cursor__ponto { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; transition: transform .25s ease, opacity .25s; }
.cursor__etiqueta { position: absolute; top: -18px; left: 14px; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px; border: 1px solid #fff; border-radius: 99px; white-space: nowrap;
  font-family: var(--rotulo); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: scale(.6); transform-origin: left center; transition: opacity .25s, transform .25s; }
.cursor.ativo .cursor__ponto { transform: scale(.5); }
.cursor.ativo .cursor__etiqueta { opacity: 1; transform: none; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor { display: none; } }

/* Selo girando */
.selo { width: 112px; height: 112px; display: grid; place-items: center; position: relative; }
.selo svg { position: absolute; inset: 0; animation: girar 14s linear infinite; }
.selo text { font-family: var(--rotulo); font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; fill: currentColor; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Sanfona de serviços */
.sanfona details { border-bottom: 1px solid currentColor; }
.sanfona summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; }
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary .mais { position: relative; width: 16px; height: 16px; flex: none; }
.sanfona summary .mais::before, .sanfona summary .mais::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1px; background: currentColor; transition: transform .3s; }
.sanfona summary .mais::after { transform: rotate(90deg); }
.sanfona details[open] summary .mais::after { transform: rotate(0); }
.sanfona .corpo { padding: 0 0 26px; max-width: 56ch; }
.sanfona .corpo ul { margin: 12px 0 0; padding: 0; list-style: none; }
.sanfona .corpo li::before { content: "✦ "; }

/* Entrada suave ao rolar */
.revela { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.revela.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revela { opacity: 1; transform: none; } .selo svg { animation: none; } }

/* Menu mobile */
.menu-btn { display: none; }
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; position: relative; z-index: 61; }
  .nav-links { display: none !important; }
  body.menu-aberto .nav-links { display: flex !important; position: fixed; inset: 0; z-index: 60; flex-direction: column; justify-content: center; align-items: center; gap: 26px; font-size: 22px; }
  body.menu-aberto .menu-btn::after { content: " ✕"; }
  body.menu-aberto .topo { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .so-desktop { display: none; }
}
@media (min-width: 761px) { .so-mobile { display: none; } }

/* Barra de aviso dos protótipos */
.aviso-prototipo { position: fixed; left: 50%; translate: -50% 0; bottom: 12px; white-space: nowrap; z-index: 80; font: 600 11px/1 var(--texto); letter-spacing: .04em; padding: 8px 12px; border-radius: 99px; background: #000; color: #fff; opacity: .75; }
.aviso-prototipo a { text-decoration: underline; }