*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    :root{
      --verde-escuro:#0b1c0e;
      --verde-claro:#6f9c3d;
      --cinza:#f5f5f5;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      font-family:'Segoe UI', sans-serif;
      background:white;
      overflow-x:hidden;
      color:#222;
    }

    /* ================= HEADER ================= */

    header{
      width:100%;
      height:90px;
      background:rgba(11,28,14,0.95);
      position:fixed;
      top:0;
      left:0;
      z-index:999;
      transition:0.4s;
      backdrop-filter:blur(10px);
    }

    header.ativo{
      height:75px;
      background:rgba(11,28,14,0.98);
      box-shadow:0 5px 20px rgba(0,0,0,0.2);
    }

    nav{
      max-width:1200px;
      margin:auto;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 5%;
      position:relative;
    }

    .logo img{
      height:125px;
      transition:0.4s;
    }

    header.ativo .logo img{
      height:100px;
    }

.nav-links{

  display:flex;

  align-items:center;

  gap:28px;

}

.nav-links a{

  display:flex;

  align-items:center;

  justify-content:center;

  height:42px;

  color:white;

  text-decoration:none;

  font-size:16px;

  font-weight:600;

  position:relative;

  transition:0.3s;

}

    .nav-links a::after{
      content:'';
      position:absolute;
      bottom:-8px;
      left:0;
      width:0%;
      height:2px;
      background:var(--verde-claro);
      transition:0.4s;
    }

    .nav-links a:hover{
      color:var(--verde-claro);
    }

    .nav-links a:hover::after{
      width:100%;
    }

    /* ================= MENU MOBILE ================= */

    .menu-toggle{
      display:none;
      font-size:2rem;
      color:white;
      cursor:pointer;
      user-select:none;
      z-index:1001;
    }

    /* ================= HERO ================= */

    .hero{
      width:100%;
      height:100vh;

      background:
      linear-gradient(rgba(11,28,14,0.65), rgba(11,28,14,0.75)),
      url('../img/FUNDO VERDE HOSPITAL.png');

      background-size:cover;
      background-position:center;

      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;

      color:white;
      padding:0 20px;
    }

    .hero-content{
      max-width:900px;
      animation:entradaHero 1.4s ease;
    }

    @keyframes entradaHero{

      from{
        opacity:0;
        transform:translateY(60px);
      }

      to{
        opacity:1;
        transform:translateY(0);
      }

    }

    .hero h1{
      font-size:4rem;
      line-height:1.2;
      margin-bottom:20px;
    }

    .hero h1 span{
      color:var(--verde-claro);
    }

    .hero p{
      font-size:1.3rem;
      margin-bottom:35px;
    }

    .hero-whats-text{
      font-size:1.1rem;
      margin-bottom:20px;
      color:#fff;
    }

    .btn{
      display:inline-block;
      padding:15px 35px;
      border-radius:60px;
      text-decoration:none;
      font-weight:700;
      margin:10px;

      background:var(--verde-claro);
      color:white;

      transition:0.35s;
      box-shadow:0 10px 25px rgba(0,0,0,0.2);
    }

    .btn:hover{
      transform:translateY(-8px) scale(1.05);
      box-shadow:0 25px 40px rgba(0,0,0,0.3);
    }

    /* ================= SEÇÕES ================= */

    section{
      padding:50px 7%;
    }

    h2{
      text-align:center;
      font-size:2.8rem;
      margin-bottom:60px;
      color:var(--verde-escuro);
      position:relative;
    }

    h2::after{
      content:'';
      width:90px;
      height:4px;
      border-radius:20px;
      background:var(--verde-claro);

      position:absolute;
      left:50%;
      bottom:-18px;
      transform:translateX(-50%);
    }

    /* ================= ANIMAÇÃO ================= */

    .animar{
      opacity:0;
      transform:translateY(70px);
      transition:1s ease;
    }

    .animar.mostrar{
      opacity:1;
      transform:translateY(0);
    }

    /* ================= SERVIÇOS ================= */

    .services-grid{
      max-width:1200px;
      margin:auto;

      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:25px;
    }

    .service-card{

      background:white;
      border-radius:22px;
      padding:35px 30px;

      border:1px solid #eee;

      transition:0.45s;

      box-shadow:0 10px 25px rgba(0,0,0,0.05);
    }

    .service-card:hover{

      transform:translateY(-15px);

      box-shadow:
      0 25px 45px rgba(111,156,61,0.18);

      border-color:var(--verde-claro);

    }

    .service-card h3{
      margin-bottom:15px;
      color:var(--verde-escuro);
      transition:0.3s;
    }

    .service-card:hover h3{
      color:var(--verde-claro);
    }

    /* ================= SOBRE ================= */

    #sobre{
      background:var(--cinza);
    }

    .sobre-box{
      max-width:900px;
      margin:auto;
      text-align:center;
      font-size:1.2rem;
      line-height:1.9;
    }

    /* ================= CONTATO ================= */

    #contato{
      background:white;
    }

    .contato-container{

      max-width:1200px;
      margin:auto;

      display:grid;
      grid-template-columns:1fr 1.1fr;
      gap:40px;

    }

    .contato-box{

      background:#f8f8f8;
      border-radius:22px;

      padding:35px;

      transition:0.4s;
    }

    .contato-box:hover{
      transform:translateY(-10px);
      box-shadow:0 20px 35px rgba(0,0,0,0.08);
    }

    .contato-box h3{
      color:var(--verde-claro);
      margin-bottom:20px;
      font-size:1.4rem;
    }

    .contato-box p{
      margin-bottom:12px;
    }

    .contato-box a{
      color:var(--verde-claro);
      text-decoration:none;
      font-weight:700;
    }

    .mapa{

      overflow:hidden;
      border-radius:22px;

      box-shadow:0 15px 35px rgba(0,0,0,0.1);

    }

    /* ================= FOOTER ================= */

    footer{

      background:var(--verde-escuro);
      color:white;

      text-align:center;

      padding:60px 20px;

    }

    footer p{
      margin:10px 0;
    }

    /* ================= WHATS ================= */

    .whatsapp{

      position:fixed;

      width:70px;
      height:70px;

      right:25px;
      bottom:25px;

      border-radius:50%;

      background:#25D366;
      color:white;

      display:flex;
      align-items:center;
      justify-content:center;

      text-decoration:none;

      font-size:32px;

      z-index:999;

      animation:pulse 2s infinite;
    }

    @keyframes pulse{

      0%{
        transform:scale(1);
      }

      50%{
        transform:scale(1.1);
      }

      100%{
        transform:scale(1);
      }

    }

    /* ================= RESPONSIVO ================= */

    @media(max-width:900px){

      header{
        height:80px;
      }

      nav{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
      }

      .logo img{
        height:90px;
      }

      .menu-toggle{
        display:block;
      }

      .nav-links{

        position:absolute;

        top:80px;
        left:0;

        width:100%;

        background:rgba(11,28,14,0.98);

        flex-direction:column;

        align-items:center;

        gap:25px;

        padding:30px 0;

        display:none;

        box-shadow:0 15px 30px rgba(0,0,0,0.25);

      }

      .nav-links.ativo{
        display:flex;
      }

      .nav-links a{
        font-size:1.1rem;
      }

      .hero h1{
        font-size:2.6rem;
      }

      .hero p{
        font-size:1.05rem;
      }

      .contato-container{
        grid-template-columns:1fr;
      }

    }

