/* ============================================================
   QUINTAS TENNIS CLUB — style.css v2
   Design editorial, fundo claro, específico à marca.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Lato:ital,wght@0,300;0,400;0,700;1,300&display=swap');

/* ── VARIÁVEIS ──────────────────────────────────────────────── */
:root {
  --verde:        #0D3105;
  --verde-escuro: #061A02;
  --verde-medio:  #1A4A12;
  --champagne:    #A88E5C;
  --saibro:       #C46A3F;
  --creme:        #F5F1E8;
  --branco:       #FFFFFF;
  --texto:        #1A1A1A;
  --muted:        #6B6B6B;
  --borda:        rgba(13,49,5,0.1);

  --font-d: 'Cinzel', serif;
  --font-b: 'Lato', sans-serif;
  --r:      10px;
  --ease:   cubic-bezier(0.19,1,0.22,1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--texto);background:var(--branco);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;font:inherit;border:none;background:none}
#smooth-wrapper{overflow:hidden}
#smooth-content{will-change:transform}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.wrap--sm{max-width:760px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}

/* ── TIPOGRAFIA UTILITÁRIA ──────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--font-b);font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--champagne)
}
.eyebrow::before,.eyebrow::after{
  content:'';display:inline-block;width:28px;height:1px;
  background:var(--champagne);opacity:.55
}
.sec-title{
  font-family:var(--font-d);font-size:clamp(2rem,4vw,3.25rem);
  font-weight:400;color:var(--verde);line-height:1.1;letter-spacing:.01em
}
.sec-sub{
  font-weight:300;font-size:clamp(.95rem,1.4vw,1.1rem);
  line-height:1.75;color:var(--muted);max-width:52ch
}

/* ── BOTÕES ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.625rem;
  font-family:var(--font-b);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  padding:.9rem 2rem;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)
}
.btn--filled{background:var(--saibro);color:var(--branco)}
.btn--filled:hover{background:var(--verde)}
.btn--outline{border:1px solid var(--verde);color:var(--verde)}
.btn--outline:hover{background:var(--verde);color:var(--creme)}
.btn--ghost{border:1px solid rgba(168,142,92,.4);color:var(--creme)}
.btn--ghost:hover{border-color:var(--champagne);background:rgba(168,142,92,.1)}

/* ── HEADER ─────────────────────────────────────────────────── */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding-block:1.25rem;
  transition:background .4s var(--ease),box-shadow .4s,padding .3s var(--ease)
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.header__logo img{
  height:72px;width:auto;
  transition:height .3s var(--ease)
}
.header.scrolled{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(13,49,5,.08);
  padding-block:.875rem
}
.header.scrolled .header__logo img{height:58px}
.header.scrolled .nav__link{color:var(--verde)}
.header.scrolled .nav__link:hover{color:var(--saibro)}
.header.scrolled .hcta{background:var(--saibro);color:var(--branco);border-color:var(--saibro)}

.nav{display:none}
@media(min-width:1024px){.nav{display:flex;align-items:center;gap:2.5rem}}
.nav__link{
  font-family:var(--font-b);font-size:.68rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--verde);
  position:relative;transition:color .2s
}
.nav__link::after{
  content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;
  background:var(--champagne);transition:width .4s var(--ease)
}
.nav__link:hover::after{width:100%}

.hcta{
  font-family:var(--font-b);font-size:.68rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  padding:.65rem 1.4rem;border:1px solid var(--verde);color:var(--verde);
  display:none;transition:all .35s var(--ease)
}
.hcta:hover{background:var(--verde);color:var(--creme)}
@media(min-width:768px){.hcta{display:block}}

.burger{display:flex;flex-direction:column;gap:5px;padding:4px;z-index:200}
.burger span{display:block;width:22px;height:1.5px;background:var(--verde);transition:transform .35s var(--ease),opacity .2s}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(min-width:1024px){.burger{display:none}}

