/* =========================
   RESET / BASE
   ========================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #ffffff;
  color: #111;
}

a {
  text-decoration: none;
}

/* =========================
   SITE WRAPPER
   ========================= */
.site-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
}

/* =========================
   BARRA TOPO
   ========================= */
.topbar {
  background: #e30613;
}

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 32px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO */
.logo {
  height: 72px;
  width: auto;
  display: block;
}

/* MENU */
.menu {
  display: flex;
  align-items: center;
  gap: 24px;
}

.menu a {
  color: white;
  font-weight: 600;
  font-size: 15px;
}

/* BOTÃO ORÇAMENTO */
.btn-orcamento {
  padding: 8px 20px;
  border-radius: 999px;
  font-weight: bold;
  border: 2px solid white;
  color: white;
  transition: all 0.2s ease;
}

.btn-orcamento:hover {
  background: white;
  color: #e30613;
}

/* =========================
   BANNER / HERO
   ========================= */
.hero {
  max-width: 1200px;   /* 👈 MESMA largura do banner */
  height: 420px;
  background-image: url("banner.jpg");
  background-size: cover;
  background-position: center bottom;
  position: relative;
}

.hero-overlay {
  position: absolute;
  bottom: 30px;
  left: 48px;

  max-width: 640px;

  background: rgba(0, 0, 0, 0.55);
  color: white;
  padding: 24px 28px;
  border-radius: 14px;
}

.hero-overlay h1 {
  font-size: 30px;
  margin: 0 0 10px 0;
}

.hero-overlay p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* =========================
   CTA RESERVA
========================= */
.cta-reserva {
  background: #fff;
  padding: 6px 0;
  text-align: center;
}

