/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #fff;
    color: #333;
    line-height: 1.6;
}

/* Container padrão */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header fixo */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    color: #1e2b20;
    z-index: 1000;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.logo img {
    height: 120px;
}

.main-nav {
    display: flex;
    gap: 20px;
}

.main-nav a {
    color: #1e2b20;
    text-decoration: none;
    font-weight: bold;
}

.main-nav a:hover {
    color: #FFD700;
    animation: pulse 1s infinite;
}

/* ====== Hambúrguer ====== */
.menu-hamburguer {
  display: none; /* só aparece em mobile via media query */
  background: transparent;
  border: none;
  gap: 6px;
  padding: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* as 3 linhas */
.menu-hamburguer span {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: #1e2b20; /* cor das linhas - ajuste conforme header */
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* animação ao abrir (transforma em X) */
.menu-hamburguer.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-hamburguer.open span:nth-child(2) {
  opacity: 0;
}
.menu-hamburguer.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}



/* Botão "Agendar Consulta" no header */
.cta-area .btn {
    display: inline-block;
    background: #25D366;
    /* verde claro */
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
    /* formato mais de botão */
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Hover com animação */
.cta-area .btn:hover {
    background: #FFD700;
    /* amarelo */
    color: #fff;
    animation: pulse 1s infinite;
}

/* Reutilizando animação já criada */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Botão flutuante do WhatsApp */
.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 1.5s infinite;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.whatsapp-float img {
    width: 35px;
    height: 35px;
}

.whatsapp-float.show {
    visibility: visible;
    opacity: 1;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Seção principal */
.section {
    margin-top: 150px;
    position: relative;
    overflow: hidden;
}

/* Grid de layout */
.hero-grid {
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1;
}

/* Coluna esquerda */
.hero-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-left h1,
.hero-left p {
    text-align: center;
    margin: 0;
}

/* Contadores */
.counters {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.counter {
    position: relative;
    width: 150px;
    /* aumentei o tamanho do círculo */
    height: 150px;
    /* aumentei também */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Coluna direita */
.hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-right img {
    width: 600px;
    height: 500px;
    display: block;
}

/* Fundo verde que vai até a borda direita */
.hero-img-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100%;
    background-color: #25D366;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    z-index: 0;
}

/* Progress rings */
.progress-ring {
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.ring-bg,
.ring {
    stroke-width: 16;
    /* ou 20, se quiser bem grosso */
}

.ring-bg {
    stroke: #e6e6e6;
}

.ring {
    stroke: #25D366;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-linecap: round;
}

.ring-text {
    font-size: 16px;
    fill: #134124;
    font-weight: 700;
    dominant-baseline: middle;
    text-anchor: middle;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* Parte 2 - Sobre */
#sobre {
    height: auto;
    padding: 40px;
    background-image: url('./imagens/fundo.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: white;
    background-color: rgba(9, 22, 8, 0.514);
    /* preto com 50% de transparência */
    background-blend-mode: darken;
    /* mistura a cor com a imagem */
}

.two-col {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.about-card {
    height: 460px;
    width: auto;
    flex: 1;
    text-align: center;
    background: rgb(28, 94, 2);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
}

.about-card h2 {
    color: rgb(224, 224, 35);
}

.about-card img {
    width: 100%;
    max-width: 300px;
    height: 190px;
    margin: 10px auto;
    border-radius: 10px;
}

.about-text {
    margin: 15px 0;
}

/* Botões */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}

.btn.primary {
    background: #2D3F31;
    color: #fff;
}

.btn.primary.small {
    font-size: 14px;
    padding: 6px 12px;
}

.btn.ghost {
    background: #ffca28;
    /* amarelo */
    color: #2e7d32;
    font-weight: bold;
    padding: 12px 25px;
    border-radius: 25px;
    transition: all 0.3s ease;
    margin-top: 20px;
    display: inline-block;
    text-decoration: none;
    border: none;
}

.btn.ghost:hover {
    background: #ffc107;
    color: #fff;
    transform: scale(1.05);
}

/* ====== Novo about-card verde (card 3) ====== */
.about-card.about-card--green {
  background: rgb(28, 94, 2); /* mesmo tom verde já usado */
  width: 70%;
  align-items: center;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-top: 30px;
}

/* Estrutura interna: texto à esquerda, mídia à direita */
.about-card.about-card--green .about-inner {
  display: flex;
  
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Texto (lado esquerdo) */
.about-card.about-card--green .about-text-left {
  flex: 1 1 360px; /* cresce, encolhe, base mínima */
  min-width: 260px;
  padding: 8px 12px;
  text-align: center; /* texto alinhado à esquerda conforme solicitado */
}

.about-card.about-card--green .about-text-left h2 {
    text-align: center;
  color: rgb(224, 224, 35); /* mantendo o estilo dos outros títulos */
  margin-bottom: 10px;
}

/* Mídia (lado direito) */
.about-card.about-card--green .about-media-right {
  flex: 0 0 320px; /* largura fixa preferencial para a mídia */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}

.about-card.about-card--green .about-media-right img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 10px;

  object-fit: cover;
  display: block;
}

/* Título abaixo da imagem */
.about-card.about-card--green .about-media-title {
  margin: 6px 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.158);
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
  width: 100%;
  max-width: 300px;
}









/* Parte 3 - Carousel */
.carousel {
    overflow: hidden;
    position: relative;
}

#procedimentos h2 {
    text-align: center;
    margin-bottom: 20px;
}


.carousel-track {
    display: flex;
    transition: none;
    /* não usar transições padrão */
}

.carousel-item {
    margin-right: 10px;
}

.proc-card {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    text-align: center;
    width: 250px;
    height: 400px;
    /* altura fixa */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.proc-card img {
    width: 200px;
    height: 300px;
    padding: 10px;
    object-fit: cover;
    /* corta excesso e mantém padrão */
    border-radius: 10px;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

/* Botões do carrossel */
.carousel .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #2D3F31;
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    z-index: 9999;
    /* garante que fique acima de tudo */
    pointer-events: auto;
    /* garante que o botão receba eventos */
    border-radius: 6px;
}

/* posições */
.carousel .carousel-btn.prev {
    left: 8px;
}

.carousel .carousel-btn.next {
    right: 8px;
}

/* hover e foco — reescrevendo o transform mantendo o translateY */
.carousel .carousel-btn:hover,
.carousel .carousel-btn:focus {
    background-color: #ffc107 !important;
    /* !important apenas se estiver depurando; remova depois */
    color: #000;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    outline: none;
}

.carousel-btn.prev {
    left: 0;
}

.carousel-btn.next {
    right: 0;
}

/* Parte 4 */
.grooming-inner {
    text-align: center;
}

.grooming-icon {
    max-width: 100px;
    margin-bottom: 20px;
}

.plan {
    font-weight: bold;
    margin: 10px 0;
}

.small {
    font-size: 12px;
    color: #555;
}

.small-img {
    max-width: 80px;
    margin-top: 10px;
}

/* Parte 4 - Banho e Tosa */
#banho-tosa {
    background: #2e7d32;
    /* verde */
    color: #fff;
    /* letras brancas */

    position: relative;
    overflow: hidden;
    position: relative;
    padding: 80px 20px 140px;
    overflow: hidden;
    font-weight: 500;
    /* todos os textos com peso médio */
}

/* Container geral */
.grooming-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.grooming-inner h3 {
    color: #1e2b20;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 50px;
}

/* Two-col: cards lado a lado */
.two-col {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Cards translúcidos */
.card-services,
.card-plans {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    /* translúcido */
    border-radius: 16px;
    padding: 20px;
    flex: 1;
    width: 400px;
    height: 300px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Títulos dentro dos cards */
.card h3 {
    color: #1e2b20;
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.3rem;
    z-index: 2;
}


.services-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* espaço entre linhas */
    margin-top: 10px;
}

.service-row {
    display: flex;
    justify-content: space-between;
    /* nome à esquerda, preço à direita */
    align-items: center;
    /* mantém alinhado verticalmente */
    font-size: 16px;
    font-weight: 700;
}

.service-name {
    white-space: nowrap;
    /* impede quebra de linha do nome */
}

.service-price {
    white-space: nowrap;
    /* impede quebra de linha do preço */
    color: #ffca28;
    /* destaque amarelo */
}


/* Planos de banho (continua como antes) */
.card-plans .plan {
    font-weight: bold;
    margin: 10px 0;
    z-index: 2;
}

.card-plans .small {
    font-size: 10px;
    color: rgba(231, 235, 7, 0.85);
    z-index: 2;
}

/* Bolhas */
.card .bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* preenche todo o card */
    pointer-events: none;
    z-index: 1;
}

.bubble {
    position: absolute;
    bottom: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0.8;
    transform: translateY(0);
    will-change: transform, opacity;
    transition: transform 1.2s ease-out, opacity 0.4s ease-out;
    z-index: 1;
}

.bubble.animate {
    transform: translateY(-50%);
    /* sobe até metade do card */
    opacity: 0.05;
}

.bubble.pop {
    transform: scale(1.6);
    opacity: 0;
    transition: transform 120ms ease-out, opacity 120ms ease-out;
}

/* Botão WPP */
#banho-tosa .btn.primary {
    background: #ffca28;
    /* amarelo */
    color: #2e7d32;
    font-weight: bold;
    padding: 12px 25px;
    border-radius: 25px;
    transition: all 0.3s ease;
    margin-top: 20px;
    display: inline-block;
    text-decoration: none;
}

#banho-tosa .btn.primary:hover {
    background: #ffc107;
    color: #fff;
    transform: scale(1.05);
}

/* Meia-lua para transição */
#banho-tosa::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 120px;
    background: #fff;
    border-radius: 100% 100% 0 0 / 40% 40% 0 0;
    /* forma suave */
}

/* Parte 5 */
.testimonials-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.test-square {
    background: rgba(0, 0, 0, 0.05);
    padding: 5px;
    border-radius: 10px;
    transition: transform 0.3s ease;
    /* suaviza a animação */
}

.test-square:hover {
    transform: scale(1.05);
    /* aumenta um pouco ao passar o mouse */
}

.test-square img {
    width: 200px;
    height: 250px;
    border-radius: 10px;
}

.thanks {
    text-align: center;
    padding: 20px;
    background: rgb(28, 94, 2);
    color: #fff;
    border-radius: 10px;
}


/* Modal para depoimentos */
/* Modal de depoimentos */
.testimonial-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

.testimonial-modal.show {
    opacity: 1;
    pointer-events: auto;
}

.testimonial-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    max-width: 40%;
    max-height: 100%;
    overflow-y: auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.testimonial-modal.show .testimonial-modal-content {
    transform: scale(1);
}

.testimonial-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #333;
}

