/* ===== Seguros.Store — estilos (mobile first) ===== */

:root {
  --brand: #b3262b;        /* vermelho da logo */
  --brand-dark: #8e1c20;
  --navy: #12406e;         /* azul dos botões atuais */
  --navy-dark: #0c2d4f;
  --whats: #25d366;
  --whats-dark: #1da851;
  --text: #1f2933;
  --radius: 14px;
  --nav-h: 64px;
}

html { scroll-padding-top: var(--nav-h); }

body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
  padding-top: var(--nav-h);
}

h1, h2, h3, .navbar-brand, .section-title {
  font-family: "Montserrat", system-ui, sans-serif;
}

/* ---------- Botões ---------- */
.btn { border-radius: 10px; font-weight: 600; }

.btn-whats {
  background: var(--whats);
  border-color: var(--whats);
  color: #fff;
}
.btn-whats:hover, .btn-whats:focus {
  background: var(--whats-dark);
  border-color: var(--whats-dark);
  color: #fff;
}

.btn-brand {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: #fff;
}

.text-brand { color: var(--brand) !important; }

/* ---------- Menu ---------- */
.navbar { min-height: var(--nav-h); }
.navbar-brand { color: var(--text); }
.navbar .nav-link { font-weight: 500; }
.navbar .nav-link.active { color: var(--brand); }

/* ---------- Hero ---------- */
.hero {
  min-height: calc(100svh - var(--nav-h));
  padding: 3rem 0;
  background:
    linear-gradient(180deg, rgba(12, 45, 79, .85), rgba(12, 45, 79, .65)),
    url("../assets/images/mbr-5-1920x1280.webp") center / cover no-repeat;
}
.hero h1 { font-size: clamp(1.8rem, 6vw, 3.2rem); line-height: 1.15; }
.text-highlight { color: #ffd166; }
.hero-trust li { opacity: .9; }
.hero-trust i { color: #ffd166; margin-right: .25rem; }

/* ---------- Operadoras ---------- */
.logos img {
  max-height: 64px;
  width: auto;
  filter: grayscale(1);
  opacity: .85;
  transition: filter .2s, opacity .2s;
}
.logos img:hover { filter: none; opacity: 1; }

/* ---------- Seções ---------- */
.section { padding: 3.5rem 0; }
.section-title {
  font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  margin-bottom: .75rem;
}
.section-brand {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
}

/* ---------- Cards de produto ---------- */
.product-card {
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
  transition: transform .2s, box-shadow .2s;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
}
.product-card .card-img-top { aspect-ratio: 3 / 2; object-fit: cover; height: auto; }
.product-icon {
  width: 48px; height: 48px;
  margin-top: -40px; margin-bottom: .75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 0 0 4px #fff;
}

/* Lista com check */
.list-check { list-style: none; padding-left: 0; }
.list-check li { position: relative; padding-left: 1.6rem; margin-bottom: .4rem; }
.list-check li::before {
  content: "\F26B";             /* bi-check-circle-fill */
  font-family: "bootstrap-icons";
  position: absolute; left: 0; top: 0;
  color: var(--whats-dark);
}
.list-check-light li::before { color: #ffd166; }

/* ---------- Passos ---------- */
.step {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font: 800 1.4rem "Montserrat", sans-serif;
}

/* ---------- Depoimentos ---------- */
.testimonial {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
  margin: 0;
}
.stars { color: #f5a623; letter-spacing: 2px; margin-bottom: .5rem; }

/* ---------- Por que falar com a gente ---------- */
.reason-icon {
  width: 48px; height: 48px;
  margin-bottom: .75rem;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #fbeaea;
  color: var(--brand);
  font-size: 1.4rem;
}

/* ---------- Formulário / FAQ ---------- */
#formCotacao { border-radius: var(--radius); }
.form-control, .form-select { min-height: 48px; } /* alvo de toque confortável */
.accordion-button { font-weight: 600; }
.accordion-button:not(.collapsed) { color: var(--navy); background: #eef3f9; }

/* ---------- Rodapé ---------- */
.footer { background: #0b1f35; padding-bottom: 6rem !important; }
.footer ul a { display: inline-block; padding: .5rem 0; } /* alvo de toque no celular */

/* ---------- WhatsApp flutuante ---------- */
.whats-float {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 1030;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--whats);
  color: #fff;
  font-size: 1.8rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  text-decoration: none;
}
.whats-float:hover { background: var(--whats-dark); color: #fff; }

/* ---------- Cookies ---------- */
.cookie-banner {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 1040;
  background: #fff;
  border-radius: var(--radius);
  padding: 1rem;
}
.cookie-banner .btn { min-height: 44px; }

/* ---------- Telas maiores ---------- */
@media (min-width: 768px) {
  .section { padding: 5rem 0; }
  .cookie-banner { left: auto; right: 24px; bottom: 24px; max-width: 380px; }
  .footer { padding-bottom: 2rem !important; }
}

@media (min-width: 992px) {
  .hero { min-height: 640px; }
  .logos img { max-height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}