.btn-reserva-cta {
  display: inline-block;
  background: #e30613;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  padding: 22px 48px;
  border-radius: none;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-reserva-cta:hover {
  background: #b9050f;
  transform: translateY(-2px);
}

/* =========================
   VANTAGENS
========================= */

.vantagens {
  padding: 6px 0;
margin-bottom: 40px;
}

.vantagens-inner {
  max-width: 1200px;   /* 👈 MESMA largura do banner */
  margin: 0 auto;
  padding: 0 20px;
}

.vantagens h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

/* GRID */
.vantagens-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

/* CARD */
.vantagem-card {
  border: 3px solid #e30613;
  border-radius: 6px;
  padding: 24px;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* HEADER */
.vantagem-header {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

align-items: center;   /* centra tudo horizontalmente */
  justify-content: space-between;
  text-align: center;
  padding: 8px 20px;
  gap: 12px;
}

.vantagem-icon {
  font-size: 64px;
  margin-bottom: 12px;
}

.vantagem-header h3 {
  margin: 0;
  font-size: 18px;
}

/* BOTÃO */
.btn-saber-mais {
  align-self: center;
  background: #fff;
  border: 2px solid #e30613;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: bold;
 margin-top: auto;      /* força todos os botões a alinhar */
}

/* TEXTO ESCONDIDO */
.vantagem-descricao {
  display: none;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
}

/* ABERTO */
.vantagem-card.open .vantagem-descricao {
  display: block;
}

/* RESPONSIVO */
@media (max-width: 1200px) {
  .vantagens-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .vantagens-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================
   FROTA
========================= */

.frota-card {
  
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);  

  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

/* IMPORTANTE: não aplicar alturas fixas às imagens do slider */
.frota-card > img{
  width: 100%;
  height: 180px;
  object-fit: contain;
  margin-bottom: 16px;
}

.frota {
  padding: 0px 0;              /* reduz espaço entre vantagens e frota */
}

.frota-inner {
  max-width: 1200px;            /* IGUAL ao banner e vantagens */
  margin: 0 auto;
  padding: 0 0px;              /* IGUAL às vantagens */
}

.frota h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.frota-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  align-items: stretch;
}

/* ITEM */
.frota-item {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: center;
  flex-direction: column;
  text-align: center;
  }

/* IMAGEM – garante largura IGUAL */



/* PREÇO */
.preco {
  position: absolute;
  top: 0;
  left: 0;
  background: #e30613;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 6px;
}

/* TEXTO */
.frota-info h3 {
  margin: 0 0 10px;
}

.frota-info p {
  margin: 4px 0;
  font-size: 14px;
}


.reserve-btn {
  margin-top: auto;
  background: #e30613;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 14px;
  font-size: 22px;
  cursor: pointer;
}

.reserve-btn {
  display: block;
  text-align: center;
  text-decoration: none;
}

.cta-frota {
  text-align: center;
  margin-top: 48px;
}

.btn-orcamento-grande {
  border: 2px solid #fff;
  padding: 20px 48px;
  border-radius: none;
  border-radius: 20px;
  text-decoration: none;
  color: white;
  font-size: 28px;
  background: #e30613;
}

.btn-orcamento-grande:hover {
  background: #e30613;
}

/* RESPONSIVO */
@media (max-width: 768px) {
  .frota-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   O QUE ESTÁ INCLUÍDO
========================= */

/* O que está incluído */
.includes {
  margin-top: 10px;
}

.includes summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid #e30613;
  border-radius: 6px;
  font-weight: 600;
  background: #f3f3f3;
  text-align: center;
}

.includes summary::before {
  content: "▶ ";
  font-size: 12px;
}

.includes[open] summary::before {
  content: "▼ ";
}

.includes summary::-webkit-details-marker {
  display: none;
}

.includes summary::marker {
  display: none;
}

.includes[open] summary {
  background: #e6e6e6;
}

/* Conteúdo escondido */
.includes ul {
  margin: 12px 0;
  padding-left: 18px;
}

/* Botão reservar */
.reserve-btn {
  width: 100%;
  background: #c4161c;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px;
  font-size: 15px;
  cursor: pointer;
}

.reserve-btn:hover {
  background: #a21217;
}

.faq-item {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.faq-item h3 {
  margin-top: 0;
  font-size: 18px;
}

/* =========================
   FAQ's
========================= */

.faqs {
  background: #f5f6f8;
  padding: 80px 0;
}

.faqs-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px;
}

.faqs h1 {
  font-size: 32px;
  margin-bottom: 10px;
}

.faqs p.sub {
  margin-bottom: 40px;
  color: #555;
}

.faq-item {
  background: #fff;
  padding: 20px 24px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.faq-item strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

/* =========================
  FOOTER
========================= */

.site-footer {
  width: 100%;
  background-color: #e30613;
  padding: 20px 0;
  margin-top: 24px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* Colunas */
.footer-left,
.footer-center,
.footer-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Centro */
.footer-center {
  flex-direction: column;
  text-align: center;
  color: #fff;
}

.footer-center h3 {
  margin-bottom: 15px;
  font-size: 22px;
}

/* Contactos */
.footer-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
  font-size: 16px;
}

.footer-contact img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Botões */
.footer-btn {
  color: #fff;
  text-decoration: none;
  border: 2px solid #fff;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.footer-btn:hover {
  background: #fff;
  color: #e30613;
}

/* Responsivo */
@media (max-width: 900px) {
  .footer-container {
    flex-direction: column;
  }

  .footer-left,
  .footer-right {
    margin-top: 10px;
  }
}

.site-header {
  background: #e30613;
  width: 100%;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  height: 70px;
}

.main-nav a {
  color: #fff;
  margin-left: 20px;
  font-weight: 600;
  text-decoration: none;
}

.main-nav a:hover {
  text-decoration: underline;
}

.page-content {
  padding: 60px 20px;
  background: #fff;
}

.page-content h1 {
  margin-bottom: 30px;
}

.page-header {
  background-color: #e30613;
  color: #fff;
  padding: 60px 20px;
  text-align: center;
}

.page-header h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
}


.legal-content {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.7;
  color: #222;
}
.legal-content h2 {
  margin-top: 50px;
  font-size: 24px;
  color: #e30613;
}

.legal-content h3 {
  margin-top: 30px;
  font-size: 18px;
  color: #000;
}

.legal-content .indice {
  background: #f6f6f6;
  border-left: 5px solid #e30613;
  padding: 20px;
  margin-bottom: 40px;
}

.legal-content .indice h3 {
  margin-top: 0;
}

.legal-content .indice a {
  color: #000;
  text-decoration: none;
}

.legal-content .indice a:hover {
  text-decoration: underline;
}

.legal-content ul,
.legal-content ol {
  margin-left: 20px;
}

.legal-content li {
  margin-bottom: 10px;
}

.legal-content p {
  margin-bottom: 16px;
}

main {
  display: block;
  width: 100%;
}

/* ===============================
   PÁGINAS LEGAIS (TERMOS & PRIVACIDADE)
   =============================== */

.legal-page {
  background: #f5f5f5;
  padding: 60px 20px;
}

.legal-container {
  max-width: 1100px;
  margin: 0 auto;
  background: #ffffff;
  padding: 50px 60px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: #333;
  line-height: 1.7;
}

/* TÍTULO PRINCIPAL */
.legal-container h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #000;
  border-left: 6px solid #e30613;
  padding-left: 15px;
}

/* SUBTÍTULOS (ARTIGOS / SECÇÕES) */
.legal-container h2 {
  font-size: 26px;
  margin-top: 50px;
  margin-bottom: 15px;
  color: #000;
}

.legal-container h3 {
  font-size: 20px;
  margin-top: 35px;
  margin-bottom: 10px;
  color: #222;
}

/* PARÁGRAFOS */
.legal-container p {
  font-size: 16px;
  margin-bottom: 15px;
}

/* LISTAS */
.legal-container ul {
  margin: 15px 0 25px 25px;
}

.legal-container li {
  margin-bottom: 8px;
}

/* ÍNDICE */
.legal-container .indice {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 40px;
}

.legal-container .indice strong,
.legal-container .indice h2 {
  display: block;
  margin-bottom: 15px;
  font-size: 18px;
}

/* LINKS */
.legal-container a {
  color: #e30613;
  text-decoration: none;
  font-weight: 500;
}

.legal-container a:hover {
  text-decoration: underline;
}

/* RESPONSIVO */
@media (max-width: 768px) {
  .legal-container {
    padding: 30px 25px;
  }

  .legal-container h1 {
    font-size: 28px;
  }

  .legal-container h2 {
    font-size: 22px;
  }
}

/* ==============================
   SEGURO & FRANQUIAS
============================== */

.insurance-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.section-title {
  text-align: space-between;
  font-size: 32px;
  margin-bottom: 50px;
  font-weight: 700;
}



/* Coluna esquerda (formulário) */
.reserva-form {
  width: 100%;
}


/* =========================
   CLIENTES
   ========================= */
.clientes {
  padding-top: 6px;
}

.clientes h2 {
  margin-top: 8px;
}

.clientes-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.clientes h2 {
  font-size: 32px;
  color: #e30613;
  margin-bottom: 6px;
}

.clientes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.cliente-card {
  border-top: 2px solid #000;
  padding-top: 24px;
}

.estrelas {
  color: #f5b400;
  font-size: 18px;
  margin-bottom: 12px;
}

.cliente-card h3 {
  margin-bottom: 16px;
}

.cliente-card p {
  font-size: 15px;
  line-height: 1.6;
}

.cliente-nome {
  display: block;
  margin-top: 32px;
  font-weight: bold;
}

.clientes-cta {
  text-align: center;
  margin-top: 48px;
}

.btn-ver-mais {
  border: 2px solid #000;
  padding: 10px 28px;
  border-radius: 999px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

.btn-ver-mais:hover {
  background: #000;
  color: #fff;
}

/* Responsivo */
@media (max-width: 900px) {
  .clientes-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   PRÉ-RESERVA
========================= */


/* PASSOS */
.reserva-steps {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.reserva-steps .step {
  flex: 1;
  padding: 12px;
  text-align: center;
  border-radius: 6px;
  background: #e0e0e0;
  font-weight: 600;
  font-size: 14px;
  color: #555;
}

.reserva-steps .step.active {
  background: #e30613;
  color: white;
}

/* FORM */
.reserva-form {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items: end;
}

.reserva-form .field {
  display: flex;
  flex-direction: column;
}

.reserva-form label {
  font-size: 13px;
  margin-bottom: 4px;
  font-weight: 600;
}

.reserva-form input,
.reserva-form select {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.reserva-form .submit {
  grid-column: span 6;
  text-align: right;
}

.reserva-form button {
  background: #e30613;
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

.reserva-form button:hover {
  background: #c4161c;
}

/* RESPONSIVO */
@media (max-width: 900px) {
  .reserva-form {
    grid-template-columns: 1fr;
  }

  .reserva-steps {
    flex-direction: column;
  }

  .reserva-form .submit {
    text-align: center;
  }
}

.hidden { display: none !important; }

.reserva-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.field label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
}


/* Responsivo */
@media (max-width: 1024px) {
  .reserva-row {
    grid-template-columns: 1fr;
  }
}

.linha-reserva {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.campo {
  display: flex;
  flex-direction: column;
}

.reserva-box {
  width: 100%;
}

.reserva-linha {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* local | data | hora */
  gap: 16px;
  margin-bottom: 16px;
}

.campo label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.campo input,
.campo select {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.btn-reserva {
    background: #e30613;
    color: #fff;
    padding: 18px 48px;
 border: none;
  border-radius: 40px;
  cursor: pointer;
  font-size: 16px;
font-weight: bold;
}

.btn-reserva:hover {
  background: #c4161c;
  transform: translateY(-1px);
}

.btn-reservar {
  display: block;
  margin-top: 12px;
  padding: 12px 16px;

  background: #e30613;
  color: #fff;
  border: none;
  border-radius: 999px;

  font-size: 15px;
  font-weight: 600;
  text-align: center;

  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
}

.btn-reservar:hover {
  background: #c4161c;
  transform: translateY(-1px);
}


.btn-reservar {
  margin-top: 16px;
}

/* Layout geral */
.reserva-layout {
  max-width: 1200px;
  margin: 60px auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
 overflow: visible !important;
}

  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 24px;

  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}


.resumo-bloco {
  margin-bottom: 16px;
  font-size: 14px;
}

.resumo-bloco.total {
  border-top: 1px solid #eee;
  padding-top: 16px;
}

.resumo-bloco .preco {
  font-size: 22px;
  font-weight: bold;
}

.btn-finalizar {
  margin-top: 20px;
  padding: 14px;
  border-radius: 999px;
  border: none;
  background: #e30613;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;


}

.btn-finalizar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-finalizar{
  background: #e30613;
  color: #fff;
}

/* estado desativado */
.btn-finalizar.is-disabled,
.btn-finalizar:disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.resumo-4col {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.resumo-col strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.resumo-col p {
  font-size: 14px;
  color: #555;
}

.resumo-finalizar {
  display: flex;
  align-items: flex-end;
}

.container-reserva {
  max-width: 1200px;   /* IGUAL ao banner */
  margin: 0 auto;
  padding: 0 32px;
}

.reserva-submit {
  display: flex;
  justify-content: center;
  margin: 60px 0;
  margin-top: 24px;
}


.reserva-submit {
  min-width: 320px;
}

html {
  scroll-behavior: smooth;
}

/* Título */
.resumo-reserva h3 {
  font-size: 26px;
  margin-bottom: 25px;
}

/* Itens */
.resumo-item {
  margin-bottom: 18px;
}

.resumo-item span {
  display: block;
  font-size: 14px;
  color: #777;
}

.resumo-item strong {
  font-size: 16px;
}

/* Separador */
.resumo-reserva hr {
  margin: 25px 0;
  border: none;
  border-top: 1px solid #eee;
}

/* Total */
.resumo-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  margin-bottom: 25px;
}

.resumo-total strong {
  color: #e30613;
  font-size: 26px;
}

/* Botão */
.btn-continuar {
  padding: 16px;
  border-radius: 40px;
  background: #e30613;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border: none;
  cursor: pointer;
 display: flex;
  justify-content: center;
  margin: 40px 0;
}

.btn-continuar:hover {
  background: #c60511;
}


.resumo-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  border-left: 6px solid #e30613;
  transition: all 0.3s ease;
}

.resumo-card.bloqueado {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(1);
}

.resumo-card.ativo {
  opacity: 1;
  pointer-events: auto;
}

.resumo-card.destaque {
  background: #f9f9f9;
  border-left: 6px solid #e30613;
}

.resumo-total-preco {
  font-size: 26px;
  font-weight: 800;
  color: #e30613;
  margin-top: 12px;
}

.reserva-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}

/* cada coluna */
.reserva-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* botão do passo */
.step-header {
  background: #e6e6e6;
  padding: 10px;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
 text-align: center;
}

.step-header.active {
  background: #e30613;
  color: #fff;
}

/* quadro resumo */
.step-resumo {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  min-height: 220px;
}

/* destaque do total */
.step-resumo.total {
  font-weight: 700;
}

.reserva-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}

/* cada coluna */
.reserva-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* botão do passo */
.step-header {
  background: #e6e6e6;
  padding: 14px;
  border-radius: 10px;
  text-align: center;
  font-weight: 600;
}

.step-header.active {
  background: #e30613;
  color: #fff;
}

/* quadro resumo */
.step-resumo {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  min-height: 100px;
}

/* destaque do total */
.step-resumo.total {
  font-weight: 700;
}

.steps-row,
.summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  top: 90px; /* altura do header fixo */
  z-index: 20;
  background: #f5f5f5;
  padding: 20px 0;
}

.summary-card {
  background: #fff;
  border-radius: 20px;
  min-height: 240px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.resumo-final {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-finalizar {
  background: #e30613;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 18px 32px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}

.btn-finalizar span {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.9;
}

.reserva-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.reserva-col {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.step-header {
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  background: #e5e5e5;
  margin-bottom: 16px;
}

.step-header.active {
  background: #e60000;
  color: #fff;
}

.step-resumo {
  font-size: 14px;
  color: #333;
}

.step-resumo.total {
  font-weight: 700;
  font-size: 18px;
}

.finalizar-wrapper {
  display: flex;
  justify-content: center;
  margin: 60px 0;
}

.btn-finalizar {
  max-width: 420px;
  background: #e60000;
  color: #fff;
  border-radius: 40px;
  padding: 18px 24px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.btn-finalizar span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.9;
}


.resumo-col{
  opacity: .9;
}

.resumo-col.active{
  opacity: 1;
 pointer-events: auto;
  filter: none;
}

.linha-reserva {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
  align-items: center;
}

.linha-reserva h4 {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  font-weight: 600;
}

.linha-reserva input,
.linha-reserva select {
  height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.outra-localidade {
  grid-column: 1 / 3;
}




/* === PASSO 2 – LARGURA TOTAL === */
.step-viaturas {
  margin: 0px 0;
}

/* Conteúdo alinhado com o banner */
.step-viaturas-inner {
  max-width: 1200px;   /* usa o mesmo valor do banner */
  margin: 0 auto;
  padding: 0 20px;
}

.viaturas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.viatura-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.viatura-card button {
  margin-top: auto;
}



.resumo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;

  top: 20px;
  z-index: 50;
}

.resumo-col {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  opacity: 0.4;
}

.resumo-col.active {
  opacity: 1;
  border: 2px solid #e30613;
}

.resumo-header {
  background: #eee;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.resumo-col.active .resumo-header {
  background: #e30613;
  color: #fff;
}

.resumo-col.total {
  font-weight: bold;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.step-title {
  margin: 40px 0 24px;
  font-size: 28px;
  font-weight: 700;
}

.step-title,
.step-viaturas h2 {
  margin-top: 24px;
}

@media (max-width: 900px) {
  .viaturas-grid {
    grid-template-columns: 1fr;
  }
}

.reserva-steps {
  top: 120px;
}

/* PRE-RESERVA STICKY */
.pre-reserva {
  position: sticky;
  top: 90px; /* altura do header */
  z-index: 100;
  background: #f6f6f6;
}


.reserva-conteudo {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 120px;
}

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-box {
  background: #fff;
  padding: 32px;
  border-radius: 20px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.popup-box h3 {
  margin-bottom: 16px;
}

.popup-box p {
  margin-bottom: 24px;
}

/* MODAL - compatível com o teu HTML (.modal / .modal-content) */
.modal.hidden { display: none; }

.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* overlay + centragem */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 24px;

  background: rgba(0,0,0,0.55);
}

.modal-content{
  background: #fff;
  width: 90%;
  max-width: 520px;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);

  /* garante que não fica colado ao canto */
  margin: 0 auto;
}

/* botões do modal (os teus ids) */
.modal-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

#extras-voltar, #extras-continuar{
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
}

.extras-wrapper {
  margin-top: 40px;
  padding: 30px;
  border-radius: 20px;
  background: #f7f7f7;
}

.extras-wrapper.active {
  display: block;
}


/* =========================
   EXTRAS – LAYOUT BONITO
========================= */

.extras-wrapper {
  margin-top: 40px;
  background: #f7f7f7;
  padding: 30px;
  border-radius: 20px;
}

.extras-box {
  background: #fff;
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 25px;
}

.extras-box h3 {
  margin-bottom: 15px;
  font-size: 18px;
}

/* ===== Extras recomendados ===== */

.extra-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.extra-line:hover {
  border-color: #ff6b6b;
  background: #fff5f5;
}

.extra-line input {
  accent-color: #ff6b6b;
}


.franquia-box {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  background: #fafafa;
}

.franquia-box h4 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #333;
}

.step-resumo p {
  margin: 4px 0;
  font-size: 14px;
}

.step-resumo .empty {
  color: #999;
  font-style: italic;
}

.btn-finalizar.is-disabled,
.btn-finalizar:disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================
   RESERVA: 2 COLUNAS + RESUMO STICKY (LIMPO)
   ========================= */

/* wrapper: conteúdo à esquerda | resumo à direita */
.reserva-wrapper{
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;

  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
  align-items: start;
}

/* coluna do conteúdo */
.reserva-layout{
  grid-column: 1;
  min-width: 0;
  margin: 0;           /* neutraliza margens antigas */
  display: block;      /* neutraliza grids antigos */
}

/* coluna do resumo */
.resumo-reserva{
  grid-column: 2;
  position: sticky;
  top: 110px;          /* ajusta se o menu for mais alto/baixo */
  align-self: start;
  z-index: 5;

  display: flex;       /* os 4 blocos em VERTICAL */
  flex-direction: column;
  gap: 16px;

  overflow: visible;
}

/* nunca “esbater” o resumo */
.resumo-reserva .resumo-col{
  opacity: 1 !important;
  filter: none !important;
}

/* DESKTOP: conteúdo à esquerda e resumo à direita */
@media (min-width: 1100px){
  .reserva-wrapper{
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 30px;
    align-items: start;
  }

  .reserva-layout{ grid-column: 1; }
  .resumo-reserva{
    grid-column: 2;
    position: sticky;
    top: 110px;
    z-index: 5; 
  }
}

/* TABLET/MOBILE: resumo fixo e conteúdo com margem */
@media (max-width: 1099px){
  .resumo-reserva{
    position: fixed;
    top: 90px;     /* ajusta conforme o teu menu */
    right: 16px;
    width: 260px;  /* um pouco mais pequeno */
    z-index: 10;
  }

  /* dá espaço ao conteúdo para não ficar por baixo do resumo */
  .reserva-layout{
    margin-right: 290px;
  }
}

/* ===== RESUMO EM "CARROSSEL" (horizontal) ===== */
.resumo-reserva{
  /* mantém o sticky/fixed como já tens */
  display: block !important;
}

/* os 4 blocos em linha */
.resumo-reserva{
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  padding-bottom: 8px; /* espaço p/ a scrollbar não colar nos cards */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* cada card “encaixa” no scroll */
.resumo-reserva .resumo-col{
  flex: 0 0 260px;           /* largura de cada card (ajusta) */
  scroll-snap-align: start;
}

/* opcional: esconder scrollbar feia (Chrome/Edge) */
.resumo-reserva::-webkit-scrollbar{
  height: 8px;
}

/* ===== BARRA RESUMO EM LINHA (TOP BAR) ===== */
.resumo-reserva{
  position: fixed !important;
  top: 90px !important;       /* ajusta se o menu for mais alto/baixo */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;

  z-index: 20 !important;
  background: #fff;
  padding: 12px 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);

  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 16px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

/* cada card do resumo */
.resumo-reserva .resumo-col{
  flex: 0 0 280px;
  scroll-snap-align: start;
}

/* dá espaço ao conteúdo para não ficar escondido atrás da barra fixa */
.reserva-layout{
  padding-top: 180px!important; /* aumenta/diminui se precisares */
}

/* (opcional) esconder scrollbar feia */
.resumo-reserva::-webkit-scrollbar{
  height: 8px;
}

/* Altura reservada para a barra fixa do resumo + header */
:root{
  --top-offset: 320px; /* ajusta se precisares */
}

/* quando fizer scroll para os passos, deixa espaço no topo */
#passo-1, #passo-2, #passo-3, #passo-4{
  scroll-margin-top: var(--top-offset);
}

/* ===== COMPACTAR O QUADRO RESUMO ===== */

/* reduzir padding geral dos cards */
.resumo-reserva .resumo-col{
  padding: 12px 14px !important;
  min-height: auto !important;
  max-height: 180px !important;
}

/* reduzir altura do título */
.resumo-reserva .step-header{
  padding: 8px 10px !important;
  font-size: 14px !important;
}

/* remover sombras exageradas (opcional, ajuda a leitura atrás) */
.resumo-reserva .resumo-col{
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

/* reduzir altura da caixa branca do resumo */
.resumo-reserva .step-resumo{
  padding: 10px 12px !important;
  max-height: 150px !important;  /* ajusta: 90/110/130 */
  overflow: hidden !important;
 font-size: 13px;
  line-height: 1;
}

/* opcional: se preferires scroll dentro da caixinha em vez de cortar */
 /* .resumo-reserva .step-resumo{
  overflow: auto !important;
} */

.resumo-reserva .resumo-col{
  padding: 10px 12px !important;
}
.resumo-reserva .step-header{
  padding: 8px 10px !important;
  font-size: 14px !important;
}

/* =========================
   AJUSTES FINOS DO RESUMO
   ========================= */

/* texto base do resumo */
.resumo-reserva .step-resumo {
  font-size: 12px !important;   /* antes devia estar ~15/16 */
  line-height: 0.6 !important;
}

/* títulos (Levantamento / Devolução) */
.resumo-reserva .step-resumo strong {
  font-size: 13px !important;
}

/* reduzir espaço entre linhas */
.resumo-reserva .step-resumo br {
  line-height: 0.2;
}

/* reduzir espaçamento interno geral */
.resumo-reserva .step-resumo {
  padding: 8px 10px !important;
}

/* header do passo (1. Escolha Local...) */
.resumo-reserva .step-header {
  font-size: 14px !important;
  padding: 6px 10px !important;
}

/* reduzir altura visual dos cards */
.resumo-reserva .resumo-col {
  padding: 8px !important;
}


/* viatura selecionada */
.viatura-card.selected{
  border: 2px solid #e30613;
}

/* =========================
   PASSO 3 — PACKS (BÁSICO / SEGURO / PREMIUM)
   (bloco único, sem duplicações)
   ========================= */

/* o PASSO 3 deve usar a largura toda da coluna do conteúdo */
.insurance-section{

  margin: 40px 0;
  padding: 0;
}

/* IMPORTANTE: neutraliza o .container só dentro do PASSO 3 */
.insurance-section > .container{
  max-width: none;
  margin: 0;
  padding: 0;
  display: block; /* evita flex/centragens esquisitas vindas do .container global */
}

.section-title{
  text-align: left;   /* podes trocar para center se quiseres */
  font-size: 32px;
  margin-bottom: 24px;
  font-weight: 700;
}

/* Grid dos 3 packs */
#passo-3 .insurance-cards{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Card base */
#passo-3 .insurance-card{
  width: 100%;
  border: 2px solid #000;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  position: relative;
}

/* Header com “corte” */
.insurance-header{
  background: #c9c9c9;
  padding: 30px 20px 60px;
  text-align: center;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}

.insurance-header h3{
  margin: 0;
  font-size: 22px;
  letter-spacing: 1px;
}

.insurance-header .price{
  font-size: 36px;
  font-weight: 700;
  margin-top: 10px;
}

.insurance-card ul{
  list-style: none;
  padding: 30px;
  margin: 0;
}

.insurance-card ul li{
  margin-bottom: 15px;
  font-size: 15px;
}

/* Best Seller */
.insurance-card.highlight{
  border-color: #e30613;
  transform: scale(1.05);
}

/* Pack selecionado */
.insurance-card.active{
  border-color: #e30613;
  box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.2);
  transform: scale(1.03);
}

/* Badge */
.insurance-card .badge{
  position: absolute;
  top: 15px;
  right: 15px;
  background: #2ecc71;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 900px){
  .insurance-cards{
    grid-template-columns: 1fr;
  }

  .insurance-card.highlight,
  .insurance-card.active{
    transform: none;
  }
}

/* PASSO 3 — força o layout dos packs a ocupar a largura e distribuir */
#passo-3 .insurance-section,
#passo-3 .insurance-section > .container,
#passo-3 .step.step-3{
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important; /* anula text-align:center herdado de .step */
  background: transparent !important; /* anula fundo herdado de .step */
  padding: 0 !important; /* evita padding estranho do .step */
}

/* aqui é onde os 3 packs se distribuem */
#passo-3 .insurance-cards{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: stretch;
  justify-content: stretch;  /* garante que ocupa tudo */
}

/* garante que cada card estica dentro da coluna */
#passo-3 .insurance-card{
  width: 100% !important;
  margin: 0 !important;
}

