/* ==========================================================================
   Varotto Informática
   Paleta extraída do logotipo (#00358E) e do tema original do site.
   Geometria: a chanfradura em "V" da marca aparece como corte diagonal
   nas seções, nas imagens dos cards e no watermark do hero.
   ========================================================================== */

:root{
  /* cores */
  --navy:        #00358E;   /* azul do logotipo */
  --navy-deep:   #001C4D;
  --navy-ink:    #04122E;
  --electric:    #2F7BFF;   /* acento — tema primário do site original */
  --silver:      #A7ADB8;   /* cinza do chevron do logotipo */
  --paper:       #F3F6FB;
  --paper-2:     #E7EDF6;
  --white:       #FFFFFF;
  --ink:         #0B1220;
  --ink-soft:    #4A5568;
  --wa:          #25D366;
  --line:        rgba(0,53,142,.14);

  /* tipografia */
  --display: "Archivo", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* escala */
  --step-0: clamp(1rem, .97rem + .16vw, 1.075rem);
  --step-1: clamp(1.15rem, 1.08rem + .35vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.3rem + .75vw, 2rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 3rem);
  --step-4: clamp(2.4rem, 1.75rem + 3.2vw, 4.6rem);

  /* ritmo */
  --wrap: 1200px;
  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --sec: clamp(4rem, 9vw, 7.5rem);
  --notch: clamp(28px, 5vw, 56px);   /* profundidade do corte diagonal */
  --r: 4px;
}

/* ── reset ────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,iframe{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ margin:0; font-family:var(--display); line-height:1.06; letter-spacing:-.025em; font-weight:800 }
p{ margin:0 }
ul,dl,dd{ margin:0; padding:0 }
li{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0 }

:focus-visible{ outline:3px solid var(--electric); outline-offset:3px; border-radius:2px }

.wrap{ width:min(var(--wrap), 100% - var(--gut)*2); margin-inline:auto }
.ico{ width:1.1em; height:1.1em; flex:none; fill:currentColor }

.skip-link{
  position:absolute; left:.5rem; top:-4rem; z-index:200;
  background:var(--navy); color:#fff; padding:.7rem 1.1rem; border-radius:var(--r);
  transition:top .2s;
}
.skip-link:focus-visible{ top:.5rem }

/* ── eyebrow (camada utilitária em mono) ──────────────────────── */
.eyebrow{
  margin:0 0 .9rem;
  font-family:var(--mono); font-size:.74rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--navy);
  display:flex; align-items:flex-start; gap:.65rem;
}
.eyebrow::before{
  content:""; width:1.6rem; height:2px; background:var(--electric);
  flex:none; margin-top:.62em;   /* alinha com a primeira linha, mesmo quebrando */
}
.eyebrow--light{ color:#9FC0FF }
.eyebrow--light::before{ background:#9FC0FF }

/* ── botões ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.78rem 1.35rem; border-radius:var(--r);
  font-family:var(--display); font-weight:600; font-size:.95rem;
  letter-spacing:-.005em; white-space:nowrap;
  border:2px solid transparent;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--lg{ padding:1rem 1.75rem; font-size:1.02rem }
.btn--wa{ background:var(--wa); color:#04331A }
.btn--wa:hover{ background:#1FBE59; transform:translateY(-2px) }
.btn--ghost{ border-color:rgba(255,255,255,.4); color:#fff }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); transform:translateY(-2px) }

.link{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:1.1rem;
  font-family:var(--mono); font-size:.8rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--navy);
  border-bottom:2px solid var(--line); padding-bottom:.25rem;
  transition:color .18s, border-color .18s;
}
.link span{ transition:transform .18s ease }
.link:hover{ color:var(--electric); border-color:var(--electric) }
.link:hover span{ transform:translateX(4px) }

/* ── topbar ───────────────────────────────────────────────────── */
.topbar{ background:var(--navy-deep); color:#C9D8F5; font-size:.82rem }
.topbar__in{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.5rem; min-height:2.6rem; padding-block:.4rem }
.topbar__item{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--mono); transition:color .18s }
.topbar__item:hover{ color:#fff }
.topbar__spacer{ flex:1 }
@media (max-width:760px){
  .topbar__item--mail, .topbar__item--place{ display:none }
  .topbar__in{ justify-content:center }
}

/* ── cabeçalho ────────────────────────────────────────────────── */
.head{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s;
}
.head.is-stuck{ box-shadow:0 8px 30px rgba(0,53,142,.10) }
.head__in{ display:flex; align-items:center; gap:1.5rem; min-height:4.6rem }
.brand img{ width:clamp(150px, 20vw, 208px) }

.nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem) }
.nav a:not(.btn){
  font-family:var(--display); font-weight:600; font-size:.94rem;
  color:var(--navy-ink); position:relative; padding:.35rem 0;
}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--electric); transition:right .25s ease;
}
.nav a:not(.btn):hover::after{ right:0 }

