/* ==========================================================================
   Gráfica Ciccarelli — Landing Page
   Design tokens extraídos do Brandbook (seções 09, 10, 13)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&family=Cormorant+Garamond:ital,wght@0,500;1,500;1,600&display=swap');

:root{
  /* Paleta primária (brandbook 09) */
  --teal-900:#031818;
  --teal-800:#042525;
  --teal-700:#033232;
  --teal-600:#02403F;
  --teal-500:#004F53; /* dominante */
  --teal-300:#588C8C;
  --teal-200:#8FB3B3;

  --terra-900:#331A06;
  --terra-700:#653309;
  --terra-600:#7E3F08;
  --terra-500:#964B00; /* acento */
  --terra-400:#B86A36;
  --terra-300:#D38F5C;
  --terra-200:#E6B68F;
  --terra-100:#F3DCC9;
  --terra-50:#FBF1EA;

  --sand-0:#FFFFFF;
  --sand-50:#FAF8F5;
  --sand-100:#EEEAEA; /* base neutra */
  --sand-200:#DFD8D2;
  --sand-400:#A89D93;
  --sand-600:#6B6058;
  --sand-700:#4F463F;
  --sand-900:#1C1815;

  /* Gradiente institucional oficial (brandbook 13) */
  --grad-hero: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 52%, var(--terra-500) 100%);
  --grad-dark: linear-gradient(180deg, var(--teal-900) 0%, var(--teal-600) 100%);

  /* Tipografia (brandbook 10) */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-editorial: 'Cormorant Garamond', Georgia, serif;

  --container: 1180px;
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset básico ---- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:var(--font-display);
  color:var(--sand-900);
  background:var(--sand-50);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-0.01em;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

/* Skip link — acessibilidade */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  background:var(--terra-500);
  color:#fff;
  padding:12px 20px;
  border-radius:var(--radius);
  z-index:1000;
  font-weight:600;
}
.skip-link:focus{
  left:16px;
  top:16px;
}

/* Foco visível consistente (acessibilidade) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--terra-300);
  outline-offset:3px;
  border-radius:2px;
}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:100;
  padding-block:18px;
  transition:background-color .4s var(--ease), padding-block .3s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header.is-scrolled{
  background-color:rgba(3,24,24,.88);
  backdrop-filter:blur(10px);
  padding-block:12px;
  box-shadow:0 8px 30px -12px rgba(3,24,24,.5);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img{
  height:68px;
  width:auto;
  transition:height .3s var(--ease);
}
.site-header.is-scrolled .brand img{
  height:52px;
}

.main-nav ul{
  display:flex;
  gap:32px;
}
.main-nav a{
  color:rgba(255,255,255,.82);
  font-size:.88rem;
  font-weight:600;
  position:relative;
  padding-block:4px;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:0;height:2px;
  background:var(--terra-300);
  transition:width .3s var(--ease);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after{width:100%;}
.main-nav a:hover,
.main-nav a:focus-visible{color:#fff;}

.header-cta{
  display:none;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:.88rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn svg{flex-shrink:0; transition:transform .25s var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{
  background:var(--terra-500);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(150,75,0,.55);
}
.btn-primary:hover{
  background:var(--terra-400);
  transform:translateY(-2px);
  box-shadow:0 14px 28px -10px rgba(150,75,0,.65);
}
.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
.btn-ghost:hover{
  border-color:#fff;
  background:rgba(255,255,255,.08);
}
.btn-outline-dark{
  background:transparent;
  border-color:var(--teal-500);
  color:var(--teal-500);
}
.btn-outline-dark:hover{
  background:var(--teal-500);
  color:#fff;
}

.nav-toggle{
  display:none;
  background:transparent;
  border:none;
  color:#fff;
  padding:8px;
  cursor:pointer;
}

@media (min-width:900px){
  .main-nav{
    display:flex;
    align-items:center;
    gap:36px;
  }
  .header-cta{display:inline-flex;}
}
@media (max-width:899px){
  .main-nav{
    position:fixed;
    inset:0;
    top:0;
    background:var(--teal-900);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transform:translateY(-100%);
    opacity:0;
    transition:transform .4s var(--ease), opacity .3s var(--ease);
    pointer-events:none;
  }
  .main-nav.is-open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .main-nav ul{flex-direction:column;align-items:center;gap:28px;}
  .main-nav a{font-size:1.4rem;}
  .main-nav .header-cta{display:inline-flex;margin-top:16px;}
  .nav-toggle{display:inline-flex;}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-top:136px;
  padding-bottom:80px;
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-photo{
  position:absolute;
  inset:-170px;
  background-image:url('assets/hero-bg.jpg');
  background-size:cover;
  background-position:center 38%;
  filter:brightness(.58) saturate(.95) contrast(1.05);
  transform:scale(1.12);
  will-change:transform;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg, rgba(3,20,20,.82) 0%, rgba(3,40,42,.68) 42%, rgba(3,40,42,.42) 64%, rgba(120,60,5,.32) 100%);
}
.hero::before{
  /* textura sutil de grão, evita imagem/gradiente "liso demais" */
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:1;
}
@keyframes flicker{
  0%,100%{opacity:.14;}
  50%{opacity:.2;}
}
.hero .container{
  position:relative;
  z-index:2;
}
.hero-inner{max-width:680px;}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--terra-200);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:22px;
}
.eyebrow::before{
  content:"";
  width:28px;height:1px;
  background:var(--terra-300);
}
.hero h1{
  color:#fff;
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  line-height:1.1;
  font-weight:900;
  margin-bottom:26px;
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero-sub{
  font-family:var(--font-editorial);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.15rem, 2vw, 1.4rem);
  color:var(--sand-100);
  line-height:1.5;
  max-width:540px;
  margin-bottom:40px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
}
.hero-note{
  margin-top:34px;
  font-size:.82rem;
  color:rgba(255,255,255,.65);
  display:flex;
  align-items:center;
  gap:10px;
}
.hero-note svg{flex-shrink:0;color:var(--terra-300);}

