/* =================================================================
   Moovax — Design improvements (2026-05)
   1. Trust badge no hero
   2. Stats strip abaixo do hero
   3. Sticky CTA mobile (Solicitar Orçamento)
   4. Botão WhatsApp flutuante
   ================================================================= */

/* ---------- "A nossa equipa" — faixa de fotos reais --------------- */
.team-showcase { background: #fff; }
.ts-figure {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}
.ts-figure img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.ts-figure:hover img { transform: scale(1.04); }
.ts-figure figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}
@media (max-width: 575.98px) {
  .ts-figure img { height: 240px; }
}

/* ---------- Thank-you / confirmação de pedido (budget.html) ------- */
.ty-wrap { padding: 56px 0; }
.ty-card {
  max-width: 640px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.10);
  padding: 40px 32px;
}
.ty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #36D17A, #1FB866);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(54, 209, 122, 0.35);
}
.ty-title {
  font-family: 'Dosis', sans-serif; font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.4rem); color: #0f172a; margin-bottom: 8px;
}
.ty-sub { color: #475569; font-size: 1.05rem; margin-bottom: 16px; }
.ty-ref {
  display: inline-block; background: #EEF2FB; color: #133477;
  border: 1px solid rgba(19, 52, 119, 0.15); border-radius: 999px;
  padding: 7px 16px; font-size: 0.95rem; margin-bottom: 18px;
}
.ty-ref strong { font-family: 'Dosis', sans-serif; font-size: 1.05rem; }
.ty-note { color: #64748b; font-size: 0.9rem; max-width: 460px; margin: 0 auto 24px; line-height: 1.5; }
.ty-steps {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.ty-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.9rem; color: #334155; font-weight: 600; }
.ty-step-n {
  width: 34px; height: 34px; border-radius: 50%;
  background: #133477; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Dosis', sans-serif; font-weight: 700;
}
.ty-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 22px; }
.ty-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 0.92rem;
  text-decoration: none; border: 1.5px solid #d8dde6; color: #133477; background: #fff;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.ty-btn:hover { border-color: #133477; color: #133477; transform: translateY(-1px); }
.ty-btn--wa { background: #25D366; border-color: #25D366; color: #fff; }
.ty-btn--wa:hover { background: #1FB855; border-color: #1FB855; color: #fff; }
.ty-home { display: inline-block; color: var(--bs-primary); font-weight: 700; text-decoration: none; }
.ty-home:hover { text-decoration: underline; color: var(--bs-primary); }
@media (max-width: 480px) {
  .ty-steps { grid-template-columns: 1fr; gap: 14px; }
  .ty-steps li { flex-direction: row; justify-content: center; }
  .ty-card { padding: 32px 20px; }
  .ty-wrap { padding: 32px 0; }
}

/* Botão "Ligue-nos" no header mobile — outline branco (substitui o btn-light
   volumoso com ícone de 35px que destoava do header vermelho). */
.btn-call-mobile {
  display: inline-flex;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-call-mobile:hover,
.btn-call-mobile:active,
.btn-call-mobile:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}
.btn-call-mobile svg { flex-shrink: 0; }

/* Hambúrguer mobile: caixa com borda branca (combina com o "Ligue-nos"),
   em vez das 3 linhas soltas — mais sólido e visível. */
.navbar-toggler {
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 10px;
  padding: 7px 10px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.navbar-toggler:hover,
.navbar-toggler:focus {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.12);
}
.navbar-toggler .navbar-toggler-icon {
  width: 1.4em;
  height: 1.4em;
}

/* Menu mobile aberto (<992px): links maiores, dividers subtis, página ativa com
   barra lateral (em vez do tracinho), CTA full-width proeminente. Mantém o vermelho. */
@media (max-width: 991.98px) {
  #mainNav { padding-top: 8px; }
  #mainNav .navbar-nav .nav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
  #mainNav .navbar-nav .nav-item:last-child { border-bottom: 0; }
  #mainNav .navbar-nav .nav-link {
    padding: 14px 2px !important;
    font-size: 1.05rem;
    opacity: 1;
  }
  #mainNav .navbar-nav .nav-link.active::after,
  #mainNav .navbar-nav .nav-link:hover::after { display: none !important; }
  #mainNav .navbar-nav .nav-link.active {
    font-weight: 700;
    padding-left: 12px !important;
    box-shadow: inset 3px 0 0 #fff;
  }
  #mainNav #languageForm { margin: 10px 0 6px; }
  #mainNav .btn.btn-light {
    width: 100%;
    padding: 13px 16px !important;
    font-size: 1rem !important;
    font-weight: 700;
    border-radius: 12px;
    margin-top: 10px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  }
}

/* ---------- Footer: ícones sociais + polimento mobile ------------- */
/* Ícones sociais: mais contraste/tamanho no azul + hover de marca + tamanhos
   de ícone normalizados (eram 12/14/18px, ficavam inconsistentes). */
.footer-social li a {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease, transform 0.15s ease;
}
.footer-social li a:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}
.footer-social li a img {
  height: 16px !important;
  width: auto;
}
/* Logótipo do footer (versão clara): tamanho consistente. */
.footer-main img.footer-logo {
  height: 40px;
  width: auto;
}