.burger{ display:none; width:2.75rem; height:2.75rem; margin-left:auto; padding:.7rem; cursor:pointer }
.burger span{ display:block; height:2px; background:var(--navy); border-radius:2px; transition:transform .25s, opacity .2s }
.burger span+span{ margin-top:5px }
.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) }

@media (max-width:920px){
  .burger{ display:block }
  /* nota: .head usa backdrop-filter, o que o torna o bloco contentor de
     descendentes fixos — por isso o painel é absoluto, ancorado ao cabeçalho. */
  .nav{
    position:absolute; top:100%; left:0; right:0;
    max-height:calc(100dvh - 100%);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--white); border-top:1px solid var(--line);
    box-shadow:0 24px 40px rgba(0,53,142,.14);
    padding:1rem var(--gut) 2rem;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .nav.is-open{ opacity:1; transform:none; pointer-events:auto }
  .nav a:not(.btn){ padding:1rem 0; border-bottom:1px solid var(--line); font-size:1.15rem }
  .nav a:not(.btn)::after{ display:none }
  .nav__cta{ margin-top:1.5rem }
}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 0%, #06439F 0%, transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 62%, var(--navy-ink) 100%);
  color:#fff;
  padding-block: clamp(2.5rem,6vw,4.5rem) calc(clamp(2.75rem,6vw,5rem) + var(--notch));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--notch)));
}
/* watermark: o "V" da marca */
.hero__mark{
  position:absolute; z-index:-1; right:-6%; top:-14%;
  width:min(58vw, 620px); aspect-ratio:1;
  fill:#fff; opacity:.045; pointer-events:none;
}
.hero__in{
  display:grid; gap:clamp(2.25rem,5vw,4rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){
  .hero__in{ grid-template-columns:1.05fr .95fr }
}
.hero h1{
  font-size:var(--step-4);
  max-width:16ch;
  margin-bottom:1.35rem;
  text-wrap:balance;
}
.hero h1 em{
  font-style:normal;
  color:#8FB6FF;
  /* sublinhado diagonal — eco do chanfro da marca */
  background:linear-gradient(90deg, var(--electric), transparent) bottom left / 100% 3px no-repeat;
  padding-bottom:.06em;
}
.lead{
  font-size:var(--step-1); line-height:1.55; color:#C7D8F7; max-width:52ch;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem }

.hero__photo{ position:relative; margin:0 }
.hero__photo img{
  width:100%; border-radius:var(--r);
  /* mesmo corte diagonal do rodapé da seção */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), 0 100%);
  box-shadow:0 30px 70px rgba(0,10,40,.45);
}
.hero__photo figcaption{
  position:absolute; left:0; bottom:calc(var(--notch) * .35);
  background:var(--electric); color:#fff;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.55rem 1rem;
}

