/* ==========================================================================
   Weds Love — landing page
   Kong Media / DevKong

   Margens de segurança (largura útil do conteúdo):
     desktop  1250px   (medida do layout: nav, card do vídeo e régua vão de
                        x335 a x1584 em 1920 = 1250px)
     notebook  975px
     tablet     95%
     mobile     90%
   Para mudar o desktop para 1300px, altere apenas --shell em :root.
   ========================================================================== */

/* ---------- fontes ---------- */
@font-face{font-family:"Nunito";src:url("../fonts/nunito-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-600-italic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-700-italic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}

/* Merriweather Italic — fonte dos textos corridos e descrições.
   O arquivo já é itálico, por isso está registrado nos dois estilos:
   evita o navegador inclinar de novo (falso itálico) dentro de <em>.
   size-adjust:90% iguala o tamanho visual ao do Nunito (a Merriweather
   tem altura-x maior). Para mudar a escala, mexa só nos dois 90%. */
@font-face{font-family:"Merriweather";src:url("../fonts/merriweather-400-italic.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;size-adjust:90%}
@font-face{font-family:"Merriweather";src:url("../fonts/merriweather-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;size-adjust:90%}

/* ---------- tokens ---------- */
:root{
  --shell: 1250px;          /* margem de segurança desktop */
  --k: 1;                   /* fator de escala por breakpoint */

  /* fontes: --ff-title nos títulos/botões/menu, --ff-text nos textos e descrições */
  --ff-title: "Nunito",-apple-system,"Segoe UI",Arial,sans-serif;
  --ff-text:  "Merriweather",Georgia,"Times New Roman",serif;

  --cream:      #FEF2E2;
  --cream-2:    #FDF3E6;
  --cream-soft: #EDE4D6;
  --terra:      #B34C3D;
  --terra-2:    #D26350;
  --terra-mid:  #C05544;
  --title:      #B34C3D;
  --brown:      #855049;
  --accent:     #D66450;
  --text:       #555555;
  --line:       #E3C4BB;
  --grad:  linear-gradient(90deg,#B14B3D 0%,#D26350 100%);
  --r-btn: 8px;      /* raio de TODOS os CTAs */
  --r-box: 14px;     /* raio das caixas (cards, fotos, itens do FAQ) */
  --shadow-card: 0 18px 44px rgba(133,80,73,.14);
  --shadow-soft: 0 10px 30px rgba(133,80,73,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--ff-title);
  font-size:calc(22px * var(--k));
  line-height:1.36;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}

.shell{width:var(--shell);max-width:100%;margin-inline:auto}

/* ---------- tipografia ---------- */
.h2{
  font-size:calc(42px * var(--k));
  line-height:1.19;
  font-weight:700;
  color:var(--title);
  letter-spacing:-.005em;
}
.h2--light{color:var(--cream-soft)}
.h2--xl{font-size:calc(58px * var(--k));line-height:1.07;color:var(--cream)}
.lead{font-size:calc(22px * var(--k));line-height:1.36;color:var(--text)}
.lead--light{color:var(--cream-soft)}

/* ---------- fonte dos textos e descrições ----------
   Entram aqui os textos corridos, o menu, os CTAs, as pills com fundo
   ("Cada detalhe do seu jeito", "Tipos de evento", "Planos", "FAQ",
   as tags dos planos) e o destaque "100% personalizável" do hero.
   Seguem no Nunito: os títulos (h1/h2/h3), os números dos passos e a
   faixa animada. Para levar as perguntas do FAQ ou a faixa para a
   serifada, some .acc__head span ou .marquee__item nesta lista. */
.nav__link,
.btn,
.pill,
.plan__tag,
.hero__title em,
.lead,
.hero__sub,
.feat__text,
.step__text,
.steps__note,
.card__text,
.plan__list li,
.plan__price em,
.plans__note,
.acc__body,
.trust span,
.footer__bar{
  font-family:var(--ff-text);
}

/* ---------- pill / eyebrow ---------- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:calc(47px * var(--k));
  padding-inline:calc(30px * var(--k));
  min-width:calc(256px * var(--k));
  border-radius:999px;
  background:var(--grad);
  color:var(--cream);
  font-size:calc(14px * var(--k));
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1;
}
.pill--light{background:var(--cream);color:var(--terra)}
.pill--hero{min-width:0;padding-inline:calc(52px * var(--k));font-size:calc(16px * var(--k))}
.pill--faq{min-width:0;padding-inline:calc(57px * var(--k))}

/* ---------- botões ---------- */
.btn{
  --btn-h: calc(53px * var(--k));
  --btn-w: calc(254px * var(--k));
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--btn-h);
  min-width:var(--btn-w);
  padding-inline:calc(22px * var(--k));
  border-radius:calc(var(--r-btn) * var(--k));
  font-size:calc(15px * var(--k));
  font-weight:500;
  letter-spacing:.055em;
  text-transform:uppercase;
  line-height:1;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--sm{--btn-h:calc(47px * var(--k));--btn-w:calc(230px * var(--k))}
.btn--lg{--btn-h:calc(61px * var(--k));--btn-w:calc(336px * var(--k))}

/* preenchido + anel externo (padrão do layout) */
.btn--fill{
  background:var(--grad);
  color:var(--cream);
  outline:1px solid var(--terra);
  outline-offset:calc(4px * var(--k));
}
.btn--fill:hover{box-shadow:0 8px 20px rgba(179,76,61,.30)}

/* branco com borda terracota */
.btn--ghost{
  --btn-h:calc(61px * var(--k));
  --btn-w:calc(264px * var(--k));
  background:#fff;color:var(--terra);
  border:1px solid var(--terra);
}
.btn--ghost:hover{background:var(--cream)}

/* creme vazado sobre fundo terracota + anel */
.btn--outline-light{
  --btn-w:calc(320px * var(--k));
  background:rgba(255,255,255,.06);
  color:var(--cream);
  border:1px solid rgba(254,242,226,.85);
  outline:1px solid rgba(254,242,226,.85);
  outline-offset:calc(4px * var(--k));
}
.btn--outline-light:hover{background:rgba(255,255,255,.16)}

.btn--ghost-light{
  --btn-h:calc(61px * var(--k));
  --btn-w:calc(264px * var(--k));
  background:transparent;color:var(--cream);
  border:1px solid rgba(254,242,226,.85);
}
.btn--ghost-light:hover{background:rgba(255,255,255,.12)}

.btn--outline{background:#fff;color:var(--terra);border:1px solid var(--line)}
.btn--outline:hover{border-color:var(--terra)}
.btn--white{background:#fff;color:var(--terra)}
.btn--white:hover{background:var(--cream)}

.actions{display:flex;gap:calc(18px * var(--k));align-items:center;flex-wrap:wrap}
.actions--center{justify-content:center}

/* ---------- régua + selos de confiança ---------- */
.rule{border:0;border-top:1px solid var(--line);margin:0}
.rule--light{border-top-color:rgba(254,242,226,.45)}
.trust{
  display:flex;justify-content:center;align-items:center;
  gap:calc(38px * var(--k));
  flex-wrap:wrap;
}
.trust li{display:flex;align-items:center;gap:calc(12px * var(--k))}
.trust img{width:calc(30px * var(--k));height:calc(30px * var(--k));border-radius:calc(8px * var(--k))}
.trust span{font-size:calc(16px * var(--k));color:var(--text)}
.trust--light span{color:var(--cream)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{position:absolute;top:0;left:0;right:0;z-index:60;padding-top:calc(33px * var(--k))}
.header__bar{
  display:flex;align-items:center;justify-content:space-between;
  height:calc(74px * var(--k));
  padding-inline:calc(21px * var(--k)) calc(19px * var(--k));
  background:#fff;
  border-radius:calc(14px * var(--k));
  box-shadow:0 6px 18px rgba(133,80,73,.07);
}
.header__logo img{height:calc(49px * var(--k));width:auto}
.nav{display:flex;align-items:center;gap:calc(50px * var(--k))}
.nav__link{font-size:calc(18px * var(--k));color:var(--text)}
.nav__link:hover{color:var(--terra)}

/* header fixo ao rolar */
.header.is-stuck{position:fixed;padding-top:calc(12px * var(--k));animation:dropIn .32s ease both}
@keyframes dropIn{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}

.burger{display:none;width:44px;height:36px;border:0;background:none;cursor:pointer;padding:6px 4px}
.burger span{display:block;height:2px;background:var(--terra);border-radius:2px;margin:5px 0;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  padding-top:calc(201px * var(--k));
  padding-bottom:calc(489px * var(--k));
  background:var(--cream);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("../img/bg-papel.png") center top / cover no-repeat;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.hero .shell{position:relative;z-index:2}
.hero__inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero__title{
  margin-top:calc(14px * var(--k));
  font-size:calc(68px * var(--k));
  line-height:1.02;
  font-weight:700;
  color:var(--brown);
  letter-spacing:-.01em;
}
.hero__title em{font-style:italic;color:var(--accent)}
.hero__sub{margin-top:calc(16px * var(--k));font-size:calc(24px * var(--k))}
.hero .actions{margin-top:calc(32px * var(--k))}
.hero .rule{width:100%;margin-top:calc(54px * var(--k))}
.hero .trust{margin-top:calc(30px * var(--k))}

/* ---------- faixa animada infinita ---------- */
.marquee{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:calc(82px * var(--k));
  background:var(--grad);
  overflow:hidden;
  display:flex;align-items:center;
}
.marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee__group{display:flex;align-items:center}
.marquee__item{
  padding-inline:calc(34px * var(--k));
  color:var(--cream);
  font-size:calc(24px * var(--k));
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ==========================================================================
   VÍDEO
   ========================================================================== */
.video-sec{position:relative;z-index:3}
.video-card{
  position:relative;
  margin-top:calc(-411px * var(--k));
  aspect-ratio:1250 / 656;
  background:#fff;
  border-radius:calc(24px * var(--k));
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.player{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#FFFFFF 0%,#FDF7EF 100%);
}
.player__btn{
  display:flex;align-items:center;justify-content:center;
  width:calc(96px * var(--k));height:calc(96px * var(--k));
  border-radius:50%;
  background:rgba(179,76,61,.07);
  border:1px solid rgba(179,76,61,.16);
  color:var(--terra);
  box-shadow:0 0 0 calc(16px * var(--k)) rgba(179,76,61,.045);
  transition:transform .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.player__btn svg{width:calc(40px * var(--k));height:calc(40px * var(--k));margin-left:calc(4px * var(--k))}
.video-card:hover .player__btn{
  transform:scale(1.04);
  background:rgba(179,76,61,.12);
  box-shadow:0 0 0 calc(22px * var(--k)) rgba(179,76,61,.05);
}
.player__bar{
  position:absolute;left:0;right:0;bottom:0;
  height:calc(56px * var(--k));
  display:flex;align-items:center;gap:calc(20px * var(--k));
  padding-inline:calc(32px * var(--k));
  color:var(--terra);
}
.player__track{flex:1;height:calc(3px * var(--k));border-radius:999px;background:rgba(179,76,61,.12);overflow:hidden}
.player__track i{display:block;width:18%;height:100%;border-radius:999px;background:var(--grad);opacity:.85}
.player__icon{width:calc(20px * var(--k));height:calc(20px * var(--k));flex:none;opacity:.38}
.video-card__label{
  color:#808080;
  font-size:calc(40px * var(--k));
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:center;
  padding-inline:6%;
}
.video-card iframe,.video-card video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.video-card__play{
  position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;padding:0;
  background:center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.video-card__play::after{
  content:"";
  width:calc(92px * var(--k));height:calc(92px * var(--k));
  border-radius:50%;
  background:var(--grad) ;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  clip-path:none;
  transition:transform .2s ease;
}
.video-card__play::before{
  content:"";position:absolute;z-index:2;
  border-style:solid;
  border-width:calc(15px * var(--k)) 0 calc(15px * var(--k)) calc(24px * var(--k));
  border-color:transparent transparent transparent var(--cream);
  transform:translateX(calc(4px * var(--k)));
}
.video-card__play:hover::after{transform:scale(1.06)}

/* ==========================================================================
   TUDO EM UM SÓ LUGAR
   ========================================================================== */
.features{position:relative;padding-top:calc(205px * var(--k));padding-bottom:calc(144px * var(--k));overflow:hidden}
.features__watermark{
  /* marca d'água "weds love": mesma escala e posição do layout (50% do
     tamanho natural do arquivo), encostada na borda direita da tela */
  position:absolute;top:calc(-170px * var(--k));
  right:calc(-60px * var(--k));left:auto;
  width:calc(856px * var(--k));height:calc(1289px * var(--k));
  background:url("../img/bg-script.png") left top / 100% auto no-repeat;
  opacity:.68;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 76%,transparent 97%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 76%,transparent 97%);
  pointer-events:none;
}
.features__grid{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:calc(594px * var(--k)) 1fr;
  gap:calc(32px * var(--k));
  align-items:start;
}
.features .h2{line-height:1.0}
.features .h2 + .lead{margin-top:calc(29px * var(--k))}
.features__photo{margin:calc(-15px * var(--k)) 0 0}
.features__photo img{
  width:100%;
  aspect-ratio:624 / 623;
  object-fit:cover;
  border-radius:calc(var(--r-box) * var(--k));
}
.feat{margin-top:calc(62px * var(--k))}
.feat__item{
  display:flex;gap:calc(20px * var(--k));
  padding-bottom:calc(12px * var(--k));
  border-bottom:1px solid var(--line);
  margin-bottom:calc(36px * var(--k));
}
.feat__item:last-child{margin-bottom:0}
.feat__ico{width:calc(44px * var(--k));height:calc(44px * var(--k));border-radius:calc(10px * var(--k));flex:none}
.feat__title{font-size:calc(22px * var(--k));font-weight:600;color:var(--title);line-height:1.2}
.feat__text{margin-top:calc(6px * var(--k));font-size:calc(16px * var(--k));line-height:1.35;max-width:44ch}
.features__cta{margin-top:calc(82px * var(--k))}

/* ==========================================================================
   COMO FUNCIONA
   ========================================================================== */
.steps{
  position:relative;overflow:hidden;
  padding-top:calc(119px * var(--k));
  padding-bottom:calc(117px * var(--k));
  background:var(--grad);
}
.steps__decor{
  position:absolute;top:calc(229px * var(--k));
  width:calc(168px * var(--k));height:calc(591px * var(--k));
  background:var(--cream-2);
  border-radius:calc(60px * var(--k));
}
.steps__decor--left{left:0;border-radius:0 calc(60px * var(--k)) calc(60px * var(--k)) 0}
.steps__decor--right{right:0;border-radius:calc(60px * var(--k)) 0 0 calc(60px * var(--k))}
.steps__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.steps .h2{margin-top:calc(21px * var(--k));line-height:1.05}
.steps .lead{margin-top:calc(22px * var(--k));max-width:calc(790px * var(--k))}

.steps__list{
  width:100%;
  margin-top:calc(54px * var(--k));
  display:flex;flex-direction:column;
  gap:calc(60px * var(--k));
}
.step{
  position:relative;
  display:grid;
  grid-template-columns:1fr calc(75px * var(--k)) 1fr;
  align-items:center;
  text-align:left;
}
.step::before{ /* linha que liga os números */
  content:"";position:absolute;left:50%;top:50%;
  width:1px;height:calc(135px * var(--k));
  background:rgba(254,242,226,.55);
  transform:translateX(-50%);
}
.step:last-child::before{display:none}
.step__num{
  grid-column:2;grid-row:1;
  display:flex;align-items:center;justify-content:center;
  width:calc(75px * var(--k));height:calc(75px * var(--k));
  border-radius:calc(16px * var(--k));
  background:var(--cream-2);
  color:var(--terra);
  font-size:calc(34px * var(--k));
  font-weight:700;
  position:relative;z-index:2;
}
.step__body{grid-row:1;max-width:calc(330px * var(--k))}
.step--right .step__body{grid-column:3;padding-left:calc(26px * var(--k))}
.step--left .step__body{grid-column:1;padding-right:calc(26px * var(--k));text-align:right;justify-self:end}
.step__title{font-size:calc(22px * var(--k));font-weight:700;color:var(--cream-soft);line-height:1.2}
.step__text{margin-top:calc(5px * var(--k));font-size:calc(15px * var(--k));line-height:1.32;color:rgba(254,242,226,.88)}

.steps .actions{margin-top:calc(80px * var(--k))}
.steps__note{margin-top:calc(18px * var(--k));font-size:calc(18px * var(--k));color:rgba(254,242,226,.92)}

/* ==========================================================================
   TIPOS DE EVENTO
   ========================================================================== */
.types{position:relative;overflow:hidden;padding-top:calc(140px * var(--k));padding-bottom:calc(202px * var(--k))}
.pattern{
  position:absolute;top:0;bottom:0;
  background:url("../img/bg-pattern.png") repeat-y;
  background-size:calc(1289px * var(--k)) auto;
  pointer-events:none;
}
.pattern--left{left:0;width:calc(250px * var(--k));background-position:left top}
.pattern--right{right:0;width:calc(300px * var(--k));background-position:right top}

.types .shell{position:relative;z-index:2}
.types__head{
  display:grid;grid-template-columns:1fr 1fr;
  gap:calc(50px * var(--k));
  align-items:start;
}
.types__head .h2{margin-top:calc(3px * var(--k));line-height:1.40}
.types__head .lead{margin-top:calc(56px * var(--k));max-width:calc(386px * var(--k))}

.cards{
  margin-top:calc(60px * var(--k));
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:calc(25px * var(--k));
}
.card{
  position:relative;overflow:hidden;
  height:calc(317px * var(--k));
  border-radius:calc(var(--r-box) * var(--k));
  display:flex;align-items:flex-end;
}
.card__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(74,29,20,.92) 0%,rgba(74,29,20,.62) 30%,rgba(74,29,20,.12) 64%,rgba(74,29,20,0) 82%);
}
.card:hover .card__bg{transform:scale(1.05)}
.card__content{position:relative;z-index:2;padding:calc(22px * var(--k)) calc(22px * var(--k)) calc(30px * var(--k));width:100%}
.card__ico{width:calc(30px * var(--k));height:calc(30px * var(--k));border-radius:calc(7px * var(--k))}
.card__title{margin-top:calc(14px * var(--k));font-size:calc(21px * var(--k));font-weight:600;color:var(--cream)}
.card__text{margin-top:calc(4px * var(--k));font-size:calc(16px * var(--k));line-height:1.3;color:rgba(254,242,226,.9);max-width:calc(178px * var(--k));
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  min-height:calc(2 * 1.3 * 16px * var(--k))}
.types__cta{margin-top:calc(82px * var(--k))}

/* ---------- cerimonialista ---------- */
.pro{
  margin-top:calc(131px * var(--k));
  display:grid;grid-template-columns:47% 53%;
  min-height:calc(606px * var(--k));
  border-radius:calc(24px * var(--k));
  overflow:hidden;
  background:var(--grad);
  box-shadow:var(--shadow-soft);
}
.pro__media{margin:0}
.pro__media img{width:100%;height:100%;object-fit:cover;min-height:calc(606px * var(--k))}
.pro__body{
  padding:calc(40px * var(--k));
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
}
.pro__body .pill{font-size:calc(16px * var(--k))}
.pro__body .h2{margin-top:calc(23px * var(--k));font-size:calc(34px * var(--k));line-height:1.24}
.pro__body .lead{margin-top:calc(25px * var(--k));max-width:calc(560px * var(--k))}
.pro__body .btn{margin-top:calc(31px * var(--k))}

/* ==========================================================================
   PLANOS
   ========================================================================== */
.plans{position:relative;z-index:4}
.plans__card{
  width:95.2%;max-width:calc(1828px * var(--k));
  margin-inline:auto;
  background:#fff;
  border-radius:calc(60px * var(--k));
  box-shadow:var(--shadow-soft);
  padding-block:calc(92px * var(--k)) calc(100px * var(--k));
}
.plans__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.plans .h2{margin-top:calc(23px * var(--k));line-height:1.0}
.plans .lead{margin-top:calc(24px * var(--k));max-width:calc(790px * var(--k))}

.plan-grid{
  width:100%;
  margin-top:calc(65px * var(--k));
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:calc(19px * var(--k));
  align-items:stretch;
}
.plan{
  display:flex;flex-direction:column;
  text-align:left;
  min-height:calc(408px * var(--k));
  padding:calc(26px * var(--k)) calc(28px * var(--k)) calc(31px * var(--k));
  border:1px solid var(--line);
  border-radius:calc(var(--r-box) * var(--k));
  background:#fff;
}
.plan--featured{background:var(--grad);border-color:transparent}
.plan__tag{
  align-self:flex-start;
  padding:calc(6px * var(--k)) calc(12px * var(--k));
  border-radius:calc(6px * var(--k));
  background:var(--grad);
  color:var(--cream);
  font-size:calc(12px * var(--k));
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1;
}
.plan__tag--light{background:rgba(254,242,226,.22);color:var(--cream)}
.plan__price{
  margin-top:calc(20px * var(--k));
  font-size:calc(42px * var(--k));
  font-weight:700;
  color:var(--title);
  line-height:1.1;
}
.plan__price em{font-size:calc(14px * var(--k));font-style:normal;font-weight:400;color:var(--text)}
.plan__price--light{color:var(--cream)}
.plan__price--light em{color:rgba(254,242,226,.9)}
.plan__list{margin-top:calc(22px * var(--k));display:flex;flex-direction:column;gap:calc(15px * var(--k))}
.plan__list li{
  position:relative;
  padding-left:calc(32px * var(--k));
  font-size:calc(17px * var(--k));
  line-height:1.3;
}
.plan__list li::before{
  content:"";position:absolute;left:0;top:calc(1px * var(--k));
  width:calc(21px * var(--k));height:calc(21px * var(--k));
  border-radius:50%;
  background:var(--terra) no-repeat center/58% 58%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.6l4.6 4.6L19.5 6.8' fill='none' stroke='%23FEF2E2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.plan__list--light li{color:var(--cream)}
.plan__list--light li::before{background-color:var(--cream);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.6l4.6 4.6L19.5 6.8' fill='none' stroke='%23B34C3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan__btn{margin-top:auto;width:100%;min-width:0;--btn-h:calc(58px * var(--k))}
.plan__price em sup{font-size:.8em;top:-.1em}
.plans__ast{color:var(--terra);font-weight:700}
.plans__note{margin-top:calc(69px * var(--k));font-size:calc(18px * var(--k))}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{position:relative;overflow:hidden;padding-top:calc(149px * var(--k));padding-bottom:calc(181px * var(--k))}
.faq .shell{position:relative;z-index:2}
.faq__grid{display:grid;grid-template-columns:calc(589px * var(--k)) calc(616px * var(--k));justify-content:space-between}
.faq__col{margin-top:calc(13px * var(--k))}
.faq .h2{margin-top:calc(21px * var(--k));line-height:1.19;max-width:calc(364px * var(--k))}
.faq__photo{
  margin:calc(33px * var(--k)) 0 0;
  position:relative;overflow:hidden;
  aspect-ratio:589 / 172;
  border-radius:calc(var(--r-box) * var(--k));
}
.faq__photo img{
  position:absolute;left:0;right:0;top:-18%;
  width:100%;height:136%;
  object-fit:cover;
  will-change:transform;
}

.acc{display:flex;flex-direction:column;gap:calc(10px * var(--k))}
.acc__item{
  background:var(--cream);
  border:1px solid rgba(179,76,61,.35);
  border-radius:calc(var(--r-box) * var(--k));
  overflow:hidden;
  transition:border-color .25s ease, background-color .25s ease;
}
.acc__item:hover{border-color:rgba(179,76,61,.6)}
.acc__item:has(.acc__head[aria-expanded="true"]){border-color:var(--terra);background:#FDF3E6}
.acc__head{
  width:100%;
  min-height:calc(54px * var(--k));
  padding:calc(10px * var(--k)) calc(48px * var(--k)) calc(10px * var(--k)) calc(26px * var(--k));
  display:flex;align-items:center;justify-content:space-between;gap:calc(18px * var(--k));
  background:none;border:0;cursor:pointer;
  color:var(--terra);
  font-family:inherit;
  font-size:calc(17px * var(--k));
  font-weight:500;
  text-align:left;
  line-height:1.25;
}
.acc__arrow{
  width:calc(24px * var(--k));height:calc(25px * var(--k));flex:none;
  padding:calc(5px * var(--k));
  border-radius:calc(6px * var(--k));
  background:var(--grad);
  color:var(--cream);
  transition:transform .28s ease;
}
.acc__head[aria-expanded="true"] .acc__arrow{transform:rotate(180deg)}
.acc__panel{height:0;overflow:hidden;transition:height .3s ease}
.acc__body{
  padding:0 calc(24px * var(--k)) calc(20px * var(--k));
  font-size:calc(16px * var(--k));
  line-height:1.42;
  color:var(--text);
}

/* ==========================================================================
   CTA FINAL + FOOTER
   ========================================================================== */
.closing{
  padding-top:calc(125px * var(--k));
  padding-bottom:calc(109px * var(--k));
  background:var(--grad);
}
.closing__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.closing .lead{margin-top:calc(41px * var(--k))}
.closing .actions{margin-top:calc(53px * var(--k))}
.closing .rule{width:100%;margin-top:calc(36px * var(--k))}
.closing .trust{margin-top:calc(39px * var(--k))}

.footer{background:var(--cream)}
.footer__bar{
  min-height:calc(77px * var(--k));
  display:flex;align-items:center;justify-content:space-between;gap:calc(20px * var(--k));
  font-size:calc(16px * var(--k));
  color:#B0705F;
}

/* ==========================================================================
   EFEITOS DE ENTRADA
   ========================================================================== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee__track{animation:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   NOTEBOOK — margem de segurança 975px
   ========================================================================== */
@media (max-width:1399px){
  :root{--shell:975px;--k:.78}
}

/* ==========================================================================
   TABLET — margem de segurança 95%
   ========================================================================== */
@media (max-width:1023px){
  :root{--shell:95%;--k:.72}

  .burger{display:block}
  .nav{
    position:absolute;top:calc(100% + 10px);right:0;left:0;
    flex-direction:column;align-items:stretch;
    gap:14px;padding:22px;
    background:#fff;border-radius:14px;
    box-shadow:var(--shadow-card);
    display:none;
  }
  .nav.is-open{display:flex;animation:dropIn .25s ease both}
  .nav__link{font-size:18px;padding:6px 2px}
  .nav .btn{--btn-w:100%;width:100%}
  .header__bar{position:relative}

  .features__grid{grid-template-columns:1fr;gap:calc(44px * var(--k))}
  .features__photo{order:-1}
  .features__photo img{aspect-ratio:16/11}
  .features__watermark{left:auto;right:calc(-420px * var(--k));opacity:.85}
  .feat__text{max-width:none}

  .types__head{grid-template-columns:1fr;gap:calc(24px * var(--k))}
  .cards{grid-template-columns:repeat(2,1fr)}
  /* a regra de 2 linhas vale só no desktop; aqui o texto pode respirar */
  .card__text{display:block;-webkit-line-clamp:unset;min-height:0;max-width:none}
  .pro{grid-template-columns:1fr}
  .pro__media img{min-height:0;aspect-ratio:16/10}
  .pro__body{padding:calc(48px * var(--k)) calc(40px * var(--k))}

  .plan-grid{grid-template-columns:1fr;gap:calc(24px * var(--k))}
  .plan{min-height:0}
  .plans__card{width:100%;border-radius:calc(40px * var(--k));padding-inline:calc(20px * var(--k))}

  .faq__grid{grid-template-columns:1fr;gap:calc(44px * var(--k))}
  .faq__photo img{aspect-ratio:16/7}

  .steps__decor{display:none}
  .plan__btn{margin-top:calc(26px * var(--k))}
  .features__watermark{right:calc(-120px * var(--k));width:calc(760px * var(--k));height:calc(1145px * var(--k));opacity:.55}
  .step{grid-template-columns:calc(75px * var(--k)) 1fr;gap:calc(22px * var(--k));text-align:left}
  .step__num{grid-column:1}
  .step::before{left:calc(37px * var(--k))}
  .step--right .step__body,.step--left .step__body{grid-column:2;padding:0;text-align:left;justify-self:start;max-width:none}
}

/* ==========================================================================
   TABLET — piso de tipografia e de área de toque
   Abaixo de 1024px o --k deixa de reger texto e controles: o site passa a
   usar tamanhos de leitura reais, como qualquer site responsivo.
   ========================================================================== */
@media (max-width:1023px){
  body{font-size:17px;line-height:1.6}
  .h2{font-size:32px;line-height:1.2}
  .h2--xl{font-size:36px;line-height:1.15}
  .lead{font-size:17px;line-height:1.6}
  .pill{height:36px;min-width:0;padding-inline:22px;font-size:12px}
  .pill--hero,.pill--faq{padding-inline:22px;font-size:12px}
  .btn{--btn-h:54px;--btn-w:220px;font-size:14px;border-radius:8px;padding-inline:20px}
  .btn--ghost,.btn--ghost-light{--btn-h:54px}
  .btn--fill{outline-offset:3px}
  .btn--outline-light{outline-offset:3px}
  .nav__link{font-size:16px}
  .feat__title,.step__title,.card__title{font-size:18px}
  .feat__text,.step__text,.card__text,.acc__body,.plan__list li{font-size:15px;line-height:1.55}
  .trust span{font-size:15px}
  .acc__head{font-size:16px;min-height:60px}
  .plan__price{font-size:32px}
  .plan__price em{font-size:14px}
  .plan__tag{font-size:11px}
  .plans__note,.steps__note{font-size:15px}
  .footer__bar{font-size:14px}
  .marquee__item{font-size:14px}
  .video-card__label{font-size:22px}
}

/* ==========================================================================
   MOBILE — margem de segurança 90%
   Aqui o layout deixa de ser o desktop reduzido: uma coluna só, espaçamento
   em px de verdade, header fixo, menu em painel e CTA de largura cheia.
   ========================================================================== */
@media (max-width:767px){
  :root{
    --shell:90%;      /* margem de segurança do mobile */
    --k:.62;          /* o --k passa a valer só para enfeites e imagens */
  }
  html{scroll-padding-top:88px}
  body{font-size:16px;line-height:1.62;-webkit-tap-highlight-color:rgba(179,76,61,.12)}

  /* no celular as quebras de linha manuais dos títulos atrapalham */
  .hero__title br,.features .h2 br,.steps .h2 br,.types__head .h2 br,
  .pro .h2 br,.plans .h2 br,.closing .h2 br,.faq .h2 br{display:none}

  /* ---------- tipografia ---------- */
  .h2{font-size:26px;line-height:1.24}
  .h2--xl{font-size:28px;line-height:1.22}
  .lead{font-size:16px;line-height:1.62}
  .pill{height:32px;padding-inline:18px;font-size:11px;letter-spacing:.06em}
  .pill--hero,.pill--faq{padding-inline:18px;font-size:11px}

  /* ---------- CTAs: largura cheia, altura de dedo ---------- */
  .btn{--btn-h:52px;--btn-w:100%;width:100%;font-size:13px;letter-spacing:.05em;padding-inline:16px}
  .btn--sm,.btn--lg,.btn--ghost,.btn--ghost-light,.btn--outline-light{--btn-h:52px;--btn-w:100%}
  .btn:hover{transform:none}
  /* o anel externo dos CTAs (outline + offset) fica FORA da caixa do botão:
     sem esta folga de 5px ele passava por cima da margem de segurança */
  .actions{flex-direction:column;align-items:stretch;gap:16px;width:100%;padding-inline:5px}
  .actions .btn{width:100%;min-width:0}
  .btn--fill,.btn--outline-light{outline-offset:4px}
  .plan__btn,.pro__body .btn,.nav .btn{width:100%}

  /* ---------- header fixo + menu em painel ---------- */
  .header{position:fixed;padding-top:10px}
  .header.is-stuck{position:fixed;padding-top:10px;animation:none}
  .header__bar{height:60px;border-radius:12px;padding-inline:14px 8px}
  .header__logo img{height:34px}
  .burger{width:44px;height:44px;padding:10px 8px;display:block}

  .nav{
    position:fixed;top:80px;left:5%;right:5%;
    max-height:calc(100vh - 100px);overflow-y:auto;
    gap:0;padding:8px 6px 14px;
    border-radius:14px;
  }
  .nav__link{
    display:flex;align-items:center;
    min-height:52px;padding:0 12px;
    font-size:16px;
    border-bottom:1px solid rgba(227,196,187,.55);
  }
  .nav .btn{margin-top:14px}
  body.nav-open{overflow:hidden}

  /* ---------- hero ---------- */
  .hero{padding-top:118px;padding-bottom:96px;background-size:cover}
  .hero__title{margin-top:14px;font-size:34px;line-height:1.14;letter-spacing:-.005em}
  .hero__sub{margin-top:12px;font-size:16px}
  .hero .actions{margin-top:26px}
  .hero .rule{margin-top:34px}
  .hero .trust{margin-top:24px}
  .marquee{height:46px}
  .marquee__item{padding-inline:18px;font-size:13px}

  /* selos: em coluna solta ficavam três frases jogadas; viram uma lista
     de cartão, com divisória entre os itens */
  .trust{
    width:100%;
    flex-direction:column;align-items:stretch;
    gap:0;
    padding:2px 16px;
    background:rgba(255,255,255,.55);
    border:1px solid var(--line);
    border-radius:14px;
  }
  .trust li{
    width:100%;gap:12px;
    min-height:54px;padding-block:12px;
    border-bottom:1px solid var(--line);
  }
  .trust li:last-child{border-bottom:0}
  .trust img{width:26px;height:26px;border-radius:7px;flex:none}
  .trust span{font-size:15px;line-height:1.35}
  .trust--light{background:rgba(255,255,255,.10);border-color:rgba(254,242,226,.40)}
  .trust--light li{border-bottom-color:rgba(254,242,226,.30)}

  /* ---------- vídeo: sem sobreposição no celular ---------- */
  .video-sec{margin-top:28px}
  .video-card{margin-top:0;aspect-ratio:16/10;border-radius:16px}
  .player__btn{width:64px;height:64px;box-shadow:0 0 0 10px rgba(179,76,61,.045)}
  .player__btn svg{width:26px;height:26px}
  .player__bar{height:44px;gap:12px;padding-inline:16px}
  .video-card__label{font-size:18px}
  .video-card__play::after{width:64px;height:64px}
  .video-card__play::before{border-width:11px 0 11px 17px}

  /* ---------- tudo em um só lugar ---------- */
  .features{padding-top:64px;padding-bottom:56px}
  .features__watermark{display:none}
  .features__grid{grid-template-columns:1fr;gap:28px}
  .features__photo{order:-1;margin:0}
  .features__photo img{aspect-ratio:4/3}
  .features .h2{line-height:1.24}
  .features .h2 + .lead{margin-top:16px}
  .feat{margin-top:32px}
  .feat__item{gap:14px;margin-bottom:24px;padding-bottom:20px}
  .feat__ico{width:38px;height:38px;border-radius:9px}
  .feat__title{font-size:17px}
  .feat__text{margin-top:6px;font-size:15px;line-height:1.55;max-width:none}
  .features__cta{margin-top:36px}

  /* ---------- como funciona ---------- */
  .steps{padding-top:64px;padding-bottom:64px}
  .steps__decor{display:none}
  .steps .h2{margin-top:16px}
  .steps .lead{margin-top:14px}
  .steps__list{margin-top:36px;gap:28px}
  .step{grid-template-columns:56px 1fr;gap:16px;align-items:start;text-align:left}
  .step__num{width:56px;height:56px;border-radius:14px;font-size:24px;grid-column:1}
  .step::before{left:28px;top:56px;height:calc(100% + 28px - 56px);transform:none}
  .step__body{grid-column:2;max-width:none;padding:0;text-align:left;justify-self:start}
  .step--left .step__body,.step--right .step__body{grid-column:2;padding:0;text-align:left}
  .step__title{font-size:17px}
  .step__text{margin-top:6px;font-size:15px;line-height:1.55}
  .steps .actions{margin-top:36px}
  .steps__note{margin-top:16px;font-size:15px}

  /* ---------- tipos de evento ---------- */
  .types{padding-top:64px;padding-bottom:72px}
  .types__head{grid-template-columns:1fr;gap:14px}
  .types__head .h2{margin-top:14px;line-height:1.24}
  .types__head .lead{margin-top:0;max-width:none}
  .cards{margin-top:28px;grid-template-columns:1fr;gap:14px}
  .card{height:200px}
  .card__content{padding:18px 18px 20px}
  .card__ico{width:26px;height:26px}
  .card__title{margin-top:10px;font-size:18px}
  .card__text{margin-top:4px;font-size:15px;max-width:none;display:block;-webkit-line-clamp:unset;min-height:0}
  .types__cta{margin-top:32px}

  /* ---------- cerimonialista ---------- */
  .pro{margin-top:56px;grid-template-columns:1fr;min-height:0;border-radius:18px}
  .pro__media img{min-height:0;aspect-ratio:16/10}
  .pro__body{padding:28px 20px 32px}
  .pro__body .pill{font-size:11px}
  .pro__body .h2{margin-top:14px;font-size:24px;line-height:1.26}
  .pro__body .lead{margin-top:14px;max-width:none}
  .pro__body .btn{margin-top:24px}

  /* ---------- planos ---------- */
  .plans__card{width:92%;margin-inline:auto;border-radius:22px;padding-inline:14px;padding-block:52px}
  .plans__inner{width:100%}
  .plans .h2{margin-top:16px}
  .plans .lead{margin-top:14px}
  .plan-grid{margin-top:32px;grid-template-columns:1fr;gap:16px}
  .plan{min-height:0;padding:22px 20px 26px;border-radius:14px}
  .plan__tag{font-size:11px;padding:6px 12px;border-radius:6px}
  .plan__price{margin-top:16px;font-size:30px}
  .plan__price em{font-size:13px}
  .plan__list{margin-top:18px;gap:12px}
  .plan__list li{font-size:15px;padding-left:28px}
  .plan__list li::before{width:19px;height:19px}
  .plan__btn{margin-top:24px}
  .plans__note{margin-top:32px;font-size:14px}

  /* ---------- FAQ ---------- */
  .faq{padding-top:64px;padding-bottom:64px}
  .faq__grid{grid-template-columns:1fr;gap:28px}
  .faq .h2{margin-top:14px;max-width:none}
  .faq__photo{margin-top:20px;aspect-ratio:16/9}
  .acc{gap:10px}
  .acc__head{min-height:58px;padding:12px 44px 12px 16px;font-size:15px;gap:12px}
  .acc__arrow{width:22px;height:23px}
  .acc__body{padding:0 16px 16px;font-size:15px;line-height:1.55}

  /* ---------- CTA final + rodapé ---------- */
  .closing{padding-top:64px;padding-bottom:56px}
  .closing .lead{margin-top:18px}
  .closing .actions{margin-top:28px}
  .closing .rule{margin-top:28px}
  .closing .trust{margin-top:24px}
  .footer__bar{flex-direction:column;align-items:flex-start;gap:6px;padding-block:20px;text-align:left;font-size:13px;min-height:0}

  /* toque não tem hover: evita o card e a foto "presos" no estado de hover */
  .card:hover .card__bg{transform:none}
  .video-card:hover .player__btn{transform:none;box-shadow:0 0 0 10px rgba(179,76,61,.045)}
}

/* ==========================================================================
   MOBILE PEQUENO (≤ 360px)
   ========================================================================== */
@media (max-width:360px){
  .hero__title{font-size:30px}
  .h2{font-size:23px}
  .h2--xl{font-size:25px}
  .btn{font-size:12px;letter-spacing:.04em}
  .card{height:180px}
}