/* ================= MAPA PREMIUM ================= */

.mapa-premium{

  position:relative;

  overflow:hidden;

  border-radius:28px;

  box-shadow:
  0 20px 50px rgba(0,0,0,0.15);

}

.mapa-premium iframe{

  filter:
  grayscale(100%)
  contrast(1.1)
  brightness(0.85);

  transition:0.6s;

}

.mapa-premium:hover iframe{

  filter:
  grayscale(20%)
  contrast(1.05)
  brightness(0.95);

  transform:scale(1.02);

}

.map-overlay{

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(11,28,14,0.75),
    rgba(11,28,14,0.15)
  );

  pointer-events:none;

}

.map-card{

  position:absolute;

  left:30px;
  bottom:30px;

  background:rgba(255,255,255,0.12);

  backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,0.15);

  padding:28px;

  border-radius:22px;

  color:white;

  max-width:320px;

  box-shadow:
  0 10px 35px rgba(0,0,0,0.25);

}

.map-card h3{

  margin-bottom:15px;

  font-size:1.4rem;

}

.map-card p{

  line-height:1.7;

  margin-bottom:20px;

}

.btn-mapa{

  display:inline-block;

  padding:13px 24px;

  border-radius:50px;

  background:var(--verde-claro);

  color:white;

  text-decoration:none;

  font-weight:700;

  transition:0.35s;

}