.scroll-cue{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.55);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  z-index:2;
}
.scroll-cue span.line{
  width:1px;height:32px;
  background:linear-gradient(to bottom, rgba(255,255,255,.7), transparent);
  animation:scrollcue 2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{transform:scaleY(0);transform-origin:top;}
  50%{transform:scaleY(1);transform-origin:top;}
  50.01%{transform-origin:bottom;}
  100%{transform:scaleY(0);transform-origin:bottom;}
}

/* ==========================================================================
   Section helpers
   ========================================================================== */
section{padding-block:clamp(72px, 10vw, 128px);}
.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head.center{
  margin-inline:auto;
  text-align:center;
}
.section-kicker{
  display:block;
  color:var(--terra-500);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.section-head h2{
  font-size:clamp(1.7rem, 3.4vw, 2.5rem);
  color:var(--teal-500);
  line-height:1.2;
  margin-bottom:18px;
}
.section-head p{
  color:var(--sand-700);
  font-size:1.05rem;
  line-height:1.65;
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ==========================================================================
   Pilares
   ========================================================================== */
.pillars{background:var(--sand-50);}
.pillars-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:28px;
}
.pillar-card{
  background:var(--sand-0);
  border:1px solid var(--sand-100);
  border-radius:var(--radius);
  padding:36px 32px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.pillar-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px -24px rgba(3,24,24,.22);
  border-color:var(--terra-200);
}
.pillar-icon{
  width:48px;height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--terra-50);
  color:var(--terra-500);
  margin-bottom:22px;
}
.pillar-card h3{
  font-size:1.2rem;
  color:var(--teal-500);
  margin-bottom:12px;
}
.pillar-card p{
  color:var(--sand-700);
  font-size:.98rem;
  line-height:1.6;
}

/* ==========================================================================
   Segmentos
   ========================================================================== */
.segments{background:var(--sand-100);}
.segments-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:22px;
}
.segment-card{
  background:var(--sand-0);
  border-radius:var(--radius);
  padding:30px 28px;
  display:flex;
  flex-direction:column;
  gap:16px;
  border-left:3px solid var(--teal-500);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.segment-card:hover{
  border-color:var(--terra-500);
  transform:translateY(-4px);
  box-shadow:0 20px 40px -22px rgba(3,24,24,.2);
}
.segment-card h3{
  font-size:1.08rem;
  color:var(--teal-500);
}
.segment-card p{
  color:var(--sand-700);
  font-size:.94rem;
  line-height:1.6;
  flex-grow:1;
}
.segment-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:.86rem;
  color:var(--terra-500);
}
.segment-link svg{transition:transform .25s var(--ease);}
.segment-link:hover svg,
.segment-link:focus-visible svg{transform:translateX(4px);}
.segment-link:hover,
.segment-link:focus-visible{color:var(--terra-600);}

/* ==========================================================================
   Prova / depoimentos
   ========================================================================== */