/* DEBUG: garantir que os packs aparecem */
#passo-3 .insurance-cards{ display: grid !important; }
#passo-3 .insurance-card{ display: block !important; }

/* ==== RESERVA: agora é 1 coluna (resumo está no topo fixo) ==== */
.reserva-wrapper{
  display: block !important;      /* mata o grid 603px 360px */
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.reserva-layout{
  width: 100% !important;
  max-width: 1200px;
  margin: 0 auto;
}

/* opcional: garantir que o passo 3 usa a largura toda */
#passo-3 .insurance-section,
#passo-3 .insurance-section > .container,
#passo-3 .step.step-3{
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Bloco delimitado - Reduzir Franquia */
.franchise-block{
  border: 2px solid #e6e6e6;
  border-radius: 16px;
  padding: 18px;
  background: #fafafa;
  margin: 18px 0 22px;
}

.franchise-head h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
}

.franchise-sub{
  margin: 0 0 14px;
  font-size: 13px;
  opacity: .75;
}

.franchise-options{
  display: grid;
  gap: 10px;
}

/* Reaproveita o teu estilo de “linha” */
.franchise-block .extra-line{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}

.insurance-card{
  pointer-events: auto !important;
  cursor: pointer;
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 992px){
  .form-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.form-card{
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.form-card h3{
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  border-bottom: 2px solid #eee;
  padding-bottom: 8px;
}

.form-row{
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.form-row.dual{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-row label{
  font-size: 13px;
  margin-bottom: 4px;
}

.form-row input,
.form-row textarea{
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
}

.form-terms{
  margin: 24px 0;
  font-size: 14px;
}

#btn-confirmar{
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  display: block;
}

/* Esconder Passo 4 por defeito */
#passo-4 {
  display: none;
}

/* ===== Extras complementares (cards) ===== */


.extra-card {
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  background: #fff;

 display: flex;              /* 👈 ISTO */
  flex-direction: column;     /* 👈 ISTO */
  align-items: center;        /* 👈 ISTO */
  justify-content: center;
}

.extra-card img {
  width: auto;        /* 👈 AQUI está o tamanho */
  max-height: 160px;
  margin-bottom: 14px;
  object-fit: contain;
}

.extra-card span {
  display: block;
  text-align: center;
  line-height: 1.4;
}

.extra-card strong {
  color: #e60000;
}

.extra-card input {
  display: none; /* escondemos o checkbox feio */
}

.extra-card:hover {
  border-color: #e60000;
  transform: translateY(-2px);
}

.extra-card input:checked + img,
.extra-card input:checked ~ span {
  opacity: 1;
}

.extra-card input:checked ~ span {
  font-weight: 600;
}

.extra-card:has(input:checked) {
  border-color: #e60000;
  box-shadow: 0 0 0 2px rgba(230,0,0,0.1);
}

/* ===== EXTRAS COMPLEMENTARES: 3 colunas ===== */
.extras-grid,
.extras-grid.extras-grid { /* reforço de prioridade */
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 2fr)) !important;
  gap: 18px !important;
  align-items: stretch;
}

