/* ============================================================
   NECTECH — Components
   Componentes reutilizáveis do design system.
   Carregue depois de colors_and_type.css.
   ============================================================ */


/* ----------- Box Step ----------------------------------------
   Cartão de passo / etapa.
   - Fundo Azul_Prime, conteúdo alinhado à base
   - Numeração grande + título em caps + descrição
   - Pensado para grid 3 ou 4 colunas
   ------------------------------------------------------------ */
.box-step {
  background: var(--azul-prime);
  color: var(--branco);
  padding: 56px 56px 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  aspect-ratio: 7 / 6;
  font-family: var(--font-sans);
  position: relative;
  overflow: hidden;
}


.box-step__number {
  color: var(--laranja-prime);
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}


.box-step__title {
  color: var(--laranja-prime);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 4px 0 4px 0;
}


.box-step__description {
  color: var(--branco);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  max-width: 36ch;
}


/* Variants -------------------------------------------------- */
.box-step--secundary { background: var(--azul-secund); }
.box-step--branco    { background: var(--branco); }
.box-step--branco .box-step__description { color: var(--azul-secund); }




/* ----------- Feature Box -------------------------------------
   Card outline com chamada de marketing.
   Eyebrow laranja + título uppercase azul + descrição cinza/azul.
   ------------------------------------------------------------ */
.feature-box {
  border: 1.5px solid var(--azul-secund);
  background: var(--branco);
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: var(--font-sans);
}
.feature-box__eyebrow {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laranja-prime);
}
.feature-box__title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--azul-secund);
  margin: 0;
}
.feature-box__description {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--azul-secund);
  max-width: 65ch;
  margin: 0;
}




/* ----------- Product Card (Simple) ---------------------------
   Card de produto sem container — para listagens leves.
   ------------------------------------------------------------ */
.product-card {
  background: var(--branco);
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-sans);
}
.product-card__eyebrow {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--laranja-prime);
}
.product-card__title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--azul-secund);
  margin: 0;
}
.product-card__description {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--azul-secund);
  margin: 0;
}
.product-card__actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}




/* ----------- CTA Outline (Orange) ----------------------------
   Botão outline laranja — usado em product cards e CTAs.
   ------------------------------------------------------------ */
.btn-cta-outline {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--laranja-prime);
  border: 2px solid var(--laranja-prime);
  padding: 16px 36px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}
.btn-cta-outline:hover {
  background: var(--laranja-prime);
  color: var(--branco);
}
.btn-cta-outline--block { width: 100%; }
.btn-cta-outline--on-dark { /* same colors — laranja keeps contrast on azul-prime */ }




/* ----------- Product Card Full -------------------------------
   Card de produto com mídia em cima e bloco institucional embaixo.
   ------------------------------------------------------------ */
.product-card-full {
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  width: 100%;
  background: var(--branco);
  overflow: hidden;
}
.product-card-full__media {
  position: relative;
  background: var(--branco);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card-full__media img {
  max-width: 70%;
  max-height: 80%;
  object-fit: contain;
}
.product-card-full__media-placeholder {
  color: var(--cinza-letter);
  font-size: 18px;
  letter-spacing: 0.02em;
}
.product-card-full__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--laranja-prime);
  color: var(--branco);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 14px;
}
.product-card-full__body {
  background: var(--azul-prime);
  color: var(--branco);
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.product-card-full__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--laranja-prime);
}
.product-card-full__title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--branco);
  margin: 0;
}
.product-card-full__chip {
  align-self: flex-start;
  border: 1.5px solid var(--branco);
  color: var(--branco);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  background: transparent;
}
.product-card-full__cta { margin-top: 6px; }




/* ----------- Brand Card --------------------------------------
   Logo centralizado + nome em caps abaixo.
   ------------------------------------------------------------ */
.brand-card {
  background: var(--branco);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  font-family: var(--font-sans);
  border: 1px solid #EAEAEA;
}
.brand-card__logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.brand-card__logo img,
.brand-card__logo svg {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}
.brand-card__name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--azul-secund);
  margin: 0;
}




