* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: "Outfit", serif; transition: background 0.3s;}

        html { scroll-behavior: smooth;}

        video {width:1024px}

        .outfit-<uniquifier> {
          font-family: "Outfit", serif;
          font-optical-sizing: auto;
          font-weight: <weight>;
          font-style: normal;
        }

        .freepik a{text-decoration: none;position:absolute; margin-top: -40px; margin-left: 30px; font-size: 12px; color: #6386c3;}

/*---------------------------------------
            menu             
 -----------------------------------------*/
        .navbar { 
            position: fixed; 
            top: 0; 
            width: 100%; 
            background: #ffffff; 
            padding: 15px 20px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            box-shadow: 0 1rem 3rem rgba(56, 94, 157, .300) !important;
            z-index: 1000;
        }
        .logo img{ height:60px }
        .menu {
            list-style: none;
            display: flex;
            gap: 20px;
        }
        .menu li { display: inline; }
        .menu li a { color: #3c609f; text-decoration: none; font-size: 18px; }
        .menu li a:hover{ color: #bccae3}
        
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            display: none;
            z-index: 1001;
        }
        
        .menu-mobile {
            list-style: none;
            position: fixed;
            top: 0;
            right: -100%;
            height: 100vh;
            width: 250px;
            background: #ffffff;
            padding-top: 60px;
            transition: right 0.3s ease-in-out;
            z-index: 1001;
        }
        .menu-mobile.active {
            right: 0;
        }
        .menu-overlay.active {
            display: block;
        }
        .menu-mobile li { text-align: center; padding: 15px; }
        .menu-mobile li a { color: #3c609f; text-decoration: none; font-size: 18px; display: block; }
        
        .hamburger { display: none; font-size: 40px; color: #3c609f; cursor: pointer; }
        .close-menu {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 2.3em;
            color: #3c609f;
            cursor: pointer;
        }
                


/*---------------------------------------
            info-section               
 -----------------------------------------*/
        
        .info-section {
            display: flex;
            align-items: center;
            max-width: 100%;
            margin: auto;
            gap: 0px;
        }
        .info-section img {
            width: 500px;
            max-width: 100%;
            height: 100vh;
            object-fit: cover;
        }
        .info-section p {
            font-size: 1.5em;
            font-weight: 200;
            flex: 1;
            color: #666666;
            text-align: center;
        }

        .info-section strong {font-size: 2.3em;color:#385E9D}

/*---------------------------------------
            info-section2               
 -----------------------------------------*/

        .info-section2 {
            display: flex;
            align-items: center;
            max-width: 100%;
            height: 100%;
            margin: auto;
            padding-bottom:60px;
            gap: 0px;
            background-color: #244377;
            text-align: center;
        }

        .info-section2 p {
            font-size: 1.5em;
            font-weight: 200;
            flex: 1;
            color: #b2cbf4;
            padding: 50px;
            margin-top: 150px;
        }

        .info-section2 strong {font-size: 2.3em;color:#ffffff}


        .info-button {
            position: inherit;
            top: 75%; left: 50%;
            transform: translate(-50%, -50%);
            background-color: #3ec34f;
            color: white; padding: 20px 40px;
            font-family: "Outfit", serif;
            font-size: 1em; font-weight: 400;
            border: none; border-radius: 100px;
            cursor: pointer; white-space: nowrap;
            text-decoration: none;
            display: ruby-text;

        }

        .info-button:hover {
            background-color: #284678;
            z-index: 1003;
        }
/*---------------------------------------
            info-section3               
 -----------------------------------------*/

    .info-section3 {height:100%;max-width: 100%;}
    .info-section3 h2 {display:block; text-align:center; font-size: 3.3em; margin:8%;color:#3c609f }
    .info-section3 img { width: 96px; margin-bottom: 0px;}
    .container_slider { display: flex; flex-wrap: wrap; justify-content: space-around;
    width: 90%; max-width: 1920px; margin: 60px auto;}
    .box_slider {width: 19%; min-width: 200px; box-sizing: border-box; padding: 0px;
        background-color: #eff4fd; text-align: center; margin-bottom: 20px; border-radius: 20px;
        color: #666666; font-size: 1.2em; font-weight: 200;
    }

    .box-content_slider { padding: 20px; }
    .box-content_slider h3 {color:#3c609f; margin-bottom:20px }




/*---------------------------------------
            info-section4               
 -----------------------------------------*/
        
        .info-section4 {
            display: flex;
            align-items: center;
            max-width: 100%;
            margin: auto;
            gap: 0px;
            background-color: #244377;
        }
        .info-section4 img {
            width: 500px;
            max-width: 100%;
            height: 100vh;
            object-fit: cover;
        }
        .info-section4 p {
            font-size: 1.5em;
            font-weight: 200;
            flex: 1;
            color: #b2cbf4;
            text-align: center;
            padding: 50px;
            padding-bottom: 100px;
        }

        .info-section4 strong {font-size: 2.3em;color:#ffffff}



 /*---------------------------------------
            info-section5               
 -----------------------------------------*/

        .info-section5 {
            display: flex;
            align-items: center;
            max-width: 100%;
            height: 100vh;
            margin: auto;
            gap: 0px;
            background-color: #ffffff;
            text-align: center;
        }

        .info-section5 p {
            font-size: 1.5em;
            font-weight: 200;
            flex: 1;
            color: #666666;
        }
        .info-section5 strong {font-size: 2.3em;color:#3c609f}
      
       

        /*---------------------------------------
            WHATSAPP               
        -----------------------------------------*/
        .whatsapp-float {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #3ec34f;
            color: white;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            text-decoration: none;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
            z-index: 1002;
        }
        .whatsapp-float:hover {
            transform: scale(1.1);
        }


         /*---------------------------------------
            FAQ               
        -----------------------------------------*/ 

        .faq-container {
            max-width: 100%;
            margin: auto;
            margin-top: 60px;
            background: #244377;
            padding: 120px;
            text-align: left;
        }
        .faq-title {
            text-align: center;
            margin-bottom: 20px;
            font-weight: bold;
            color: #ffffff;
        }
        .faq-title h2{
            font-size: 3.3rem;
            margin-bottom: 50px;
        }

        .faq-item {

            padding: 30px 0;
            font-size: 1.5em;
            border-bottom: 1px solid #4a6a9f;
            color: #ffffff;
            font-weight: 200;
        }
        .faq-question {
            cursor: pointer;
            font-weight: bold;
            color: #333;
            transition: 0.3s;
            color: #b2cbf4;
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out;
        }  

/*---------------------------------------
            Medicamentos               
        -----------------------------------------*/ 

       /* .medicamentos { margin-top:150px;padding-bottom: 100px; }
        .row { display: flex; padding: 15px; border-bottom: 1px solid #e7ebf2; }
        .header { font-weight: bold; COLOR: #FFFFFF; background-color: #3c609f; }
        .cell1 { flex: 1; font-weight: 700}
        .cell { flex: 1; }*/

/*---------------------------------------
            Fale conosco               
        -----------------------------------------*/ 


        .fale-conosco { margin-top:150px; height: 100vh; }
        .fale-conosco-container {max-width: 50%; margin: 0 auto; }
        .row { display: flex; padding: 15px; border-bottom: 1px solid #e7ebf2; }
        .header { font-weight: bold; COLOR: #FFFFFF; background-color: #3c609f; }
        .cell1 { flex: 1; font-weight: 700}
        .cell { flex: 1; }


          .gm-box {
        background-color: #f3f8ff;
        color: #3c609f;
        padding: 18px 22px;
        border-radius: 14px;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-weight: 600;
        max-width: 820px;
        margin: 20px auto;
        transition: all 0.3s ease;
        cursor: pointer;
      }

      .gm-box:hover {
        background-color: #f3f8ff;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
      }



/*---------------------------------------
            Footer               
        -----------------------------------------*/        
            footer {
                background-color: #f0f0f0;
                padding: 20px 0;
            }

            footer a {text-decoration: none; color: #6386c3;}

            .container {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                max-width: 100%;
                margin: 0 auto;
            }

            .coluna {
                flex: 1;
                min-width: 200px;
                padding: 40px;
            }

            .coluna h3 {
                margin-bottom: 10px;
            }

            .redes-sociais img {
                width: 45px;
                margin-right: 15px;
            }

            .copyright {
                text-align: left;
                margin-top: 20px;
                width: 100%;
            }

/*---------------------------------------
            Destaque             
 -----------------------------------------*/
:root{
      --bg: #0f172a;
      --card: #0b1225;
      --text: #e2e8f0;
      --muted: #94a3b8;
      --accent: #38bdf8;
      --accent-ink: #001219;
      --radius: 16px;
    }

    .destaque-container{
      max-width: 100%; 
      margin: 0 auto; 
      padding: 95px;
      margin-top: 90px;
      height: 100%;

    }

    /* GRID */
    .cards{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;

    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border: 1px solid rgba(148, 163, 184, 0.08);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 10px 24px rgba(0,0,0,.25);
      display: flex;
      flex-direction: column;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .card:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 30px rgba(0,0,0,.35);
      border-color: rgba(148,163,184,0.2)
    }

    .media{
      aspect-ratio: 16/9;
      width: 100%;
      object-fit: cover;
      display: block;
      background: #111827;
    }

    .destaque-content{ padding: 16px; display: flex; flex-direction:
      column; gap: 0px;
      background-color: #ffffff;
      height: 100%;
    }

    .title{
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 300;
    padding: 2.3rem;
    }

    .actions{ 
      margin-top: auto; 
      display: flex;
      justify-content: center;
      padding-bottom: 20px;
    }

    .btn{
    ppearance: none;
    border: none;
    background: #385e9d;
    color: #ffffff;
    padding: 20px 50px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px #7a91b6;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;}

    .btn a{ font-size:20px;border-radius:100px}
    .btn:hover{ filter: brightness(1.05); }
    .btn:active{ transform: translateY(1px); box-shadow:none; }

    .destaque {height: 590px; margin-top: 50px}
    .bg-destaque{background-color: #244377;MARGIN-TOP: 90px;}









/*---------------------------------------
            Aceite termos cookie            
 -----------------------------------------*/


    .cookie-banner {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: #111827; 
      color: #f9fafb;
      padding: 16px 20px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      z-index: 9999;
    }
    .cookie-banner p {
      margin: 0;
      flex: 1;
      min-width: 200px;
      font-size: 14px;
    }
    .cookie-banner a {
      color: #93c5fd;
      text-decoration: underline;
    }
    .cookie-buttons {
      display: flex;
      gap: 8px;
    }
    .btn {
      border: 0;
      cursor: pointer;
      border-radius: 100px;
      padding: 8px 14px;
      font-weight: 600;
      font-size: 14px;
    }
    .btn.primary { background: #2563eb; color: #fff; }
    .btn.ghost { background: #e5e7eb; color: #111827; }



/*---------------------------------------
              /* Responsividade */
 -----------------------------------------*/
        @media (max-width: 1366px){

            .destaque-container{padding: 60px; height: 100%}
            .title{font-size:1rem; padding:1.3rem }

        }

        @media (max-width: 1280px){
            
            .menu { display: none; }
            .hamburger { display: block; }
            .container_slider { flex-direction: column; align-items: center;}
            .box_slider { width: 90%; margin-bottom: 20px; }
            .fale-conosco-container {max-width: 90%;}
            .fale-conosco {height: 1100px}
            video {width:768px}

        }

        @media (max-width: 1200px){
          .cards{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
          .destaque-container{padding: 20px;height: 100%}
        }





        @media (max-width: 900px){
          .title{font-size:1rem }
          .actions{margin:0 auto; }
          .fale-conosco-container {max-width: 90%;}
          video {width:480px}
        }
        
        @media (max-width: 768px) {

            .carousel-text {font-size: 32px;}
            .carousel-button{font-size: 20px}
            .info-section {flex-direction: column; text-align: center; }
            .info-section img {  max-width: 100%; height: 100%}
            .info-section strong{font-size: 32px}
            .info-section p {font-size: 1.2em;}
            .info-section { display: block;}


            .info-section2 strong{font-size: 32px}
            .info-section2 p {font-size: 1.2em; margin-top: 50px}
            .info-section2 { height: 100%; margin-top: 50px}
            .info-section2 { display: block;} 

            
            .info-section4 {flex-direction: column; text-align: center; margin-top: 50px }
            .info-section4 img {  max-width: 100%; height: 100%; }
            .info-section4 strong{font-size: 32px}
            .info-section4 p {font-size: 1.2em;}
            .info-section4 { display: block;}

            .info-section3 {flex-direction:  column; text-align: center; }
            .info-section3 p {font-size: 1em;}
            .info-section3 { height: 100%;margin-top: 100px}
            .info-section3 h2 {font-size: 30px}
            .info-section3 { display: block;}


            .info-section5 {flex-direction: column; text-align: center; }
            .info-section5 strong{font-size: 36px}
            .info-section5 p {font-size: 1.2em;}
            .info-section5 { height: 100%; margin-top: 60px}
            .info-section5 { display: block;}


            .lista-responsiva {grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Ajusta as colunas para telas menores */}
            .swiper { width: 90%; height: 50%;}


            .faq-container {padding: 50px; }
            .faq-title h2 { font-size: 2.3rem;}
            .faq-item { padding: 15px 0;font-size: 1.1em;}
            .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; }  


            .carousel-container { height: 100%;}


            footer { height: 100vh;} 

            video {width:480px} 


            .coluna { flex: 1 1 100%; /* Colunas ocupam a largura total em telas menores */
             text-align: center; /* Centraliza o conteúdo das colunas */ }
            .redes-sociais {text-align: center; /* Centraliza os ícones das redes sociais */}
            .copyright {text-align: center;}
            .fale-conosco-container {max-width: 90%;}
            
        }
        
        @media (max-width: 740px){

            .info-button {padding:20px 30px;} 
            .carousel-button{padding:20px 30px;}
            .swiper { width: 90%; height: 50%;}
            .fale-conosco-container {max-width: 90%;} 
            video {width:480px}        

        }

        @media (max-width: 600px){
              .cards{ grid-template-columns: 1fr; }
              .destaque-container{padding: 20px; height: 100%}
              .title{font-size:1rem; padding:1.3rem }
              .actions{margin:0 auto; }
              .fale-conosco-container {max-width: 90%;}
              video {width:360px} 
            }

          @media (max-width: 480px) {
            .gm-box {
              font-size: 15px;
              padding: 16px;
            }
          }


        @media (max-width: 360px){
              video {width:300px}
            }

            /* Acessibilidade: respeitar redução de movimento */
            @media (prefers-reduced-motion: reduce){
              .card, .btn{ transition: none; }
            }