/* ============================================================
   Carvalho Gonçalves Advogados — identidade extraída da logo
   Navy #003080 · Navy profundo #001E50 · Ciano #0090E0 · Prata #B7BCC2
   ============================================================ */

:root{
  --navy:        #003080;
  --navy-deep:   #001a45;
  --navy-soft:   #0a3d96;
  --cyan:        #0090e0;
  --cyan-bright: #29a8f0;
  --silver:      #b7bcc2;
  --silver-lite: #e9ecef;

  --ink:         #14233d;
  --body:        #46546b;
  --line:        #e3e7ee;
  --bg:          #ffffff;
  --bg-alt:      #f5f7fb;

  --serif: "Marcellus", Georgia, serif;
  --sans:  "Libre Franklin", -apple-system, sans-serif;

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

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--body);
  background:var(--bg);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- Tipografia base ---------- */
h1,h2,h3{ font-family:var(--serif); color:var(--ink); line-height:1.08; font-weight:400; }
.kicker{
  display:inline-block; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:600; color:var(--cyan); margin-bottom:18px;
}
.kicker--light{ color:var(--cyan-bright); }
.section__title{ font-size:clamp(1.9rem,4vw,3rem); margin-bottom:22px; letter-spacing:.01em; }
.section__title--light{ color:#fff; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:18px 0;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 6px 30px rgba(0,30,80,.08);
  padding:10px 0;
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--serif); font-size:1.55rem; color:#fff; letter-spacing:.03em;
  transition:color .4s var(--ease), font-size .4s var(--ease);
}
.brand__tag{
  font-family:var(--sans); font-size:.6rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--silver); margin-top:4px; transition:color .4s var(--ease);
}
.site-header.scrolled .brand__name{ color:var(--navy); font-size:1.4rem; }
.site-header.scrolled .brand__tag{ color:var(--cyan); }