/* ----------- Article Card ------------------------------------
   Tag laranja → mídia → bloco azul com leitura/título/descrição/CTA.
   ------------------------------------------------------------ */
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  width: 100%;
  font-family: var(--font-sans);
}
.article-card__media {
  position: relative;
  background: var(--branco);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__media-placeholder { color: var(--cinza-letter); font-size: 18px; }
.article-card__tag {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--laranja-prime);
  color: var(--branco);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 16px;
}
.article-card__body {
  background: var(--azul-prime);
  color: var(--branco);
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.article-card__meta {
  font-size: 14px;
  font-weight: 400;
  color: var(--branco);
  opacity: 0.92;
}
.article-card__title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--branco);
  margin: 0;
}
.article-card__description {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--branco);
  margin: 0;
}
.article-card__link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--laranja-prime);
  text-decoration: none;
  transition: gap var(--transition-fast);
  align-self: flex-start;
}
.article-card__link:hover { gap: 18px; }
.article-card__link svg { width: 28px; height: 14px; flex-shrink: 0; }




/* ----------- Support Box -------------------------------------
   Caixa de destaque com ícone à esquerda e bloco de texto à direita.
   Fundo Laranja_Prime · ícone branco · título branco bold · descrição branca leve.
   ------------------------------------------------------------ */
.support-box {
  background: var(--laranja-prime);
  color: var(--branco);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--font-sans);
}
.support-box__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--branco);
}
.support-box__icon svg { width: 100%; height: 100%; display: block; }
.support-box__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  min-width: 0;
}
.support-box__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--branco);
  margin: 0;
  letter-spacing: 0.005em;
}
.support-box__description {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--branco);
  opacity: 0.95;
  margin: 0;
}


/* Variants */
.support-box--azul        { background: var(--azul-prime); }
.support-box--azul-secund { background: var(--azul-secund); }




/* ----------- Contact Box (Orange) ----------------------------
   Caixa laranja com canais de contato.
   Reutilizável dentro do footer ou como bloco standalone.
   ------------------------------------------------------------ */
.contact-box {
  background: var(--laranja-prime);
  color: var(--branco);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: var(--font-sans);
  min-width: 320px;
}
.contact-box__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 4px 0;
  color: var(--branco);
}
.contact-box__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-box__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--branco);
  text-decoration: none;
}
.contact-box__item-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-box__item-icon svg { width: 100%; height: 100%; }
.contact-box__divider {
  height: 1px;
  background: rgba(255,255,255,0.25);
  margin: 4px 0;
  border: 0;
}
.contact-box__subtitle {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--branco);
}
.contact-box__text {
  font-size: 15px;
  margin: 0;
  color: var(--branco);
  line-height: 1.4;
}




/* ----------- Social Button (Orange Square) -------------------
   Botão quadrado laranja com ícone branco — Instagram, Facebook, etc.
   ------------------------------------------------------------ */
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--laranja-prime);
  color: var(--branco);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.social-btn:hover { background: var(--laranja-dark); }
.social-btn svg { width: 60%; height: 60%; }




/* ----------- Footer ------------------------------------------
   Rodapé institucional NECTECH.
   Grid de 4 colunas (logo+info / produtos / empresa / contato).
   ------------------------------------------------------------ */
.footer {
  background: var(--azul-prime);
  color: var(--branco);
  font-family: var(--font-sans);
  padding: 64px 64px 56px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}


/* Brand column */
.footer__brand-col { display: flex; flex-direction: column; gap: 16px; }
.footer__logo { display: block; max-width: 220px; height: auto; }
.footer__tagline { font-size: 14px; line-height: 1.4; color: var(--branco); margin: 4px 0 0 0; }
.footer__cnpj { font-size: 15px; font-weight: 600; color: var(--branco); margin: 0; }
.footer__address { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; font-size: 13px; line-height: 1.5; color: var(--branco); }
.footer__address-label { font-weight: 700; margin: 0 0 2px 0; }
.footer__address-text { margin: 0; color: var(--branco); opacity: 0.92; }


/* Link columns */
.footer__nav { display: flex; flex-direction: column; gap: 18px; }
.footer__nav-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--laranja-prime);
  margin: 0 0 4px 0;
}
.footer__nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.footer__nav-link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--branco);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer__nav-link:hover { color: var(--laranja-prime); }


