@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800;900&display=swap");

/* ── Reset básico ── */
*, *::before, *::after { box-sizing: border-box; }

body {
   margin: 0;
   font-family: "Open Sans", Arial, sans-serif;
   background-color: #f3f4f5;
}

p  { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
a  { text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ── Wrapper geral ── */
.tpa-body {
   font-family: "Open Sans", Arial, sans-serif;
   overflow-x: clip;
   background-color: #f3f4f5;
}

/* ── Container ── */
.tpa-container {
   max-width: 1270px;
   margin: 0 auto;
   padding: 0 25px;
}


/* COMPONENTE 1 — Banner card (dentro do container, border-radius) */

.tpa-banner-section {
   padding: 48px 0 56px;
}

.tpa-banner-card {
   position: relative;
   border-radius: 24px;
   overflow: hidden;
   min-height: 564px;
   display: flex;
   align-items: flex-start;
   background-image: url('/content/dam/montepio/imagens/empresas/aceitar-pagamentos/tpa-precos-mais-baixos.webp');
   background-color: #1a7b8c;
   background-size: cover;
   background-position: center right;
}


.tpa-banner-card__content {
   position: relative;
   z-index: 2;
   padding: 40px;
   max-width: 50%;
   display: flex;
   flex-direction: column;
   gap: 0;
   align-self: stretch;
}

.tpa-banner-card__badge {
   display: inline-flex;
   align-items: center;
   background-color: #FFDD76;
   color: #222324;
   padding: 6px 18px;
   border-radius: 999px;
   font-family: "Open Sans", Arial, sans-serif;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.00em;
   width: fit-content;
   margin-bottom: 40px;
}

.tpa-banner-card__title {
   font-family: "Lato", Arial, sans-serif;
   font-size: 36px;
   font-weight: 900;
   color: #fff;
   line-height: 1.2;
   margin-bottom: 16px;
}

.tpa-banner-card__title--highlight {
   color: #ffd100;
}

.tpa-banner-card__text {
   font-family: "Open Sans", Arial, sans-serif;
   font-size: 15px;
   line-height: 1.7;
   color: rgba(255, 255, 255, 0.88);
   margin-bottom: 16px;
}

.tpa-banner-card__cta {
   margin-top: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 48px;
   padding: 0 32px;
   border-radius: 24px;
   background-color: #FFD139;
   color: #303336;
   font-family: "Open Sans", Arial, sans-serif;
   font-size: 16px;
   font-weight: 600;
   text-decoration: none;
   width: fit-content;
   transition: opacity 0.2s ease;
}

.tpa-banner-card__cta:hover {
   background-color: #FFBB00;
}


@media (max-width: 599px) {
   .tpa-banner-section {
      padding: 24px 0 32px;
   }

   .tpa-banner-card {
      min-height: 812px;
      align-items: flex-start;
   background-image: url('/content/dam/montepio/imagens/empresas/aceitar-pagamentos/tpa-precos-mais-baixos.webp');
  
   }

   .tpa-banner-card__content {
      max-width: 100%;
      padding: 24px 20px;
   }

   .tpa-banner-card__title {
      font-size: 40px;
   }

   .tpa-banner-card__text {
      font-size: 16px;
   }
}

@media (min-width: 600px) and (max-width: 899px) {
   .tpa-banner-section {
      padding: 32px 0 40px;
   }

   .tpa-banner-card {
      min-height: 563px;
      align-items: flex-start;
   background-image: url('/content/dam/montepio/imagens/empresas/aceitar-pagamentos/tpa-precos-mais-baixos.webp');
   }

   .tpa-banner-card__content {
      max-width: 100%;
      padding: 32px 24px;
   }

   .tpa-banner-card__title {
      font-size: 40px;
   }

   .tpa-banner-card__text {
      font-size: 18px;
   }
}

@media (min-width: 900px) and (max-width: 1279px) {
   .tpa-banner-card {
      min-height: 559px;
      align-items: flex-start;
   background-image: url('/content/dam/montepio/imagens/empresas/aceitar-pagamentos/tpa-precos-mais-baixos.webp');
   }
}

.tpa-banner-card {
  align-items: center;
}

.tpa-banner-card__content {
  align-self: auto;
  justify-content: center;
}

/*COMPONENTE 2 — Título centrado (intro modalidades) */

.tpa-modalidades-section {
   padding: 72px 0;
}

.tpa-modalidades-intro {
   text-align: center;
   max-width: 100%;
   margin: 0 auto;
}

.tpa-modalidades-intro__title {
   font-family: "Lato", Arial, sans-serif;
   font-size: 40px;
   font-weight: 800;
   color: #222324;
   line-height: 1.2;
   margin-bottom: 24px;
   white-space: nowrap;
}

.tpa-modalidades-intro__subtitle {
   font-family: "Open Sans", Arial, sans-serif;
   font-size: 18px;
   font-weight: 400;
   line-height: 1.7;
   color: #222324;
}

@media (max-width: 599px) {
   .tpa-modalidades-section {
      padding: 40px 0;
   }

   .tpa-modalidades-intro__title {
      font-size: 32px;
      white-space: normal;
   }

   .tpa-modalidades-intro__subtitle {
      font-size: 16px;
   }
}

@media (min-width: 600px) and (max-width: 899px) {
   .tpa-modalidades-section {
      padding: 48px 0;
   }

   .tpa-modalidades-intro__title {
      font-size: 40px;
      white-space: normal;
   }

   .tpa-modalidades-intro__subtitle {
      font-size: 18px;
   }
}


/* COMPONENTE 3 — Secção amarela (full-width) */

.tpa-online-section {
   background-color: #FFDD76;
   padding: 88px 25px;
   text-align: center;
   width: 100%;
   border-radius: 0px 80px;
   margin-top: 56px;
}

.tpa-online-inner {
   max-width: 760px;
   margin: 0 auto;
}

.tpa-online-section__title {
   font-family: "Lato", Arial, sans-serif;
   font-size: 40px;
   font-weight: 900;
   color: #222324;
   line-height: 1.1;
   margin-bottom: 20px;
}

.tpa-online-section__subtitle {
   font-family: "Open Sans", Arial, sans-serif;
   font-size: 18px;
   line-height: 1.6;
   color: #222324;
   margin-bottom: 40px;
}

.tpa-online-section__cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 48px;
   padding: 0 40px;
   border-radius: 26px;
   background-color: #303336;
   color: #fff;
   font-family: "Open Sans", Arial, sans-serif;
   font-size: 16px;
   line-height: 1.6;
   font-weight: 500;
   text-decoration: none;
   transition: opacity 0.2s ease;
}

.tpa-online-section__cta:hover {
   background-color: #000000;
}

@media (max-width: 599px) {
   .tpa-online-section {
      padding: 148px 20px;
      border-radius: 0px 48px;
   }

   .tpa-online-section__title {
      font-size: 26px;
   }

   .tpa-online-section__subtitle {
      font-size: 15px;
      margin-bottom: 28px;
   }
}

@media (min-width: 600px) and (max-width: 899px) {
   .tpa-online-section {
      padding: 60px 25px;
   }

   .tpa-online-section__title {
      font-size: 32px;
   }

   .tpa-online-section__subtitle {
      font-size: 16px;
      margin-bottom: 32px;
   }
}


/*COMPONENTE 4 — Produtos TPA (dentro do container, quase full)*/

.tpa-produtos-section {
   padding: 72px 0 80px;
}

.tpa-produtos-intro {
   text-align: center;
   margin-bottom: 48px;
   max-width: 820px;
   margin-left: auto;
   margin-right: auto;
}

.tpa-produtos-intro__title {
   font-family: "Lato", Arial, sans-serif;
   font-size: 40px;
   font-weight: 800;
   color: #303336;
   line-height: 1.2;
   margin-bottom: 24px;
   white-space: nowrap;
}

.tpa-produtos-intro__title::after {
   content: '.';
   color: #ffd100;
}

.tpa-produtos-intro__subtitle {
   font-family: "Open Sans", Arial, sans-serif;
   font-size: 18px;
   line-height: 1.65;
   color: #636365;
}

.tpa-produtos-cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}

