/* ============================= */
/* 1. Variáveis CSS e Breakpoints */
:root {
  /* Brand Colors */
  --color-brand-primary-700: #0a5bb1;
  --color-brand-primary-500: #1090d0;

  --fa-font-solid:       normal 900 1em/1 "Font Awesome 6 Solid";
  --fa-font-regular:     normal 400 1em/1 "Font Awesome 6 Regular";
  --fa-font-light:       normal 300 1em/1 "Font Awesome 6 Light";
  --fa-font-thin:        normal 100 1em/1 "Font Awesome 6 Thin";
  --fa-font-duotone:     normal 900 1em/1 "Font Awesome 6 Duotone";
  --fa-font-sharp-solid: normal 900 1em/1 "Font Awesome 6 Sharp";
  --fa-font-sharp-regular: normal 400 1em/1 "Font Awesome 6 Sharp";
  --fa-font-sharp-light:   normal 300 1em/1 "Font Awesome 6 Sharp";
  --fa-font-sharp-thin:    normal 100 1em/1 "Font Awesome 6 Sharp";
  --fa-font-brands:        normal 400 1em/1 "Font Awesome 6 Brands";

  /* ==== Breakpoints ==== */
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
  /* Support Colors */
  --color-support-yellow-500: #ffcc00;
  --color-support-red-700: #c00811;
  --support-green-700: #21a366;

  /* Neutral */
  --color-neutral-black: #191c1f;
  --color-neutral-white: #ffffff;
  --color-neutral-200: #dbdde5;
  --color-neutral-300: #686a74;
  --color-neutral-500: #5e6475;

  /* Gradients */
  --gradient-1: linear-gradient(
    180deg,
    var(--color-support-yellow-500) 0%,
    #e69600 100%
  );
  --gradient-hipercapbrasil: linear-gradient(
    180deg,
    #0d1c42 0%,
    #003281 15%,
    #3a60d0 25%,
    #c00811 100%
  );

  /* Typography */
  --font-family-heading: "Montserrat Alternates", sans-serif;
  --font-family-body: "Montserrat", sans-serif;

  /* Spacing & Radius */
  --gap: 1.25rem;
  --radius: 0.5rem;

  /* Content Width & Side-Padding */
  --max-content-width: 1320px;
  --side-padding: 1rem;

/* MOBILE FIRST! */
body {
  font-family: 'DM Sans', sans-serif;
  margin: 0;
  background: #fff;
  color: #232323;
}
.header {
  background: #fff;
  box-shadow: 0 2px 8px #00000008;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 0.45em solid #1350d3;
}
.header-container {
  margin: 0;
  padding: 0 12px;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  gap: 8px;
  min-height: 90px;
  position: relative;
}
.logo-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.revendedor-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.logo-2 {
  height: 3.5em;
  width: auto;
}
@media (max-width: 768px) {
  .logo-container {
    left: 0;
    transform: none;
    position: relative;
    justify-content: space-between;
    
    width: 100%;
    padding: 0 1em;
  }
  .header-container {
    justify-content: space-between;
    padding: 0 12px;

  }
  .revendedor-container {
    
    flex-direction: column;
    align-items: center;

  
  }
  .revendedor-container span {
    font-size: 0.8em !important;
    margin: 0 !important;
    width: auto !important;
  }
  .logo-container span {
    font-size: 0.9em;
  }
}
.logo-container span {
  font-size: 0.85em;
  color: #111;
  margin: 1em;
  width: 100%;
}
.logo {
  height: 34px;
  width: auto;
}
.logo-2 {
  height: 2.5em;
  width: auto;
}
.desktop-nav {
  display: flex;
  gap: 10px;
  margin-right: 12px;
  margin-left: 8px;
}
.menu-btn {
  padding: 7px 18px;
  font-size: 0.99em;
  font-weight: 700;
  text-decoration: none;
  border-radius: 18px;
  border: none;
  box-shadow: none;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: inline-block;
}
.menu-btn.roxo {
  background: #2122a3;
  color: #fff;
  display: none; /* no mobile */
}
.menu-btn.vermelho {
  display: none; /* no mobile */
  background: #df1111;
  color: #fff;
}

/* BANNER SEMPRE TOTAL */
.main-banner {
  width: 100%;
  
  background-image: url('/img/bg-azul.jpg');
  
}
.banner-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  object-fit: contain;
}