/* Contact column */
.footer__contact-col { display: flex; flex-direction: column; gap: 16px; }
.footer__social { display: flex; gap: 12px; }




/* ----------- Site Header / Menu ------------------------------
   Cabeçalho fixo do site sobre fundo branco.
   Logo (esquerda) · nav (centro) · telefone + CTA Orçar (direita).
   ------------------------------------------------------------ */
.site-header {
  background: var(--branco);
  border-bottom: 1px solid #ECECEC;
  font-family: var(--font-sans);
  display: flex;
  align-items: stretch;
  padding-left: 32px;
  height: 80px;
}
.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 32px;
}
.site-header__logo img { display: block; height: 44px; width: auto; }


/* Nav ------------------------------------------------------- */
.site-header__nav {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
}
.site-header__nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-secund);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.site-header__nav-link:hover,
.site-header__nav-link[aria-current="page"] {
  background: var(--laranja-prime);
  color: var(--branco);
}


/* Right side ----------------------------------------------- */
.site-header__right {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}


/* Phone -- grows 10% on hover */
.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--laranja-prime);
  text-decoration: none;
  white-space: nowrap;
  transform-origin: center;
  transition: transform var(--transition);
}
.site-header__phone:hover { transform: scale(1.1); }


/* CTA Orçar -- grows 10% on hover */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--laranja-prime);
  color: var(--branco);
  padding: 0 28px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transform-origin: center;
  transition: transform var(--transition);
  align-self: stretch;
}
.site-header__cta:hover { transform: scale(1.1); }
.site-header__cta-icon {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
}
.site-header__cta-icon svg { width: 100%; height: 100%; }




/* ----------- Address Card ------------------------------------
   Cartão de endereço institucional (Matriz / Filial).
   Eyebrow laranja + nome da cidade + linhas com ícones laranjas.
   Fundo branco · texto em Azul_Secund.
   ------------------------------------------------------------ */
.address-card {
  background: var(--branco);
  color: var(--azul-secund);
  padding: 32px 36px;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 440px;
}
.address-card__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laranja-prime);
  margin: 0;
}
.address-card__title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--azul-secund);
  margin: -8px 0 4px 0;
  line-height: 1.1;
}
.address-card__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.address-card__row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--azul-secund);
}
.address-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--laranja-prime);
  color: var(--branco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.address-card__icon svg { width: 60%; height: 60%; display: block; }
.address-card__hours {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.address-card__hours-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--azul-secund);
  margin: 0;
}
.address-card__hours-text {
  font-size: 15px;
  color: var(--azul-secund);
  margin: 0;
}




/* ----------- Rep Card ----------------------------------------
   Cartão de contato direto com um representante comercial.
   Light (branco) e Dark (Azul_Secund) variants.
   Nome bold uppercase, papel laranja, linhas de contato com ícones
   coloridos (WhatsApp verde, email laranja), CTA outline verde,
   bloco de horário no rodapé.
   ------------------------------------------------------------ */
.rep-card {
  background: var(--branco);
  color: var(--azul-secund);
  padding: 28px 32px 32px;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 360px;
}
.rep-card__name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--azul-secund);
  margin: 0;
  line-height: 1.05;
}
.rep-card__role {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laranja-prime);
  margin: -14px 0 0 0;
}
.rep-card__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rep-card__row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--azul-secund);
  text-decoration: none;
}
.rep-card__row-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rep-card__row-icon svg { width: 100%; height: 100%; display: block; }
.rep-card__row-icon--whatsapp { color: var(--verde); }
.rep-card__row-icon--email    { color: var(--laranja-prime); }
.rep-card__hours {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rep-card__hours-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--azul-secund);
  margin: 0;
}
.rep-card__hours-text {
  font-size: 15px;
  color: var(--azul-secund);
  margin: 0;
}


/* Dark variant */
.rep-card--dark {
  background: var(--azul-secund);
  color: var(--branco);
}
.rep-card--dark .rep-card__name,
.rep-card--dark .rep-card__row,
.rep-card--dark .rep-card__hours-label,
.rep-card--dark .rep-card__hours-text { color: var(--branco); }




