/* ===== RESET E BASE ===== */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body {
   font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
   background-color: #f5f6f8;
   color: #1a1a1a;
   line-height: 1.6;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 }

 .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 40px 20px;
   width: 100%;
 }

 
 /* ===== HERO / INTRODUÇÃO (SEO + GEO) ===== */
 .hero {
   text-align: center;
   max-width: 780px;
   margin: 0 auto 40px;
 }

 .hero__eyebrow {
   text-transform: uppercase;
   letter-spacing: 1.5px;
   font-size: 13px;
   font-weight: 700;
   color: #FC6D0B;
   margin-bottom: 10px;
 }

 .hero__title {
   font-size: 30px;
   font-weight: 800;
   color: #0A3264;
   margin-bottom: 12px;
 }

 .hero__text {
   font-size: 16px;
   color: #555;
   line-height: 1.7;
 }

 /* ===== GRID DE CARDS ===== */
 .cards-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
 }

 /* ===== CARD ===== */
 .card {
   background-color: #ffffff;
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   transition: transform 0.25s ease, box-shadow 0.25s ease;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   /* adiciona essa linha */
 }

 .card:hover {
   transform: translateY(-6px);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
 }

 .card__image-link {
   display: block;
   overflow: hidden;
   aspect-ratio: 4 / 3;
   background-color: #e9ecef;
 }

 .card__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.3s ease;
 }

 .card__image-link:hover .card__image {
   transform: scale(1.05);
 }

 .card__body {
   padding: 20px;
   display: flex;
   flex-direction: column;
   flex: 1;
 }

 .card__title {
   font-size: 20px;
   font-weight: 700;
   color: #0A3264;
   margin-bottom: 8px;
 }

 .card__description {
   font-size: 15px;
   color: #555;
   flex: 1;
 }

 /* ===== FAQ (GEO) ===== */
 .faq {
   max-width: 780px;
   margin: 48px auto 0;
 }

 .faq__title {
   font-size: 24px;
   font-weight: 800;
   text-align: center;
   margin-bottom: 24px;
   color: #0A3264;
 }

 .faq__item {
   background: #ffffff;
   border-radius: 12px;
   padding: 20px 24px;
   margin-bottom: 16px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
 }

 .faq__question {
   font-size: 17px;
   font-weight: 700;
   color: #0A3264;
   margin-bottom: 8px;
 }

 .faq__answer {
   font-size: 15px;
   color: #555;
   line-height: 1.7;
 }

 /* ===== ANÚNCIOS ADSENSE ===== */
 .ad-slot {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 32px auto;
   min-height: 300px;
   border: 1px dashed #d0d0d0;
   /* borda visível apenas enquanto o espaço está vazio — remova se quiser */
   border-radius: 8px;
   background-color: #fafafa;
 }

 .ad-slot--mobile {
   display: none;
 }

 @media (max-width: 768px) {
   .ad-slot--desktop {
     display: none;
   }

   .ad-slot--mobile {
     display: flex;
     min-height: 90px;
   }
 }

 /* ===== RESPONSIVIDADE ===== */
 @media (max-width: 1024px) {
   .cards-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 @media (max-width: 768px) {
   .cards-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   .hero__title {
     font-size: 26px;
   }

 }

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

   .container {
     padding: 24px 16px;
   }

   .hero__title {
     font-size: 23px;
   }
 }