/* ==================================================
   VARIÁVEIS
================================================== */

:root{
  --vp-primary:#05634B;
  --vp-primary-hover:#044C3A;
  --vp-accent:#16D6C8;
  --vp-accent-soft:#71E9E8;
  --vp-dark:#0F172A;
  --vp-footer:#101329;
  --vp-text:#111827;
  --vp-muted:#4B5563;
  --vp-border:#D7E2E4;
  --vp-soft-bg:#F4FAF8;
  --vp-white:#FFFFFF;
  --vp-danger:#DC2626;
  --vp-whatsapp:#25D366;
  --vp-radius:18px;
  --vp-shadow:0 14px 40px rgba(15,23,42,.10);
  --vp-shadow-hover:0 24px 60px rgba(15,23,42,.16);
}

/* ==================================================
   BASE
================================================== */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  color:var(--vp-text);
  overflow-x:hidden;
}

img{
  max-width:100%;
  height:auto;
}

a{
  transition:.2s ease;
}

/* ==================================================
   CONTAINERS
================================================== */

.vp-container{
  width:min(1180px, calc(100% - 40px));
  margin-inline:auto;
}

.vp-section{
  padding:80px 0;
}

.vp-section-title{
  text-align:center;
  margin-bottom:42px;
}

.vp-section-title h2{
  margin:0;
  font-size:clamp(28px,3vw,42px);
  line-height:1.15;
  font-weight:800;
}

/* ==================================================
   CARDS
================================================== */

.vp-card{
  background:var(--vp-white);
  border:1px solid var(--vp-border);
  border-radius:var(--vp-radius);
  padding:26px;
  box-shadow:var(--vp-shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.vp-card:hover{
  transform:translateY(-5px);
  border-color:rgba(22,214,200,.55);
  box-shadow:var(--vp-shadow-hover);
}

.vp-card h3{
  margin:0 0 12px;
  font-size:21px;
  line-height:1.2;
}

.vp-card p{
  margin:0;
  color:var(--vp-muted);
  line-height:1.7;
}

/* ==================================================
   GRIDS
================================================== */

.vp-grid-4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}

.vp-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.vp-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
}

/* ==================================================
   BOTÕES
================================================== */

.vp-button,
.elementor-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 26px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
}

.vp-button-primary{
  background:var(--vp-primary);
  color:#fff;
}

.vp-button-primary:hover{
  background:var(--vp-primary-hover);
  color:#fff;
  transform:translateY(-2px);
}

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

.ast-primary-header-bar .site-primary-header-wrap{
  max-width:100% !important;
  padding-left:32px !important;
  padding-right:32px !important;
}

/* Logo já traz o nome "Vet-Pet" — esconde o texto duplicado do site title */
.ast-site-identity .ast-site-title-wrap{
  display:none !important;
}

.vp-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  white-space:nowrap;
}

.vp-header-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 15px;
  border-radius:999px;
  text-decoration:none !important;
  font-size:14px;
  line-height:1;
  font-weight:700;
}

.vp-header-agendar{
  background:var(--vp-primary);
  color:#fff !important;
}

/* ==================================================
   CABEÇALHO — BOTÃO AGENDAR (correção: contorno duplo)
================================================== */

.ast-custom-button,
.vp-header-agendar{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;

  background:#05634b !important;
  color:#ffffff !important;

  min-height:42px !important;
  padding:11px 22px !important;
  border-radius:999px !important;
}

.ast-custom-button:hover{
  background:var(--vp-primary-hover) !important;
}

.ast-custom-button-wrap,
.ast-builder-button-wrap{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
}

.ast-custom-button-link{
  text-decoration:none !important;
}

.ast-builder-button-wrap .menu-link{
  display:none;
}

.vp-header-whatsapp{
  background:var(--vp-whatsapp);
  color:#fff !important;
}

.vp-header-emergencia{
  background:#fff;
  color:var(--vp-danger) !important;
  border:1.5px solid var(--vp-danger);
}

.vp-header-emergencia:hover{
  background:var(--vp-danger);
  color:#fff !important;
}