/* ----------- Btn WhatsApp (outline green) --------------------
   CTA outline com ícone WhatsApp verde + label verde.
   Funciona em fundos claros e escuros.
   ------------------------------------------------------------ */
.btn-whatsapp {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: transparent;
  color: var(--verde);
  border: 2px solid var(--verde);
  padding: 14px 24px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-whatsapp:hover {
  background: var(--verde);
  color: var(--branco);
}
.btn-whatsapp--block { width: 100%; }
.btn-whatsapp__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-whatsapp__icon svg { width: 100%; height: 100%; display: block; }
.btn-whatsapp__arrow {
  margin-left: 6px;
  font-weight: 700;
}




/* ----------- Stat Block --------------------------------------
   Bloco de estatística com número grande em laranja
   e descrição curta abaixo. Fundo neutro (cool gray) por padrão.
   ------------------------------------------------------------ */
.stat-block {
  background: #DDE3EA;
  padding: 32px 32px 36px;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 280px;
}
.stat-block__number {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  color: var(--laranja-prime);
  letter-spacing: -0.01em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.stat-block__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--azul-secund);
  margin: 0;
  max-width: 26ch;
}


/* Variants */
.stat-block--light { background: #DDE3EA; }
.stat-block--branco { background: var(--branco); border: 1px solid #E5E5E5; }




/* ----------- Compat Box --------------------------------------
   Caixa institucional com título uppercase em destaque e
   descrição abaixo. Fundo Azul_Secund · borda fina branca.
   Usado para selos de compatibilidade / conformidade técnica.
   ------------------------------------------------------------ */
.compat-box {
  background: var(--azul-secund);
  color: var(--branco);
  border: 2px solid rgba(255,255,255,0.85);
  padding: 28px 28px 28px;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 320px;
}
.compat-box__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--branco);
  margin: 0;
}
.compat-box__divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.25);
  border: 0;
  margin: 0;
}
.compat-box__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--branco);
  margin: 0;
  opacity: 0.95;
}




/* ----------- Years Card --------------------------------------
   Card centralizado com número grande em laranja (ex: 10+)
   e legenda branca curta. Fundo Azul_Prime.
   ------------------------------------------------------------ */
.years-card {
  background: var(--azul-prime);
  color: var(--branco);
  padding: 36px 28px 32px;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}
.years-card__number {
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  color: var(--laranja-prime);
  letter-spacing: -0.01em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.years-card__text {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--branco);
  margin: 0;
  max-width: 22ch;
}




/* ----------- Value Card --------------------------------------
   Card de valor / pilar institucional.
   Ícone grande laranja centralizado · título uppercase laranja ·
   descrição curta corrida. Fundo neutro claro.
   ------------------------------------------------------------ */
.value-card {
  background: #DDE3EA;
  padding: 36px 32px 36px;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  width: 100%;
  max-width: 280px;
}
.value-card__icon {
  width: 44px;
  height: 44px;
  color: var(--laranja-prime);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.value-card__icon svg { width: 100%; height: 100%; display: block; }
.value-card__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--laranja-prime);
  margin: 0;
}
.value-card__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--azul-secund);
  margin: 0;
  max-width: 28ch;
}


/* Variants */
.value-card--branco { background: var(--branco); border: 1px solid #E5E5E5; }




/* ----------- Team Card ---------------------------------------
   Card de pessoa: foto vertical + bloco Azul_Secund embaixo
   com nome bold, papel laranja, lead em itálico e descrição.
   ------------------------------------------------------------ */
.team-card {
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 340px;
  background: var(--branco);
}
.team-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #DDE3EA;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card__media-placeholder {
  color: var(--cinza-letter);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.team-card__body {
  background: var(--azul-secund);
  color: var(--branco);
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.team-card__name {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--branco);
  margin: 0;
}
.team-card__role {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laranja-prime);
  margin: -10px 0 0 0;
}
.team-card__lead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 0 0;
}
.team-card__lead-headline {
  font-size: 17px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  color: var(--branco);
  margin: 0;
}
.team-card__lead-sub {
  font-size: 13px;
  font-style: italic;
  color: var(--laranja-prime);
  margin: 0;
}
.team-card__description {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--branco);
  margin: 0;
  opacity: 0.95;
}




