/* ==========================================================================
   TEUTO ESPORTE CLUBE — Design System
   Derivado da identidade institucional publicada pelo clube
   (logo_topo.png + material "presentation_mobiliario").
   ========================================================================== */

:root{
  /* --- Marca ------------------------------------------------------------ */
  --verde:        #0F9E5E;   /* verde institucional / wordmark             */
  --verde-800:    #0B7A48;   /* hover                                      */
  --verde-900:    #07542F;
  --lima:         #9AC038;   /* símbolo                                    */
  --lima-600:     #7FA32B;
  --vermelho:     #E3223C;   /* ponto do símbolo / alertas / CTA           */
  --vermelho-700: #B8172D;
  --laranja:      #CC6D0C;   /* destaques institucionais                   */
  --amarelo:      #FAEF33;   /* só sobre fundo escuro/fotográfico          */

  /* --- Neutros / superfícies ------------------------------------------- */
  --mint-100:     #EAF4EE;   /* fundo mais claro (derivado)                */
  --mint-200:     #D1E8D8;   /* background principal                       */
  --mint-300:     #AED5BC;   /* background secundário                      */
  --mint-400:     #90C7A4;   /* áreas gráficas                             */
  --branco:       #FFFFFF;
  --tinta:        #080E09;   /* texto                                      */
  --tinta-70:     #3D453F;   /* texto secundário                           */
  --tinta-45:     #6D766F;   /* texto de apoio                             */
  --linha:        rgba(8,14,9,.10);

  /* --- Escuro (poker / rodapé) ----------------------------------------- */
  --feltro-900:   #061710;   /* verde quase preto                          */
  --feltro-800:   #0A2419;
  --feltro-700:   #103324;
  --feltro-600:   #17452F;

  /* --- Tipografia ------------------------------------------------------- */
  --fonte:      'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  /* --- Métrica ---------------------------------------------------------- */
  --raio:      18px;
  --raio-sm:   12px;
  --raio-lg:   28px;
  --sombra:    0 1px 2px rgba(8,14,9,.03), 0 12px 34px -20px rgba(8,14,9,.20);
  --sombra-lg: 0 34px 70px -34px rgba(8,14,9,.28);
  --container: 1200px;
  --header-h:  76px;
}

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4,h5,h6,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--lima);outline-offset:3px;border-radius:4px}

body{
  font-family:var(--fonte);
  font-size:17px;line-height:1.62;
  color:var(--tinta);
  background:var(--mint-200);
  -webkit-font-smoothing:antialiased;
}

/* --- Tipografia --------------------------------------------------------- */
.h-display{
  font-family:var(--fonte-cond);
  font-weight:800;text-transform:uppercase;
  line-height:.94;letter-spacing:.005em;
  font-size:clamp(2.6rem,7.2vw,5.4rem);
}
.h1{font-family:var(--fonte-cond);font-weight:800;text-transform:uppercase;line-height:1;font-size:clamp(2.1rem,5vw,3.6rem)}
.h2{font-family:var(--fonte-cond);font-weight:800;text-transform:uppercase;line-height:1.04;font-size:clamp(1.8rem,3.6vw,2.9rem)}
.h3{font-family:var(--fonte);font-weight:700;line-height:1.2;font-size:1.28rem}
.olho{
  font-family:var(--fonte);font-weight:700;font-size:.79rem;
  text-transform:uppercase;letter-spacing:.19em;color:var(--verde);
}
.olho--claro{color:var(--lima)}
.lead{font-size:1.12rem;color:var(--tinta-70);max-width:62ch}
.sub{color:var(--tinta-70)}
.destaque{color:var(--verde)}
.strong{font-weight:700}

/* --- Layout ------------------------------------------------------------- */
.container{width:min(100% - 2.5rem,var(--container));margin-inline:auto}
.container--estreito{width:min(100% - 2.5rem,880px);margin-inline:auto}
.secao{padding-block:clamp(3.5rem,7vw,6rem)}
.secao--curta{padding-block:clamp(2.5rem,4vw,3.5rem)}
.secao--branca{background:var(--branco)}
.secao--mint{background:var(--mint-200)}
.secao--mint-claro{background:var(--mint-100)}
.secao--escura{background:var(--feltro-800);color:var(--branco)}
.secao--escura .lead,.secao--escura .sub{color:rgba(255,255,255,.72)}

.cabeca{max-width:64ch;margin-bottom:2.6rem}
.cabeca .olho{display:block;margin-bottom:.6rem}
.cabeca .h2{margin-bottom:.7rem}
.cabeca--centro{margin-inline:auto;text-align:center}

.grid{display:grid;gap:1.4rem}
@media (min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:640px) and (max-width:899px){.grid--4{grid-template-columns:repeat(2,1fr)}}