@media (min-width:922px){
  .ast-builder-grid-row{
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    column-gap:24px !important;
  }

  .site-header-primary-section-center{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
  }

  .main-header-menu{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:14px !important;
    margin-left:40px !important;
  }

  .main-header-menu > .menu-item > a{
    white-space:nowrap;
    font-size:15px;
  }
}

@media (max-width:921px){
  .vp-header-actions{
    width:100%;
    justify-content:center;
    padding:10px 6px;
    gap:7px;
  }

  .vp-header-actions a{
    padding:8px 10px;
    min-height:36px;
    font-size:11px;
  }

  .ast-mobile-popup-content .main-header-menu{
    display:block !important;
    width:100%;
  }

  .ast-mobile-popup-content .main-header-menu > .menu-item{
    display:block !important;
    width:100%;
  }

  .ast-mobile-popup-content .main-header-menu > .menu-item > a{
    display:block !important;
    width:100%;
    padding:13px 18px !important;
    text-align:left;
    white-space:normal;
  }

  /* Os submenus mobile não são forçados como display:block permanente;
     o JS e o estado de expansão nativos do Astra são preservados. */
}

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

.vp-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* PLACEHOLDER: substituir por imagem real (veterinária + pet) via background-image quando disponível */
  background:linear-gradient(120deg, var(--vp-dark) 0%, var(--vp-primary) 100%);
}

.vp-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(4,65,76,.86) 0%,
    rgba(6,92,103,.72) 42%,
    rgba(6,110,120,.40) 72%,
    rgba(6,120,130,.12) 100%
  );
  pointer-events:none;
}

.vp-hero > .elementor-element,
.vp-hero > .e-con-inner{
  position:relative;
  z-index:2;
}

/* ==================================================
   HOME — HERO NO ESTILO ORIGINAL
================================================== */

.vp-home-hero{
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;

  min-height: 540px !important;
  display: flex !important;
  align-items: center !important;

  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center 43% !important;
}

/* Overlay escuro semelhante ao hero antigo */
.vp-home-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(7, 15, 27, .55) 0%,
      rgba(7, 15, 27, .35) 32%,
      rgba(7, 15, 27, .28) 62%,
      rgba(7, 15, 27, .18) 100%
    );
}

/* Conteúdo acima do overlay */
.vp-home-hero > .e-con-inner{
  position: relative !important;
  z-index: 2 !important;

  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 24px !important;
}

/* Bloco de texto */
.vp-home-hero-content{
  width: 570px !important;
  max-width: 50% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  margin: 0 !important;
  padding-top: 110px !important;
  text-align: left !important;
}

/* Título menor e mais leve */
.vp-home-hero-content .elementor-heading-title{
  max-width: 570px !important;
  margin: 0 0 24px !important;

  color: #ffffff !important;
  font-size: clamp(28px, 2.2vw, 36px) !important;
  line-height: 1.20 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;

  text-shadow: 0 3px 14px rgba(0,0,0,.55) !important;
}

/* Subtítulo discreto */
.vp-home-hero-content .elementor-widget-text-editor,
.vp-home-hero-content .elementor-widget-text-editor p{
  max-width: 470px !important;
  margin: 0 0 18px !important;

  color: rgba(255,255,255,.90) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  text-align: left !important;

  text-shadow: 0 2px 10px rgba(0,0,0,.55) !important;
}

/* Botão compacto como no hero antigo */
.vp-home-hero-content .elementor-button{
  min-height: 42px !important;
  padding: 11px 20px !important;

  background: #00d99a !important;
  color: #ffffff !important;

  border: 0 !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  box-shadow: none !important;
}

.vp-home-hero-content .elementor-button:hover{
  background: #00bd86 !important;
  transform: none !important;
}

/* ==================================================
   HOME — HERO RESPONSIVO
================================================== */

