/* ============================================================================
   Componentes da landing Dalefatto — construídos sobre design-system.css
   ========================================================================= */

/* --- cabeçalho ------------------------------------------------------------ */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:1000;
  height:var(--header-h);background:var(--white);
  border-bottom:.5px solid var(--grey-300);
  transition:transform .5s ease-in-out;
  will-change:transform;
}
.site-header.is-hidden-up{transform:translateY(-200%)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;height:100%}
.header-logo img{width:132px}
@media (min-width:1024px){.header-logo img{width:168px}}

.header-nav{display:none;gap:30px;align-items:center}
@media (min-width:1024px){.header-nav{display:flex}}
.header-nav a{
  position:relative;font-size:12px;font-weight:600;letter-spacing:2px;line-height:20px;
  text-transform:uppercase;color:var(--grey-700);transition:color .1s ease-out;
}
.header-nav a::after{
  content:"";position:absolute;left:50%;bottom:-6px;height:2px;width:0;
  background:var(--accent);transition:width .25s ease-out,left .25s ease-out;
}
.header-nav a:hover{color:var(--ink-900)}
.header-nav a:hover::after{width:100%;left:0}

.header-cta{
  display:none;border-radius:9999px;
  background-image:linear-gradient(90deg,var(--accent-from),var(--accent-to));
}
@media (min-width:768px){.header-cta{display:inline-flex}}
.header-cta a{
  display:inline-flex;align-items:center;gap:.625rem;height:40px;padding-inline:21px;
  font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--white);
  transition:filter .3s ease-in-out;white-space:nowrap;
}
.header-cta:hover a{filter:brightness(1.1)}
.header-cta svg{width:18px;height:18px;flex-shrink:0;fill:currentColor}

/* --- seletor de idioma ------------------------------------------------------
   Segue o padrão do seletor de região do design system: gatilho de 12px em
   caixa alta com entreletra de 2px e painel branco com borda fina. */
.header-end{display:flex;align-items:center;gap:1.25rem}
.lang{position:relative}
.lang--desktop{display:none}
@media (min-width:1024px){.lang--desktop{display:block}}
.lang-trigger{
  display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .25rem;
  font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--grey-700);transition:color .2s ease-out;
}
.lang-trigger:hover{color:var(--ink-900)}
.lang-trigger svg{width:12px;height:12px;fill:currentColor;transition:transform .3s ease-out}
.lang-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.lang-trigger[aria-expanded="true"]{color:var(--ink-900)}
.lang-menu{
  position:absolute;top:100%;right:0;z-index:60;min-width:190px;margin-top:14px;
  background:var(--white);border:1px solid var(--grey-300);padding-block:3px;
}
.lang-menu a{
  display:block;padding:.65rem 1rem;
  font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink-800);transition:color .2s ease-out;
}
.lang-menu a:hover{color:var(--accent)}
.lang-menu a.is-current{color:var(--accent)}

/* versão do seletor dentro do menu mobile */
.mobile-lang{margin-top:var(--space-lg)}
.mobile-lang-links{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:.85rem}
.mobile-lang-links a{
  font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--grey-700);border-bottom:2px solid transparent;padding-bottom:.25rem;
}
.mobile-lang-links a:hover{color:var(--ink-900)}
.mobile-lang-links a.is-current{color:var(--accent);border-bottom-color:var(--accent)}

.header-burger{display:inline-flex;align-items:center;gap:10px;color:var(--ink-900)}
@media (min-width:1024px){.header-burger{display:none}}
.header-burger span{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
.header-burger svg{width:24px;height:16px;fill:var(--ink-700)}

.mobile-panel{
  position:fixed;inset-inline:0;top:var(--header-h);z-index:999;
  height:calc(100dvh - var(--header-h));background:var(--white);
  border-top:1px solid var(--grey-300);overflow-y:auto;padding:0 1.25rem 3rem;
}
.mobile-panel > a:not(.btn){
  display:flex;align-items:center;justify-content:space-between;
  height:88px;border-bottom:1px solid var(--grey-300);
  font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink-800);
}
.mobile-panel > a:not(.btn):hover{color:var(--accent)}
.mobile-panel > a svg{width:12px;height:12px;fill:currentColor}
.mobile-panel .btn{width:100%;margin-top:var(--space-lg)}