.testimonial-modal-body img,
.testimonial-modal-body .test-square {
    width: 100%;
    height: auto;
}


/* Footer */
.site-footer {
    background: #0e2510;
    color: #fff;
    padding: 10px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
    /* centraliza textos */
}

/* Centraliza conteúdos dentro de cada coluna */
.footer-grid>div,
.footer-grid .navegacao,
.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Títulos */
.footer-grid h4 {
    margin-bottom: 10px;
}

/* Navegação no footer */
.site-footer .navegacao {
    display: flex;
    flex-direction: column;
    /* links um abaixo do outro */
    gap: 10px;
    /* espaçamento entre os links */
}

.site-footer .navegacao a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s, transform 0.3s;
}

.site-footer .navegacao a:hover {
    color: #FFD700;
    /* amarelo */
    transform: scale(1.1);
    /* aumenta o tamanho */
}

/* Contato & Redes */
.icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

.socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.socials a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s, transform 0.3s;
}

.socials a img {
    width: 20px;
    height: 20px;
}

.socials a:hover {
    color: #FFD700;
    animation: pulse 1s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Mini mapa */
.mini-map iframe {
    width: 100%;
    height: 150px;
    border-radius: 8px;
}

/* Logo */
.footer-logo img {
    max-width: 300px;
    animation: pulse 1s infinite;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    padding: 20px;
    max-width: 800px;
    width: 90%;
    border-radius: 10px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.modal-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.modal-gallery img {
    width: 100%;
    border-radius: 8px;
}


/* Modal geral */
#gallery-modal {
    display: none;
    /* inicia fechado */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    /* centraliza horizontal */
    align-items: center;
    /* centraliza vertical */
    z-index: 1000;
}

/* Conteúdo do modal */
#gallery-modal .modal-content {
    background-color: #fff;
    border-radius: 12px;
    max-width: 900px;
    /* limite do modal */
    width: 90%;
    /* ocupa 90% da tela */
    max-height: 80vh;
    /* limite de altura */
    overflow-y: auto;
    /* rolagem se necessário */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* vertical dentro do content */
    align-items: center;
    /* horizontal dentro do content */
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

/* Botão fechar */
#gallery-modal .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.8rem;
    cursor: pointer;
    background: none;
    border: none;
}

