/* =================================================================
   Metalúrgica Círculo – Página temporária
   style.css

   Índice
   1. Variáveis (cores, tipografia, espaçamentos)
   2. Base / reset
   3. Utilitários (container, ícones, botões)
   4. Barra superior
   5. Hero
   6. Slogan
   7. Sobre / valores
   8. Formulário de aviso
   9. Rodapé
   10. WhatsApp flutuante
   11. Responsivo
   12. Movimento reduzido
   ================================================================= */


/* 1. VARIÁVEIS ---------------------------------------------------- */
:root {
  /* Cores extraídas do logotipo oficial */
  --azul: #056399;          /* azul do letreiro "METALÚRGICA CÍRCULO" */
  --azul-escuro: #044a73;   /* variação para hover e rodapé */
  --azul-claro: #8ec7e5;    /* azul do "C" e da órbita */
  --azul-nevoa: #eef5fa;    /* fundo suave de seções */

  /* Neutros */
  --tinta: #1d2a33;         /* texto principal */
  --aco: #56636d;           /* texto secundário */
  --linha: #d5dfe6;         /* bordas */
  --branco: #ffffff;

  /* Ação de WhatsApp: verde sóbrio (reconhecível, sem brilho) */
  --verde: #1e7a46;
  --verde-escuro: #17603a;

  --erro: #b3261e;
  --sucesso: #1e7a46;

  /* Tipografia */
  --fonte: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --largura-titulo: 118%;   /* fonte expandida, como no logo */

  /* Espaçamento e layout */
  --container: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --secao: clamp(3.5rem, 8vw, 6rem);
  --raio: 4px;
}


/* 2. BASE --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--branco);
}

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

a { color: var(--azul); }
a:hover { color: var(--azul-escuro); }

h1, h2, h3, p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--azul-claro);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  background: var(--azul);
  color: var(--branco);
  padding: .6rem 1rem;
  z-index: 100;
}
.skip-link:focus { top: 1rem; }


/* 3. UTILITÁRIOS -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.icon { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }
.icon--lg { width: 1.6em; height: 1.6em; }

.section-title {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 800;
  font-stretch: var(--largura-titulo);
  line-height: 1.15;
  color: var(--azul);
  margin-bottom: 1.25rem;
  max-width: 22ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  font-family: inherit;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background-color .15s ease;
}

.btn--whatsapp {
  background: var(--verde);
  color: var(--branco);
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  padding: 1.1rem 2rem;
  min-height: 64px;
  box-shadow: 0 2px 0 var(--verde-escuro);
}
.btn--whatsapp:hover { background: var(--verde-escuro); color: var(--branco); }

.btn--primary {
  background: var(--azul);
  color: var(--branco);
  font-size: 1.05rem;
  padding: .95rem 1.75rem;
  min-height: 52px;
}
.btn--primary:hover { background: var(--azul-escuro); }
.btn--primary[disabled] { opacity: .65; cursor: wait; }


/* 4. BARRA SUPERIOR ----------------------------------------------- */
.topbar {
  background: var(--azul);
  color: var(--branco);
  font-size: .875rem;
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 2rem;
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: inherit;
  text-decoration: none;
}
a.topbar__item:hover { color: var(--azul-claro); }


/* 5. HERO --------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--linha);
}

/* Elipse inspirada na órbita do logo, ao fundo e à direita */
.hero__orbit {
  position: absolute;
  right: -18%;
  top: 50%;
  width: 85%;
  height: 70%;
  transform: translateY(-50%) rotate(-6deg);
  color: var(--azul-claro);
  opacity: .45;
  pointer-events: none;
}

.hero__grid { position: relative; }

.hero__content { max-width: 720px; }

.hero__logo {
  width: clamp(220px, 32vw, 340px);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  font-stretch: var(--largura-titulo);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--azul);
  max-width: 18ch;
  margin-bottom: 1.25rem;
}

.hero__subtitle {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--aco);
  max-width: 58ch;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
}

.hero__note {
  font-size: .95rem;
  color: var(--aco);
}