.nav__list{ display:flex; align-items:center; gap:34px; list-style:none; }
.nav__list a{
  font-size:.86rem; font-weight:500; letter-spacing:.04em; color:#fff;
  position:relative; transition:color .25s;
}
.site-header.scrolled .nav__list a{ color:var(--ink); }
.nav__list a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--cyan); transition:width .3s var(--ease);
}
.nav__list a:not(.nav__cta):hover::after{ width:100%; }
.nav__cta{
  padding:9px 22px; border:1px solid currentColor; border-radius:2px;
  transition:background .25s, color .25s, border-color .25s;
}
.site-header.scrolled .nav__cta{ background:var(--navy); color:#fff !important; border-color:var(--navy); }
.nav__cta:hover{ background:var(--cyan); border-color:var(--cyan); color:#fff !important; }

.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__toggle span{ width:26px; height:2px; background:#fff; transition:.3s; }
.site-header.scrolled .nav__toggle span{ background:var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(0,144,224,.18), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 70%);
  color:#fff; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.hero__triangle{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  width:min(60vw,720px); opacity:.5;
  filter:drop-shadow(0 0 40px rgba(0,144,224,.25));
  animation:floaty 9s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(-50%);} 50%{ transform:translateY(-54%);} }
.hero::after{ /* textura sutil */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:5px 5px; opacity:.5; pointer-events:none;
}
.hero__inner{ position:relative; z-index:2; max-width:760px; }
.hero__eyebrow{ font-size:.78rem; letter-spacing:.32em; text-transform:uppercase; color:var(--cyan-bright); margin-bottom:26px; }
.hero__title{ font-size:clamp(2.6rem,9vw,6.4rem); color:#fff; font-weight:400; letter-spacing:.01em; overflow-wrap:break-word; word-break:break-word; }
.hero__sub{ font-family:var(--sans); font-size:clamp(.8rem,2vw,1.05rem); letter-spacing:.5em; color:var(--silver); margin:6px 0 30px; }
.hero__lead{ font-size:clamp(1rem,1.4vw,1.18rem); max-width:540px; color:#d6deea; margin-bottom:40px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; }

.hero__scroll{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:3; }
.hero__scroll span{
  display:block; width:24px; height:38px; border:1.5px solid rgba(255,255,255,.5); border-radius:14px; position:relative;
}
.hero__scroll span::after{
  content:""; position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px;
  background:var(--cyan-bright); transform:translateX(-50%); animation:scrolldot 1.8s infinite;
}
@keyframes scrolldot{ 0%{opacity:0; top:8px;} 40%{opacity:1;} 80%{opacity:0; top:20px;} 100%{opacity:0;} }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:.86rem; letter-spacing:.04em;
  padding:14px 30px; border-radius:2px; cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn--small{ padding:10px 22px; font-size:.8rem; }
.btn--primary{ background:var(--cyan); color:#fff; box-shadow:0 10px 24px rgba(0,144,224,.28); }
.btn--primary:hover{ background:var(--cyan-bright); transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,144,224,.36); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-3px); }
.btn--outline{ background:transparent; color:var(--navy); border-color:var(--silver); }
.btn--outline:hover{ background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-3px); }
.btn--block{ width:100%; }

/* ============================================================
   SEÇÕES
   ============================================================ */
.section{ padding:clamp(70px,10vw,130px) 0; }
.section--light{ background:var(--bg); }
.section--navy{
  background:linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#cfd8e6; position:relative;
}
.section--navy p{ color:#bcc8db; }
.section__head{ margin-bottom:56px; }
.section__head--center{ text-align:center; max-width:640px; margin-inline:auto; }
.section__intro{ margin-top:14px; }

.grid-2{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }

/* ---------- Sobre / O escritório ---------- */
.about__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; }
.about__head .section__title{ margin-bottom:24px; }
.about__head p{ margin-bottom:18px; max-width:60ch; }
.about__head p:last-child{ margin-bottom:0; }

/* faixa de credenciais */
.creds{
  list-style:none; margin-top:42px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.cred{
  display:flex; flex-direction:column; gap:3px;
  padding:16px 18px; border:1px solid var(--line); border-radius:6px;
  background:var(--bg-alt);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cred:hover{ border-color:var(--cyan); transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,30,80,.08); }
.cred__big{ font-family:var(--serif); font-size:1.1rem; color:var(--ink); line-height:1.15; }
.cred__label{ font-size:.76rem; color:var(--body); }

/* pilares de atuação */
.pillars{
  list-style:none; margin-top:42px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px 34px;
}
.pillar{ display:flex; gap:16px; align-items:flex-start; }
.pillar__icon{
  flex:0 0 auto; width:46px; height:46px; border-radius:11px;
  display:grid; place-items:center; color:var(--cyan);
  background:rgba(0,144,224,.10); border:1px solid rgba(0,144,224,.18);
}
.pillar__icon svg{ width:22px; height:22px; }
.pillar__txt strong{ display:block; color:var(--ink); font-family:var(--serif); font-size:1.18rem; margin-bottom:5px; }
.pillar__txt span{ display:block; font-size:.9rem; line-height:1.6; }

/* card do advogado responsável */
.card-pro{
  position:sticky; top:104px;
  background:linear-gradient(165deg,#fff,#eef3fb);
  border:1px solid var(--line); border-radius:10px; padding:0 34px 36px;
  box-shadow:0 30px 70px rgba(0,30,80,.12); overflow:hidden;
}
.card-pro::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; z-index:2;
  background:linear-gradient(90deg,var(--navy),var(--cyan));
}
.card-pro__photo{
  margin:0 -34px 22px; overflow:hidden;
  aspect-ratio:4/5; max-height:420px; background:var(--navy-deep);
}
.card-pro__photo img{
  width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
  filter:grayscale(100%) contrast(1.02);
  transition:transform .6s var(--ease), filter .6s var(--ease);
}
.card-pro:hover .card-pro__photo img{ transform:scale(1.04); filter:grayscale(100%) contrast(1.06); }
.card-pro h3{ font-size:1.4rem; margin:6px 0 4px; }
.card-pro__role{ color:var(--cyan); font-weight:600; font-size:.88rem; letter-spacing:.04em; margin-bottom:2px; }
.card-pro__oab{ font-size:.85rem; color:var(--body); font-weight:500; }
.card-pro__creds{ list-style:none; margin:18px 0 0; display:grid; gap:11px; }
.card-pro__creds li{
  position:relative; padding-left:27px; font-size:.86rem; line-height:1.5; color:var(--body);
}
.card-pro__creds li::before{
  content:""; position:absolute; left:0; top:2px; width:17px; height:17px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230090e0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.card-pro hr{ border:0; border-top:1px solid var(--line); margin:20px 0; }
.card-pro__contact{ font-size:.88rem; margin-bottom:24px; color:var(--body); }

/* chamada final da seção */
.about__cta{
  margin-top:66px; display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
  padding:34px 42px; border-radius:10px;
  background:linear-gradient(120deg,var(--bg-alt),#eaf1fb);
  border:1px solid var(--line);
}
.about__cta-text{ font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.45rem); color:var(--ink); margin:0; max-width:36ch; }
.about__cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- Áreas ---------- */
.areas{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.area{
  padding:34px 28px; border:1px solid rgba(255,255,255,.12); border-radius:6px;
  background:rgba(255,255,255,.03); transition:transform .35s var(--ease), border-color .35s, background .35s;
}
.area__num{ font-family:var(--serif); font-size:1.4rem; color:var(--cyan-bright); font-weight:700; }
.area h3{ color:#fff; font-size:1.5rem; margin:14px 0 10px; }
.area p{ font-size:.92rem; color:#aab8cf; }
.area:hover{ transform:translateY(-8px); border-color:var(--cyan); background:rgba(0,144,224,.08); }

/* ---------- Produtos ---------- */
.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.products--single{ grid-template-columns:min(100%,420px); justify-content:center; }
.product{
  display:flex; flex-direction:column; justify-content:space-between;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:34px 30px;
  transition:transform .35s var(--ease), box-shadow .35s, border-color .35s;
  position:relative; overflow:hidden;
}
.product::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--navy),var(--cyan)); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.product:hover{ transform:translateY(-8px); box-shadow:0 28px 56px rgba(0,30,80,.14); border-color:transparent; }
.product:hover::before{ transform:scaleX(1); }
.product__tag{
  display:inline-block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan); font-weight:600; margin-bottom:14px;
}
.product h3{ font-size:1.5rem; margin-bottom:12px; }
.product p{ font-size:.92rem; }
.product__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.product__price{ font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--ink); }
.product__price--avail{
  font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--ink);
  display:inline-flex; align-items:center; gap:9px; letter-spacing:.02em;
}
.product__price--avail::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.16);
}
.products__note{ text-align:center; font-size:.85rem; color:var(--body); margin-top:40px; font-style:italic; }