/* Mobile (<576px): centrar todas as secções do footer, para combinar com as
   certificações/legal/copyright (já centrados) — evita o ar desalinhado/plano. */
@media (max-width: 575.98px) {
  .footer-main { text-align: center; }
  .footer-main .footer-social { justify-content: center; }
  .footer-main .nav { align-items: center; }
  .footer-main .nav-link.d-flex { justify-content: center; }
  .footer-main [class*="col-"] { margin-bottom: 1.75rem; }
}

/* ---------- 1. Trust badge (hero) ---------------------------------- */
.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-trust-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
  color: #0f172a;
  text-decoration: none;
}
.hero-trust-badge__stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.hero-trust-badge__rating {
  font-weight: 800;
  font-size: 16px;
}
.hero-trust-badge__text {
  color: #475569;
  font-weight: 500;
  font-size: 13px;
}
@media (max-width: 575px) {
  .hero-trust-badge__text {
    font-size: 12px;
  }
}

/* ---------- 2. Stats strip ---------------------------------------- */
.stats-strip {
  background: linear-gradient(135deg, #133477 0%, #1e4a8a 100%);
  color: white;
  padding: 32px 0;
  margin: 0;
}
.stats-strip__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
}
.stats-strip__item {
  text-align: center;
}
.stats-strip__number {
  font-family: 'Dosis', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stats-strip__number--text {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}
.stats-strip__star {
  vertical-align: middle;
}
.stats-strip__label {
  margin-top: 6px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
@media (max-width: 767px) {
  .stats-strip__row {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 12px;
  }
  .stats-strip {
    padding: 22px 0;
  }
}

/* ---------- 3. Sticky CTA mobile + 4. WhatsApp button ------------- */
.floating-whatsapp,
.floating-cta-mobile {
  position: fixed;
  z-index: 9999;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.floating-whatsapp {
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.floating-whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55);
}

/* Sticky CTA pill — só mobile/tablet (<992px). Desktop tem form sempre visível. */
.floating-cta-mobile {
  display: none;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #A90A0A 0%, #C81E1E 100%);
  color: white;
  font-weight: 700;
  font-size: 15px;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(169, 10, 10, 0.45);
  min-height: 48px;
  white-space: nowrap;
}
.floating-cta-mobile:hover,
.floating-cta-mobile:active,
.floating-cta-mobile:focus {
  color: white;
  text-decoration: none;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 14px 32px rgba(169, 10, 10, 0.55);
}
@media (max-width: 991px) {
  .floating-cta-mobile {
    display: inline-flex;
  }
  /* Push the WhatsApp button up so it doesn't overlap with the sticky CTA */
  .floating-whatsapp {
    bottom: 84px;
  }
}

/* UX-1+2+3: when the hero form is on screen, hide both floating CTAs.
   The form already has its own submit button so the sticky CTA is redundant,
   and the WhatsApp bubble was covering input fields. They re-appear once
   the user scrolls past the form. */
body.quoteform-in-view .floating-cta-mobile,
body.quoteform-in-view .floating-whatsapp {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}
.floating-cta-mobile,
.floating-whatsapp {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (max-width: 991px) {
  body.quoteform-in-view .floating-cta-mobile {
    transform: translateX(-50%) translateY(20px);
  }
}

/* ---------- DSGN-5: How it works section -------------------------- */
.how-it-works {
  background: #F8F9FB;
}
.how-it-works__lead {
  color: #475569;
  font-size: 16px;
}
.how-it-works__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
.how-it-works__step {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 28px 22px 24px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.how-it-works__step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}
.how-it-works__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #133477 0%, #1e4a8a 100%);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.how-it-works__num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: 'Dosis', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: rgba(169, 10, 10, 0.12);
}
.how-it-works__title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}
.how-it-works__text {
  color: #475569;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 991px) {
  .how-it-works__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 575px) {
  .how-it-works__steps {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer legal block (SEO-033) -------------------------- */
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}
.footer-legal .legal-item {
  white-space: nowrap;
}
.footer-legal .legal-sep {
  opacity: 0.4;
  margin: 0 6px;
}
@media (max-width: 575px) {
  .footer-legal .legal-sep {
    display: none;
  }
  .footer-legal .legal-item {
    display: block;
    white-space: normal;
    margin-bottom: 4px;
  }
}

/* Mobile-only: shrink whatsapp on very small screens */
@media (max-width: 360px) {
  .floating-whatsapp {
    width: 50px;
    height: 50px;
  }
  .floating-whatsapp svg {
    width: 24px;
    height: 24px;
  }
}

/* =================================================================
   SEO-034: form mobile-first polish
   - Maior conforto de tap (44px+ alvo)
   - Submit button proeminente
   - Mobile: estilo "step" visual (hint "1/3", "2/3")
   ================================================================= */
@media (max-width: 767px) {
  .quoteform .form-label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
  }
  .quoteform .form-control,
  .quoteform .form-select {
    min-height: 48px;
    border-radius: 10px;
  }
  /* Submit button — full width, brand colour, large */
  .quoteform button[type="submit"],
  .quoteform .btn-primary {
    width: 100%;
    min-height: 52px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(135deg, #A90A0A 0%, #C81E1E 100%);
    border: 0;
    box-shadow: 0 10px 24px rgba(169, 10, 10, 0.35);
  }
  /* Quote form container with breath */
  .quoteform {
    padding: 18px !important;
  }
  /* Tab nav — bigger touch target */
  .quoteform-heading {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1.2;
  }
  /* Hint chip — visible only on mobile, drives confidence */
  .quoteform::before {
    content: "⚡ Pedido em 60s · Orçamento grátis em 24h";
    display: block;
    padding: 8px 12px;
    margin: -12px -6px 14px;
    background: linear-gradient(135deg, #FBE09C 0%, #FFD580 100%);
    color: #5A3A00;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
  }
  html[lang="en"] .quoteform::before {
    content: "⚡ 60s to request · Free quote within 24h";
  }
  /* Group of "secondary" fields (floor, elevator, etc.) — visually grouped + slightly less prominent */
  .form-secondary-row {
    background: #F8F9FB;
    margin: 0 -12px;
    padding: 12px 12px 4px;
    border-radius: 12px;
  }
}

/* =================================================================
   UX-6: Progressive disclosure no form do hero
   - Desktop (>=768px): tudo visível como antes; o botão Continuar fica escondido.
   - Mobile (<768px): só Step 1 (Nome + Telefone + Email) + botão Continuar.
     Step 2 e o submit ficam escondidos até o utilizador clicar Continuar.
   ================================================================= */
.form-step-2 {
  /* wrapper layout-transparente: filhos col-md-* continuam dentro do .row do form */
  display: contents;
}
/* Desktop: Continuar nunca aparece. Step 2 sempre visível. */
.form-step-cta { display: none; }

@media (max-width: 767px) {
  /* Mobile: enquanto step 2 está collapsed, mostrar o CTA Continuar. */
  .form-step-2--collapsed { display: none !important; }
  .form-step-2--collapsed ~ .col-12 { display: none; } /* esconde submit do step2 */
  .form-step-cta { display: block; }
  /* Quando JS revela step 2, marca o CTA como hidden via classe. */
  .form-step-cta.form-step-cta--hidden { display: none; }
}
.form-step-cta__btn {
  min-height: 48px;
  font-size: 16px;
}

/* Mensagem de confirmação após capturar o lead parcial (Continue, mobile) */
.partial-lead-banner {
  background: linear-gradient(135deg, #E7F8EE 0%, #D8F3E3 100%);
  border: 1px solid #36D17A;
  color: #176b3a;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  margin: 2px 0 18px;
}
.partial-lead-error {
  color: #C81E1E;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  text-align: center;
}

/* Add a small "1500+ pedidos por ano" trust hint near submit button */
.quoteform-trust-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  color: #475569;
}
.quoteform-trust-hint svg {
  flex-shrink: 0;
}

/* Footer: certification / membership logos (MoveAssured, ANTRAM, Scoring).
   The brand logos use fixed dark colours, so all three sit together on a single
   white rounded strip — far more legible on the blue footer than loose logos,
   and reads as an intentional "certified by" band. Hosted locally (no hotlink). */
.cert-strip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 36px;
  background: #fff;
  border-radius: 14px;
  padding: 16px 32px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.cert-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
.cert-logo:hover {
  transform: translateY(-2px);
}
.cert-logo img {
  display: block;
  height: auto;
}
/* The Scoring seal is near-square, so size it by height (not width) to keep
   its visual weight in line with the wide MoveAssured/ANTRAM logos. */
.cert-logo--seal img {
  height: 86px;
  width: auto;
}
@media (max-width: 575px) {
  .cert-strip { gap: 14px 22px; padding: 14px 18px; }
  .cert-logo--seal img { height: 70px; }
}

/* =================================================================
   DESIGN v2 (2026-06) — redesenho visual da homepage
   Objetivo: tirar o ar de "template genérico" e parecer uma empresa
   de mudanças sólida e de confiança. Só CSS + SVG (sem novos .po).
   ================================================================= */

/* ---------- Hero: tipografia + USPs ------------------------------- */
.home .hero h1 {
  font-weight: 700;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.home .hero .sub-title {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.hero-usps {
  list-style: none;
  margin: 22px auto 0;
  padding: 0;
  max-width: 760px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}
.hero-usps li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.hero-usps li svg {
  color: #36D17A;
  flex-shrink: 0;
}
@media (max-width: 575px) {
  .hero-usps { gap: 8px; margin-top: 16px; }
  .hero-usps li { font-size: 12.5px; padding: 6px 11px; }
}

/* ---------- Hero: abas do formulário (tabs) ----------------------- */
.home .quoteform-heading {
  font-weight: 600;
  color: #5b6472;
  border-color: rgba(0, 0, 0, 0.08) !important;
  background: #EEF1F5;
  transition: color 0.15s ease, background 0.15s ease;
}
.home .quoteform-heading:hover {
  color: var(--bs-primary);
  background: #f6f7f9;
}
.home .quoteform-heading.active {
  position: relative;
  background: #fff;
  font-weight: 700;
  box-shadow: 0 -3px 0 0 var(--bs-primary) inset;
}

/* ---------- Secções: ritmo e títulos ----------------------------- */
.services-section .title-pointer,
.testimonials-section .title-pointer,
.about-us-section .title-pointer {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  letter-spacing: 0.02em;
}
.services-section > .container > .row p,
.testimonials-section p.mb-0,
.testimonials-section > .container-fluid p {
  color: #5b6472;
}

/* ---------- Serviços: cartões em vez de ícones soltos ------------- */
.services-grid .service-box {
  height: 100%;
  margin: 0;
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.services-grid .col { display: flex; }
.services-grid .service-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
  border-color: rgba(169, 10, 10, 0.22);
}
/* Tile do ícone (primeira coluna do .service-box) */
.services-grid .service-box > [class*="col-"]:first-child {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.services-grid .service-box img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  padding: 11px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(169, 10, 10, 0.08), rgba(19, 52, 119, 0.08));
}
.services-grid .service-box .col-9 { flex: 1; }
.services-grid .service-box h3 { font-size: 1.12rem; margin-bottom: 6px; }
.services-grid .service-box p { color: #5b6472; line-height: 1.55; }

/* ---------- Testemunhos: estrelas + selo Google + cards ---------- */
.testimonials .card {
  padding: 8px 14px !important;
}
.testimonial-stars {
  display: flex;
  gap: 3px;
  justify-content: center;
  padding-top: 6px;
}
.testimonial-stars svg {
  width: 18px;
  height: 18px;
  fill: #FFB400;
}
.testimonials .testimonial-text {
  color: #374151;
  line-height: 1.6;
}
.author-subtitle {
  color: #6b7280 !important;
  opacity: 1 !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.author-subtitle .g-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #4285F4;
  font-weight: 700;
  font-family: 'Dosis', Arial, sans-serif;
  font-size: 11px;
  line-height: 1;
}
/* Cards não-centrais do carrossel: peek mais legível (não "partido") */
.testimonials .owl-item:not(.center) { opacity: 0.85; }
.testimonials .owl-item.center .card {
  box-shadow: 0 16px 40px rgba(13, 15, 40, 0.14);
}

/* ---------- Sobre nós: imagem com profundidade ------------------- */
.about-us-section img.rounded {
  border-radius: 18px !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}
.about-us-section a.text-dark-2 {
  font-weight: 700;
  color: var(--bs-primary) !important;
}

/* ---------- Hero: respiração do formulário de orçamento ----------
   Os campos estavam demasiado juntos. Mais ar vertical entre linhas,
   labels com folga e inputs ligeiramente mais altos. (Aplica-se a
   todas as variantes do form: nacional, internacional, armazenamento.) */
.quoteform .form-label {
  font-weight: 600;
  margin-bottom: 7px;
}
/* Gutter horizontal dos campos dentro de .form-step-2.
   O wrapper tem display:contents, por isso o seletor .row > * do Bootstrap
   NÃO os apanha (não são filhos diretos da row) e ficavam colados uns aos
   outros. Repomos o gutter (= 0.75rem cada lado, igual aos restantes campos). */
.quoteform .form-step-2 > [class*="col-"] {
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}
@media (min-width: 768px) {
  /* mais espaço entre campos (era pb-4 = 1.5rem) */
  .quoteform .pb-4 { padding-bottom: 2.75rem !important; }
  /* folga interior do cartão branco do formulário */
  .quoteform.bg-white { padding: 2.25rem 2.25rem 1.75rem !important; }
  /* inputs com um pouco mais de altura/conforto */
  .quoteform .form-control,
  .quoteform .form-select {
    min-height: 46px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .quoteform textarea.form-control { min-height: 92px; }
  /* grupos de rádio (elevador / empresa) alinhados com folga acima */
  .quoteform .form-check-inline { margin-top: 2px; }
}

/* ---------- Seletor de idioma (era <select> nativo cru) ----------
   Pill com ícone de globo + chevron próprio, em cor de marca. Mantém
   o <select> nativo (acessível + JS intacto). Usado na barra de topo
   (desktop) e no menu mobile. */
#languageForm { display: inline-flex; align-items: center; }
#languageSelect {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #133477;
  line-height: 1.2;
  padding: 7px 32px 7px 34px;
  border: 1px solid #d8dde6;
  border-radius: 999px;
  background-color: #fff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23133477' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23133477' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 11px center, right 12px center;
  background-size: 16px 16px, 12px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
#languageSelect:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 2px 10px rgba(19, 52, 119, 0.12);
}
#languageSelect:focus {
  outline: 0;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(169, 10, 10, 0.15);
}
#languageSelect option { color: #23212A; font-weight: 500; }
/* Instância no menu mobile (fundo vermelho do header): pill branco já
   contrasta bem; só garantir alinhamento à esquerda. */
.navbar-nav #languageForm { margin-top: 4px; }

/* Barra de topo: centrar verticalmente o grupo da direita (idioma + redes).
   O contentor não tinha align-items:center, por isso os ícones sociais ficavam
   ~3px acima do pill de idioma. */
.header-top-right { align-items: center; }
.header-top-right #languageForm { margin: 0; }
.header-top-right #languageSelect { margin: 0; }
.header-top-right .header-social { margin-bottom: 0; align-items: center; }
.header-top-right .header-social .list-group-item { display: flex; align-items: center; }
.header-top-right .header-social a { display: flex; line-height: 0; }
.header-top-right .header-social img { display: block; }