@media (max-width: 921px){

  .vp-home-hero{
    min-height: 570px !important;
    align-items: flex-end !important;
    background-position: 58% center !important;
  }

  .vp-home-hero::before{
    background:
      linear-gradient(
        180deg,
        rgba(7,15,27,.10) 0%,
        rgba(7,15,27,.22) 35%,
        rgba(7,15,27,.82) 100%
      );
  }

  .vp-home-hero > .e-con-inner{
    padding: 0 22px 36px !important;
  }

  .vp-home-hero-content{
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
  }

  .vp-home-hero-content .elementor-heading-title{
    max-width: 100% !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  .vp-home-hero-content .elementor-widget-text-editor,
  .vp-home-hero-content .elementor-widget-text-editor p{
    max-width: 100% !important;
    font-size: 15px !important;
  }
}

@media (max-width: 640px){
  .vp-home-hero-content{
    width: 100% !important;
    max-width: 100% !important;
  }

  .vp-home-hero-content .elementor-heading-title{
    max-width: 92% !important;
    font-size: 28px !important;
    line-height: 1.18 !important;
  }
}

/* ==================================================
   IMAGENS
================================================== */

.vp-image img{
  display:block;
  width:100%;
  border-radius:24px;
  box-shadow:var(--vp-shadow-hover);
}

/* ==================================================
   LISTAS
================================================== */

.vp-check-list ul{
  list-style:none;
  padding:0;
  margin:0;
}

.vp-check-list li{
  position:relative;
  padding-left:28px;
  margin-bottom:10px;
  color:var(--vp-muted);
}

.vp-check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--vp-accent);
  font-weight:900;
}

/* ==================================================
   CTA
================================================== */

.vp-cta{
  width:min(1000px,calc(100% - 40px));
  margin:80px auto;
  padding:70px 42px;
  background:linear-gradient(135deg,#9ED8CC,#71E9E8);
  border-radius:32px;
  text-align:center;
  box-shadow:var(--vp-shadow);
}

.vp-cta h2{
  margin:0 0 16px;
  font-size:clamp(28px,3vw,40px);
  color:#083C33;
}

.vp-cta p{
  margin:0 auto 28px;
  max-width:720px;
  color:rgba(8,60,51,.82);
}

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

.vp-location{
  background:var(--vp-soft-bg);
  text-align:center;
  padding-top:70px;
}

.vp-map iframe{
  display:block;
  width:100%;
  height:420px;
  border:0;
  margin:0;
}

/* ==================================================
   RODAPÉ
================================================== */

.vp-footer{
  background:var(--vp-footer);
  color:#fff;
  padding:64px 0 0;
}

.vp-footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr 1fr .8fr;
  gap:54px;
  width:min(1100px,calc(100% - 40px));
  margin:auto;
}

.vp-footer h3{
  color:#fff;
  margin:0 0 22px;
  font-size:24px;
}

.vp-footer p,
.vp-footer a,
.vp-footer li{
  color:rgba(255,255,255,.88);
  line-height:1.65;
}

.vp-footer a{
  text-decoration:none;
}

.vp-footer a:hover{
  color:var(--vp-accent);
}

.vp-footer-bottom{
  margin-top:46px;
  padding:24px 20px;
  text-align:center;
  background:#111;
  border-top:1px solid rgba(255,255,255,.18);
}

/* ==================================================
   RODAPÉ (Astra Footer Builder — #colophon é o wrapper estável do tema)
================================================== */

#colophon,
.site-footer{
  background:var(--vp-footer) !important;
}

#colophon p,
#colophon li,
#colophon a,
.site-footer p,
.site-footer li,
.site-footer a{
  color:rgba(255,255,255,.88);
}

#colophon h2,
#colophon h3,
#colophon .widget-title{
  color:#fff;
  font-size:20px;
  font-weight:700;
  margin:0 0 18px;
}

#colophon a:hover{
  color:var(--vp-accent) !important;
}

.ast-footer-copyright,
.ast-footer-copyright a{
  color:rgba(255,255,255,.65) !important;
}

#colophon .footer-widget-area ul{
  list-style:none;
  padding:0;
  margin:0;
}

#colophon .footer-widget-area li{
  margin-bottom:10px;
}

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

@media (max-width:1024px){
  .vp-grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .vp-grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .vp-grid-2{
    grid-template-columns:1fr;
  }

  .vp-footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px){
  .vp-container{
    width:min(100% - 28px,1180px);
  }

  .vp-section{
    padding:58px 0;
  }

  .vp-grid-4,
  .vp-grid-3{
    grid-template-columns:1fr;
  }

  .vp-card{
    padding:22px;
  }

  .vp-footer-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .vp-cta{
    padding:48px 22px;
    border-radius:24px;
  }

  .vp-map iframe{
    height:350px;
  }
}