/* CHAMADA AZUL E VERMELHA */
.cta-section, .hospital-section {
  padding: 22px 0 0 0;
  color: #fff;
  background-size: cover;
  background-position: center;
  text-align: center;
}
.cta-content, .hospital-content {
  max-width: 96vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto;
  border-radius: 16px;
  padding: 16px 8px 18px 8px;
}
.cta-content hr {
  width: 100%;
  max-width: 100%;
  height: 1px;
  background: #fff;
  border: none;
  margin: 12px auto;
}
.cta-title {
  display: block;
  color: #fff;
  opacity: 0.9;
  font-weight: 700;
  font-size: 1.5em;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.cta-content h2 {
  margin: 0 0 12px 0;
  font-size: 1.57em;
  font-weight: 700;
}
.cta-btn.vermelho {
  display: inline-block;
  margin: 0 0 0 0;
  font-size: 1.5em;
  padding: 10px 4em;
  border-radius: 32px;
  background: #f22c2d;
  color: #fff;
  font-weight: 700;
  border: none;
  text-decoration: none;
  outline: none;
  transition: background 0.18s, transform 0.16s, box-shadow 0.18s;
  box-shadow: 0 2px 10px #f22c2d20;
  cursor: pointer;
}
.cta-btn.vermelho:active { filter: brightness(.95); }
.cta-desc {
  font-size: 0.92em;
  color: #fff;
  font-weight: 400;
}
.cta-desc b { color: #fff; }
.hospital-logo { max-width: 50%; margin-bottom: 8px;}
.hospital-desc { font-weight: 700; font-size: 0.98em; margin-bottom: 7px; line-height: 1.32;}
.hospital-alert { color: #fffbe8; font-size: .93em; margin-bottom: 14px;}
.btn-azul {
  background: #0096db;
  color: #fff;
  border-radius: 19px;
  border: none;
  padding: 7px 14px;
  font-weight: 700;
  display: inline-block;
  font-size: 0.95em;
  transition: background 0.15s;
  box-shadow: 0 2px 10px #0096db25;
  text-decoration: none;
  cursor: pointer;
}

/* VIDEO E SORTEIO */
.sorteio-section {
  background: #fff;
  padding: 2rem 0 2rem 0;
}
.sorteio-container {
  width: 98vw;
  min-height: 60vh;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6rem;
}
.sorteio-video {
  width: 25vw;
  background: #ddd;
  border-radius: 12px;
  overflow: hidden;
}
.sorteio-video iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 10px #0000001a;
}
.sorteio-info {
  text-align: left;
  width: 25vw;
}
@media (max-width: 768px) {
  .sorteio-container {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .sorteio-info {
    text-align: center;
    min-width: 0;
    width: 100%;
  }
  .sorteio-video {
    width: 100%;
    max-width: 75%;
    min-width: 0;
    margin-bottom: 16px;
  }
  .sorteio-info h3 {
    font-size: 1.2em;
    margin-bottom: 8px;
    text-align: center;
    width: 100%;
  }
}
.sorteio-info h2 {
  font-size: 2.5em;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.5px;

}
}
.sorteio-info h3 {
  font-size: 1em;
  font-weight: 700;
  margin-bottom: 0;
  letter-spacing: 0.4px;
  width: fit-content;
}
.sorteio-info h2 {
  margin: 4px 0 7px 0;
  font-size: 4em;
  font-weight: 700;
  width: fit-content;
}
.logos-transmissao {
  height: auto;
  width: 50%;
  margin-top: 6px;
}

/* FAQ */
.faq-section {
  background: #f9f9f9;
  padding: 20px 0 32px 0;
  max-width: 100vw;
  display: flex;
  justify-content: center;
}
.faq-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50vw;
  padding: 18px 0 10px 0;
}
@media (max-width: 768px) {
  .faq-container {
    width: 90vw;
    padding: 18px 0 10px 0;
  }
}
.faq-title {
  text-align: center;
  font-size: 1em;
  font-weight: 700;
  color: #111;
  opacity: 0.9;
  letter-spacing: 1px;
  margin-bottom: 0;
}
.faq-desc {
  text-align: center;
  font-size: 1.25em;
  line-height: 28px;
  color: #111;
  font-weight: 700;
  margin-bottom: 2rem;
}
.faq-accordion { 
  margin: 0;
  padding: 0;
  width: 100%;
   }
.faq-item { 
  border-bottom: 1px solid #ededed;
  margin-bottom: 0;
}
.faq-item:last-child { border-bottom: none;}
.faq-question {
  width: 100%;
  text-align: left;
  background: #f8f8f8;
  color: rgb(26, 21, 16);
  font-weight: 300;
  border: none;
  line-height: 22.8px;
  padding: 14px 10px;
  font-size: 19px;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  margin: 0;
  transition: background 0.17s, color 0.17s;
  box-shadow: none;
  position: relative;
  font-family: 'DM Sans', sans-serif;
}
.faq-question:after {
  content: '+';
  position: absolute;
  right: 16px;
  font-size: 1.18em;
  top: 11px;
  color: #bababa;
  transition: transform .16s;
}
.faq-question.active:after {
  content: '-';
  color: #f22c2d;
  transform: rotate(180deg);
}
.faq-question.active,
.faq-question:hover {
  color: #f22c2d;
}
.faq-answer {
  display: none;
  padding: 9px 10px 10px 10px;
  font-size: 0.94em;
  color: #333;
  border-radius: 0 0 8px 8px;
  margin-bottom: 0;
  font-weight: 400;
  animation: accordionOpen .26s;
}
@keyframes accordionOpen {
  0% { opacity: 0; transform: translateY(-12px);}
  100% { opacity: 1; transform: none;}
}

/* RODAPÉ */
.footer {
  background: #f22c2d;
  color: #fff;
  text-align: center;
  padding: 19px 3vw 7px 3vw;
}
.footer-container {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 4rem;
  }
}
.footer-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 14px;
}
.footer-logo {
  height: 29px;
  width: auto;
}
.footer-logo-capemisa {
  height: 28px;
  width: auto;
  margin-bottom: 8px;
  margin-top: 5px;
}
.footer-legal {
  color: #fff;
  font-size: 0.55em;
  max-width: 92vw;
  margin: 0 auto 9px auto;
  text-align: justify;
  line-height: 1.32;
  opacity: .91;
}
.footer-legal b { color: #fff; font-weight: 700; }
.footer-contact {
  font-size: 0.94em;
  text-align: start;
  color: #fff;
  opacity: .97;
}
.footer-copy {

  color: #fff;
  font-size: 0.97em;
  padding: 8px 0 3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-radius: 8px;
  max-width: 95vw;
  margin: 0 auto;
}
.footer-copy span {
  font-weight: 600;
  letter-spacing: .2px;
  font-size: 1.01em;
}
.footer-top i {
  font-size: 1.07em;
  opacity: 0.94;
  transition: opacity .14s;
  color: #fff;
}
.footer-top:hover i {
  opacity: 1;
}

/* MENU MOBILE BOTTOM */
.menu-bottom {
  position: fixed;
  left: 0; bottom: 0; width: 100vw;
  background: #fff;
  z-index: 1003;
  padding: 0;
  box-shadow: 0 -2px 14px #0002;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  border-top: none;
}
.menu-bottom-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  width: 100vw;
  min-height: 56px;
}
.menu-bottom-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 4px;
  background: #b61d1c;
  border-radius: 6px;
  z-index: 0;
  transform: translateY(-50%);
}
/* Itens laterais */
.menu-bottom-item {
  flex: 1;
  text-align: center;
  font-size: 0.94em;
  color: #b61d1c;
  text-decoration: none;
  font-weight: 500;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0 7px 0;
  z-index: 1;
  min-width: 0;
  transition: color .18s;
}
.menu-bottom-item .fa-solid {
  font-size: 1.25em;
  margin-bottom: 1px;
  display: block;
  line-height: 1.05;
  color: #b61d1c;
}
.menu-bottom-label {
  display: block;
  font-size: 0.91em;
  margin-top: 0px;
  color: #b61d1c;
  font-weight: 400;
  letter-spacing: 0.1px;
}
/* Botão central oval do cifrão */
.menu-bottom-item.comprar {
  position: relative;
  top: -18px;
  padding: 0;
  background: none;
  width: 77px;
  height: 46px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 2;
}
.menu-bottom-item.comprar .oval-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f22c2d;
  border-radius: 24px/16px;
  width: 67px;
  height: 36px;
  box-shadow: 0 3px 10px #f22c2d38, 0 0 0 3px #fff;
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  border: none;
  outline: none;
  transition: box-shadow .17s, filter .15s;
}
.menu-bottom-item.comprar .fa-dollar-sign {
  font-size: 1.5em;
  color: #fff;
  filter: drop-shadow(0 1px 0 #fff8);
  line-height: 1;
}
.menu-bottom-item.comprar.active .oval-icon,
.menu-bottom-item.comprar .oval-icon:hover {
  filter: brightness(1.08) drop-shadow(0 0 8px #fff6);
  box-shadow: 0 6px 18px #f22c2d44, 0 0 0 3px #fff;
}
.menu-bottom-item:active, .menu-bottom-item.active:not(.comprar) {
  color: #f22c2d;
}
.menu-bottom-item:active .fa-solid, .menu-bottom-item.active .fa-solid {
  color: #f22c2d;
}
.menu-bottom-item.comprar:active .oval-icon {
  filter: brightness(0.98) drop-shadow(0 0 8px #fff6);
}

/* ESCONDER MENU BOTTOM EM DESKTOP */
@media (min-width: 1100px) {
  .menu-bottom { display: none; }
  .header-container { height: 76px; min-height: 76px;}
  .logo { height: 44px; margin-left: 26px;}
  .desktop-nav .menu-btn.vermelho, .desktop-nav .menu-btn.roxo { display: inline-block;}
  .cta-content, .hospital-content { max-width: 540px; }
  .footer-logo { height: 38px;}
  .footer-logo-capemisa { height: 42px;}
  .footer { padding: 3rem 15%;}
}


/* ===============  
   1) Wrapper sits OVER your red bg  
   2) It only covers the bottom 100px of that section  
   =============== */
.wave-transition {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;       /* exactly your SVG’s viewBox height */
  overflow: hidden;    /* chop off any stray bits */
  pointer-events: none;/* allow clicks through */
  z-index: 1;          /* above the red content */
  transform: rotateX(180deg); /* flip it horizontally */
}

/* Stretch the SVG to exactly fill that 100px strip */
.wave-transition svg {
  display: block;
  width: 100%;
  height: 100%;
  
}

/* ===============  
   3) All waves are white  
   4) Each wave gets its own opacity  
   =============== */
.wave {
  fill: #fff;
  /* no stroke */
}

.wave-1 { opacity: 1;    }  /* top, full white */
.wave-2 { opacity: 0.66; }  /* middle, semi-white */
.wave-3 { opacity: 0.33; }  /* back, very faint */

/* ===============  
   5) The next section is pure white  
   (pull it up 1px if you see a line)  
   =============== */
.next-section {
  background: #fff;
  margin-top: -1px;  /* optional tweak to kill any hairline gap */
}
/* Bottom Navigation */
.bottom-nav {
  position: fixed;
  margin-bottom: -1.5rem;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  justify-content: space-around;
  background: var(--color-neutral-white);
  border-top: 1px solid var(--color-neutral-200);
  z-index: 1000;
}
.nav-item {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0;
  color: var(--color-neutral-500);
  font-size: 0.875rem;
  text-decoration: none;
}
.nav-item.active {
  
}
.nav-icon {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  color: var(--color-support-red-700);
}
.icon-ticket::before {
  content: "\f145";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.icon-dollar::before {
  content: "\f155";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.icon-trophy::before {
  content: "\f091";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.icon-search::before {
  content: "\f002";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    animation: fadeIn 0.5s ease-in-out;
  }
}

@media (min-width: 769px) {
  .bottom-nav {
    display: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ================================ */
/*  Floating central “checkout” tab  */
/* ================================ */
@media (max-width: 768px) {
  /* 1. Make every nav‑item positioning context */
  .bottom-nav .nav-item {
    position: relative;
  }

  /* 2. Pull *only* the “checkout” link up */
  .bottom-nav .nav-item[href="/checkout"] {
    top: -2rem; /* raise it above the bar */
    z-index: 101; /* ensure it floats above */
  }

  /* 3. Turn its icon into a circle */
  .bottom-nav .nav-item[href="/checkout"] .nav-icon {
    display: flex; /* flex to center the “$” */
    align-items: center;
    justify-content: center;
    width: 4rem; /* circle diameter */
    height: 4rem;
    margin: 0 auto; /* horizontally centered */
    background: var(--color-support-red-700);
    color: var(--color-neutral-white);
    border: 4px solid var(--color-neutral-white);
    border-radius: 50%; /* perfect circle */
    font-size: 1.25rem; /* bump up icon size */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  /* 4. Ensure the “checkout” label shows below the circle */
  .bottom-nav .nav-item[href="/checkout"] .nav-label {
    display: block; /* override any hide rules */
    margin-top: 0.25rem; /* a little breathing room */
    text-align: center; /* center under the circle */
  }
}