.btn-mapa:hover{

  transform:translateY(-5px);

  box-shadow:
  0 10px 25px rgba(111,156,61,0.4);

}

/* ================= CONTATO HOVER PREMIUM ================= */

.contato-box{

  position:relative;

  overflow:hidden;

}

.contato-box::before{

  content:'';

  position:absolute;

  width:120px;
  height:120px;

  background:
  radial-gradient(
    rgba(111,156,61,0.15),
    transparent
  );

  top:-40px;
  right:-40px;

  border-radius:50%;

  transition:0.5s;

}

.contato-box:hover::before{

  transform:scale(1.6);

}

/* ================= MOBILE ================= */

@media(max-width:900px){

  .mapa-premium{

    display:flex;
    flex-direction:column;

  }

  .map-card{

    position:absolute;

    left:15px;
    right:15px;
    bottom:15px;

    margin:0;

    max-width:unset;

    padding:20px;

    border-radius:18px;

  }

  .map-card h3{
    font-size:1.1rem;
  }

  .map-card p{
    font-size:0.95rem;
    margin-bottom:15px;
  }

  .btn-mapa{

    width:100%;
    text-align:center;

  }

}

/* ================= BOTÃO MENU ÁREA PACIENTE ================= */

.btn-area{

  padding:10px 18px !important;

  border-radius:40px;

  border:1px solid rgba(255,255,255,0.25);

  background:transparent;

  color:white !important;

  font-size:0.95rem !important;

  transition:0.3s;

}

.btn-area:hover{

  background:rgba(255,255,255,0.08);

  border-color:var(--verde-claro);

  color:white !important;

  transform:translateY(-2px);

}

.btn-area::after{
  display:none !important;
}




/* ================= BANNER SIMPLESPET ================= */

.portal-banner{

  background:
  linear-gradient(
    135deg,
    rgba(11,28,14,0.97),
    rgba(20,45,25,0.95)
  );

  border-radius:32px;

  padding:70px 50px;

  position:relative;

  overflow:hidden;

  color:white;

  text-align:center;

  box-shadow:
  0 25px 60px rgba(0,0,0,0.15);

}

.portal-banner::before{

  content:'';

  position:absolute;

  width:500px;
  height:500px;

  background:
  radial-gradient(
    rgba(111,156,61,0.22),
    transparent
  );

  top:-250px;
  right:-180px;

  border-radius:50%;

}

.portal-banner h2{

  color:white;

  margin-bottom:30px;

}

.portal-banner h2::after{
  background:var(--verde-claro);
}

.portal-banner p{

  max-width:850px;

  margin:auto;

  font-size:1.15rem;

  line-height:1.9;

  position:relative;

  z-index:2;

}

.portal-btn{

  display:inline-block;

  margin-top:35px;

  padding:18px 34px;

  border-radius:60px;

  background:var(--verde-claro);

  color:white;

  text-decoration:none;

  font-weight:700;

  transition:0.35s;

  position:relative;

  z-index:2;

  box-shadow:
  0 15px 35px rgba(111,156,61,0.25);

}

.portal-btn:hover{

  transform:
  translateY(-6px)
  scale(1.03);

  box-shadow:
  0 22px 40px rgba(111,156,61,0.4);

}

@media(max-width:900px){

  .portal-banner{

    padding:50px 25px;

  }

  .portal-banner p{

    font-size:1rem;

  }

  .btn-area{

    width:90%;

    text-align:center;

  }

}

/* ================= ÁREA DO PACIENTE ================= */

#portal-paciente{

  background:white;

  padding-top:40px;

}

.portal-container{

  max-width:1200px;

  margin:auto;

  background:white;

  border-radius:32px;

  overflow:hidden;

  display:grid;

  grid-template-columns:1.1fr 1fr;

  align-items:center;

  box-shadow:
  0 25px 60px rgba(0,0,0,0.08);

  border:1px solid #efefef;

}

.portal-texto{

  padding:70px;

}