.nav-mob{
  position:fixed;inset:0;z-index:150;background:var(--branco);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease)
}
.nav-mob.open{opacity:1;pointer-events:all}
.nav-mob__link{
  font-family:var(--font-d);font-size:clamp(1.75rem,5vw,2.25rem);
  font-weight:400;letter-spacing:.06em;color:var(--verde);transition:color .2s
}
.nav-mob__link:hover{color:var(--champagne)}
.nav-mob__div{width:1px;height:28px;background:var(--champagne);opacity:.3}

/* ══════════════════════════════════════════════════════════════
   01. HERO — editorial centralizado, fundo creme
══════════════════════════════════════════════════════════════ */
.hero{
  background:var(--creme);
  padding-top:clamp(6.5rem,15vh,10rem);
  padding-bottom:clamp(3rem,7vh,5rem);
  text-align:center
}
.hero__ew{display:block;margin-bottom:1.75rem}
.hero__title{
  font-family:var(--font-d);
  font-size:clamp(2.8rem,6.5vw,5.5rem);
  font-weight:400;color:var(--verde);
  line-height:1.05;letter-spacing:.01em;
  max-width:15ch;margin-inline:auto;margin-bottom:1.5rem
}
.hero__sub{
  font-weight:300;font-size:clamp(1rem,1.6vw,1.1rem);
  line-height:1.75;color:var(--muted);
  max-width:48ch;margin-inline:auto;margin-bottom:2.5rem
}
.hero__cta{
  display:flex;flex-wrap:wrap;gap:.875rem;
  justify-content:center;margin-bottom:4rem
}

/* Stats strip */
.hero__stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:660px;margin-inline:auto;
  border:1px solid var(--borda);border-radius:var(--r);overflow:hidden
}
.hstat{
  padding:1.5rem 1rem;text-align:center;
  border-right:1px solid var(--borda)
}
.hstat:last-child{border-right:none}
.hstat__n{
  font-family:var(--font-d);font-size:clamp(1.75rem,3.5vw,2.75rem);
  font-weight:400;color:var(--verde);line-height:1;display:block;margin-bottom:.2rem
}
.hstat__l{
  font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--champagne);display:block;line-height:1.5
}

/* ══════════════════════════════════════════════════════════════
   02. O CLUBE — galeria de perspectivas
══════════════════════════════════════════════════════════════ */
.clube{
  background:var(--branco);
  padding-block:clamp(4rem,8vw,7rem)
}
.clube__header{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:2rem;margin-bottom:3rem
}
.clube__hr{
  font-weight:300;font-size:.9rem;color:var(--muted);
  max-width:38ch;line-height:1.7;text-align:right
}
@media(max-width:767px){.clube__hr{text-align:left;max-width:100%}}

/* Nova galeria: 2 destaques no topo + grid menor abaixo */
.gallery{display:grid;gap:3px}
.gallery__top{display:grid;gap:3px;grid-template-columns:1fr 1fr}
.gallery__bottom{display:grid;gap:3px;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){
  .gallery__bottom{grid-template-columns:repeat(5,1fr)}
}

.gi{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--creme);cursor:zoom-in}
.gi--featured{aspect-ratio:16/9}
@media(min-width:768px){.gi--featured{aspect-ratio:3/2}}

.gi__ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.625rem;
  background:var(--creme);
  color:var(--champagne);font-family:var(--font-d);
  font-size:.65rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase
}
.gi__ph::before{
  content:'';display:block;width:28px;height:1px;
  background:var(--champagne);opacity:.5
}

.gi img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  z-index:1;color:transparent;
  transition:transform .9s var(--ease)
}
.gi img:not([src]),.gi img[src=""]{display:none}
.gi img::before{content:'';display:block}
.gi:hover img{transform:scale(1.04)}
.gi__label{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:2rem 1rem .875rem;
  background:linear-gradient(to top,rgba(6,26,2,.78) 0%,transparent 100%);
  font-family:var(--font-d);font-size:.68rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--creme);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s,transform .35s
}
.gi:hover .gi__label{opacity:1;transform:none}

