/* ============================================
   NICK EVENTOS — MONOCHROME EDITORIAL DESIGN
   Paleta: preto fosco, cinza claro/escuro, branco.
   Header fixo com forte contraste em qualquer
   imagem de fundo + hero com legibilidade garantida.
   ============================================ */

:root{
  /* ---- Hero (abertura cinematográfica, agora em tons neutros) ---- */
  --hero-ink:    #0a0a0a;   /* preto fosco */
  --hero-ink-2:  #141414;
  --hero-white:  #ffffff;
  --hero-silver: #cfcfcf;   /* cinza claro (era "sand") */
  --hero-charcoal: #2b2b2b; /* cinza escuro (era "wine") */
  --hero-charcoal-deep: #161616;
  --hero-accent: #e8e8e8;   /* cinza muito claro / prata (era "gold") */

  /* ---- Site palette (preto / cinza / branco) ---- */
  --paper:      #ffffff;
  --cream:      #f6f6f6;   /* cinza muito claro no lugar do creme */
  --cream-alt:  #ececec;

  --ink:        #181818;   /* preto fosco para textos */
  --ink-soft:   #5c5c5c;   /* cinza médio */
  --ink-faint:  #9a9a9a;   /* cinza claro */

  --wine:       #262626;   /* acento escuro (era vinho) */
  --wine-deep:  #121212;
  --wine-soft:  #6e6e6e;
  --gold:       #4d4d4d;   /* acento médio (era dourado) */
  --gold-soft:  #bdbdbd;

  /* ---- Glass surfaces ---- */
  --glass:        rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(15, 15, 15, 0.08);
  --glass-shadow: rgba(0, 0, 0, 0.18);

  /* ---- Type ---- */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Instrument Sans', sans-serif;

  /* ---- Layout ---- */
  --container: 1240px;
  --gutter: clamp(24px, 6vw, 80px);
  --section-y: clamp(80px, 10vw, 160px);
  --nav-h: 84px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font-family: inherit; cursor: pointer; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

:focus-visible{
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

/* ---------- Type ---------- */
.eyebrow{
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
  font-weight: 600;
}

.h2{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.16;
  margin: 0 0 24px;
  color: var(--ink);
  max-width: 16ch;
  letter-spacing: 0.002em;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  border-radius: 999px;
  transition: all .4s var(--ease);
  white-space: nowrap;
}

.btn--solid{
  border: 1px solid transparent;
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / 55%);
  background: #fff;
  color: #0a0a0a;
}
.btn--solid:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(0,0,0,.55);
}