/* --- Botões ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.6rem;border:2px solid transparent;border-radius:999px;
  font-weight:700;font-size:.97rem;line-height:1;text-decoration:none;
  cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primario{background:var(--verde);color:var(--branco);box-shadow:0 10px 24px -12px rgba(15,158,94,.9)}
.btn--primario:hover{background:var(--verde-800)}
.btn--vermelho{background:var(--vermelho);color:var(--branco);box-shadow:0 10px 24px -12px rgba(227,34,60,.9)}
.btn--vermelho:hover{background:var(--vermelho-700)}
.btn--lima{background:var(--lima);color:var(--feltro-900)}
.btn--lima:hover{background:var(--lima-600)}
.btn--contorno{border-color:currentColor;color:var(--verde)}
.btn--contorno:hover{background:var(--verde);color:var(--branco);border-color:var(--verde)}
.btn--claro{background:var(--branco);color:var(--verde)}
.btn--fantasma{border-color:rgba(255,255,255,.45);color:#fff}
.btn--fantasma:hover{background:#fff;color:var(--feltro-900);border-color:#fff}
.btn--bloco{width:100%}
.btn--g{padding:1.05rem 2.1rem;font-size:1.05rem}
.btn--sm{padding:.6rem 1.15rem;font-size:.86rem}

/* --- Cabeçalho ---------------------------------------------------------- */
.topbar{
  background:var(--verde-900);color:rgba(255,255,255,.85);
  font-size:.83rem;
}
.topbar__linha{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:center;padding:.55rem 0}
.topbar a{text-decoration:none}
.topbar a:hover{color:var(--lima)}
.topbar__dir{margin-left:auto;display:flex;gap:1.2rem;align-items:center}
@media (max-width:760px){.topbar__esq{display:none}.topbar__dir{margin-left:0}}

.header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.header__linha{display:flex;align-items:center;gap:1.5rem;height:var(--header-h)}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:44px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.nav a{
  padding:.5rem .78rem;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:.93rem;color:var(--tinta-70);
  transition:background .15s,color .15s;
}
.nav a:hover{background:var(--mint-200);color:var(--verde)}
.nav a.ativo{color:var(--verde);background:var(--mint-200)}
.header .btn{margin-left:.4rem}
.menu-btn{
  display:none;margin-left:auto;background:none;border:0;padding:.5rem;
  cursor:pointer;color:var(--tinta);
}
@media (max-width:1040px){
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--branco);padding:1rem 1.25rem 1.6rem;gap:.15rem;
    border-bottom:1px solid var(--linha);box-shadow:var(--sombra);
    transform:translateY(-130%);transition:transform .28s ease;
  }
  .nav[data-aberto="true"]{transform:translateY(0)}
  .nav a{padding:.8rem .9rem;font-size:1.02rem}
  .header__cta{display:none}
  .menu-btn{display:block}
}

/* --- Cartões ------------------------------------------------------------ */
.card{
  background:var(--branco);border-radius:var(--raio);padding:1.6rem;
  box-shadow:var(--sombra);border:1px solid var(--linha);
  transition:transform .2s ease,box-shadow .2s ease;
}
.card--link:hover{transform:translateY(-4px);box-shadow:var(--sombra-lg)}
.card__icone{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--mint-200);color:var(--verde);margin-bottom:1rem;
}
.card h3{margin-bottom:.35rem}
.card p{color:var(--tinta-70);font-size:.98rem}

.tag{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .7rem;border-radius:999px;
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  background:var(--mint-200);color:var(--verde-900);
}
.tag--vermelha{background:var(--vermelho);color:#fff}
.tag--lima{background:var(--lima);color:var(--feltro-900)}
.tag--amarela{background:var(--amarelo);color:var(--feltro-900)}

/* --- Números ------------------------------------------------------------ */
.numeros{display:grid;gap:1px;background:var(--linha);border-radius:var(--raio);overflow:hidden}
@media (min-width:560px){.numeros{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.numeros{grid-template-columns:repeat(4,1fr)}}
.numero{background:var(--branco);padding:1.7rem 1.4rem;text-align:center}
.numero__valor{
  font-family:var(--fonte-cond);font-weight:800;font-size:clamp(2.3rem,4vw,3.1rem);
  line-height:1;color:var(--verde);
}
.numero__rotulo{font-size:.83rem;text-transform:uppercase;letter-spacing:.13em;font-weight:600;color:var(--tinta-45);margin-top:.5rem}

/* --- Rodapé ------------------------------------------------------------- */
.rodape{background:var(--feltro-900);color:rgba(255,255,255,.72);padding-block:3.5rem 1.5rem}
.rodape a{text-decoration:none}
.rodape a:hover{color:var(--lima)}
.rodape__grid{display:grid;gap:2.4rem}
@media (min-width:860px){.rodape__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.rodape__titulo{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.17em;font-weight:700;
  color:var(--lima);margin-bottom:.9rem;
}
.rodape li+li{margin-top:.42rem}
.rodape img.marca{height:42px;margin-bottom:1rem}
.rodape__base{
  margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;font-size:.82rem;color:rgba(255,255,255,.5);
}
.rodape__base .dir{margin-left:auto}

/* --- Lista de contato (usada na home e na página do poker) --- */
.contato__item{display:flex;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--linha)}
.contato__item:last-child{border-bottom:0}
.contato__item svg{flex-shrink:0;color:var(--verde);margin-top:.25rem}
.contato__item b{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.15em;color:var(--verde);margin-bottom:.15rem}
.secao--escura .contato__item{border-bottom-color:rgba(255,255,255,.12)}
.secao--escura .contato__item svg,.secao--escura .contato__item b{color:var(--lima)}
.contato__item a{text-decoration:none}
.contato__item a:hover{color:var(--lima)}

/* --- Utilidades --------------------------------------------------------- */
.pular{position:absolute;left:-9999px}
.pular:focus{left:1rem;top:1rem;z-index:200;background:#fff;color:var(--verde);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:.8rem}
.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem}.mt-4{margin-top:3rem}
.centro{text-align:center}

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