/*
Theme Name: Grasseli Football Systems
Theme URI: https://alexandregrasseli.com.br
Author: Alexandre Grasseli
Description: Tema do site de Alexandre Grasseli — Grasseli Football Systems. Azul-marinho, Barlow e Barlow Condensed. Ao ativar, cria as páginas Início, Trajetória, Método, Serviços, Para clubes, Loja e Contato.
Version: 1.5.3
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: grasseli
*/

@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('assets/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url('assets/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('assets/fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('assets/fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('assets/fonts/barlow-latin-600-normal.woff2') format('woff2'); }

:root { --navy: #0B2545; --mid: #102D52; --green: #3FB27F; --steel: #8DA9C4; --border-d: #1E3A5F; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Barlow, system-ui, sans-serif; color: var(--navy); background: #FFFFFF; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--green); }
a:hover { color: #6CCB9E; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
input, textarea, select, button { font-family: inherit; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 12px 16px; background: #FFFFFF; color: var(--navy); }

/* Header */
.g-header { background: var(--navy); color: #FFFFFF; border-bottom: 1px solid var(--border-d); position: sticky; top: 0; z-index: 50; }
.admin-bar .g-header { top: 32px; }
.g-header__in { max-width: 1240px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.g-brand { display: flex; align-items: center; gap: 16px; color: #FFFFFF; text-decoration: none; }
.g-brand:hover { color: #FFFFFF; }
.g-mono { position: relative; width: 44px; height: 44px; border: 2px solid #FFFFFF; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.g-mono::before { content: ""; position: absolute; left: -6px; right: -6px; top: 19px; height: 2px; background: var(--green); }
.g-mono span { position: relative; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; line-height: 1; background: var(--navy); padding: 0 2px; }
.g-mono-img { display: block; width: 68px; height: 68px; flex: none; }
.g-brand__txt { display: flex; flex-direction: column; gap: 5px; }
.g-brand__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: 1.2px; line-height: 1; }
.g-brand__sub { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 3.6px; color: var(--green); }
@media (max-width: 480px) { .g-mono-img { width: 54px; height: 54px; } .g-brand { gap: 12px; } .g-brand__name { font-size: 22px; } .g-brand__sub { font-size: 11px; letter-spacing: 2.6px; } }
.g-nav { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 500; }
.g-nav a { color: #C9D6E3; text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.g-nav a:hover, .g-nav a[aria-current="page"] { color: #FFFFFF; border-bottom-color: var(--green); }
.g-nav a.g-cta { color: var(--navy); background: var(--green); padding: 10px 16px; border-radius: 6px; font-weight: 600; border: 0; }
.g-nav a.g-cta:hover { background: #6CCB9E; color: var(--navy); }
.g-lang { display: inline-flex; align-items: center; gap: 6px; color: var(--steel); font-size: 14px; }
.g-nav .g-lang a { color: var(--steel); border: 0; padding: 0; font-weight: 500; }
.g-nav .g-lang a[aria-current="true"] { color: #FFFFFF; font-weight: 700; }
.g-burger { display: none; background: transparent; border: 1px solid var(--border-d); border-radius: 6px; color: #FFFFFF; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.g-burger span, .g-burger span::before, .g-burger span::after { display: block; width: 20px; height: 2px; background: #FFFFFF; position: relative; content: ""; }
.g-burger span::before { position: absolute; top: -6px; } .g-burger span::after { position: absolute; top: 6px; }
@media (max-width: 960px) {
  .g-burger { display: inline-flex; }
  .g-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; border-bottom: 1px solid var(--border-d); }
  .g-nav.is-open { display: flex; }
  .g-nav a { padding: 14px 0; border-bottom: 1px solid var(--border-d); font-size: 17px; }
  .g-nav a.g-cta { margin-top: 14px; text-align: center; }
  .g-lang { justify-content: center; padding-top: 16px; font-size: 16px; }
}
@media (max-width: 782px) { .admin-bar .g-header { top: 46px; } }

/* Footer */
.g-footer { background: var(--navy); color: #C9D6E3; border-top: 1px solid var(--border-d); }
.g-footer__in { max-width: 1240px; margin: 0 auto; padding: 48px 24px; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.g-footer__col { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.g-footer a { color: #FFFFFF; }
.g-footer a:hover { color: var(--green); }
.g-footer small { font-size: 14px; }

/* Plain pages (privacidade, 404) */
.g-plain { max-width: 820px; margin: 0 auto; padding: 72px 24px; font-size: 17px; line-height: 1.7; color: #34506F; }
.g-plain h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(36px, 8vw, 56px); line-height: 1; text-transform: uppercase; color: var(--navy); margin: 0 0 24px; }
.g-plain h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; text-transform: uppercase; color: var(--navy); margin: 40px 0 8px; }
.g-plain a { color: #1E7A52; }

/* Form feedback */
.g-alert { grid-column: 1 / -1; padding: 14px 16px; border-radius: 6px; font-size: 15px; font-weight: 600; }
.g-alert--ok { background: #E3F2EA; color: #1E7A52; }
.g-alert--erro { background: #FBEBEB; color: #A12C2C; }
.g-perfil { position: relative; display: inline-flex; cursor: pointer; }
.g-perfil input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.g-perfil span { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 21px; border: 1.5px solid currentColor; font-size: 15px; font-weight: 600; opacity: .75; }
.g-perfil span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.g-perfil input:checked + span { opacity: 1; background: #3FB27F; border-color: #3FB27F; color: #0B2545; }
.g-perfil input:checked + span::before { background: #0B2545; border-color: #0B2545; box-shadow: inset 0 0 0 2px #3FB27F; }
.g-perfil input:focus-visible + span { outline: 2px solid #3FB27F; outline-offset: 2px; }

.g-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* WordPress content wrapper: blocks are full-width sections */
.g-main > * { margin: 0; }
.g-main p:empty { display: none; }

/* Selo "Em breve" nas capas dos e-books */
.g-cover { position: relative; display: block; width: 100%; margin: 0 auto; }
.g-soon { position: absolute; top: 14px; right: -8px; z-index: 2; background: #3FB27F; color: #0B2545; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; padding: 6px 12px; border-radius: 4px; box-shadow: 0 6px 14px rgba(11,37,69,0.3); }

/* Botão flutuante de WhatsApp */
.g-wa { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border-radius: 28px; background: #25D366; color: #FFFFFF; font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 8px 24px rgba(11,37,69,.3); }
.g-wa:hover { background: #1EBE5A; color: #FFFFFF; }
@media (max-width: 640px) { .g-wa { width: 56px; padding: 0; justify-content: center; } .g-wa__txt { display: none; } }

/* ===== Animações (1.5.1) ===== */
/* Números da Início */
.g-stats .g-line { display: block; height: 3px; width: 36px; margin-top: 8px; background: #3FB27F; border-radius: 2px; transform-origin: left; }
.g-stats.g-play .g-line { animation: g-grow .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes g-grow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.g-stats span { font-variant-numeric: tabular-nums; }

/* Capas dos e-books */
.g-shelf .g-cover-wrap { position: relative; perspective: 900px; }
.g-shelf .g-cover { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.g-shelf > *:hover .g-cover, .g-shelf > *:focus-within .g-cover { transform: translateY(-8px) rotateY(-8deg); box-shadow: 14px 22px 34px rgba(11,37,69,.32) !important; }
.g-badge { position: absolute; top: 10px; right: 10px; z-index: 2; background: #3FB27F; color: #0B2545; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .5px; line-height: 1; padding: 7px 10px; border-radius: 999px; box-shadow: 0 4px 10px rgba(11,37,69,.25); white-space: nowrap; }
.g-shelf.g-play > * { animation: g-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.g-shelf.g-play > *:nth-child(2) { animation-delay: .1s } .g-shelf.g-play > *:nth-child(3) { animation-delay: .2s } .g-shelf.g-play > *:nth-child(4) { animation-delay: .3s } .g-shelf.g-play > *:nth-child(5) { animation-delay: .4s } .g-shelf.g-play > *:nth-child(6) { animation-delay: .5s }
.g-shelf.g-play .g-badge { animation: g-pop .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: .9s; }
.g-shelf.g-play > *:nth-child(2) .g-badge { animation-delay: 1s } .g-shelf.g-play > *:nth-child(3) .g-badge { animation-delay: 1.1s } .g-shelf.g-play > *:nth-child(4) .g-badge { animation-delay: 1.2s } .g-shelf.g-play > *:nth-child(5) .g-badge { animation-delay: 1.3s }
@keyframes g-rise { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
@keyframes g-pop { from { opacity: 0; transform: scale(.4) } to { opacity: 1; transform: none } }

/* Foto principal com etiquetas */
.g-hero-photo { position: relative; }
.g-chips { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 8px; justify-items: start; }
.g-chip { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 8px; background: rgba(11,37,69,.88); color: #FFFFFF; border: 1px solid #1E3A5F; max-width: 100%; }
.g-chip b { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 24px; line-height: 1; color: #F2B705; min-width: 52px; text-align: center; }
.g-chip span { font-size: 14px; line-height: 1.3; }
.g-chip small { display: block; color: #8DA9C4; font-size: 12px; }
.g-hero-photo.g-play .g-chip { animation: g-slide .6s cubic-bezier(.2,.8,.2,1) both; }
.g-hero-photo.g-play .g-chip:nth-child(1) { animation-delay: .3s } .g-hero-photo.g-play .g-chip:nth-child(2) { animation-delay: .55s } .g-hero-photo.g-play .g-chip:nth-child(3) { animation-delay: .8s }
.g-hero-photo.g-play img { animation: g-zoom 6s ease-out both; }
@keyframes g-slide { from { opacity: 0; transform: translateX(-36px) } to { opacity: 1; transform: none } }
@keyframes g-zoom { from { transform: scale(1.08) } to { transform: scale(1) } }

@media (max-width: 520px) { .g-chip small { display: none; } .g-chip { padding: 8px 12px 8px 8px; } .g-chip b { font-size: 20px; min-width: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .g-stats *, .g-shelf *, .g-shelf > *, .g-hero-photo * { animation: none !important; transition: none !important; }
}