/* btn--ghost defaults to the hero context: light text/border over the dark carousel */
.btn--ghost{
  background: rgba(255,255,255,.1);
  color: var(--hero-white);
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover{
  border-color: var(--hero-white);
  background: rgba(255,255,255,.16);
}

/* ...but once we're past the hero, on light glass surfaces, flip it to dark ink */
.plan-card .btn--ghost{
  color: var(--ink);
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(24,24,24,.2);
}
.plan-card .btn--ghost:hover{
  border-color: var(--ink);
  background: rgba(0,0,0,.06);
  color: var(--wine-deep);
}

.btn--line{
  background: transparent;
  color: var(--hero-white);
  border: 1px solid rgba(255,255,255,.6);
}
.btn--line:hover{
  background: rgba(255,255,255,.14);
  border-color: var(--hero-white);
}

/* ============================================
   LOADER
   ============================================ */
.loader{
  position: fixed; inset:0; z-index: 999;
  background: var(--hero-ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 22px;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
.loader__mark{
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.3em;
  color: var(--hero-white);
}
.loader__line{
  width: 160px; height: 1px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
}
.loader__line span{
  display:block; height:100%; width:0%;
  background: var(--hero-white);
  animation: loaderFill 1.1s var(--ease) forwards .15s;
}
@keyframes loaderFill{ to{ width: 100%; } }

.loader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-loading{ overflow: hidden; }

/* ============================================
   NAVBAR
   Sempre legível: um gradiente escuro fixo cobre
   o topo da viewport (por trás da navbar) mesmo
   antes do scroll, garantindo contraste sobre
   qualquer foto do carrossel. Ao rolar, a navbar
   assume vidro fosco branco com o logo escuro.
   ============================================ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: height .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease), box-shadow .35s var(--ease);
  border-bottom: 1px solid transparent;
}
/* faixa de contraste sempre visível atrás da navbar, independente do scroll */
.nav::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 1;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.nav__inner{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display:flex; align-items:center; justify-content: space-between;
  gap: 24px;
}
.nav__logo{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.nav__logo-img{
  height: 46px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  transition: opacity .3s var(--ease), height .3s var(--ease);
}
/* sobre o hero escuro: mostra a versão clara (branca) do logo */
.nav__logo-img--dark{ display: none; }
.nav__logo-img--light{ display: block; }

.nav__links{
  display:flex; align-items:center; gap: 34px;
  margin-left: auto; margin-right: 34px;
}
.nav__link{
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  padding: 4px 0;
  transition: color .3s;
}
.nav__link::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px; background: var(--hero-white);
  transition: width .3s var(--ease);
}
.nav__link:hover{ color: var(--hero-silver); }
.nav__link:hover::after{ width:100%; }

.nav__cta{ padding: 12px 24px; font-size: .76rem; }

.nav__burger{
  display:none;
  width: 32px; height: 22px;
  background:none; border:none;
  flex-direction:column; justify-content:space-between;
  padding:0;
}
.nav__burger span{
  display:block; height:1px; width:100%;
  background: var(--hero-white);
  transition: transform .35s var(--ease), opacity .35s var(--ease), background .35s var(--ease);
}

/* Scrolled state = past the hero: vidro fosco branco, logo/texto em preto */
.nav.is-scrolled{
  height: 68px;
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: rgba(0,0,0,.08);
  box-shadow: 0 12px 32px -20px rgba(0,0,0,.28);
}
.nav.is-scrolled::before{ opacity: 0; }
.nav.is-scrolled .nav__logo-img{ height: 36px; }
.nav.is-scrolled .nav__logo-img--dark{ display: block; }
.nav.is-scrolled .nav__logo-img--light{ display: none; }
.nav.is-scrolled .nav__link{ color: var(--ink-soft); }
.nav.is-scrolled .nav__link:hover{ color: var(--ink); }
.nav.is-scrolled .nav__link::after{ background: var(--ink); }
.nav.is-scrolled .nav__cta{ color: var(--ink); border-color: rgba(24,24,24,.25); }
.nav.is-scrolled .nav__cta:hover{ background: rgba(0,0,0,.06); }
.nav.is-scrolled .nav__burger span{ background: var(--ink); }

.nav.is-open .nav__links{
  display:flex;
}

/* ============================================
   HERO — imagem grande, mas o texto SEMPRE
   legível: overlay reforçado + texto branco puro
   com leve sombra, independentemente da foto.
   ============================================ */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  padding-bottom: clamp(60px, 8vw, 110px);
  background: var(--hero-ink);
}
.hero__media{ position:absolute; inset:0; z-index:0; }

.hero__img{
  position: absolute;
  inset: 0;
  width:100%; height:100%; object-fit: cover;

  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.6s var(--ease);
  animation: heroZoom 16s ease-in-out infinite alternate;
}
.hero__img.is-active{
  opacity: 1;
  z-index: 1;
}
@keyframes heroZoom{
  from{ transform: scale(1.08); }
  to{ transform: scale(1); }
}

/* Overlay bem mais forte embaixo (onde fica o texto) para garantir contraste
   máximo em qualquer foto, além de um véu escuro geral sobre toda a imagem. */
.hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(6,6,6,.55) 0%, rgba(6,6,6,.28) 30%, rgba(6,6,6,.55) 62%, rgba(4,4,4,.92) 100%),
    linear-gradient(100deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 55%);
}

.hero__deco{ position:absolute; top: 110px; right: var(--gutter); z-index:1; }
.hero__deco-line{
  display:block; width:1px; height:120px;
  background: linear-gradient(180deg, transparent, var(--hero-accent), transparent);
  opacity:.6;
}

.hero__content{
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 0 var(--gutter);
}
.hero__eyebrow{ color: var(--hero-silver); margin-bottom: 22px; }
.hero__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.08;
  margin: 0 0 28px;
  color: #ffffff;
  text-shadow: 0 4px 26px rgba(0,0,0,.55);
}
.hero__title span{ display:block; }
.hero__title span:last-child{ color: var(--hero-silver); font-style: italic; }