.proof{background:var(--sand-50);}
.proof-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:28px;
}
.testimonial{
  background:var(--sand-0);
  border:1px solid var(--sand-100);
  border-radius:var(--radius);
  padding:36px 32px;
  position:relative;
}
.testimonial::before{
  content:"“";
  font-family:var(--font-editorial);
  font-size:3.4rem;
  color:var(--terra-200);
  position:absolute;
  top:12px;
  left:24px;
  line-height:1;
}
blockquote{
  margin:0 0 22px;
  font-family:var(--font-editorial);
  font-style:italic;
  font-size:1.2rem;
  line-height:1.55;
  color:var(--teal-500);
  padding-top:20px;
}
.testimonial cite{
  font-style:normal;
  font-size:.86rem;
  font-weight:700;
  color:var(--sand-700);
  display:block;
}
.testimonial cite span{
  display:block;
  font-weight:500;
  color:var(--sand-400);
  margin-top:2px;
}

/* ==========================================================================
   Fechamento institucional
   ========================================================================== */
.closing{
  background:var(--grad-dark);
  position:relative;
  overflow:hidden;
  text-align:center;
  padding-block:clamp(80px,12vw,140px);
}
.closing::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}
.closing .container{position:relative;z-index:2;}
.closing p.tagline{
  font-family:var(--font-editorial);
  font-style:italic;
  font-weight:500;
  color:#fff;
  font-size:clamp(1.5rem, 3.4vw, 2.3rem);
  max-width:760px;
  margin:0 auto 40px;
  line-height:1.4;
}

/* ==========================================================================
   Contato
   ========================================================================== */
.contact{background:var(--sand-50);}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:56px;
  align-items:start;
}
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;}
}
.contact-info h2{
  color:var(--teal-500);
  font-size:clamp(1.6rem,3vw,2.1rem);
  margin-bottom:18px;
}
.contact-info p{
  color:var(--sand-700);
  margin-bottom:28px;
  line-height:1.65;
}
.contact-channel{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:18px 0;
  border-top:1px solid var(--sand-200);
}
.contact-channel:last-child{border-bottom:1px solid var(--sand-200);}
.contact-channel .icon{
  width:42px;height:42px;
  border-radius:50%;
  background:var(--teal-500);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.contact-channel h3{
  font-size:.95rem;
  color:var(--sand-900);
  margin-bottom:4px;
}
.contact-channel a,
.contact-channel span{
  font-size:.92rem;
  color:var(--sand-700);
}
.contact-channel a:hover{color:var(--terra-500);}

.contact-form{
  background:var(--sand-0);
  border:1px solid var(--sand-100);
  border-radius:var(--radius);
  padding:clamp(28px,4vw,44px);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width:520px){
  .form-row{grid-template-columns:1fr;}
}
.field{
  margin-bottom:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field label{
  font-size:.82rem;
  font-weight:700;
  color:var(--sand-900);
}
.field .required{color:var(--terra-500);}
.field input,
.field select,
.field textarea{
  border:1.5px solid var(--sand-200);
  border-radius:var(--radius);
  padding:13px 14px;
  font-family:inherit;
  font-size:.95rem;
  color:var(--sand-900);
  background:var(--sand-50);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--teal-500);
  background:#fff;
  outline:none;
}
.field textarea{resize:vertical;min-height:96px;}
.form-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-top:8px;
}
.form-status{
  font-size:.86rem;
  color:var(--teal-500);
  font-weight:600;
}
.form-status[data-state="error"]{color:var(--terra-600);}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  position:relative;
  overflow:hidden;
  color:rgba(255,255,255,.75);
  padding-block:56px 32px;
}
.footer-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.footer-photo{
  position:absolute;
  inset:-170px;
  background-image:url('assets/hero-bg.jpg');
  background-size:cover;
  background-position:center 68%;
  filter:brightness(.62) saturate(.95) contrast(1.05);
  transform:scale(1.12);
  will-change:transform;
}
.footer-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(3,24,24,.6) 0%, rgba(3,24,24,.72) 55%, rgba(3,24,24,.88) 100%);
}
.site-footer .container{
  position:relative;
  z-index:1;
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:32px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:28px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.footer-brand img{height:40px;width:auto;}
.footer-brand-text strong{
  display:block;
  color:#fff;
  font-size:1rem;
  letter-spacing:.02em;
}
.footer-tagline{
  font-family:var(--font-editorial);
  font-style:italic;
  color:var(--terra-200);
  font-size:1.05rem;
  margin-top:4px;
}
.footer-links{
  display:flex;
  gap:56px;
  flex-wrap:wrap;
}
.footer-col h4{
  color:#fff;
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:.9rem;transition:color .2s var(--ease);}
.footer-col a:hover{color:var(--terra-200);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:.8rem;
  color:rgba(255,255,255,.5);
}

/* WhatsApp floating button */
.wa-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:90;
  width:58px;height:58px;
  border-radius:50%;
  background:var(--terra-500);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 30px -10px rgba(150,75,0,.6);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.wa-float:hover{
  transform:scale(1.08);
  background:var(--terra-400);
}

/* Utilities */
.nowrap{white-space:nowrap;}