/* ============================================================
   SA Formação — LP Mobile Styles v3
   ============================================================ */


/* ============================================================
   BOX SIZING — só nos elementos novos da LP, não global
   (o global * { box-sizing } quebrava os ícones inline)
   ============================================================ */
#hero-pills > span,
div[style*="flex:1 1 280px"],
div[style*="flex:1 1 300px"] {
  box-sizing: border-box;
}


/* ============================================================
   HERO — coluna da imagem
   ============================================================ */
@media (max-width: 767px) {

  #hero .col-xs-12.col-sm-6:last-child {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
  }

  /* Esconder a onda SVG da imagem hero */
  #hero .col-xs-12.col-sm-6:last-child > div > svg {
    display: none !important;
  }
}


/* ============================================================
   HERO — formulário
   ============================================================ */
@media (max-width: 767px) {

  /* Inputs e selects normais */
  #formulario .form-control,
  #formulario select {
    height: 48px !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
  }

  /* Input texto/email */
  #formulario input[type="text"],
  #formulario input[type="email"] {
    height: 48px !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
  }

  /* Campo telefone */
  #formulario input[type="tel"]#contacto {
    height: 48px !important;
    line-height: 48px !important;
    font-size: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 14px !important;
    padding-left: 100px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
  }

  /* Centrar bandeira e +351 verticalmente */
  .iti__selected-flag {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  .iti__flag-container {
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  .iti__flag-container {
    height: 48px !important;
  }

  /* Centrar bandeira e +351 verticalmente */
  #formulario .iti__selected-flag {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Botão submeter */
  #formulario #submitButton {
    height: 52px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    margin-top: 4px !important;
  }

  /* Link política privacidade */
  #formulario a[data-target="#popup_2"] {
    font-size: 11px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
    display: block;
  }
}


/* ============================================================
   SECÇÃO: TÍTULO + PILLS + STATS
   ============================================================ */
@media (max-width: 767px) {

  #hero ~ div:nth-of-type(1) {
    padding: 36px 20px !important;
  }

  #hero ~ div:nth-of-type(1) .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #hero ~ div:nth-of-type(1) h1 {
    font-size: 28px !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 12px !important;
    line-height: 1.2 !important;
  }

  #hero ~ div:nth-of-type(1) p[style*="font-size:16px"] {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 22px !important;
  }

  /* Pills: 2 por linha */
  #hero-pills {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin-bottom: 28px !important;
  }

  #hero-pills > span {
    flex: 0 0 calc(50% - 4px) !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
    padding: 9px 10px !important;
    box-sizing: border-box !important;
  }

  /* Stats */
  #hero ~ div:nth-of-type(1) div[style*="gap:40px"] {
    gap: 20px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

@media (max-width: 380px) {
  #hero ~ div:nth-of-type(1) h1 {
    font-size: 24px !important;
  }
}


/* ============================================================
   SECÇÃO: DOIS CAMINHOS
   ============================================================ */
@media (max-width: 767px) {

  div[style*="flex:1 1 300px"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  div[style*="gap:28px"] {
    flex-direction: column !important;
    gap: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  div[style*="flex:1 1 300px"] {
    flex: 1 1 calc(50% - 14px) !important;
  }
}


/* ============================================================
   SECÇÃO: VANTAGENS (6 cards)
   NAO tocar no div do icone — tem display:flex inline e
   o box-sizing global quebrava-o
   ============================================================ */
@media (max-width: 767px) {

  div[style*="flex:1 1 280px"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    padding: 22px 18px !important;
  }

  div[style*="flex:1 1 280px"] > div[style*="font-size:17px"] {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }

  div[style*="flex:1 1 280px"] > p {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  div[style*="flex:1 1 280px"] {
    flex: 1 1 calc(50% - 10px) !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  div[style*="flex:1 1 280px"] {
    flex: 1 1 calc(33.33% - 14px) !important;
  }
}


/* ============================================================
   SECÇÃO: CTA FINAL
   ============================================================ */
@media (max-width: 767px) {

  div[style*="padding:80px 40px"] {
    padding: 52px 20px !important;
  }

  div[style*="padding:80px 40px"] h2 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
  }

  div[style*="padding:80px 40px"] p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 26px !important;
  }

  div[style*="padding:80px 40px"] a[style*="border-radius:50px"] {
    padding: 15px 28px !important;
    font-size: 15px !important;
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    display: flex !important;
  }
}


/* ============================================================
   HEADINGS DAS SECÇÕES INTERMÉDIAS
   ============================================================ */
@media (max-width: 767px) {

  div[style*="linear-gradient"] h2[style*="clamp"] {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  div[style*="linear-gradient"][style*="padding: 60px 40px"],
  div[style*="linear-gradient"][style*="padding:60px 40px"] {
    padding: 40px 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  div[style*="linear-gradient"][style*="padding: 60px 40px"],
  div[style*="linear-gradient"][style*="padding:60px 40px"] {
    padding: 48px 24px !important;
  }
}


/* ============================================================
   MODAL — Política de Privacidade
   ============================================================ */
@media (max-width: 767px) {
  #popup_2 .modal-dialog {
    margin: 10px !important;
    width: auto !important;
  }

  #popup_2 .modal-body {
    padding: 10px 16px 16px !important;
  }
}


/* ============================================================
   OVERFLOW HORIZONTAL
   ============================================================ */
@media (max-width: 767px) {
  img {
    max-width: 100%;
    height: auto;
  }
}


/* ============================================================
   ÍCONES VANTAGENS — garantir SVG visível em mobile
   O bootstrap.css força max-width:100% nos SVG o que
   pode colapsar SVGs dentro de flex containers
   ============================================================ */
@media (max-width: 767px) {
  div[style*="flex:1 1 280px"] svg,
  div[style*="flex:1 1 300px"] svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    display: block !important;
    overflow: visible !important;
  }
}