/* ---------- Capa do e-book (placeholder até subir a imagem real) ---------- */
.ebook .product__top{ padding-top:4px; }
.ebook__cover{
  position:relative; aspect-ratio:4/5; margin:-34px -30px 24px; overflow:hidden;
  border-radius:8px 8px 0 0;
  background:linear-gradient(155deg,var(--navy) 0%, var(--navy-deep) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
}
.ebook__cover::before{ /* filete de marca */
  content:""; position:absolute; left:0; right:0; top:38%; height:2px; background:var(--cyan); opacity:.6;
}
.ebook__cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ebook__mark{
  font-family:var(--serif); font-size:2.4rem; font-weight:700; color:#fff; letter-spacing:.04em;
  width:74px; height:74px; border:2px solid var(--silver); border-radius:50%;
  display:grid; place-items:center;
}
.ebook__cover-title{
  font-family:var(--serif); font-size:1.4rem; line-height:1.15; color:#fff; text-align:center;
  padding:0 18px; z-index:1;
}
/* capa real do e-book (512x800): mostra inteira, sem recorte de texto */
.ebook__cover--photo{ aspect-ratio:512/800; background:var(--navy-deep); }
.ebook__cover--photo::before{ display:none; }
.ebook__cover--photo img{ object-fit:cover; object-position:center; }

/* ---------- Contato ---------- */
.contato__lead{ margin-bottom:30px; }
.contato__list{ list-style:none; display:grid; gap:22px; margin-bottom:28px; }
.contato__list li{ display:grid; gap:4px; }
.contato__label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan-bright); font-weight:600; }
.contato__list a:hover{ color:#fff; }
.contato__social{ display:flex; gap:24px; }
.contato__social a{ font-size:.85rem; font-weight:600; letter-spacing:.05em; padding-bottom:3px; border-bottom:1px solid var(--cyan); transition:color .25s; }
.contato__social a:hover{ color:#fff; }

.form{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:34px; display:grid; gap:16px; }
.form label{ display:grid; gap:6px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#9fb0cc; font-weight:600; }
.form input, .form textarea{
  font-family:var(--sans); font-size:.95rem; color:#fff; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18); border-radius:3px; padding:12px 14px; transition:border-color .25s, background .25s;
}
.form input:focus, .form textarea:focus{ outline:none; border-color:var(--cyan); background:rgba(0,144,224,.1); }
.form textarea{ resize:vertical; }
.form .btn{ margin-top:6px; }
.form__hint{ font-size:.74rem; color:#8095b3; text-transform:none; letter-spacing:0; }

/* ============================================================
   RODAPÉ + WhatsApp flutuante
   ============================================================ */
.footer{ background:var(--navy-deep); color:#aebcd4; padding:54px 0; }
.footer__inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer__name{ font-family:var(--serif); font-size:1.7rem; color:#fff; display:block; }
.footer__tag{ font-size:.7rem; letter-spacing:.4em; color:var(--silver); }
.footer__legal{ font-size:.78rem; max-width:560px; line-height:1.7; }

.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:80; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:#25d366;
  box-shadow:0 10px 26px rgba(37,211,102,.45); transition:transform .25s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); }

/* ============================================================
   ANIMAÇÃO DE ENTRADA (reveal)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.10s; }
.reveal[data-delay="2"]{ transition-delay:.20s; }
.reveal[data-delay="3"]{ transition-delay:.30s; }
.reveal[data-delay="4"]{ transition-delay:.40s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__triangle{ animation:none; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:900px){
  .grid-2{ grid-template-columns:1fr; gap:48px; }
  .about__grid{ grid-template-columns:1fr; gap:46px; }
  .creds{ grid-template-columns:repeat(2,1fr); }
  .pillars{ grid-template-columns:1fr; }
  .about__cta{ flex-direction:column; align-items:flex-start; }
  .areas{ grid-template-columns:repeat(2,1fr); }
  .products{ grid-template-columns:1fr; }

  .nav__toggle{ display:flex; }
  .nav__list{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    flex-direction:column; align-items:flex-start; gap:6px;
    background:var(--navy-deep); padding:100px 32px 40px;
    transform:translateX(100%); transition:transform .4s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,.3);
  }
  .nav__list.open{ transform:translateX(0); }
  .nav__list a{ color:#fff !important; font-size:1.05rem; padding:10px 0; width:100%; }
  .nav__cta{ margin-top:10px; }
  .card-pro{ position:static; max-width:440px; }
}
@media (max-width:520px){
  .areas{ grid-template-columns:1fr; }
  .creds{ grid-template-columns:1fr; }
  .about__cta{ padding:26px 24px; }
  .hero__sub{ letter-spacing:.3em; }
  .footer__inner{ flex-direction:column; }
}