.hero__text{
  max-width: 46ch;
  color: #f0f0f0;
  font-size: 1.05rem;
  margin: 0 0 42px;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.hero__actions{ display:flex; gap: 18px; flex-wrap: wrap; }

.hero__scroll{
  position:absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  z-index:2;
  width: 1px; height: 46px;
}
.hero__scroll span{
  display:block; width:1px; height:100%;
  background: rgba(255,255,255,.4);
  position: relative;
}
.hero__scroll span::after{
  content:''; position:absolute; top:0; left:-2px;
  width:5px; height:5px; border-radius:50%;
  background: var(--hero-white);
  animation: scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ top:0; opacity:1; }
  90%{ opacity:1; }
  100%{ top:100%; opacity:0; }
}

/* Reveal animations (hero, run once on load) */
.reveal-line, .reveal-fade{
  opacity:0;
  animation: fadeUp .9s var(--ease) forwards;
}
.hero__eyebrow.reveal-line{ animation-delay: .5s; }
.hero__title .reveal-line:nth-child(1){ animation-delay: .68s; }
.hero__title .reveal-line:nth-child(2){ animation-delay: .82s; }
.hero__text.reveal-fade{ animation-delay: 1.05s; }
.hero__actions.reveal-fade{ animation-delay: 1.25s; }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ============================================
   SCROLL REVEAL (generic, JS toggled)
   ============================================ */
[data-reveal]{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible{
  opacity:1;
  transform: translateY(0);
}

/* ============================================
   SLIDER
   ============================================ */
.slider-section{
  padding: var(--section-y) 0;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.slider-section__head{ text-align:center; margin-bottom: 56px; position: relative; z-index: 1; }
.slider-section__head .h2{ margin:0 auto; }

.slider{ padding: 0 var(--gutter); position: relative; z-index: 1; }
.slider__frame{
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 40px 70px -36px var(--glass-shadow);
}
.slider__track{
  position:relative; height:100%;
}
.slider__slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition: opacity 1s var(--ease);
}
.slider__slide.is-active{ opacity:1; visibility:visible; }
.slider__slide img{ width:100%; height:100%; object-fit: cover; filter: grayscale(.15); }

.slider__arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width: 46px; height:46px;
  border-radius: 50%;
  border:1px solid var(--glass-border);
  background: var(--glass-strong);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--ink);
  font-size: 1.4rem;
  display:flex; align-items:center; justify-content:center;
  transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease);
  z-index: 3;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.32);
}
.slider__arrow:hover{ background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-50%) scale(1.06); }
.slider__arrow--prev{ left: 18px; }
.slider__arrow--next{ right: 18px; }