/* 6. SLOGAN ------------------------------------------------------- */
.slogan {
  background: var(--azul);
  color: var(--branco);
  padding: clamp(1.75rem, 4vw, 2.5rem) 0;
}
.slogan__text {
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  font-weight: 700;
  font-stretch: var(--largura-titulo);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .01em;
  max-width: 34ch;
  border-left: 4px solid var(--azul-claro);
  padding-left: 1.25rem;
}


/* 7. SOBRE / VALORES ---------------------------------------------- */
.about { padding: var(--secao) 0; }

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.about__text p {
  max-width: 62ch;
  margin-bottom: 1.1rem;
}

.about__facts {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
}
.about__facts li { display: flex; flex-direction: column; }
.about__fact-num {
  font-size: 1.75rem;
  font-weight: 800;
  font-stretch: var(--largura-titulo);
  color: var(--azul);
  line-height: 1.1;
}
.about__fact-label { font-size: .95rem; color: var(--aco); }

/* Acróstico C-Í-R-C-U-L-O: elemento de destaque da página */
.values {
  border-left: 4px solid var(--azul);
  padding-left: clamp(1.25rem, 3vw, 2rem);
}
.values__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--aco);
  margin-bottom: 1rem;
}
.values__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.values__list li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: .2rem 0;
  border-bottom: 1px solid var(--azul-nevoa);
}
.values__list li:last-child { border-bottom: 0; }
.values__letter {
  width: 1.4em;
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1.1;
  color: var(--azul);
}
.values__word {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tinta);
}


/* 8. FORMULÁRIO DE AVISO ------------------------------------------ */
.notify {
  background: var(--azul-nevoa);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: var(--secao) 0;
}

.notify__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.notify__intro p { max-width: 46ch; margin-bottom: 1rem; }
.notify__privacy { font-size: .9rem; color: var(--aco); }

.form {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-top: 4px solid var(--azul);
  border-radius: var(--raio);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem 1.25rem;
}

.form__row { grid-column: 1 / -1; }
.form__row--half { grid-column: span 1; }

.form label {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .35rem;
}

.form input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--branco);
  border: 1px solid #b9c6cf;
  border-radius: var(--raio);
  padding: .75rem .9rem;
  min-height: 48px;
}
.form input::placeholder { color: #8a979f; }
.form input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(5, 99, 153, .18);
}
.form input[aria-invalid="true"] { border-color: var(--erro); }

.form__error {
  min-height: 1.35rem;
  font-size: .85rem;
  color: var(--erro);
}

/* Honeypot: fora da tela, invisível para pessoas */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: .5rem;
}

.form__status { font-size: .95rem; font-weight: 600; }
.form__status--success { color: var(--sucesso); }
.form__status--error { color: var(--erro); }


/* 9. RODAPÉ ------------------------------------------------------- */
.footer {
  background: var(--azul-escuro);
  color: #dbe8f1;
  padding: 3rem 0 0;
  font-size: .95rem;
}
.footer a { color: var(--branco); }
.footer a:hover { color: var(--azul-claro); }

.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.footer__brand {
  font-size: 1.15rem;
  font-weight: 800;
  font-stretch: var(--largura-titulo);
  color: var(--branco);
  margin-bottom: .35rem;
}
.footer__address { font-style: normal; }
.footer__contact p + p { margin-top: .35rem; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  font-size: .85rem;
  color: #a9c3d5;
}


/* 10. WHATSAPP FLUTUANTE ------------------------------------------ */
.whatsapp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--branco);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.whatsapp-float svg { width: 30px; height: 30px; fill: currentColor; }
.whatsapp-float:hover { background: var(--verde-escuro); color: var(--branco); }
.whatsapp-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}


/* 11. RESPONSIVO -------------------------------------------------- */
@media (max-width: 900px) {
  .about__grid,
  .notify__grid { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .topbar__item--address { display: none; }

  .hero__orbit { right: -60%; width: 160%; opacity: .3; }

  .btn--whatsapp { width: 100%; }

  .form { grid-template-columns: 1fr; }
  .form__row--half { grid-column: 1 / -1; }
  .btn--primary { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; }
}


/* 12. MOVIMENTO REDUZIDO ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}