@media (max-width: 900px){
  .extras-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px){
  .extras-grid{
    grid-template-columns: 1fr !important;
  }
}

/* cada cartão */
.extras-grid .extra-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 18px;
  background: #fff;

  width: auto !important;   /* evita ocupar 100% */
  max-width: 100%;
  box-sizing: border-box;
}

/* imagem responsiva */
.extras-grid .extra-card img{
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}

/* texto centrado */
.extras-grid .extra-card span{
  text-align: center;
  line-height: 1.2;
}


/* =========================================================
   FIX: separar estilos dos 2 modais (Horário vs Extras)
   Cola no FIM do style.css
========================================================= */

/* ===== MODAL HORÁRIO (usa overlay + box) ===== */
#horario-modal.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: transparent;          /* não usar background aqui */
  display: block;                   /* não usar flex aqui */
  padding: 0;
}

#horario-modal .modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

#horario-modal .modal-box{
  position: relative;
  background: #fff;
  width: 90%;
  max-width: 420px;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

#horario-modal.hidden{ display: none !important; }


/* ===== MODAL EXTRAS (usa modal-content) ===== */
#extras-modal.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;

  background: rgba(0,0,0,0.55);
}

#extras-modal .modal-content{
  background: #fff;
  width: 90%;
  max-width: 520px;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