/* ----------- Quote Actions -----------------------------------
   Stack vertical de CTAs para solicitar orçamento.
   1) Botão sólido laranja (full width) · 2) WhatsApp outline verde ·
   3) Linha de retorno em texto leve.
   Pensado para sidebar de produto sobre fundo Azul_Secund.
   ------------------------------------------------------------ */
.quote-actions {
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 380px;
}
.btn-quote {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--laranja-prime);
  color: var(--branco);
  border: 2px solid var(--laranja-prime);
  padding: 18px 24px;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-align: center;
  width: 100%;
}
.btn-quote:hover {
  background: transparent;
  color: var(--laranja-prime);
}
.quote-actions__note {
  font-size: 12px;
  text-align: center;
  color: var(--branco);
  opacity: 0.7;
  margin: 4px 0 0 0;
  font-weight: 400;
  letter-spacing: 0.02em;
}




/* ----------- Quote Form --------------------------------------
   Formulário institucional escuro de solicitação de orçamento.
   Fundo Azul_Secund · campos com borda fina · botão laranja sólido.
   ------------------------------------------------------------ */
.quote-form {
  background: var(--azul-secund);
  color: var(--branco);
  font-family: var(--font-sans);
  padding: 32px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 540px;
}
.quote-form__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--branco);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  align-self: flex-start;
}
.quote-form__close::before { content: "✕"; font-size: 13px; line-height: 1; }
.quote-form__header { display: flex; flex-direction: column; gap: 6px; margin-top: -4px; }
.quote-form__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--branco);
  margin: 0;
  line-height: 1.05;
}
.quote-form__subtitle {
  font-size: 13px;
  color: var(--branco);
  margin: 0;
  opacity: 0.9;
}
.quote-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
.quote-form__field { display: flex; flex-direction: column; gap: 8px; }
.quote-form__field--full { grid-column: 1 / -1; }
.quote-form__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--branco);
}
.quote-form__input,
.quote-form__textarea {
  background: var(--azul-secund);
  border: 1.5px solid rgba(255,255,255,0.55);
  color: var(--branco);
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}
.quote-form__input:focus,
.quote-form__textarea:focus {
  outline: none;
  border-color: var(--laranja-prime);
}
.quote-form__input { height: 50px; }
.quote-form__textarea { min-height: 70px; resize: vertical; }
.quote-form__submit {
  margin-top: 8px;
  background: var(--laranja-prime);
  color: var(--branco);
  border: 0;
  padding: 18px 24px;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: background var(--transition-fast);
}
.quote-form__submit:hover { background: var(--laranja-dark); }

/* ============================================================
   NECTECH — Header/Footer · complemento da Fase 2 (Home)
   COLE ESTE BLOCO NO FINAL DO components.css EXISTENTE.
   NÃO enfileirar como arquivo separado.

   Só acrescenta o que faltava para o cabeçalho/rodapé reais:
   faixa laranja do topo, logo-placeholder textual, menu
   hambúrguer mobile (sem JS), foco acessível e alguns
   auxiliares do rodapé. Não altera .site-header nem .footer.
   ============================================================ */


/* ----------- Skip link (acessibilidade) --------------------- */
.nec-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--laranja-prime);
  color: var(--branco);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  text-decoration: none;
}
.nec-skip-link:focus { left: 0; }


/* ----------- Faixa laranja do topo (design system §4) ------- */
.site-header__topbar {
  height: 6px;
  background: var(--laranja-prime);
}


/* ----------- Logo placeholder textual -----------------------
   Provisório até o logo SVG/PNG definitivo entrar. Ao substituir
   por <img>, este bloco fica inerte (a classe deixa de ser usada).
   ------------------------------------------------------------ */
.nec-logo-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nec-logo-placeholder__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--azul-secund);
  color: var(--branco);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.nec-logo-placeholder__word {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--azul-secund);
}
.nec-logo-placeholder__word span { color: var(--laranja-prime); }
.footer__logo-link { display: inline-block; text-decoration: none; }
/* No footer (fundo escuro) o wordmark inverte para branco. */
.footer .nec-logo-placeholder__mark { background: var(--laranja-prime); }
.footer .nec-logo-placeholder__word { color: var(--branco); }
.footer .nec-logo-placeholder__word span { color: var(--laranja-light); }


