/* ==========================================================================
   TEUTO ESPORTE CLUBE — Identidade visual v2 (tokens + base + componentes)
   Fonte de verdade das cores: logo oficial (verde do wordmark, lima do
   símbolo, ponto vermelho) e material institucional de mídia do clube.
   Documentação: IDENTIDADE.md na raiz do projeto.
   ========================================================================== */

:root{
  /* --- Cores de marca (extraídas da logo) ------------------------------ */
  /* Amostradas de logo_topo.png (arquivo oficial do site atual).          */
  --teuto:        #019E5A;   /* verde do wordmark — superfícies e display   */
  --teuto-700:    #0B7A48;   /* verde de texto, links e botões (AA 5,4:1)   */
  --teuto-800:    #086039;
  --lima:         #94C13F;   /* símbolo — energia, destaques sobre escuro   */
  --lima-300:     #C9E08A;
  --lima-100:     #EEF5DA;
  --ponto:        #E22736;   /* o ponto vermelho — um por tela, no máximo   */
  --ponto-700:    #C41E2E;

  /* --- Ambiente: mata, papel e menta ----------------------------------- */
  --mata-950:     #06140D;   /* rodapé                                      */
  --mata-900:     #0A2117;   /* seções escuras                              */
  --mata-800:     #10301F;
  --mata-700:     #18432C;
  --papel:        #F6F4EC;   /* fundo base (creme do material de Betim)     */
  --papel-2:      #EDEADF;
  --menta:        #DCEBDF;   /* faixas claras (menta institucional)         */
  --menta-2:      #C3DDC9;
  --branco:       #FFFFFF;

  /* --- Texto ------------------------------------------------------------ */
  --tinta:        #0E1A13;
  --tinta-2:      #3B4740;
  --tinta-3:      #66716A;
  --linha:        rgba(14,26,19,.11);
  --linha-clara:  rgba(255,255,255,.14);

  /* --- Apoio (sinalização, nunca como cor de marca) -------------------- */
  --sol:          #F4C430;   /* ipê amarelo — avisos, “novo”                */
  --ceu:          #2F8FCB;   /* piscina — tag de aquáticos                  */

  /* --- Tipografia ------------------------------------------------------- */
  --f-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-texto:   'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Métrica ---------------------------------------------------------- */
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --sombra:    0 1px 2px rgba(14,26,19,.04), 0 14px 34px -22px rgba(14,26,19,.28);
  --sombra-lg: 0 40px 80px -40px rgba(6,20,13,.45);
  --largura: 1240px;
  --header-h: 74px;
  --gutter: clamp(1rem, 4vw, 2rem);
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{margin:0}
img,svg,video,picture{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--lima);outline-offset:3px;border-radius:6px}

body{
  font-family:var(--f-texto);
  font-size:1.0625rem;line-height:1.6;
  color:var(--tinta);background:var(--papel);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --- Tipografia ----------------------------------------------------------- */
.display,.t1,.t2,.t3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.002em}
.display{font-size:clamp(2.9rem,8.2vw,6.6rem);line-height:.9}
.t1{font-size:clamp(2.3rem,5.4vw,4rem);line-height:.95}
.t2{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1}
.t3{font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.05;font-weight:700}
.t4{font-weight:700;font-size:1.12rem;line-height:1.25}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--tinta-2);max-width:60ch}
.miudo{font-size:.86rem;color:var(--tinta-3)}

/* Olho de seção: começa com o ponto vermelho do símbolo */
.olho{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teuto-700);
}
.olho::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--ponto);flex-shrink:0}
.olho--claro{color:var(--lima)}

/* --- Layout --------------------------------------------------------------- */
.container{width:min(100% - 2 * var(--gutter), var(--largura));margin-inline:auto}
.secao{padding-block:clamp(3.5rem,8vw,6.5rem)}
.secao--branca{background:var(--branco)}
.secao--menta{background:var(--menta)}
.secao--mata{background:var(--mata-900);color:#fff}
.secao--mata .lead{color:rgba(255,255,255,.74)}

.cabeca{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem 2rem;margin-bottom:clamp(2rem,4vw,3rem)}
.cabeca__txt{max-width:44rem}
.cabeca__txt .olho{margin-bottom:.8rem}
.cabeca__txt .lead{margin-top:.9rem}

/* --- Botões --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.8rem 1.45rem;border:2px solid transparent;border-radius:999px;
  font-weight:700;font-size:.98rem;line-height:1;text-decoration:none;white-space:nowrap;
  transition:transform .16s ease,background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn svg{flex-shrink:0}
.btn--teuto{background:var(--teuto-700);color:#fff}
.btn--teuto:hover{background:var(--teuto-800)}
.btn--lima{background:var(--lima);color:var(--mata-950)}
.btn--lima:hover{background:var(--lima-300)}
.btn--ponto{background:var(--ponto);color:#fff}
.btn--ponto:hover{background:var(--ponto-700)}
.btn--linha{border-color:currentColor;color:var(--teuto-700)}
.btn--linha:hover{background:var(--teuto-700);border-color:var(--teuto-700);color:#fff}
.btn--vidro{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(6px)}
.btn--vidro:hover{background:#fff;color:var(--mata-950);border-color:#fff}
.btn--sm{min-height:40px;padding:.55rem 1.05rem;font-size:.88rem}

.link-seta{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--teuto-700);text-decoration:none}
.link-seta svg{transition:transform .16s ease}
.link-seta:hover svg{transform:translateX(4px)}
.secao--mata .link-seta{color:var(--lima)}

/* --- Selos ---------------------------------------------------------------- */
.selo{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .62rem;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;
  background:var(--menta);color:var(--teuto-800);
}
.selo--lima{background:var(--lima);color:var(--mata-950)}
.selo--ponto{background:var(--ponto);color:#fff}
.selo--sol{background:var(--sol);color:var(--mata-950)}
.selo--escuro{background:var(--mata-900);color:#fff}

/* --- Utilidades ----------------------------------------------------------- */
.pular{position:absolute;left:-9999px}
.pular:focus{left:1rem;top:1rem;z-index:300;background:#fff;color:var(--teuto-700);padding:.7rem 1.1rem;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.acoes{display:flex;flex-wrap:wrap;gap:.75rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}