.gi__zoom{
  position:absolute;top:.75rem;right:.75rem;z-index:3;
  width:28px;height:28px;
  background:rgba(6,26,2,.45);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s;pointer-events:none
}
.gi__zoom svg{width:13px;height:13px;fill:var(--creme)}
.gi:hover .gi__zoom{opacity:1}

.lightbox{
  position:fixed;inset:0;z-index:9999;
  background:rgba(6,26,2,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
  cursor:zoom-out;padding:1.5rem
}
.lightbox.open{opacity:1;pointer-events:all}
.lightbox__img-wrap{
  position:relative;
  max-width:92vw;max-height:88svh;
  display:flex;align-items:center;justify-content:center;
  transform:scale(.96);transition:transform .45s var(--ease);
  cursor:default
}
.lightbox.open .lightbox__img-wrap{transform:scale(1)}
.lightbox img{
  max-width:100%;max-height:88svh;object-fit:contain;
  border-radius:2px;display:block
}
.lightbox__close{
  position:fixed;top:1.25rem;right:1.5rem;
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-b);font-size:.7rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,241,232,.7);
  background:rgba(13,49,5,.6);
  border:1px solid rgba(168,142,92,.3);
  padding:.6rem 1.1rem;
  cursor:pointer;transition:all .25s;border-radius:2px;
  z-index:10000
}
.lightbox__close:hover{
  color:var(--creme);background:rgba(13,49,5,.9);
  border-color:var(--champagne)
}
.lightbox__close-x{font-size:1rem;line-height:1}
.lightbox__label{
  position:fixed;bottom:1.75rem;left:50%;transform:translateX(-50%);
  font-family:var(--font-d);font-size:.65rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(168,142,92,.65);white-space:nowrap
}

/* ══════════════════════════════════════════════════════════════
   03. ESTRUTURA — cards em grid
══════════════════════════════════════════════════════════════ */
.estrutura{
  background:var(--creme);
  padding-block:clamp(4rem,8vw,7rem)
}
.estrutura__header{text-align:center;margin-bottom:3.5rem}
.estrutura__header .sec-sub{margin-inline:auto}

.ecards{
  display:grid;gap:1px;
  grid-template-columns:1fr;
  border:1px solid var(--borda);border-radius:var(--r);overflow:hidden;
  background:var(--borda)
}
@media(min-width:600px){.ecards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ecards{grid-template-columns:repeat(3,1fr)}}

.ecard{
  background:var(--branco);
  padding:2rem 1.75rem;
  display:flex;flex-direction:column;gap:.625rem;
  transition:background .3s
}
.ecard:hover{background:#fafaf8}
.ecard__n{
  font-family:var(--font-d);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;color:var(--champagne)
}
.ecard__name{
  font-family:var(--font-d);font-size:1rem;font-weight:500;
  color:var(--verde);letter-spacing:.04em;line-height:1.3
}
.ecard__desc{font-size:.85rem;font-weight:300;color:var(--muted);line-height:1.6}

.ecard--hl{background:var(--verde)}
.ecard--hl:hover{background:var(--verde-medio)}
.ecard--hl .ecard__n{color:rgba(168,142,92,.65)}
.ecard--hl .ecard__name{color:var(--creme);font-size:1.25rem}
.ecard--hl .ecard__desc{color:rgba(245,241,232,.55)}
@media(min-width:1024px){.ecard--hl{grid-column:span 2}}

/* ══════════════════════════════════════════════════════════════
   04. IDEALIZADORES — bipartido
══════════════════════════════════════════════════════════════ */
.ideal{
  background:var(--branco);
  padding-block:clamp(4rem,8vw,7rem)
}
.ideal__header{margin-bottom:3.5rem}
.ideal__grid{display:grid;gap:4rem}
@media(min-width:768px){.ideal__grid{grid-template-columns:1fr 1fr;gap:3rem}}

.icard__photo{
  aspect-ratio:3/4;overflow:hidden;
  background:var(--creme);margin-bottom:1.5rem;border-radius:4px
}
.icard__photo img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:grayscale(100%) contrast(1.05);
  transition:transform .8s var(--ease)
}
.icard:hover .icard__photo img{transform:scale(1.03)}
.icard__ph{
  width:100%;height:100%;min-height:200px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:.65rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--champagne)
}
.icard__name{
  font-family:var(--font-d);font-size:clamp(1.2rem,2.5vw,1.55rem);
  font-weight:400;color:var(--verde);letter-spacing:.03em;margin-bottom:.25rem
}
.icard__role{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--champagne);display:block;margin-bottom:1rem
}
.icard__bio{font-weight:300;font-size:.9rem;line-height:1.8;color:var(--muted)}