/* ----------- Menu hambúrguer mobile (sem JS) ----------------
   Checkbox visualmente oculto porém focável + label como botão.
   Escondidos no desktop; ativados abaixo de 768px.
   ------------------------------------------------------------ */
.site-header__nav-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.site-header__burger { display: none; }


/* ----------- Foco visível (anel laranja 2px) ---------------- */
.site-header a:focus-visible,
.site-header__nav-check:focus-visible ~ .site-header__burger,
.footer a:focus-visible,
.nec-skip-link:focus-visible {
  outline: 2px solid var(--laranja-prime);
  outline-offset: 2px;
}


/* ----------- Rodapé: canais de contato ---------------------- */
.footer__contact-email {
  color: var(--branco);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: block;
  margin-bottom: 14px;
}
.footer__contact-email:hover { color: var(--laranja-light); }

.footer__contact-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__contact-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--branco);
  text-decoration: none;
  opacity: 0.92;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.footer__contact-item:hover { opacity: 1; color: var(--laranja-light); }
.footer__contact-dot { color: var(--verde); }
.footer__contact-name { color: var(--branco); opacity: 0.55; }
.footer__contact-hours {
  color: var(--branco);
  opacity: 0.6;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

.footer__legal {
  margin-top: 40px;
  color: var(--branco);
  opacity: 0.55;
  font-size: 12px;
}


/* ============================================================
   Responsivo — Header
   ============================================================ */

/* Tablet: reduz o respiro dos links para caberem em 1 linha. */
@media (max-width: 1023px) {
  .site-header { padding-left: 24px; }
  .site-header__nav { gap: 0; }
  .site-header__nav-link { padding: 0 14px; }
  .site-header__phone { padding: 0 16px; }
  .site-header__cta { padding: 0 20px; }
}

/* Mobile < 768px: nav e ações colapsam sob o hambúrguer.
   Topo permanece com logo + botão hambúrguer. */
@media (max-width: 767px) {
  .site-header {
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    padding: 12px 16px;
  }
  .site-header__logo { padding-right: 0; }

  .site-header__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    cursor: pointer;
  }
  .site-header__burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--azul-secund);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  /* Painel colapsável: nav + ações, largura total, escondidos por padrão. */
  .site-header__nav,
  .site-header__right {
    flex: 0 0 100%;
    flex-direction: column;
    align-items: stretch;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .site-header__nav { justify-content: flex-start; }
  .site-header__right { gap: 8px; }

  .site-header__nav-check:checked ~ .site-header__nav { max-height: 60vh; }
  .site-header__nav-check:checked ~ .site-header__right {
    max-height: 40vh;
    padding: 8px 0 12px;
  }

  /* Anima o hambúrguer para "X" quando aberto. */
  .site-header__nav-check:checked ~ .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header__nav-check:checked ~ .site-header__burger span:nth-child(2) { opacity: 0; }
  .site-header__nav-check:checked ~ .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-header__nav-link { height: 52px; padding: 0 8px; }
  .site-header__phone,
  .site-header__cta {
    justify-content: center;
    height: 52px;
    padding: 0 16px;
  }
  /* No mobile o "crescer 10%" do desktop não faz sentido. */
  .site-header__phone:hover,
  .site-header__cta:hover { transform: none; }
}


/* ============================================================
   Responsivo — Footer
   ============================================================ */
@media (max-width: 900px) {
  .footer { padding: 56px 32px 48px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
}
@media (max-width: 600px) {
  .footer { padding: 48px 24px 40px; }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
   NECTECH — Fase 3 (Empresa): ACRÉSCIMO ao components.css
   Colar ao FINAL de nectech-child/assets/css/components.css.

   Origem: primitivos promovidos das utilities .home-* (decisão 1a
   do handoff da Fase 3). O home.css NÃO é alterado (nível a1) —
   estes .nec-* passam a ser a base compartilhada de Empresa em
   diante. Só tokens v3.

   Observações de nomenclatura / literais:
   - Container = .nec-wrap (o nome .nec-container já existe no
     catalog.css com outros valores — evitado para não colidir).
   - #F5F7F9 (fundo alternado) e #12283F/#8A97A6 herdados do design
     aprovado: literais sem token, candidatos a --surface-alt /
     tokens auxiliares na reconciliação (Fase 10), como em home.css.
   ============================================================ */


/* ----------- Estruturais: wrap + section ------------------- */
.nec-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 48px);
  padding-right: clamp(20px, 5vw, 48px);
}
.nec-wrap--narrow { max-width: 1000px; }