#extras-modal.hidden{ display: none !important; }

/* ===== Passo 4 – cabeçalho do cartão com switch ===== */
.form-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.switch-inline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  user-select: none;
}

.switch-inline input{
  width: 18px;
  height: 18px;
}

/* ===== Rodapé do formulário ===== */
.form-footer{
  margin-top: 18px;
  padding: 18px 0 0;
  border-top: 1px solid #eee;
}

.terms-line{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 14px;
}

.terms-line a{
  color: #e30613;
  font-weight: 700;
  text-decoration: none;
}

.terms-line a:hover{ text-decoration: underline; }

/* ===== Botão Confirmar Reserva (profissional) ===== */
.btn-confirmar{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;

  border: 0;
  border-radius: 999px;
  padding: 16px 22px;

  background: #e30613;
  color: #fff;
  cursor: pointer;

  font-size: 16px;
  font-weight: 800;
  letter-spacing: .3px;

  box-shadow: 0 14px 30px rgba(227,6,19,.25);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.btn-confirmar span{
  display: block;
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
  margin-top: 4px;
}

.btn-confirmar:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(227,6,19,.30);
}

.btn-confirmar:active{
  transform: translateY(0px);
}

.btn-confirmar.is-disabled,
.btn-confirmar:disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.form-note{
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

.form-row.dual{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.form-row.dual > div{
  min-width: 0;
}

/* === Estimativa Reserva (fix de espaçamento) === */
#estimativa-reserva{
  line-height: 1.25;
}

#estimativa-reserva .linha{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 12px;
  padding: 6px 0;
}

