@import "styles.css";

/* ============================================================
   Valorizze — estilos do site
   Construído sobre os tokens do design system (assets/css/tokens/)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-body);
  font-weight:var(--weight-regular);
  line-height:var(--leading-relaxed);
  color:var(--color-text-primary);
  background:var(--color-bg-page);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

a{color:var(--color-text-link);text-decoration:none}
a:hover{color:var(--color-text-link-hover)}

h1,h2,h3{
  margin:0;
  font-weight:var(--weight-semibold);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);
}

p{margin:0}

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

.eyebrow{
  font-size:var(--text-eyebrow);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--color-text-accent);
  margin-bottom:var(--space-4);
}
.eyebrow--on-dark{color:var(--sky-300)}

.section{padding-block:var(--space-24)}
.section--sunken{background:var(--color-bg-sunken)}

/* O topo é fixo: sem isso, links de âncora param com o título escondido
   atrás dele. */
[id]{scroll-margin-top:96px}

.section__head{max-width:720px;margin-bottom:var(--space-16)}
.section__title{font-size:var(--text-display-md);margin-bottom:var(--space-5)}
.section__lead{
  font-size:var(--text-body-lg);
  color:var(--color-text-secondary);
  font-weight:var(--weight-light);
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:var(--space-4) var(--space-8);
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-family:var(--font-sans);
  font-size:var(--text-body-sm);
  font-weight:var(--weight-semibold);
  line-height:1;
  cursor:pointer;
  transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,opacity 150ms ease;
}
.btn--primary{background:var(--color-accent-primary);color:var(--color-text-inverse)}
.btn--primary:hover{background:var(--teal-500);color:var(--color-text-inverse)}

.btn--inverse{background:var(--white);color:var(--navy-950)}
.btn--inverse:hover{background:var(--sky-100);color:var(--navy-950)}

.btn--ghost{background:transparent;color:var(--color-text-inverse);border-color:var(--color-border-inverse)}
.btn--ghost:hover{background:rgba(255,255,255,.08);color:var(--color-text-inverse)}

.btn--sm{padding:var(--space-3) var(--space-5);font-size:var(--text-caption)}

/* ---------- Cabeçalho ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--navy-950);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
  min-height:76px;
}

.brand{display:flex;align-items:center}
.brand__logo{height:34px;width:auto}

.nav{display:flex;align-items:center;gap:var(--space-8)}
.nav a{
  font-size:var(--text-body-sm);
  font-weight:var(--weight-medium);
  color:rgba(255,255,255,.78);
}
.nav a:hover{color:var(--white)}

.site-header__actions{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.site-header .btn{flex-shrink:0;white-space:nowrap}

.btn__icon{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* O rótulo curto só aparece em telas estreitas. */
.btn__label-curto{display:none}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--sky-300) -20%,var(--teal-600) 32%,var(--navy-900) 72%,var(--navy-950) 100%);
  color:var(--color-text-inverse);
  padding-block:var(--space-32) var(--space-24);
}
.hero__inner{position:relative;z-index:1;max-width:820px}
.hero__title{
  font-size:var(--text-display-xl);
  font-weight:var(--weight-light);
  margin-bottom:var(--space-6);
}
.hero__title strong{font-weight:var(--weight-semibold)}
.hero__lead{
  font-size:var(--text-body-lg);
  font-weight:var(--weight-light);
  color:rgba(255,255,255,.82);
  max-width:620px;
  margin-bottom:var(--space-10);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}

/* ---------- Serviços ---------- */
.grid-services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--space-6);
}
.service{
  background:var(--color-bg-surface);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-8);
  box-shadow:var(--shadow-sm);
  transition:box-shadow 150ms ease,border-color 150ms ease;
}
.service:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}
.service__mark{
  width:40px;
  height:4px;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--sky-300),var(--teal-600));
  margin-bottom:var(--space-6);
}
.service__title{font-size:var(--text-h3);margin-bottom:var(--space-3)}
.service__text{color:var(--color-text-secondary);font-size:var(--text-body-sm)}