.nec-section { background: var(--branco); }
.nec-section > .nec-wrap {
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(56px, 7vw, 104px);
}
.nec-section--alt  { background: #F5F7F9; }            /* literal — Fase 10 */
.nec-section--dark { background: var(--azul-secund); color: var(--branco); }


/* ----------- Eyebrow / H2 / acento ------------------------- */
.nec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laranja-prime);
}
.nec-eyebrow__tick {
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  background: var(--laranja-prime);
  display: inline-block;
}
.nec-eyebrow--on-dark { color: var(--laranja-prime); }

.nec-h2 {
  margin: 0;
  font-size: clamp(28px, 3.8vw, 45px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--azul-secund);
}
.nec-h2--sm { font-size: clamp(28px, 3.6vw, 40px); }
.nec-section--dark .nec-h2 { color: var(--branco); }
.nec-accent { color: var(--laranja-prime); }


/* ----------- Cabeçalho de seção ---------------------------- */
.nec-section__head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.nec-section__head--center {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.nec-section__head--center .nec-eyebrow { justify-content: center; }
.nec-section__sub {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--cinza-letter);
}
.nec-section--dark .nec-section__sub { color: rgba(255, 255, 255, 0.72); }


/* ----------- Botão .nec-btn -------------------------------- */
.nec-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.nec-btn--solid   { background: var(--laranja-prime); color: var(--branco); border-color: var(--laranja-prime); }
.nec-btn--solid:hover { background: var(--laranja-dark); border-color: var(--laranja-dark); color: var(--branco); }
.nec-btn--outline { background: transparent; color: var(--laranja-prime); border-color: var(--laranja-prime); }
.nec-btn--outline:hover { background: var(--laranja-prime); color: var(--branco); }
.nec-btn--ghost   { background: transparent; color: var(--branco); border-color: rgba(255, 255, 255, 0.35); }
.nec-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--branco); }
.nec-btn:focus-visible { outline: 2px solid var(--laranja-prime); outline-offset: 2px; }
.nec-section--dark .nec-btn--ghost:focus-visible { outline-color: var(--branco); }


/* ----------- Step numerado (.nec-step) ---------------------
   Padrão "processo 01–04". Promovido de .home-step, ajustado ao
   tamanho compacto do design da Empresa (num 36 / título 16).
   ------------------------------------------------------------ */
.nec-step { border: 1px solid var(--border); background: var(--branco); padding: 32px 28px; }
.nec-step__num {
  display: block;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  color: var(--laranja-light);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.nec-step__title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--azul-secund);
}
.nec-step__desc { margin: 0; font-size: 14px; line-height: 1.65; color: var(--cinza-letter); }


/* ----------- Feature card border-top (.nec-feature-card) ---
   Card branco com borda superior laranja. Promovido do padrão
   .home-audience__card. Título uppercase + descrição curta.
   ------------------------------------------------------------ */
.nec-feature-card { background: var(--branco); border-top: 4px solid var(--laranja-prime); padding: 34px 30px; }
.nec-feature-card__title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--azul-secund);
}
.nec-feature-card__desc { margin: 0; font-size: 14px; line-height: 1.65; color: var(--cinza-letter); }


/* ----------- Placeholder de ativo (.nec-placeholder) ------- */
.nec-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEF1F4;                 /* literal — Fase 10 */
  border: 1px solid var(--border);
  color: var(--cinza-letter);
  min-height: clamp(280px, 32vw, 420px);
  text-align: center;
}
.nec-placeholder__inner { display: flex; flex-direction: column; gap: 6px; }
.nec-placeholder__title { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.nec-placeholder__sub   { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.nec-placeholder__tag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--laranja-prime);
  color: var(--branco);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
}