/* ── promessas ────────────────────────────────────────────────── */
.promises{ background:var(--white); padding-block:clamp(2.25rem,4.5vw,3.25rem) 0 }
.promises__in{ display:grid; gap:1.25rem; grid-template-columns:1fr }
@media (min-width:760px){ .promises__in{ grid-template-columns:1fr 1fr } }

.promise{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:4px solid var(--navy);
  padding:clamp(1.6rem,3vw,2.25rem);
  transition:transform .22s ease, box-shadow .22s ease, border-left-color .22s ease;
}
.promise:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,53,142,.10); border-left-color:var(--electric) }
.promise__ico{ width:2rem; height:2rem; color:var(--navy); margin-bottom:1rem }
.promise h2{ font-size:var(--step-2); margin-bottom:.5rem; text-wrap:balance }
.promise p{ color:var(--ink-soft) }

/* ── cabeçalhos de seção ──────────────────────────────────────── */
.sechead{ margin-bottom:clamp(2rem,4vw,3.25rem); max-width:44ch }
.sechead--left{ margin-bottom:0 }
.sechead__title{ font-size:var(--step-3); text-wrap:balance }
.sechead__sub{ margin-top:1.1rem; color:var(--ink-soft); font-size:var(--step-1); line-height:1.55 }

/* ── serviços ─────────────────────────────────────────────────── */
.services{ padding-block:clamp(3rem,7vw,5.5rem) var(--sec); background:var(--white) }
.cards{ display:grid; gap:clamp(1.25rem,2.5vw,2rem); grid-template-columns:1fr }
@media (min-width:680px){ .cards{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .cards{ grid-template-columns:repeat(3,1fr) } }

.card{
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:0 24px 55px rgba(0,53,142,.14) }
.card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2) }
.card__media img{
  width:100%; height:100%; object-fit:cover;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%);
  transition:transform .5s ease;
}
.card:hover .card__media img{ transform:scale(1.05) }
.card__body{ padding:clamp(1.4rem,2.5vw,1.9rem); display:flex; flex-direction:column; flex:1 }
.card__kicker{
  font-family:var(--mono); font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--electric);
  margin-bottom:.5rem;
}
.card h3{ font-size:var(--step-2); margin-bottom:.75rem }
.card__body p:not(.card__kicker){ color:var(--ink-soft) }
.card .link{ margin-top:auto; align-self:flex-start; padding-top:1.1rem }