.slider__count{
  position:absolute; bottom: 18px; right: 20px;
  font-size: .75rem; letter-spacing: .08em;
  color: var(--ink);
  background: var(--glass-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  z-index:3;
}

.slider__thumbs{
  display:flex; gap: 12px; justify-content:center;
  max-width: 980px; margin: 22px auto 0;
  flex-wrap: wrap;
}
.slider__thumb{
  width: 66px; height: 48px;
  border-radius: 10px;
  border: 1px solid transparent;
  background-size: cover; background-position:center;
  opacity: .5;
  filter: grayscale(.3);
  transition: opacity .3s, border-color .3s, transform .3s var(--ease);
}
.slider__thumb.is-active, .slider__thumb:hover{
  opacity: 1;
  border-color: var(--ink);
  transform: translateY(-2px);
}

.slider__progress{
  max-width: 980px; margin: 18px auto 0;
  height: 2px; background: rgba(0,0,0,.1);
  border-radius: 2px;
}
.slider__progress span{
  display:block; height:100%; width:20%;
  background: var(--ink);
  border-radius: 2px;
  transition: width .3s linear;
}

/* ============================================
   GALLERY — LINHAS ALTERNADAS COM MOSAICO
   ============================================ */
.gallery{
  padding: var(--section-y) 0;
  background:var(--hero-ink);
  position: relative;
  overflow: hidden;
}
.gallery__head{ text-align:center; margin-bottom: 70px; position:relative; z-index:1; }
.gallery__head .h2--light{ margin:0 auto; }

.eyebrow--light{ color: var(--hero-silver); }
.h2--light{ color: #fff; }

.gallery__rows{
  display:flex;
  flex-direction:column;
  gap: clamp(70px, 10vw, 130px);
}

.gallery__row{
  display:flex;
  align-items:center;
  gap: clamp(40px, 6vw, 90px);
  padding: 0 var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.gallery__row--reverse{ flex-direction: row-reverse; }

.gallery__row-media{ flex: 1.4; min-width: 0; }
.gallery__row-content{ flex: 0.75; max-width: 38ch; }

.mosaic{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 260px);
  gap: 16px;
}
.mosaic__item{
  width:100%; height:100%;
  object-fit:cover;
  border-radius: 4px;
  filter: grayscale(.2) contrast(1.05);
  transition: transform .6s var(--ease), filter .5s;
}
.mosaic__item:hover{ transform: scale(1.02); filter: grayscale(0); }
.mosaic__item:nth-child(1){ grid-column: 1; grid-row: 1; }
.mosaic__item:nth-child(2){ grid-column: 1; grid-row: 2; }
.mosaic__item:nth-child(3){ grid-column: 2; grid-row: 1 / span 2; }
.mosaic__item:nth-child(4){ grid-column: 3; grid-row: 1 / span 2; }

.gallery__row-tag{
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hero-silver);
  margin: 0 0 14px;
  font-weight: 600;
}
.gallery__row-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 20px;
}
.gallery__row-title span{ color: var(--hero-silver); font-style: italic; font-weight: 500; }

.gallery__row-text{
  color: #b8b8b8;
  font-size: .95rem;
  line-height: 1.8;
  margin: 0 0 28px;
}
.gallery__row-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:#fff;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.3);
  transition: border-color .3s, gap .3s var(--ease);
}
.gallery__row-link:hover{ border-color:#fff; gap:14px; }

@media (max-width: 900px){
  .gallery__row, .gallery__row--reverse{
    flex-direction: column;
    text-align: center;
  }
  .gallery__row-content{ max-width: 100%; }
  .mosaic{ grid-template-rows: repeat(2, 220px); }
}
@media (max-width: 560px){
  .mosaic{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 180px);
  }
  .mosaic__item:nth-child(1){ grid-column:1; grid-row:1; }
  .mosaic__item:nth-child(2){ grid-column:2; grid-row:1; }
  .mosaic__item:nth-child(3){ grid-column:1; grid-row: 2 / span 2; }
  .mosaic__item:nth-child(4){ grid-column:2; grid-row: 2 / span 2; }
}

/* ============================================
   PLANS / PACOTES
   ============================================ */
.plans{ padding: var(--section-y) 0; background: linear-gradient(180deg, var(--cream) 0%, var(--cream-alt) 100%); position: relative; overflow: hidden; }
.plans .container{ position: relative; z-index: 1; }
.plans .h2{ max-width: 22ch; }
.plans__intro{ color: var(--ink-soft); max-width: 56ch; margin: 0 0 30px; }

.plans__grid{
  margin-top: 50px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

.plan-card{
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  padding: 44px 34px;
  display:flex; flex-direction:column;
  position: relative;
  box-shadow: 0 24px 50px -30px var(--glass-shadow);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.plan-card:hover{ transform: translateY(-6px); border-color: rgba(24,24,24,.28); box-shadow: 0 34px 60px -28px var(--glass-shadow); }

.plan-card__title{
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight:700;
  margin: 0 0 14px;
  color: var(--hero-charcoal-deep);
}
.plan-card__price{
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--ink);
  margin: 0 0 18px;
  font-weight: 500;
}
.plan-card__price span{ font-size: 1.1rem; vertical-align: top; margin-right: 4px; color: var(--ink-soft); }
.plan-card__price small{ font-size: 1.2rem; color: var(--ink-soft); }
.plan-card__price-old{
  display: inline-block;
  font-size: .95rem !important;
  color: var(--ink-faint) !important;
  text-decoration: line-through;
  margin-left: 8px;
  vertical-align: middle;
}

.plan-card__desc{ color: var(--ink-soft); font-size: .92rem; margin: 0 0 30px; min-height: 84px; line-height: 1.7; }

.plan-card__list{
  display:flex; flex-direction:column; gap: 12px;
  margin: 0 0 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,.1);
}
.plan-card__list li{
  font-size: .87rem; color: var(--ink);
  padding-left: 20px; position:relative;
  line-height: 1.55;
}
.plan-card__list li::before{
  content:'—';
  position:absolute; left:0; top:0;
  color: var(--wine-soft);
}
.plan-card__list-title{
  margin-top: 16px;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.plan-card__list-title::before{ content: none; }
.plan-card__list li.plan-card__list-title:first-child{ margin-top: 0; }

/* ---- Toggle "ver mais / ver menos" ---- */
.plan-card__toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(0,0,0,.15);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .01em;
  padding: 14px 18px;
  border-radius: 999px;
  margin-bottom: 24px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.plan-card__toggle:hover{
  border-color: var(--ink);
  background: rgba(0,0,0,.05);
}
.plan-card__toggle-icon{
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--ink);
  transition: transform .35s var(--ease);
}
.plan-card__toggle.is-open .plan-card__toggle-icon{
  transform: rotate(180deg);
}