/* ----------- Address Card — variante "flat" (decisão 2c) ---
   Preserva o .address-card canônico (versão com ícones) e adiciona
   o layout plano do export da Empresa: borda + border-top laranja,
   rótulo / cidade / endereço / rodapé (e-mail · telefone · horário).
   Usada em "Nossas unidades" (Empresa) e reutilizável no Contato.
   ------------------------------------------------------------ */
.address-card--flat {
  max-width: none;
  border: 1px solid var(--border);
  border-top: 4px solid var(--laranja-prime);
  padding: 36px 34px;
  gap: 0;
}
.address-card--flat .address-card__eyebrow {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #8A97A6;                      /* literal (muted) — Fase 10 */
  margin: 0 0 6px;
}
.address-card--flat .address-card__title { margin: 0 0 18px; }
.address-card__addr { margin: 0 0 20px; font-size: 14px; line-height: 1.7; color: var(--cinza-letter); }
.address-card__foot {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================
   FASE 4 (EQUIPE) — ACRÉSCIMOS AO components.css
   Colar este bloco ao FINAL do components.css (após a última
   regra .address-card--flat da Fase 3). Não altera nada acima.
   Exige bump de $ver em nectech_enqueue_assets() (2.2 → 2.3).
   ============================================================ */


/* ----------- Rep Card — variante "foto" (decisão §5.1) -----
   Preserva o .rep-card canônico (nome/cargo + linhas com ícones +
   horário + variante --dark). Adiciona o layout do RepCard_dc.html:
   foto circular no topo, divisória, horário/telefone/e-mail e CTA
   WhatsApp outline verde. Espelha o padrão de .address-card--flat.
   Usada na Equipe ("Com quem você vai falar") e reutilizável no Contato.
   ------------------------------------------------------------ */
.rep-card--foto {
  max-width: none;
  padding: 0;
  gap: 0;
  border: 1px solid var(--border);
  height: 100%;
}
.rep-card__head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 30px 22px;
}
.rep-card__avatar {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: #EEF1F4;                  /* literal — Fase 10 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8A97A6;                       /* literal (muted) — Fase 10 */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.rep-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rep-card--foto .rep-card__name {
  font-size: 20px;
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.rep-card--foto .rep-card__role {
  font-size: 12px;
  letter-spacing: 0.08em;
  margin: 0;
}
.rep-card__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 30px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.rep-card__hours-line {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8A97A6;                       /* literal (muted) — Fase 10 */
}
.rep-card__phone {
  font-size: 15px;
  font-weight: 700;
  color: var(--azul-secund);
}
.rep-card__email {
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-claro-dk);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.rep-card__email:hover { color: var(--laranja-prime); }
.rep-card__cta {
  margin-top: auto;
  padding: 24px 30px 28px;
}
.rep-card__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 2px solid var(--verde);
  border-radius: var(--radius-sm);
  color: var(--verde);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 18px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.rep-card__whatsapp:hover { background: var(--verde); color: var(--branco); }
.rep-card__whatsapp:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.rep-card__whatsapp svg { width: 17px; height: 17px; flex: 0 0 auto; display: block; }


/* ----------- Botão .nec-btn--on-accent (decisão §5.4) ------
   Botão branco sólido com texto laranja, para uso SOBRE fundo
   laranja (--laranja-prime). Hover inverte para azul-escuro.
   Foco em branco (o outline laranja padrão some no fundo laranja).
   Par do .nec-btn--ghost (outline branco) na seção CTA da Equipe;
   provável reuso nas Landing Pages.
   ------------------------------------------------------------ */
.nec-btn--on-accent { background: var(--branco); color: var(--laranja-prime); border-color: var(--branco); }
.nec-btn--on-accent:hover { background: var(--azul-secund); color: var(--branco); border-color: var(--azul-secund); }
.nec-btn--on-accent:focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; }

.address-card__email {
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-claro-dk);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.address-card__email:hover { color: var(--laranja-prime); }
.address-card__phone { font-size: 14px; font-weight: 600; color: var(--azul-secund); }
.address-card--flat .address-card__hours-text { margin-top: 6px; font-size: 13px; color: #8A97A6; } /* literal — Fase 10 */