#estimativa-reserva .linha span{
  white-space: nowrap;
}

#estimativa-reserva .linha strong{
  white-space: nowrap;
  font-weight: 700;
}

#estimativa-reserva .total{
  font-size: 15px;
  font-weight: 800;
}

#estimativa-reserva .muted{
  opacity: .8;
  font-size: 12px;
}
/* ==================================================
   FIX DEFINITIVO — RESUMO EM BARRA TOPO (HORIZONTAL)
   (colocar SEMPRE no fim do CSS)
   ================================================== */

:root{
  --top-header-h: 90px;      /* altura do header/menu */
  --resumo-h: 170px;         /* altura total ocupada pelo resumo */
  --resumo-card-w: 280px;
  --resumo-gap: 18px;
}

/* desativar layout 2 colunas antigo */
.reserva-wrapper{
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* barra do resumo fixa no topo */
.resumo-reserva{
  position: fixed !important;
  top: var(--top-header-h) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;

  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: var(--resumo-gap) !important;

  background: #fff !important;
  padding: 12px 20px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* cada cartão do resumo */
.resumo-reserva .resumo-col{
  flex: 0 0 var(--resumo-card-w) !important;
  max-height: none !important;
  overflow: visible !important;
}

/* remover min-height global do .step-resumo dentro do resumo */
.resumo-reserva .step-resumo{
  min-height: 0 !important;
  height: 120px !important;          /* todos com a mesma altura */
  padding: 10px 12px !important;
  line-height: 1.25 !important;
  font-size: 13px !important;
  overflow: hidden !important;
}

/* passo 3 lista mais compacta */
#resumo-passo-3 ul{ margin: 6px 0 0 !important; padding-left: 18px !important; }
#resumo-passo-3 li{ margin: 2px 0 !important; }

/* passo 4: permitir scroll interno sem aumentar o card */
.resumo-reserva .resumo-col[data-step="4"] .step-resumo{
  overflow-y: auto !important;
}

#estimativa-reserva{ font-size: 12px !important; line-height: 1.12 !important; }
#estimativa-reserva .linha{ margin: 3px 0 !important; gap: 10px !important; }
#estimativa-reserva hr{ margin: 6px 0 !important; }
#estimativa-reserva .muted{ font-size: 11px !important; margin-top: 2px !important; }
#estimativa-reserva .linha.total{ font-size: 13px !important; }


/* em ecrãs mais pequenos a barra ocupa mais */
@media (max-width: 900px){
  :root{ --resumo-h: 230px; }
  .resumo-reserva{ justify-content: flex-start !important; }
}

/* FIX: Passo 1 precisa de mais altura para mostrar Levantamento + Devolução */
.resumo-reserva .resumo-col[data-step="1"] .step-resumo{
  max-height: 170px !important;   /* aumenta só aqui */
  height: auto !important;
  overflow: visible !important;
}

/* Passo 1 igual aos outros (sem barra/scroll interno) */
.resumo-reserva .resumo-col[data-step="1"] .step-resumo{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  min-height: 120px !important;   /* iguala a “caixa” aos outros */
}

/* garantir que nenhum estilo anterior está a encolher só o passo 1 */
.resumo-reserva .resumo-col[data-step="1"]{
  height: auto !important;
}

/* feedback de erro */
.is-invalid{
  border: 2px solid #e53935 !important;
  box-shadow: 0 0 0 3px rgba(229,57,53,.12);
}

/* === CENTRAR BOTÕES DE RESERVA (PASSO 2 e FINAL) === */
.btn-center {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 50px 0;
}

.btn-center button {
  width: 100%;
  max-width: 420px;   /* 👈 isto é o segredo */
}

.icone {
  font-size: 48px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .icone {
    font-size: 42px;
  }
}

/* ===== FIX RESPONSIVO RESERVA (topo + viaturas) ===== */
html, body { overflow-x: hidden; }

/* Topo dos passos/resumos: de 4/5 colunas para 2 */
@media (max-width: 1100px) {
  .resumo-4col,
  .resumo-grid,
  .reserva-steps,
  .steps-row,
  .summary-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile: 1 coluna */
@media (max-width: 700px) {
  .resumo-4col,
  .resumo-grid,
  .reserva-steps,
  .steps-row,
  .summary-row,
  .reserva-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Passo 2 (viaturas): 1 coluna em ecrãs pequenos */
@media (max-width: 900px) {
  .viaturas-grid
}

/* ======================================================
   FIX RESPONSIVO RESERVA (Resumo + Viaturas)
   COLAR NO FIM do style.css
   ====================================================== */

/* 1) RESUMO: em ecrã estreito, deixa de ter cards fixos e acompanha a largura */
@media (max-width: 1100px) {

  .resumo-reserva{
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    /* mantém barra no topo, mas ajusta à largura */
    display: flex !important;
    flex-wrap: wrap !important;          /* ✅ quebra para 2 linhas */
    justify-content: center !important;
    gap: 12px !important;

    overflow-x: hidden !important;       /* ✅ evita “sair fora” */
  }

  .resumo-reserva .resumo-col{
    flex: 1 1 220px !important;          /* ✅ adapta (mínimo 220px) */
    max-width: 420px !important;
    min-width: 0 !important;             /* ✅ permite encolher */
  }
}

/* 2) MOBILE: resumo em 1 coluna */
@media (max-width: 700px){
  .resumo-reserva .resumo-col{
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* Passo 2 (viaturas) - reserva */
@media (max-width: 900px) {
  .viaturas-grid {
    grid-template-columns: 1fr !important;
  }
}

/* reserva */
@media (max-width: 1100px){
  .viaturas-grid{
    grid-template-columns: 1fr !important;
  }
}

/* FROTA: 2 colunas até tablet, 1 coluna só em mobile */
@media (max-width: 768px){
  .frota-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Evita que a barra do resumo apanhe cliques fora dos cartões */
.resumo-reserva { pointer-events: none; }
.resumo-reserva .resumo-col { pointer-events: auto; }

/* Não deixar a barra do resumo bloquear cliques no conteúdo */
.resumo-reserva {
  pointer-events: none;
}

/* Mas os próprios cards do resumo continuam clicáveis */
.resumo-reserva .resumo-col,
.resumo-reserva .resumo-col * {
  pointer-events: auto;
}

/* Centrar botão "Confirmo a Reserva" (Passo 4) */
#passo-4 .btn-confirmar-wrapper,
#passo-4 .btn-center,
#passo-4 .confirmar-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

#passo-4 #btn-confirmar {
  max-width: 420px;
  width: 100%;
}

/* Modais - layout consistente (horário e one way) */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal.hidden { display: none; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.modal-box {
  position: relative;
  width: min(560px, calc(100% - 40px));
  background: #fff;
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  text-align: center;
}

.modal-icon { font-size: 20px; margin-bottom: 8px; }
.btn-modal { padding: 8px 14px; border-radius: 8px; cursor: pointer; }

/* ================================
   SLIDER FROTA — VERSÃO LIMPA FINAL
   (UMA ÚNICA FONTE DE VERDADE)
   ================================ */

.frota-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px){
  .frota-grid{ grid-template-columns: 1fr; }
}

/* card */
.frota-card{
  display: flex;
  flex-direction: column;
}

/* ---------- SLIDER ---------- */
.viatura-slider{
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}

.vs-viewport{
  height: 260px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}

@media (max-width: 600px){
  .vs-viewport{ height: 220px; }
}

.vs-track{
  display: flex;
  height: 100%;
  transition: transform 0.35s ease;
}

.vs-track img{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* nunca corta */
  display: block;
  transform: none;       /* mata scales */
}

/* setas */
.vs-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.9);
  cursor: pointer;
  z-index: 5;
}
.vs-prev{ left: 10px; }
.vs-next{ right: 10px; }

/* dots */
.vs-dots{
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.vs-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: #cfcfcf;
}
.vs-dot.is-active{ background: #2f6f52; }

/* texto */
.modelo{
  margin: 4px 0;
}
.modelo-sub{
  font-weight: 400;
  opacity: .8;
}
.preco-dia{
  margin: 0 0 8px;
}
details.includes{ margin-top: 4px; }

/* =========================
   FIX: PASSO 2 (VIATURAS) — IMAGENS A ESTOURAR O LAYOUT
   ========================= */

/* Garante que cada card contém a imagem (sem sobreposição) */
.viatura-card{
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  overflow: hidden; /* impede a imagem de sair do card */
}

/* Conteúdo do card centrado e consistente */
.viatura-info{
  text-align: center;
}

/* A regra mais importante: a imagem adapta-se ao card */
.viatura-info img{
  display: block;
  width: 100%;
  max-width: 520px;   /* limita para não ficar gigante em ecrãs grandes */
  height: 280px;      /* <-- aumenta aqui (260–320 costuma ficar top) */
  object-fit: contain;
  margin: 0 auto 14px;
}

/* Lista mais limpa (evita espaçamentos estranhos) */
.viatura-info ul{
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
}
.viatura-info li{
  margin: 6px 0;
}

/* PASSO 2 — botão "Continuar Reserva" sempre centrado */
#passo-2 .viaturas-grid .btn-center{
  grid-column: 1 / -1;      /* ✅ ocupa todas as colunas da grid */
  display: flex;
  justify-content: center;  /* ✅ centra o botão */
  width: 100%;
  margin: 50px 0;           /* ajusta se quiseres mais/menos espaço */
}

#passo-2 .viaturas-grid .btn-center .btn-reserva{
  width: 100%;
  max-width: 420px;         /* ✅ limite igual ao que querias */
}

/* PASSO 2 — reduzir espaço antes/depois do botão Continuar Reserva */
#passo-2 .viaturas-grid {
  margin-bottom: 20px;   /* antes estava a empurrar demais */
}

/* wrapper do botão */
#passo-2 .btn-center {
  margin: 24px 0 32px;   /* ↓ menos espaço em cima e em baixo */
}

/* último card não empurra o botão */
#passo-2 .viatura-card {
  margin-bottom: 0;
}