/* --- herói ---------------------------------------------------------------- */
.hero{position:relative;width:100%;overflow:hidden;background:var(--ink-900);margin-top:var(--header-h)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-content{
  position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding-bottom:var(--space-2xl);
}
.hero-logo{width:min(78vw,300px)}
@media (min-width:768px){.hero-logo{width:min(52vw,470px)}}
.hero-slogan{
  margin-top:var(--space-md);max-width:34ch;color:var(--white);
  font-family:var(--font-body);font-weight:300;font-size:18px;line-height:1.5;
  letter-spacing:.02em;
}
@media (min-width:768px){.hero-slogan{font-size:26px}}
.hero-rule{display:flex;align-items:center;gap:1rem;margin-top:var(--space-lg)}
.hero-rule span{height:2px;width:80px;background:var(--white);transition:width 1s ease-in-out}
@media (min-width:768px){.hero-rule span{width:145px}}
.hero-scroll{
  display:inline-flex;align-items:center;gap:1rem;color:var(--white);
  font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
}
.hero-scroll:hover span{width:200px}

/* --- dobra 1: vídeo conduzido pela rolagem -------------------------------- */
/* A altura da seção define quanto de rolagem alimenta o vídeo. */
.scrollscene{position:relative;background:var(--white);height:300vh}
.scrollscene-sticky{
  position:sticky;top:var(--header-h);height:calc(100dvh - var(--header-h));
  display:flex;align-items:center;overflow:hidden;
}
.scrollscene-sticky .boxed-container{justify-content:center}
.scrollscene-grid{display:grid;gap:var(--space-lg);align-items:center;width:100%}
@media (min-width:1024px){.scrollscene-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl)}}
.scrollscene-copy{max-width:42ch}
.scrollscene-phrase{
  font-family:var(--font-display);font-weight:300;color:var(--ink-900);
  font-size:32px;line-height:1.15;margin-top:var(--space-sm);
}
@media (min-width:768px){.scrollscene-phrase{font-size:48px}}
@media (min-width:1280px){.scrollscene-phrase{font-size:54px}}
.scrollscene-note{margin-top:var(--space-md);max-width:36ch}
.scrollscene-media{position:relative}
.scrollscene-media video{width:100%;height:auto;display:block}
.scrollscene-progress{margin-top:var(--space-md);height:2px;width:100%;background:var(--grey-300);overflow:hidden}
.scrollscene-progress i{display:block;height:100%;width:0;background:var(--accent);transform-origin:left}

/* --- dobra 2: galeria de serviços ----------------------------------------- */
.services{background:var(--ink-900)}
.services-head{padding-block:var(--space-2xl) var(--space-lg)}
.services-head .heading-section{color:var(--white);margin-top:var(--space-sm);max-width:16ch}
.services-head .lead{margin-top:var(--space-md);max-width:52ch}
.service-index{
  display:block;margin-bottom:.75rem;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:2px;
  color:var(--accent);
}

/* --- dobra 3: no que acreditamos ------------------------------------------ */
.beliefs{background:var(--white)}
.beliefs-head{padding-block:var(--space-2xl) var(--space-lg)}
.beliefs-head .heading-section{color:var(--ink-900);margin-top:var(--space-sm);max-width:20ch}
.beliefs-head .lead{margin-top:var(--space-md);max-width:62ch}

.carousel{position:relative;width:100%;overflow:hidden;background:var(--ink-900)}
.carousel-stage{position:relative;height:clamp(520px,72vh,760px)}
.carousel-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .6s ease-in-out;pointer-events:none;
}
.carousel-slide.is-active{opacity:1;pointer-events:auto}
.carousel-caption{
  position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:var(--space-2xl);color:var(--white);
}
.carousel-caption p{
  font-family:var(--font-display);font-weight:300;font-size:24px;line-height:1.3;max-width:22ch;
  margin-top:var(--space-sm);
}
@media (min-width:768px){.carousel-caption p{font-size:36px}}
@media (min-width:1280px){.carousel-caption p{font-size:44px;max-width:20ch}}

.carousel-nav{
  position:absolute;z-index:5;left:0;right:0;bottom:var(--space-lg);
  display:flex;gap:1.25rem;
}
.carousel-nav .shell{display:flex;gap:1.25rem}
.carousel-dot{width:64px;text-align:left}
.carousel-dot b{
  display:block;font-size:12px;font-weight:700;letter-spacing:2px;
  color:#ffffff80;transition:color .3s;
}
.carousel-dot i{display:block;height:2px;margin-top:.35rem;background:#ffffff80;transition:background-color .3s}
.carousel-dot.is-active b{color:var(--white)}
.carousel-dot.is-active i{background:var(--white)}

/* --- dobra 4: chamada para o WhatsApp ------------------------------------- */
.cta{position:relative;overflow:hidden}
.cta-inner{
  display:flex;flex-direction:column;gap:var(--space-lg);
  padding-block:var(--space-2xl);align-items:flex-start;
}
@media (min-width:1024px){
  .cta-inner{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--space-xl)}
}
.cta-phrase{
  font-family:var(--font-display);font-weight:300;color:var(--white);
  font-size:32px;line-height:1.15;max-width:18ch;margin-top:var(--space-sm);
}
@media (min-width:768px){.cta-phrase{font-size:52px}}
@media (min-width:1280px){.cta-phrase{font-size:64px}}
.cta .btn{flex-shrink:0}
.cta .btn svg{width:18px;height:18px;margin-right:.625rem;fill:currentColor}

/* --- rodapé --------------------------------------------------------------- */
.site-footer{background:var(--ink-900);color:var(--grey-500);padding-block:var(--space-xl) var(--space-lg)}
.footer-grid{display:grid;gap:var(--space-lg)}
@media (min-width:768px){.footer-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-xl)}}
.site-footer img{width:168px}
.site-footer .lead{max-width:40ch;margin-top:var(--space-md);font-size:16px}
.footer-col p{color:var(--white);font-family:var(--font-display);font-size:16px;letter-spacing:.1em;text-transform:uppercase}
.footer-links{margin-top:1rem;display:grid;gap:.65rem;font-weight:300}
.footer-links a:hover{color:var(--white)}
.footer-bottom{
  margin-top:var(--space-xl);padding-top:var(--space-md);border-top:1px solid #ffffff1a;
  display:flex;flex-wrap:wrap;gap:.75rem var(--space-md);
  font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
}