/* Galeria de imagens */
#gallery-modal .modal-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* centraliza horizontal */
    align-items: center;
    /* centraliza vertical */
    gap: 15px;
    margin-bottom: 20px;
}

/* Cada imagem */
#gallery-modal .modal-gallery img {
    max-width: 200px;
    max-height: 350px;
    width: auto;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

/* Texto da galeria */
#gallery-modal .modal-text {
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    text-align: center;
    /* centraliza horizontal */
    margin-top: 10px;
}




/* ==========================
   Reveal animations (slide-in)
   ========================== */

/* estado inicial: escondido fora da tela */
.reveal {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(.2, .9, .3, 1);
    transition-duration: 600ms;
    pointer-events: auto;
    /* mantém interação quando visível */
}

/* quando ativa: volta à posição original */
.reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Directional presets - translate elements OFF-SCREEN initially */
.reveal--from-left {
    transform: translate3d(-120%, 0, 0);
}

.reveal--from-right {
    transform: translate3d(120%, 0, 0);
}

.reveal--from-top {
    transform: translate3d(0, -60%, 0);
}

.reveal--from-bottom {
    transform: translate3d(0, 60%, 0);
}

/* small screens: reduce translation so they enter nicely */
@media (max-width: 600px) {

    .reveal--from-left,
    .reveal--from-right {
        transform: translate3d(-60%, 0, 0);
    }

    .reveal--from-top,
    .reveal--from-bottom {
        transform: translate3d(0, -30%, 0);
    }
}