.tpa-produto-card {
   background-color: #fff;
   border-radius: 20px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   box-shadow: 0px 14px 18px 0px #A0A1A340;
}

.tpa-produto-card__img {
   background-color: #fff;
   height: 357px;
   width: 100%;
   position: relative;
   padding: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   box-sizing: border-box;
}

.tpa-produto-card__img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   border-radius: 8px;
}

.tpa-produto-card__badges {
   position: absolute;
   top: 32px;
   left: 32px;
   display: flex;
   gap: 12px;
   z-index: 2;
}

.tpa-badge {
   font-family: "Open Sans", Arial, sans-serif;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   padding: 4px 10px;
   border-radius: 100px;
   color: #fff;
   white-space: nowrap;
}

.tpa-badge--all    { background-color: #3C4CF5; }
.tpa-badge--medida { background-color: #3C4CF5; }

.tpa-produto-card__body {
   padding: 0px 24px 32px;
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.tpa-produto-card__title {
   font-family: "Lato", Arial, sans-serif;
   font-size: 20px;
   font-weight: 700;
   color: #222324;
   line-height: 1.35;
   margin: 0;
}

.tpa-produto-card__title::after {
   content: '.';
   color: #ffd100;
}

.tpa-produto-card__desc {
   font-family: "Open Sans", Arial, sans-serif;
   font-size: 14px;
   line-height: 1.6;
   color: #636365;
   margin: 0;
}

.tpa-produto-card__list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 0;
   border-top: 1px solid rgba(237, 237, 237, 1);
   padding-top: 16px;
}

.tpa-produto-card__list li {
   font-family: "Open Sans", Arial, sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.70;
   color: #000000;
   padding-left: 0;
   position: relative;
   display: flex;
   align-items: flex-start;
   gap: 8px;
}

.tpa-produto-card__list li::before {
   content: '';
   display: inline-flex;
   width: 24px;
   height: 24px;
   min-width: 24px;
   border-radius: 24px;
   background-color: #303336;
   box-sizing: border-box;
   flex-shrink: 0;
   margin-top: 0px;
}

.tpa-produto-card__list li::after {
   content: '';
   position: absolute;
   left: 12px;
   top: 11px;
   width: 9px;
   height: 5px;
   border-left: 1.5px solid #fff;
   border-bottom: 1.5px solid #fff;
   transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 599px) {
   .tpa-produtos-section {
      padding: 40px 0 48px;
   }

   .tpa-produtos-intro {
      text-align: center;
   }

   .tpa-produtos-intro__title {
      font-size: 22px;
      white-space: normal;
      margin-bottom: 32px;
   }

   .tpa-produtos-cards {
      grid-template-columns: 1fr;
   }

   .tpa-produto-card {
      min-height: 670px;
   }

   .tpa-produto-card__img {
      height: 380px;
   }
   
}

@media (min-width: 600px) and (max-width: 899px) {
   .tpa-produtos-section {
      padding: 48px 0 56px;
   }

   .tpa-produtos-intro {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
   }

   .tpa-produtos-intro__title {
      font-size: 26px;
      white-space: nowrap;
      margin-bottom: 40px;
   }

   .tpa-produtos-cards {
      grid-template-columns: 1fr;
      justify-items: center;
   }

   .tpa-produto-card {
      width: 100%;
      max-width: 393px;
      min-height: 670px;
   }

   .tpa-produto-card__img {
      height: 380px;
   }
}

@media (min-width: 900px) and (max-width: 1279px) {
   .tpa-produtos-intro {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
   }

   .tpa-produtos-intro__title {
      font-size: 32px;
      white-space: nowrap;
   }

   .tpa-produtos-cards {
      grid-template-columns: 1fr;
      justify-items: center;
   }

   .tpa-produto-card {
      width: 100%;
      max-width: 393px;
      min-height: 670px;
   }

   .tpa-produto-card__img {
      height: 380px;
   }
}


/* COMPONENTE 5 — Footer Section (full-width, escuro, imagem de fundo)*/

.tpa-cta-section {
   position: relative;
   width: 100%;
   min-height: 573px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   overflow: hidden;
   background-image: url('/content/dam/montepio/imagens/empresas/aceitar-pagamentos/SectionFooter.webp');
   background-color: #1a1c1e;
   background-size: cover;
   background-position: center;
   padding: 0 67px;
   margin-top: 40px;
   border-radius: 40px 40px 0 0;
}

.tpa-cta-card__overlay {
   display: none;
}

.tpa-cta-card__content {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: 417px;
   background: rgba(255, 255, 255, 0.11);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-radius: 20px;
   border: 1px solid #fff;
   padding: 64px 40px;
}

.tpa-cta-card__title {
   font-family: "Lato", Arial, sans-serif;
   font-size: 40px;
   font-weight: 900;
   color: #fff;
   line-height: 1.2;
   margin-bottom: 24px;
}

.tpa-cta-card__title::after {
   content: '.';
   color: #FFD139;
}

.tpa-cta-card__text {
   font-family: "Open Sans", Arial, sans-serif;
   font-size: 16px;
   line-height: 1.7;
   color: rgba(255, 255, 255, 0.80);
   margin-bottom: 0;
}

.tpa-cta-card__actions {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   margin-top: 40px;
   flex-wrap: wrap;
}

.tpa-cta-card__btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 48px;
   padding: 0 32px;
   border-radius: 24px;
   font-family: "Open Sans", Arial, sans-serif;
   font-size: 16px;
   font-weight: 600;
   text-decoration: none;
   transition: opacity 0.2s ease, background-color 0.2s ease;
   white-space: nowrap;
}

.tpa-cta-card__btn--primary {
   background-color: #FFD139;
   color: #303336;
   border: 2px solid #FFD139;
}

.tpa-cta-card__btn--primary:hover {
   background-color: #FFBB00;
   border-color: #FFBB00;
}

.tpa-cta-card__btn--secondary {
   background-color: transparent;
   color: #fff;
   border: 2px solid #fff;
}

.tpa-cta-card__btn--secondary:hover {
   background-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 599px) {
   .tpa-cta-section {
      padding: 0 24px;
       min-height: 750px;
   }

   .tpa-cta-card__content {
      padding: 48px 24px;
       min-height: 580px;
   }

   .tpa-cta-card__title {
      font-size: 28px;
   }

   .tpa-cta-card__text {
      font-size: 15px;
   }
   .tpa-cta-card__actions{
      margin-top:86px;
   }

}

@media (min-width: 600px) and (max-width: 899px) {
   .tpa-cta-section {
      padding: 0 40px;
   }

   .tpa-cta-card__content {
      padding: 56px 32px;
   }

   .tpa-cta-card__title {
      font-size: 34px;
   }
}

@media (min-width: 900px) and (max-width: 1279px) {
   .tpa-cta-card__title {
      font-size: 36px;
   }
}