/* ══════════════════════════════════════════════════════════════
   05. MANIFESTO — único fundo escuro, colapsável
══════════════════════════════════════════════════════════════ */
.manifesto{
  background:var(--verde-escuro);
  padding-block:clamp(4rem,8vw,6rem);
  text-align:center
}
.manifesto__ew{
  font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(168,142,92,.6);display:block;margin-bottom:2.5rem
}
.manifesto__preview,.manifesto__full-inner{
  max-width:600px;margin-inline:auto;
  display:flex;flex-direction:column;gap:.375rem
}
.ml{
  font-family:var(--font-d);font-size:clamp(1rem,2.3vw,1.45rem);
  font-weight:400;letter-spacing:.04em;
  color:rgba(245,241,232,.85);line-height:1.7
}
.ml--m{color:rgba(245,241,232,.4);font-size:clamp(.9rem,1.8vw,1.2rem)}
.ml--a{color:var(--champagne)}

.manifesto__full{max-height:0;overflow:hidden;transition:max-height 1s var(--ease)}
.manifesto__full.open{max-height:900px}
.manifesto__full-inner{padding-top:1.25rem}

.manifesto__toggle{
  margin-top:2.5rem;
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--font-b);font-size:.68rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--champagne);border:1px solid rgba(168,142,92,.3);
  padding:.7rem 1.5rem;cursor:pointer;
  transition:border-color .3s,background .3s
}
.manifesto__toggle:hover{border-color:var(--champagne);background:rgba(168,142,92,.07)}
.manifesto__icon{
  width:14px;height:14px;position:relative;flex-shrink:0
}
.manifesto__icon::before,.manifesto__icon::after{
  content:'';position:absolute;top:50%;left:50%;background:var(--champagne)
}
.manifesto__icon::before{width:10px;height:1px;transform:translate(-50%,-50%)}
.manifesto__icon::after{
  width:1px;height:10px;transform:translate(-50%,-50%);
  transition:opacity .3s
}
.manifesto__toggle.open .manifesto__icon::after{opacity:0}

.manifesto__closing{
  margin-top:2.5rem;padding-top:2rem;
  border-top:1px solid rgba(168,142,92,.15)
}
.manifesto__brand{
  font-family:var(--font-d);font-size:.8rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,232,.4)
}
.manifesto__tag{
  font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(168,142,92,.4);margin-top:.35rem
}

/* ══════════════════════════════════════════════════════════════
   06. LOCALIZAÇÃO
══════════════════════════════════════════════════════════════ */
.local{
  background:var(--creme);
  padding-block:clamp(4rem,8vw,7rem)
}
.local__layout{display:grid;gap:3.5rem}
@media(min-width:1024px){.local__layout{grid-template-columns:1fr 1fr;align-items:start}}