/* stagger helper - JS will set inline style --delay; fallback if not set */
.reveal {
    transition-delay: var(--reveal-delay, 0ms);
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal.is-visible {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}



/* ================================
   RESPONSIVIDADE GERAL
================================ */

/* ---- Tablets (máx 1024px) ---- */
@media (max-width: 1024px) {

    .header-inner {
        flex-direction: column;
        gap: 10px;
    }

    .logo img {
        height: 90px;
    }

    .main-nav {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-grid {
        flex-direction: column-reverse;
        text-align: center;
    }

    .hero-right img {
        width: 90%;
        height: auto;
    }

    .counters {
        flex-wrap: wrap;
        gap: 30px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .about-card {
        height: auto;
    }

    .about-card.about-card--green {
        width: 100%;
    }

    .carousel-item .proc-card {
        width: 220px !important;
        height: 360px !important;
    }

    #banho-tosa .two-col {
        flex-direction: column;
        align-items: center;
    }
}

/* ---- Celulares grandes (máx 768px) ---- */
@media (max-width: 768px) {
     
/* esconde o botão/agendamento do header (mantém só logo + hambúrguer) */
  .cta-area { display: none !important; }

  /* mostra o hambúrguer */
  .menu-hamburguer { display: flex; }

  /* esconder o menu horizontal padrão */
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 16px;
    width: calc(100% - 32px);
    max-width: 360px;
    background: #ffffff;
    /* estilo do dropdown */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 16px;
    flex-direction: column;
    gap: 12px;
    z-index: 1500;
  }

  /* links do menu em coluna */
  .main-nav a {
    display: block;
    padding: 8px 12px;
    color: #1e2b20;
    background: transparent;
    border-radius: 8px;
  }

  .main-nav a:active,
  .main-nav a:hover {
    background: rgba(37, 211, 102, 0.08);
  }

  /* quando a nav tiver a classe .open, mostramos */
  .main-nav.open {
    display: flex;
  }

  nav ul.ativo {
    display: flex;
  }

  .menu-hamburguer {
    display: flex;
  }

  .counter {
        display: none;
    }


    .header-inner {
        padding: 10px;
    }

    .main-nav {
        gap: 10px;
    }

    .hero-left h1 {
        font-size: 28px;
    }

    .hero-right img {
        width: 100%;
        max-width: 380px;
    }

    .hero-img-bg {
        width: 100vw;
        border-radius: 0;
    }

    .two-col {
        flex-direction: column;
        gap: 20px;
    }

    .about-card {
        width: 100%;
    }

    .about-card.about-card--green .about-inner {
        flex-direction: column;
    }

    .carousel {
        overflow-x: auto;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .testimonial-modal-content {
        max-width: 90%;
    }
}

/* ---- Celulares pequenos (máx 480px) ---- */
@media (max-width: 480px) {

    .logo img {
        height: 70px;
    }

    .header-inner {
        flex-direction: column;
        text-align: center;
    }

    .main-nav {
        font-size: 14px;
        gap: 6px;
    }

    .cta-area .btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    .hero-left h1 {
        font-size: 22px;
        line-height: 1.2;
    }

    .hero-left p {
        font-size: 14px;
    }

    .progress-ring {
        width: 90px;
        height: 90px;
    }

    .counter {
        width: 110px;
        height: 110px;
    }

    .proc-card {
        width: 180px !important;
        height: 300px !important;
    }

    .testimonials-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .test-square img {
        width: 100%;
        height: 160px;
    }

    #banho-tosa {
        padding: 40px 10px;
    }

    #banho-tosa h3 {
        font-size: 28px;
    }

    .card-services,
    .card-plans {
        width: 100%;
        height: auto;
        padding: 15px;
    }

    .socials {
        gap: 6px;
    }
}