/* ---------- Sobre ---------- */
.about{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--space-16);
  align-items:start;
}
.about__quote{
  font-family:var(--font-display);
  font-size:var(--text-display-md);
  font-weight:var(--weight-regular);
  line-height:var(--leading-snug);
  letter-spacing:var(--tracking-normal);
  color:var(--color-text-primary);
}
.about__body p + p{margin-top:var(--space-5)}
.about__body{color:var(--color-text-secondary)}

.pillars{list-style:none;margin:var(--space-10) 0 0;padding:0;display:grid;gap:var(--space-5)}
.pillars li{
  display:flex;
  gap:var(--space-4);
  align-items:flex-start;
  font-size:var(--text-body-sm);
  color:var(--color-text-secondary);
}
.pillars strong{display:block;color:var(--color-text-primary);font-weight:var(--weight-semibold)}
.pillars li::before{
  content:"";
  flex-shrink:0;
  width:8px;
  height:8px;
  margin-top:9px;
  border-radius:50%;
  background:var(--color-accent-primary);
}

/* ---------- Contato ---------- */
.contact{
  background:var(--color-bg-inverse);
  color:var(--color-text-inverse);
  padding-block:var(--space-24);
}
.contact__inner{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--space-12);
  align-items:center;
}
.contact__title{font-size:var(--text-display-md);font-weight:var(--weight-light);margin-bottom:var(--space-5)}
.contact__title strong{font-weight:var(--weight-semibold)}
.contact__lead{color:rgba(255,255,255,.78);font-weight:var(--weight-light);max-width:520px}
.contact__actions{display:flex;flex-direction:column;gap:var(--space-4);min-width:260px}
.contact__link{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  color:rgba(255,255,255,.78);
  font-size:var(--text-body-sm);
}
.contact__link:hover{color:var(--white)}
.contact__link--endereco{align-items:flex-start;line-height:var(--leading-snug)}

/* ---------- Rodapé ---------- */
.site-footer{
  background:var(--navy-950);
  border-top:1px solid rgba(255,255,255,.08);
  padding-block:var(--space-8);
}
.site-footer__inner{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  align-items:center;
  justify-content:space-between;
  font-size:var(--text-caption);
  color:rgba(255,255,255,.55);
}
.site-footer a{color:rgba(255,255,255,.55)}
.site-footer a:hover{color:var(--white)}

/* ---------- WhatsApp flutuante ---------- */
.whats-float{
  position:fixed;
  right:var(--space-6);
  bottom:var(--space-6);
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25d366;
  box-shadow:var(--shadow-lg);
  transition:transform 150ms ease;
}
.whats-float:hover{transform:translateY(-2px)}
.whats-float svg{width:30px;height:30px;fill:var(--white)}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .about{grid-template-columns:1fr;gap:var(--space-10)}
  .contact__inner{grid-template-columns:1fr}
  .section{padding-block:var(--space-16)}
  .hero{padding-block:var(--space-20) var(--space-16)}
}

@media (max-width:720px){
  .nav{display:none}
  .site-header__inner{min-height:68px}
  .site-header__actions{gap:var(--space-2)}
  .site-header .btn{padding-inline:var(--space-4)}
  .btn__label-full{display:none}
  .btn__label-curto{display:inline}

  [id]{scroll-margin-top:80px}

  /* Botões do hero com a mesma largura — encostados na esquerda ficavam
     desalinhados entre si. */
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}

  /* A frase de destaque tomava seis linhas em tela de celular. */
  .about__quote{font-size:1.75rem}

  /* O botão flutuante do WhatsApp passava por cima do texto. */
  .whats-float{
    right:var(--space-4);
    bottom:var(--space-4);
    width:52px;
    height:52px;
  }
  .whats-float svg{width:27px;height:27px}

  /* Espaço para o botão flutuante não cobrir a última linha do rodapé. */
  .site-footer{padding-bottom:calc(var(--space-8) + 52px)}
}

@media (max-width:420px){
  .brand__logo{height:28px}
  .site-header .btn{padding-inline:var(--space-3);font-size:.75rem}
  .about__quote{font-size:1.5rem}
}