/* Painel retrátil: colapsa via grid-template-rows para animar altura variável */
.plan-card__more{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.plan-card__more.is-open{
  grid-template-rows: 1fr;
}
.plan-card__more-inner{
  overflow: hidden;
}
.plan-card__list--more{
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,.1);
  margin-bottom: 24px;
}

.plan-card__perks{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(0,0,0,.05);
  border-left: 2px solid var(--ink);
  border-radius: 0 12px 12px 0;
}
.plan-card__perks span{ font-size: .82rem; color: var(--ink-soft); }

.plan-card__tag{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 0 0 12px;
}

.plan-card__btn{ text-align:center; justify-content:center; margin-top:auto; }

.plan-card--featured{
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.46));
  border: 1px solid rgba(24,24,24,.32);
  box-shadow: 0 34px 70px -30px rgba(0,0,0,.32);
  transform: scale(1.04);
}
.plan-card--featured:hover{ transform: scale(1.04) translateY(-6px); }
.plan-card__badge{
  position:absolute; top:-1px; right: 28px;
  background: var(--ink);
  color: #fff;
  font-size: .68rem; letter-spacing:.12em; text-transform:uppercase;
  padding: 8px 16px;
  font-weight:600;
  border-radius: 0 0 10px 10px;
}

.plans__note{ margin-top: 40px; color: var(--ink-soft); font-size: .8rem; max-width: 60ch; }

/* ============================================
   FOOTER
   ============================================ */