/* PASSO 3 — reduzir espaço acima do título */
#passo-3 .step-title,
#passo-3 h2 {
  margin-top: 24px;      /* antes estava grande */
}

/* ==================================================
   COMPACTAR ESPAÇOS — PASSO 2 (botão) + PASSO 3 (título)
   ================================================== */

/* 1) PASSO 2: menos espaço antes/depois do botão */
#passo-2 .btn-center{
  margin: 18px 0 18px !important;   /* antes estava 50px 0 */
}

/* se o botão herda margin noutro lado, neutraliza também */
#passo-2 .btn-center .btn-reserva,
#passo-2 .btn-center button{
  margin: 0 !important;
}

/* 2) Título do PASSO 3: menos “ar” acima */
#passo-3 .section-title,
#passo-3 h2{
  margin-top: 18px !important;      /* antes vinha 40px+ */
  margin-bottom: 18px !important;   /* antes vinha 50px */
}

/* 3) PASSO 3: reduzir margem do bloco inteiro */
#passo-3 .insurance-section{
  margin-top: 18px !important;      /* antes 40px auto */
  margin-bottom: 24px !important;
}

.car-features {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: inline-block; /* evita centrar em full width */
}

.car-features li {
  display: flex;
  align-items: center;
  gap: 8px;              /* espaço entre ícone e texto */
  text-align: left;
  margin-bottom: 6px;
  font-size: 15px;
}