/* ── produtos ─────────────────────────────────────────────────── */
.products{
  background:
    radial-gradient(90% 120% at 100% 0%, #063F97 0%, transparent 65%),
    linear-gradient(200deg, var(--navy-deep), var(--navy-ink));
  color:#fff;
  padding-block:var(--sec);
  clip-path: polygon(0 var(--notch), 100% 0, 100% calc(100% - var(--notch)), 0 100%);
  margin-block:calc(var(--notch) * -.5);
}
.products__in{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; align-items:start }
@media (min-width:900px){ .products__in{ grid-template-columns:.95fr 1.05fr } }
.products .sechead__sub{ color:#B9CDF0 }
.products .btn{ margin-top:1.75rem }

.chips{ display:flex; flex-wrap:wrap; gap:.75rem }
.chips li{
  font-family:var(--display); font-weight:600; font-size:clamp(.95rem,1.6vw,1.12rem);
  padding:.85rem 1.35rem;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);
  border-radius:var(--r);
  transition:background-color .2s, border-color .2s, transform .2s;
}
.chips li:hover{ background:rgba(47,123,255,.22); border-color:var(--electric); transform:translateY(-2px) }

/* ── marcas ───────────────────────────────────────────────────── */
.brands{ padding-block:var(--sec); background:var(--white) }
.brands .sechead{ margin-inline:auto; text-align:center; max-width:none }
.brands .sechead__title{ white-space:nowrap }
.brands .eyebrow{ justify-content:center }
.brands__grid{
  display:grid; gap:1px;
  grid-template-columns:repeat(2,1fr);
  background:var(--line);
  border:1px solid var(--line);
}
@media (min-width:640px){ .brands__grid{ grid-template-columns:repeat(4,1fr) } }
.brands__grid li{
  display:grid; place-items:center;
  background:var(--white);
  padding:clamp(1.4rem,3vw,2.25rem);
  min-height:7.5rem;
  transition:background-color .25s;
}
.brands__grid li:hover{ background:var(--paper) }
.brands__grid img{
  max-height:2.75rem; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.6;
  transition:filter .3s ease, opacity .3s ease;
}
.brands__grid li:hover img{ filter:none; opacity:1 }

/* ── loja / contato ───────────────────────────────────────────── */
.store{ padding-block:var(--sec); background:var(--paper) }
.store__in{ display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; align-items:start }
@media (min-width:900px){ .store__in{ grid-template-columns:1fr 1fr } }
.store__about{ color:var(--ink-soft); font-size:var(--step-1); line-height:1.55; margin-top:1.1rem }

.contact{ margin-top:2rem; display:grid; gap:1.1rem }
.contact div{ border-top:1px solid var(--line); padding-top:1.1rem }
.contact dt{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
  margin-bottom:.3rem;
}
.contact dd{ font-family:var(--display); font-weight:600; font-size:var(--step-1) }
.contact a{ transition:color .18s }
.contact a:hover{ color:var(--electric) }
.contact .sep{ color:var(--silver); margin-inline:.5rem }

.follow{
  margin-top:2rem;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
}
.social{ display:flex; gap:.65rem; margin-top:.85rem }
.social a{
  display:grid; place-items:center; width:2.9rem; height:2.9rem;
  border:1px solid var(--line); border-radius:var(--r);
  color:var(--navy); background:var(--white);
  transition:background-color .2s, color .2s, transform .2s;
}
.social a:hover{ background:var(--navy); color:#fff; transform:translateY(-2px) }
.social .ico{ width:1.25rem; height:1.25rem }

.store__map{ position:relative; border:1px solid var(--line); background:var(--paper-2) }
.store__map iframe{ width:100%; height:clamp(320px, 46vw, 520px); border:0; filter:saturate(.85) }

/* ── rodapé ───────────────────────────────────────────────────── */
.foot{ background:var(--navy-ink); color:#B6C7E6; padding-top:clamp(3rem,6vw,4.5rem) }
.foot__in{ display:grid; gap:clamp(2rem,4vw,3rem); grid-template-columns:1fr; padding-bottom:3rem }
@media (min-width:760px){ .foot__in{ grid-template-columns:1.6fr 1fr 1fr } }
.foot__brand img{
  width:190px; margin-bottom:1.1rem;
  /* o logotipo é azul-marinho: clareia sobre fundo escuro */
  filter:brightness(0) invert(1); opacity:.95;
}
.foot__brand p{ max-width:36ch; color:#93A9CE }
.foot__nav{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start }
.foot__nav h3{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#7FA6EE;
  margin-bottom:.4rem;
}
.foot__nav a{ transition:color .18s }
.foot__nav a:hover{ color:#fff }

.foot__legal{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:1.5rem;
  font-family:var(--mono); font-size:.76rem; color:#7A8FB4;
}

/* ── WhatsApp flutuante ───────────────────────────────────────── */
.wa-float{
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem); z-index:120;
  display:grid; place-items:center; width:3.5rem; height:3.5rem;
  border-radius:50%; background:var(--wa); color:#04331A;
  box-shadow:0 10px 28px rgba(37,211,102,.4);
  transition:transform .2s ease;
}
.wa-float .ico{ width:1.75rem; height:1.75rem }
.wa-float:hover{ transform:scale(1.08) }

/* ── revelação no scroll ──────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease }
.reveal.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .reveal{ opacity:1; transform:none }
}