.footer{ background: var(--hero-ink); color: #ededed; padding: 70px 0 28px; }
.footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer__logo{ display:inline-block; margin-bottom: 14px; color: #fff; font-family: var(--font-display); font-size: 1.3rem; }
.footer__logo span{ color: var(--hero-silver); font-style: italic; }
.footer__brand p{ color: #a8a8a8; font-size: .9rem; max-width: 30ch; }
.footer__links{ display:flex; flex-direction:column; gap: 12px; }
.footer__links a, .footer__contact a{ color: #b8b8b8; font-size: .9rem; transition: color .3s; }
.footer__links a:hover, .footer__contact a:hover{ color: #fff; }
.footer__contact{ display:flex; flex-direction:column; gap: 12px; align-items:flex-start; }
.footer__bottom{ padding-top: 26px; text-align:center; }
.footer__bottom p{ color: #7c7c7c; font-size: .78rem; margin:0; }

/* ============================================
   WHATSAPP FLOAT
   ============================================ */
.whatsapp-float{
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.4);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.whatsapp-float svg{ width: 28px; height:28px; }
.whatsapp-float:hover{ transform: scale(1.08); background: #000; }
.whatsapp-float__tooltip{
  position:absolute; right: 68px;
  background: var(--ink);
  color: #fff;
  font-size: .78rem;
  padding: 8px 14px;
  border-radius: 8px;
  white-space:nowrap;
  opacity:0; visibility:hidden;
  transform: translateX(6px);
  transition: opacity .3s, transform .3s, visibility .3s;
  border: 1px solid rgba(255,255,255,.14);
}
.whatsapp-float:hover .whatsapp-float__tooltip{ opacity:1; visibility:visible; transform: translateX(0); }

/* ============================================
   BACK TO TOP
   ============================================ */
.back-to-top{
  position: fixed; right: 24px; bottom: 92px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .35s, transform .35s, visibility .35s, background .3s, color .3s;
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.3);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--ink); color: #fff; }

/* ============================================
   RESPONSIVE
   ============================================ */

/* ---- Tablet grande: navbar já compacta e reduz espaçamentos ---- */
@media (max-width: 1080px){
  .plans__grid{ grid-template-columns: 1fr; max-width: 480px; margin-left:auto; margin-right:auto; }
  .plan-card--featured{ transform:none; order:-1; }
  .plan-card--featured:hover{ transform: translateY(-6px); }
  .gallery__grid{ grid-template-columns: repeat(2, 1fr); }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .footer__brand{ grid-column: 1 / -1; }

  .nav__links{ gap: 24px; margin-right: 20px; }
}

/* ---- Tablet / celular: menu vira hambúrguer, navbar sempre com contraste ---- */
@media (max-width: 860px){
  :root{ --nav-h: 68px; }

  .nav__inner{ padding: 0 clamp(20px, 5vw, 40px); }

  .nav__links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap: 0;
    background: var(--hero-ink);
    padding: 10px clamp(20px, 5vw, 40px) 26px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
  }
  .nav__links .nav__link{ width:100%; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #d6d6d6; }
  .nav__links .nav__link:hover{ color: #fff; }
  .nav.is-open .nav__links{ display:flex; }
  .nav.is-open::before{ opacity: 1; background: var(--hero-ink); }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }

  .nav.is-scrolled .nav__logo-img{ height: 32px; }
  .nav__logo-img{ height: 38px; }

  .nav.is-open .nav__burger span{ background: #fff; }
  .nav.is-open .nav__burger span:nth-child(1){ transform: translateY(9.5px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
  .nav.is-open .nav__burger span:nth-child(3){ transform: translateY(-9.5px) rotate(-45deg); }

  .hero__deco{ display:none; }
  .hero__actions{ flex-direction:column; align-items:flex-start; }
  .btn{ width:100%; justify-content:center; }
  .hero__actions .btn{ width:auto; }

  .slider__arrow{ width:38px; height:38px; font-size:1.1rem; }
}

/* ---- Celular pequeno: reforça legibilidade do título do hero ---- */
@media (max-width: 640px){
  .gallery__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .footer__grid{ grid-template-columns: 1fr; }

  .hero{ align-items:flex-end; padding-bottom: 56px; }
  .hero__content{ padding: 0 clamp(20px, 6vw, 40px); }
  .hero__title{ font-size: clamp(2.1rem, 9vw, 2.7rem); margin-bottom: 20px; }
  .hero__text{ font-size: .95rem; margin-bottom: 30px; }
  .hero__overlay{
    background:
      linear-gradient(180deg, rgba(6,6,6,.62) 0%, rgba(6,6,6,.34) 26%, rgba(6,6,6,.6) 58%, rgba(4,4,4,.95) 100%),
      linear-gradient(100deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%);
  }

  .plan-card{ padding: 36px 24px; }

  .nav__logo-img{ height: 32px; max-width: 160px; }
}

@media (max-width: 380px){
  .nav__logo-img{ height: 28px; max-width: 130px; }
}


/* ============================================
   SOBRE — GUSTAVO ALMEIDA
   ============================================ */
.about{
  padding: var(--section-y) 0;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.about__grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.about__media{
  position: relative;

  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 40px 70px -36px var(--glass-shadow);
  border: 1px solid var(--glass-border);
}
.about__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.15);
  transition: transform .7s var(--ease), filter .5s;
}
.about__media:hover .about__img{
  transform: scale(1.04);
  filter: grayscale(0);
}

.about__content{ max-width: 46ch; }
.about__content .h2{ max-width: none; }
.about__text{
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 0 0 36px;
  line-height: 1.8;
}
.about__btn{ color: var(--ink); }

@media (max-width: 860px){
  .about__grid{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about__media{
    max-width: 380px;
    margin: 0 auto;
    aspect-ratio: 1/1;
  }
  .about__content{ margin: 0 auto; }
}