.local__address{
  font-family:var(--font-d);font-size:clamp(1.4rem,2.8vw,2rem);
  font-weight:400;color:var(--verde);letter-spacing:.03em;line-height:1.25;
  margin-block:1.25rem 2rem
}
.lp{display:flex;align-items:baseline;gap:1rem;padding-block:.875rem;border-top:1px solid rgba(168,142,92,.2)}
.lp:last-child{border-bottom:1px solid rgba(168,142,92,.2)}
.lp__d{
  font-family:var(--font-d);font-size:.75rem;font-weight:500;
  color:var(--champagne);letter-spacing:.08em;flex-shrink:0;min-width:4.5rem
}
.lp__n{font-weight:300;font-size:.9rem;color:var(--texto);line-height:1.4}

.local__map{
  width:100%;aspect-ratio:1;overflow:hidden;
  border-radius:var(--r);background:var(--borda)
}
@media(min-width:1024px){.local__map{aspect-ratio:4/5}}
.local__map iframe{
  width:100%;height:100%;border:none;
  filter:grayscale(15%) saturate(.85) contrast(1.05)
}

/* ══════════════════════════════════════════════════════════════
   SÉRIE ESPECIAL — bloco de conversão
══════════════════════════════════════════════════════════════ */
.serie{
  background:var(--branco);
  padding-block:clamp(3.5rem,7vw,6rem);
  text-align:center;
  border-top:1px solid var(--borda);
  border-bottom:1px solid var(--borda)
}
.serie__inner{max-width:620px;margin-inline:auto}
.serie__watermark{
  font-family:var(--font-d);font-size:clamp(4rem,14vw,10rem);
  font-weight:400;color:var(--verde);line-height:.85;letter-spacing:-.03em;
  opacity:.06;display:block;margin-bottom:-2rem;pointer-events:none
}
.serie__title{
  font-family:var(--font-d);font-size:clamp(1.5rem,3.5vw,2.6rem);
  font-weight:400;color:var(--verde);line-height:1.15;letter-spacing:.01em;
  position:relative;z-index:1;margin-bottom:1.25rem
}
.serie__text{font-weight:300;line-height:1.8;color:var(--muted);margin-bottom:1.75rem}
.serie__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2.5rem}
.serie__tag{
  font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--champagne);border:1px solid rgba(168,142,92,.3);
  padding:.35rem .875rem;border-radius:50px
}

/* ══════════════════════════════════════════════════════════════
   WHATSAPP FAB
══════════════════════════════════════════════════════════════ */
.wfab{
  position:fixed;bottom:1.75rem;right:1.75rem;z-index:90;
  width:52px;height:52px;background:#25D366;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.3);
  opacity:0;transform:scale(.8);
  transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .3s
}
.wfab.show{opacity:1;transform:scale(1)}
.wfab:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(37,211,102,.4)}
.wfab svg{width:25px;height:25px;fill:#fff}

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
.footer{background:var(--verde-escuro);padding-block:3.5rem 2.5rem}
.footer__inner{display:grid;gap:2.5rem}
@media(min-width:768px){.footer__inner{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.footer__inner{grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}}
.footer__brand img{height:32px;mix-blend-mode:luminosity;opacity:.6;margin-bottom:.875rem}
.footer__tagline{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(168,142,92,.4)}
.footer__col-t{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(168,142,92,.45);display:block;margin-bottom:.875rem}
.footer__links{display:flex;flex-direction:column;gap:.6rem}
.footer__link{font-size:.8rem;font-weight:300;color:rgba(245,241,232,.35);transition:color .2s}
.footer__link:hover{color:rgba(245,241,232,.75)}
.footer__bottom{
  margin-top:3rem;padding-top:1.5rem;
  border-top:1px solid rgba(168,142,92,.1);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center
}
.footer__copy{font-size:.7rem;font-weight:300;color:rgba(245,241,232,.2)}
.footer__legal a{font-size:.7rem;font-weight:300;color:rgba(245,241,232,.2);transition:color .2s}
.footer__legal a:hover{color:rgba(245,241,232,.5)}

/* ── REVEAL ─────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(32px)}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--creme)}
::-webkit-scrollbar-thumb{background:var(--champagne)}