.car-features li span {
  line-height: 1.2;
}

/* Card da viatura – reduzir espaço imagem -> título */
.card img,
.vehicle-card img,
.car-card img {
  margin-bottom: 8px !important;
}

/* Reduzir espaço do título */
.card h3,
.vehicle-card h3,
.car-card h3 {
  margin-top: 4px !important;
  margin-bottom: 6px !important;
}

/* Reduzir espaço entre título e lista */
.card ul,
.vehicle-card ul,
.car-card ul {
  margin-top: 0 !important;
}

/* Alinhar lista e eliminar espaço extra */
.card ul li,
.vehicle-card ul li,
.car-card ul li {
  margin-bottom: 4px;
}

/* =========================
   PASSO 2 – AJUSTES DE ESPAÇAMENTO (VIATURA)
========================= */

/* reduzir espaço abaixo da imagem */
.viatura-card img {
  margin-bottom: 8px !important;
}

/* título da viatura */
.viatura-card h3 {
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}

/* lista de características */
.viatura-card ul {
  margin-top: 4px !important;
}

/* itens da lista (ícones + texto) */
.viatura-card ul li {
  margin: 4px 0 !important;
  line-height: 1.2;
}

/* reduzir ainda mais o espaço entre a imagem e o título */
.viatura-card img {
  display: block;
  margin-bottom: -6px !important;
}

/* segurança extra caso a imagem esteja dentro de <figure> */
.viatura-card figure {
  margin-bottom: 0 !important;
}

/* =========================
   PASSO 2 — FIX CLIQUES + SELEÇÃO
   ========================= */

/* Garantir que nada está a bloquear cliques dentro dos cards */
#passo-2, 
#passo-2 * {
  pointer-events: auto;
}

/* Card selecionado (vermelho, como nos seguros) */
#passo-2 .viatura-card.is-selected{
  border: 2px solid #e30613 !important;
  box-shadow: 0 10px 28px rgba(227, 6, 19, .12) !important;
}

/* Garantir que o botão/link é clicável e fica acima */
#passo-2 .viatura-card{
  position: relative;
}

#passo-2 .viatura-card a,
#passo-2 .viatura-card button,
#passo-2 .viatura-card input[type="submit"]{
  position: relative;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto !important;
}