.portal-tag{

  display:inline-block;

  padding:10px 18px;

  border-radius:40px;

  background:rgba(111,156,61,0.12);

  color:var(--verde-claro);

  font-weight:700;

  margin-bottom:25px;

}

.portal-texto h2{

  text-align:left;

  margin-bottom:30px;

  font-size:3rem;

}

.portal-texto h2::after{
  left:0;
  transform:none;
}

.portal-texto p{

  font-size:1.1rem;

  line-height:1.9;

  color:#555;

  margin-bottom:35px;

}

.portal-btn{

  display:inline-block;

  padding:16px 30px;

  border-radius:60px;

  background:var(--verde-claro);

  color:white;

  text-decoration:none;

  font-weight:700;

  transition:0.35s;

  box-shadow:
  0 15px 35px rgba(111,156,61,0.2);

}

.portal-btn:hover{

  transform:
  translateY(-5px)
  scale(1.03);

  box-shadow:
  0 22px 40px rgba(111,156,61,0.35);

}

.portal-imagem{

  min-height:100%;

  background:
  linear-gradient(
    rgba(0,0,0,0.02),
    rgba(0,0,0,0.02)
  ),
  url('../img/area-paciente.png');

  background-size:cover;

  background-position:center;

  height:100%;

}

/* ================= RESPONSIVO ================= */

@media(max-width:900px){

  .portal-container{

    grid-template-columns:1fr;

  }

  .portal-texto{

    padding:45px 30px;

  }

  .portal-texto h2{

    font-size:2.2rem;

  }

  .portal-imagem{

    min-height:320px;

  }

}

/* ================= TEXTO AUXÍLIO PORTAL ================= */

.portal-ajuda{

  margin-top:28px;

  font-size:0.98rem !important;

  color:#666 !important;

  line-height:1.7;

}

.portal-ajuda a{

  color:var(--verde-claro);

  text-decoration:none;

  font-weight:700;

  transition:0.3s;

}

.portal-ajuda a:hover{

  opacity:0.8;

}



/* ================= AVALIAÇÕES GOOGLE ================= */

#avaliacoes{

  background:#f8faf7;

  padding-top:40px;

}

.avaliacoes-container{

  max-width:950px;

  margin:auto;

  background:white;

  border-radius:32px;

  padding:70px 50px;

  text-align:center;

  position:relative;

  overflow:hidden;

  border:1px solid #eeeeee;

  box-shadow:
  0 20px 50px rgba(0,0,0,0.06);

}

.avaliacoes-container::before{

  content:'';

  position:absolute;

  width:350px;
  height:350px;

  background:
  radial-gradient(
    rgba(111,156,61,0.12),
    transparent
  );

  top:-180px;
  right:-120px;

  border-radius:50%;

}

.avaliacoes-stars{

  font-size:2rem;

  margin-bottom:20px;

  letter-spacing:5px;

}

.avaliacoes-tag{

  display:inline-block;

  padding:10px 18px;

  border-radius:40px;

  background:rgba(111,156,61,0.12);

  color:var(--verde-claro);

  font-weight:700;

  margin-bottom:25px;

}

.avaliacoes-container h2{

  margin-bottom:30px;

  font-size:2.7rem;

}

.avaliacoes-container p{

  max-width:750px;

  margin:auto;

  font-size:1.1rem;

  line-height:1.9;

  color:#555;

}

.avaliacoes-btn{

  display:inline-block;

  margin-top:35px;

  padding:18px 34px;

  border-radius:60px;

  background:var(--verde-claro);

  color:white;

  text-decoration:none;

  font-weight:700;

  transition:0.35s;

  box-shadow:
  0 15px 35px rgba(111,156,61,0.22);

}

.avaliacoes-btn:hover{

  transform:
  translateY(-6px)
  scale(1.03);

  box-shadow:
  0 22px 40px rgba(111,156,61,0.35);

}

/* ================= RESPONSIVO ================= */

@media(max-width:900px){

  .avaliacoes-container{

    padding:50px 25px;

  }

  .avaliacoes-container h2{

    font-size:2rem;

  }

  .avaliacoes-stars{

    font-size:1.6rem;

  }

  .avaliacoes-container p{

    font-size:1rem;

  }

  .avaliacoes-btn{

    width:100%;

    text-align:center;

  }

}