/*
Theme Name: Accional Solutions
Author: Accional
Author URI: https://accional.pt/
Description:
Requires at least: 6.7.2
Requires PHP: 8.0.1
Version: 1.0
*/
#buttonScroll {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: 1px solid #00b7f8;
    background-color: #ffffff;
    color: #00b7f8;
    justify-content: center;
    align-self: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    height: 45px;
    width: 45px;
    border-radius: 30px;
}
.author-info{
	text-align: left;
}
.wc-block-components-button{
	box-shadow: none !important;
}
.wc-block-components-button__text{
	width: 100%;
    background: var(--amarelo);
    padding: 1rem;
    border-radius: 8px;
    color: var(--texto-base);
}
.woocommerce-message {
    border-top-color: var(--azul-principal);
}
.woocommerce-message::before {
    color: var(--azul-principal);
}
.woof h4{
	font-size: 0.9rem;
    font-weight: 600;
    color: var(--escuro);
    margin-bottom: 0.75rem;
	text-transform: none;
}
.woof label{
	flex: 1;
    font-size: 0.9rem;
    color: var(--escuro);
	font-weight: normal;
}

.star-rating {
    float: left;
    color: #ffc864;
}
.star-rating {
    float: right;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    width: 5.4em;
    font-family: star;
}
.star-rating:before {
    color: #f9d28c;
}
.star-rating:before {
    content: "\73\73\73\73\73";
    color: #d3ced2;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}
.star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
}
.star-rating span:before {
    content: "\53\53\53\53\53";
    top: 0;
    position: absolute;
    left: 0;
}
.woocommerce-Reviews p.stars a:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-family: WooCommerce;
    content: "\e021";
    text-indent: 0;
}
.woocommerce-Reviews p.stars a {
    color: #ffc864;
}
.woocommerce-Reviews p.stars a {
    position: relative;
    height: 1em;
    width: 1em;
    text-indent: -999em;
    display: inline-block;
    text-decoration: none;
}
.woocommerce-Reviews p.stars.selected a.active:before, .woocommerce-Reviews p.stars.selected a:not(.active):before, .woocommerce-Reviews p.stars:hover a:before {
    content: "\e020";
}
.woocommerce-Reviews p.stars.selected a.active~a:before, .woocommerce-Reviews p.stars a:hover~a:before {
    content: "\e021";
}


/* Secção de Procura Rápida */
.search-hero {
  background: linear-gradient(135deg, var(--azul-principal), var(--azul-secundario));
  padding: 3rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.search-hero h2 {
  color: var(--branco);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
}

.search-hero p {
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.search-container {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 1rem 1.5rem 1rem 3rem;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--azul-principal);
}

/* Produtos Mais Vendidos com Carrossel */
.bestsellers-section {
  padding: 4rem 1rem;
  background: var(--branco);
}

.products-carousel {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
  padding: 0 25px;
}

.products-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s ease;
  padding: 1rem 0;
}

.product-card-carousel {
  flex: 0 0 280px;
  background: var(--branco);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  position: relative;
}

.product-card-carousel:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.product-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--laranja);
  color: var(--branco);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 2;
}

.product-image-container {
  position: relative;
  height: 200px;
  background: var(--fundo-claro);
  overflow: hidden;
}

.product-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card-carousel:hover .product-image-container img {
  transform: scale(1.05);
}

.product-info-carousel {
  padding: 1.5rem;
}

.product-brand-carousel {
  color: var(--azul-secundario);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.product-name-carousel {
  color: var(--escuro);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-rating-carousel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.stars-carousel {
  display: flex;
  gap: 2px;
}

.star-carousel {
  color: var(--amarelo);
  font-size: 0.9rem;
}

.rating-count-carousel {
  color: var(--cinza-medio);
  font-size: 0.8rem;
}

.product-price-carousel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.current-price-carousel {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--azul-principal);
}

.original-price-carousel {
  font-size: 0.9rem;
  color: var(--cinza-medio);
  text-decoration: line-through;
}

.add-to-cart-carousel {
  width: 100%;
  background: var(--azul-principal);
  color: var(--branco);
  border: none;
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-to-cart-carousel:hover {
  background: var(--azul-secundario);
  transform: translateY(-2px);
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--branco);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.carousel-nav:hover {
  background: var(--azul-principal);
  color: var(--branco);
  transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
  left: 0px;
}

.carousel-next {
  right: 0px;
}

/* Testemunhos */
.testimonials-section {
  background: var(--azul-principal);
  padding: 4rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-top: 3rem;
}

.testimonials-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.03) 50%, transparent 70%);
  pointer-events: none;
}

.testimonials-section h2 {
  color: var(--branco);
  margin-bottom: 3rem;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.testimonial-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.15);
}

.testimonial-text {
  color: var(--branco);
  font-style: italic;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.author-info h5 {
  color: var(--branco);
  margin: 0;
  font-size: 1rem;
}

.author-info p {
  color: rgba(255,255,255,0.8);
  margin: 0;
  font-size: 0.9rem;
}

/* Newsletter */
.newsletter-section {
  background: var(--fundo-claro);
  padding: 4rem 1rem;
  text-align: center;
}

.newsletter-container {
  max-width: 600px;
  margin: 0 auto;
  background: var(--branco);
  padding: 3rem 2rem;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.newsletter-icon {
  width: 80px;
  height: 80px;
  background: var(--azul-principal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  font-size: 2rem;
  color: var(--branco);
}

.newsletter-form {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.newsletter-input {
  flex: 1;
  padding: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.newsletter-input:focus {
  border-color: var(--azul-principal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,183,248,0.1);
}

.newsletter-btn {
  padding: 1rem 2rem;
  background: var(--azul-principal);
  color: var(--branco);
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-btn:hover {
  background: var(--azul-secundario);
  transform: translateY(-2px);
}

/* Responsividade */
@media (max-width: 768px) {
  .search-hero {
	padding: 2rem 1rem;
  }
  
  .stats-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
  }
  
  .benefits-grid {
	grid-template-columns: 1fr;
	gap: 1.5rem;
  }
  
  .product-card-carousel {
	flex: 0 0 250px;
  }
  
  .newsletter-form {
	flex-direction: column;
  }
  
  .newsletter-container {
	padding: 2rem 1rem;
  }
  
  .carousel-nav {
	display: none;
  }
}

/* Animações */
@keyframes fadeInUp {
  from {
	opacity: 0;
	transform: translateY(30px);
  }
  to {
	opacity: 1;
	transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Melhorias na secção existente de categorias */
.grid-categorias-destaque {
  gap: 1.5rem;
  margin-top: 2rem;
}

.grid-categoria-wrapper {
  background: var(--branco);
  padding: 2rem 1rem;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.grid-categoria-wrapper:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  border-color: var(--azul-principal);
}

.grid-nome-categoria {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--azul-secundario);
}

/* Hero Section */
.hero-servicos {
    background: var(--azul-principal);
    color: var(--branco);
    padding: 4rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-servicos::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.hero-content {
    position: relative;
    z-index: 1;
}
.hero-servicos h1 {
    color: var(--branco);
    margin-bottom: 1.5rem;
}
.hero-description {
    font-size: clamp(1.125rem, 2.5vw, 1.25rem);
    margin-bottom: 2rem;
    opacity: 0.95;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
/* Grid de Serviços */
.servicos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 4rem 0;
}
@media (min-width: 768px) {
    .servicos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}
@media (min-width: 1200px) {
    .servicos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.servico-card {
    background: var(--branco);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 183, 248, 0.1);
    position: relative;
    overflow: hidden;
}
.servico-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}
.servico-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--azul-secundario);
    margin-bottom: 1rem;
    line-height: 1.3;
}
.servico-description {
    color: var(--texto-base);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}
.servico-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}
.servico-features li {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
    color: var(--texto-base);
    font-size: 0.95rem;
}
.servico-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--verde);
    font-weight: bold;
}
/* Seção de Destaque */
.destaque-section {
    background: var(--fundo-claro);
    padding: 4rem 0;
    margin: 4rem 0;
    border-radius: 20px;
}
.destaque-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 992px) {
    .destaque-content {
        grid-template-columns: 1fr 1fr;
    }
}
.destaque-text h2 {
    margin-top: 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}
.stat-item {
    text-align: center;
    padding: 1.5rem;
    background: var(--branco);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--azul-principal);
    font-family: 'Boogaloo', cursive;
}
.stat-label {
    font-size: 0.9rem;
    color: var(--texto-base);
    margin-top: 0.5rem;
}
/* FAQ Section */
.faq-section {
    margin: 4rem 0;
}
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    background: var(--branco);
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 183, 248, 0.1);
    overflow: hidden;
}
.faq-question {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--azul-secundario);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}
.faq-question:hover {
    background-color: var(--fundo-claro);
}
.faq-answer {
    padding: 0 1.5rem 1.5rem;
    color: var(--texto-base);
    line-height: 1.7;
    display: none;
}
.faq-item.active .faq-answer {
    display: block;
}
.faq-icon {
    transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}
/* CTA Section */
.cta-section {
    background: var(--azul-principal);
    color: var(--branco);
    padding: 4rem 0;
    text-align: center;
    border-radius: 20px;
    margin: 4rem 0;
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.cta-content {
    position: relative;
    z-index: 1;
}
.cta-section h2 {
    color: var(--branco);
    margin-bottom: 1rem;
}
.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}
@media (min-width: 768px) {
    .cta-buttons {
        flex-direction: row;
    }
}
.btn-primary {
    background: var(--branco);
    color: var(--azul-principal);
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid var(--branco);
}
.btn-primary:hover {
    background: transparent;
    color: var(--branco);
    transform: translateY(-2px);
}
.btn-secondary {
    background: transparent;
    color: var(--branco);
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid var(--branco);
}
.btn-secondary:hover {
    background: var(--branco);
    color: var(--azul-principal);
    transform: translateY(-2px);
}
/* Responsividade */
@media (max-width: 768px) {
    .hero-servicos {
        padding: 3rem 0;
    }
    .servico-card {
        padding: 1.5rem;
    }
    .destaque-section {
        padding: 3rem 0;
        margin: 3rem 0;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================== */
/* Variáveis de Cores    */
/* ===================== */
:root {
  --azul-principal: #00b7f8;
  --azul-secundario: #155d78;
  --escuro: #062d3e;
  --branco: #ffffff;
  --laranja: #e05200;
  --amarelo: #fbbd08;
  --lilas: #95b;
  --verde: #00897b;
  --verde-sucesso: #10b981;
  --fundo-claro: #f7f9fb;
  --texto-base: var(--escuro);
  --border-color: #e0e0e0;
  --cinza-claro: #f2f2f2;
  --cinza-medio: #888;
  --cinza-escuro: #666;
  --border-radius: 12px;
  --shadow-light: 0 2px 8px rgba(0,0,0,0.05);
  --shadow-medium: 0 4px 12px rgba(0, 183, 248, 0.3);
  --shadow-card: 0 2px 5px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 25px rgba(0,0,0,0.15);
  --transition: all 0.3s ease;
  --transition-fast: all 0.2s ease;
  --gradient-primary: linear-gradient(135deg, var(--azul-principal), var(--azul-secundario));
  --gradient-success: linear-gradient(135deg, var(--verde-sucesso), #059669);
  --gradient-warning: linear-gradient(135deg, var(--amarelo), #f59e0b);
}
/* ===================== */
/* Reset & Base          */
/* ===================== */
*, *::before, *::after {
  box-sizing: border-box;
}
html { font-size: 17px; }
body {
  font-family: 'Neuemontreal', sans-serif;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  color: var(--texto-base);
  background-color: var(--fundo-claro);
  margin-top: 120px;
  padding: 0;
}
  .w-lightbox-backdrop {
  background-color: rgba(0, 183, 248, 0.5) !important;
}
.container {
  /*max-width: clamp(320px, 90vw, 1320px);*/
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2rem);
}
  .small-container {
  max-width: clamp(320px, 90vw, 720px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2rem);
}
::placeholder {
  font-size: 0.9rem;
  color: #888;
  padding-left: 0.25rem;
}
.icone-azul { fill: var(--azul-principal); }
/* ===================== */
/* Tipografia            */
/* ===================== */
h1, h2, h3, h4, h5 {
  font-weight: 600;
  line-height: 1.2;
  margin-top: 2rem;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
h1 {
  font-family: 'Boogaloo', cursive;
  font-size: clamp(2.5rem, 6vw, 3rem);
  color: var(--azul-principal);
}
h2 {
  font-family: 'Boogaloo', cursive;
  font-size: clamp(2rem, 5vw, 2.5rem);
  color: var(--azul-secundario);
}
h3, h4, h5 {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  color: var(--escuro);
}
  .nome-produto {
    font-size: clamp(1rem, 2vw, 1.1rem);
  color: var(--azul-principal);
}
p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  margin-bottom: 1.5rem;
}
      .cta {
      background: var(--azul-principal);
      color: white;
      text-align: center;
      padding: 3rem 1rem;
      margin-bottom: 4rem;
    }
    .cta h2 {
      font-size: 2rem;
      font-family: 'Boogaloo', cursive;
      margin-bottom: 1rem;
    }
    .cta a {
      background: white;
      color: var(--azul-principal);
      text-decoration: none;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-weight: bold;
      transition: background 0.3s;
    }
    .cta a:hover {
      background: var(--fundo-claro);
    }


        /* ==================== */
        /* NAVBAR PRINCIPAL     */
        /* ==================== */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--navbar-height);
            background: var(--branco);
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
            transition: var(--transition);
        }

        .navbar.scrolled {
            box-shadow: var(--shadow-medium);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
        }

        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            height: 100%;
            padding: 0 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* Logo */
        .nav-logo {
            display: flex;
            align-items: center;
            z-index: 1001;
        }

        .nav-logo img {
            height: 60px;
            width: auto;
            transition: var(--transition);
			object-fit: contain;
        }

        /* Menu Desktop */
        .nav-menu {
            display: none;
            flex: 1;
            justify-content: center;
            margin: 0 2rem;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            list-style: none;
        }

        .nav-link {
            color: var(--texto-base);
            text-decoration: none;
            font-weight: 400;
            font-size: 0.95rem;
            padding: 0.5rem 0;
            position: relative;
            transition: var(--transition);
			white-space: nowrap;
        }

        .nav-link:hover {
            color: var(--azul-principal);
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--azul-principal);
            transition: var(--transition);
        }

        .nav-link:hover::after,
        .nav-link.current::after {
            width: 100%;
        }

        .nav-link.current {
            color: var(--azul-principal);
            font-weight: 600;
        }

        .nav-link.destaque {
            background: var(--azul-principal);
            color: var(--branco);
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            margin-left: 1rem;
            font-weight: 600;
            transition: var(--transition);
        }

        .nav-link.destaque:hover {
            background: var(--azul-secundario);
            transform: translateY(-1px);
            box-shadow: var(--shadow-medium);
        }

        .nav-link.destaque::after {
            display: none;
        }

        /* Ações da Navbar */
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            z-index: 1001;
			padding-bottom: 10px;
        }

        .action-btn {
            position: relative;
            width: 44px;
            height: 44px;
            border: none;
            background: none;
            cursor: pointer;
            border-radius: var(--border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
			border-radius: 32px;
        }

        .action-btn:hover {
            background: var(--azul-principal);
			transform: scale(1.1);
        }

        .action-btn svg {
            width: 22px;
            height: 22px;
            stroke: var(--texto-base);
            transition: var(--transition);
        }

        .action-btn:hover svg {
            stroke: var(--branco);
        }

        /* Badge do Carrinho */
        .cart-count {
            position: absolute;
            top: 2px;
            right: 2px;
            background: var(--azul-principal);
            color: var(--branco);
            font-size: 0.7rem;
            font-weight: 700;
            min-width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(0);
            transition: var(--transition);
        }

        .cart-count.show {
            opacity: 1;
            transform: scale(1);
        }

        /* Botão Mobile Menu */
        .hamburger {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 24px;
            height: 24px;
            cursor: pointer;
            gap: 3px;
        }

        .hamburger span {
            width: 100%;
            height: 2px;
            background: var(--texto-base);
            transition: var(--transition);
            border-radius: 1px;
        }

        .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(4px, 4px);
        }

        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -5px);
        }

        /* Dropdowns */
        .dropdown {
            position: absolute;
            top: calc(100% + 12px);
            right: 0;
            background: var(--branco);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-hover);
            min-width: 240px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: var(--transition);
            z-index: 1002;
        }
		
		@media (max-width: 640px) {
			.dropdown {
				right: -25vw;
			}
		}
		
		@media (max-width: 400px) {
			.dropdown {
				right: -40vw;
			}
		}

        .dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .dropdown a {
            display: block;
            padding: 0.75rem 1rem;
            color: var(--texto-base);
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 400;
            border-bottom: 1px solid var(--border-color);
            transition: var(--transition);
        }

        .dropdown a:last-child {
            border-bottom: none;
        }

        .dropdown a:hover {
            background: var(--fundo-claro);
            color: var(--azul-principal);
        }

        /* Cart Dropdown Específico */
        .cart-dropdown {
            min-width: 320px;
            max-width: 90vw;
        }

        .cart-header {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
            font-weight: 600;
            font-size: 0.95rem;
            background: var(--fundo-claro);
        }

        .cart-items {
            max-height: 280px;
            overflow-y: auto;
        }

        .cart-empty {
            padding: 2rem 1rem;
            text-align: center;
            color: var(--cinza-medio);
            font-size: 0.9rem;
        }

        .cart-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border-color);
            transition: var(--transition);
        }

        .cart-item:hover {
            background: var(--fundo-claro);
        }

        .cart-item:last-child {
            border-bottom: none;
        }

        .item-image {
            width: 40px;
            height: 40px;
            background: var(--fundo-claro);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .item-details {
            flex: 1;
            min-width: 0;
        }

        .item-name {
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 0.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .item-price {
            font-size: 0.8rem;
            color: var(--azul-principal);
            font-weight: 600;
        }

        .cart-footer {
            padding: 1rem;
            border-top: 1px solid var(--border-color);
            background: var(--fundo-claro);
        }

        .cart-total {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.75rem;
            font-weight: 600;
            font-size: 0.95rem;
        }

        .cart-link {
            display: block;
            text-align: center;
            background: var(--azul-principal);
            color: var(--branco);
            padding: 0.6rem 1rem;
            border-radius: var(--border-radius);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.85rem;
            transition: var(--transition);
        }

        .cart-link:hover {
            background: var(--azul-secundario);
        }

        /* Menu Mobile */
        .mobile-menu {
            position: fixed;
            top: var(--navbar-height);
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--branco);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            z-index: 999;
            overflow-y: auto;
        }

        .mobile-menu.open {
            transform: translateX(0);
        }

        .mobile-nav-content {
            padding: 1.5rem;
        }

        .mobile-nav-links {
            list-style: none;
            margin-bottom: 2rem;
        }

        .mobile-nav-links li {
            border-bottom: 1px solid var(--border-color);
        }

        .mobile-nav-links li:last-child {
            border-bottom: none;
        }

        .mobile-nav-links a {
            display: block;
            padding: 1rem 0;
            color: var(--texto-base);
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 500;
            transition: var(--transition);
        }

        .mobile-nav-links a:hover,
        .mobile-nav-links a.current {
            color: var(--azul-principal);
            padding-left: 1rem;
        }

        .mobile-cta {
            background: var(--azul-principal);
            color: var(--branco);
            padding: 1rem;
            border-radius: var(--border-radius);
            text-align: center;
            text-decoration: none;
            font-weight: 600;
            margin: 1.5rem 0;
            display: block;
            transition: var(--transition);
        }

        .mobile-cta:hover {
            background: var(--azul-secundario);
        }

        .mobile-user-section {
            border-top: 1px solid var(--border-color);
            padding-top: 1.5rem;
        }

        .mobile-section-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--cinza-medio);
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Overlay */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 998;
        }

        .overlay.show {
            opacity: 1;
            visibility: visible;
        }

        /* ==================== */
        /* CONTEÚDO DE EXEMPLO  */
        /* ==================== */
        .content {
            padding: 2rem 1rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .demo-section {
            background: var(--fundo-claro);
            padding: 2rem;
            border-radius: var(--border-radius);
            margin-bottom: 2rem;
        }

        .demo-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        .demo-btn {
            background: var(--azul-principal);
            color: var(--branco);
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
        }

        .demo-btn:hover {
            background: var(--azul-secundario);
        }

        .demo-btn.secondary {
            background: var(--branco);
            color: var(--azul-principal);
            border: 1px solid var(--azul-principal);
        }

        .demo-btn.secondary:hover {
            background: var(--azul-principal);
            color: var(--branco);
        }

        /* ==================== */
        /* RESPONSIVE DESIGN    */
        /* ==================== */
        @media (min-width: 768px) {
            .nav-container {
                padding: 0 2rem;
            }

            .nav-logo img {
                height: 70px;
            }
        }

        @media (min-width: 1280px) {
            .nav-container {
                padding: 0 3rem;
            }

            .nav-links {
                gap: 2.5rem;
            }
            .nav-menu {
                display: flex;
            }

            .mobile-menu {
                display: none;
            }

            .hamburger {
                display: none !important;
            }
        }

        /* Estados de Foco */
        .action-btn:focus,
        .hamburger:focus,
        .nav-link:focus {
            outline: 2px solid var(--azul-principal);
            outline-offset: 2px;
        }

        /* Animações */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dropdown.show {
            animation: slideIn 0.2s ease;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .cart-count.pulse {
            animation: pulse 0.4s ease;
        }

        /* Notificações */
        .notification {
            position: fixed;
            top: 100px;
            right: 1rem;
            background: var(--azul-principal);
            color: var(--branco);
            padding: 0.75rem 1rem;
            border-radius: var(--border-radius);
            font-size: 0.9rem;
            font-weight: 500;
            z-index: 9999;
            opacity: 0;
            transform: translateY(-20px) translateX(20px);
            transition: var(--transition);
            box-shadow: var(--shadow-hover);
            max-width: 300px;
        }

        .notification.show {
            opacity: 1;
            transform: translateY(0) translateX(0);
        }

        .notification.success {
            background: var(--verde);
        }

        .notification.error {
            background: var(--laranja);
        }

        .notification.warning {
            background: var(--amarelo);
            color: var(--texto-base);
        }

/* Ajustes para área reservada */
.dashboard-page {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
.area-reservada-conteudo h4,
.area-reservada-conteudo h5,
.area-reservada-conteudo .dashboard-card h4,
.area-reservada-conteudo .dashboard-card h5,
.area-reservada-conteudo .dashboard-sub-pane h4,
.area-reservada-conteudo .dashboard-sub-pane h5 {
  font-size: 1rem !important;
  font-weight: 600;
  margin: 1.25rem 0 0.75rem;
  color: var(--escuro);
}
  .area-reservada-conteudo.grid-3-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 992px) {
  .area-reservada-conteudo.grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}
@media (min-width: 1200px) {
  .area-reservada-conteudo.grid-3-col {
    grid-template-columns: repeat(4, 1fr);
  }
}
.animal-card-completo {
  background-color: var(--fundo-claro);
  border: 1px solid var(--azul-principal);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 300px;
  transition: box-shadow 0.2s ease-in-out;
  text-decoration: none;
}
.animal-card-completo:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.animal-card-completo.is-add {
  background-color: #e6f7ff;
  font-weight: 600;
}
.animal-card-completo.is-add:hover {
  background-color: #d4f1ff;
}
.animal-card-completo:link,
.animal-card-completo:visited,
.animal-card-completo:hover,
.animal-card-completo:active {
  text-decoration: none;
  color: inherit;
}
.pic-animal.completo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--azul-principal);
}
.nome-animal.completo {
  font-size: 1.125rem;
  font-weight: bold;
  color: var(--azul-principal);
}
.idade-animal {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--escuro);
}
.ver-perfil.completo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--azul-secundario);
  margin-top: 0.25rem;
  text-decoration: none;
}

   /* ===================== */
    /* Breadcrumbs Single page       */
    /* ===================== */
    .breadcrumbs {
      padding: 16px 0;
      background: var(--fundo-claro);
    }

    .breadcrumb-list {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--azul-secundario);
      flex-wrap: wrap;
    }

    .breadcrumb-link {
      color: inherit;
      text-decoration: none;
      transition: var(--transition);
    }

    .breadcrumb-link:hover {
      color: var(--azul-principal);
    }

    .breadcrumb-separator {
      color: var(--border-color);
      font-weight: 500;
    }

    .breadcrumb-current {
      color: var(--escuro);
      font-weight: 500;
    }

    /* ===================== */
    /* Product Layout        */
    /* ===================== */
    .product-container {
      padding: 24px 0;
    }

    .product-grid {
      display: grid;
      gap: 24px;
    }

    /* ===================== */
    /* Product Gallery       */
    /* ===================== */
    .product-gallery {
      position: relative;
    }

    .main-image {
      width: 100%;
      aspect-ratio: 1;
      border-radius: var(--border-radius);
      overflow: hidden;
      background: var(--fundo-claro);
      margin-bottom: 12px;
      position: relative;
    }

    .main-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition);
    }

    .image-zoom-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      border-radius: 8px;
      color: var(--escuro);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
      transition: var(--transition);
    }

    .image-zoom-btn:hover {
      background: var(--azul-principal);
      color: var(--branco);
    }

    .thumbnail-grid {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 4px 0;
    }

    .thumbnail {
      flex-shrink: 0;
      width: 60px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: var(--transition);
    }

    .thumbnail.active {
      border-color: var(--azul-principal);
    }

    .thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ===================== */
    /* Product Info          */
    /* ===================== */
    .product-header {
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 20px;
    }

    .product-title {
      font-size: 24px;
      font-weight: 700;
      color: var(--escuro);
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .product-rating {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
    }

    .stars {
      display: flex;
      gap: 2px;
    }

    .star {
      width: 16px;
      height: 16px;
      color: var(--amarelo);
    }

    .rating-text {
      font-size: 14px;
      color: var(--azul-secundario);
    }

    /* ===================== */
    /* Price Section         */
    /* ===================== */
    .price-section {
      background: var(--fundo-claro);
      padding: 20px;
      border-radius: var(--border-radius);
      border: 1px solid var(--border-color);
	  margin-bottom: 15px;
    }

    .price-main {
      font-size: 28px;
      font-weight: 700;
      color: var(--azul-principal);
      margin-bottom: 4px;
    }

    .price-original {
      font-size: 18px;
      color: var(--azul-secundario);
      text-decoration: line-through;
      margin-right: 8px;
    }

    .price-per-kg {
      font-size: 14px;
      color: var(--azul-secundario);
      font-weight: 500;
    }

    .discount-badge {
      display: inline-block;
      background: var(--laranja);
      color: var(--branco);
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      margin-top: 8px;
    }

    /* ===================== */
    /* Product Options       */
    /* ===================== */
    .product-options {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .option-group {
      background: var(--branco);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      padding: 20px;
	  margin-bottom: 15px;
    }

    .option-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--escuro);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .option-subtitle {
      font-size: 14px;
      color: var(--azul-secundario);
      font-weight: 400;
    }

    /* Size Options */
    .size-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .size-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border: 2px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      transition: var(--transition);
      background: var(--branco);
    }

    .size-option:hover {
      border-color: var(--azul-principal);
      box-shadow: var(--shadow-light);
    }

    .size-option.selected {
      border-color: var(--azul-principal);
      background: rgba(0, 183, 248, 0.05);
    }

    .size-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .size-weight {
      font-weight: 600;
      color: var(--escuro);
    }

    .size-price-per-kg {
      font-size: 12px;
      color: var(--azul-secundario);
    }

    .size-price {
      font-weight: 700;
      color: var(--azul-principal);
      font-size: 16px;
    }

    /* Quantity Selector */
    .quantity-selector {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .quantity-controls {
      display: flex;
      align-items: center;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      overflow: hidden;
    }

    .quantity-btn {
      width: 40px;
      height: 40px;
      border: none;
      background: var(--fundo-claro);
      color: var(--escuro);
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }

    .quantity-btn:hover {
      background: var(--azul-principal);
      color: var(--branco);
    }

    .quantity-input {
      width: 60px;
      height: 40px;
      border: none;
      text-align: center;
      font-weight: 600;
      background: var(--branco);
      color: var(--escuro);
    }

    .total-price {
      font-size: 18px;
      font-weight: 700;
      color: var(--azul-principal);
      margin-left: auto;
    }

    /* ===================== */
    /* Action Buttons        */
    /* ===================== */
    .action-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 20px;
      border-top: 1px solid var(--border-color);
    }

    .btn-primary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--azul-principal);
      color: var(--branco);
      border: none;
      padding: 16px 24px;
      border-radius: var(--border-radius);
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: var(--transition);
      text-decoration: none;
    }

    .btn-primary:hover {
      background: var(--azul-secundario);
      transform: translateY(-1px);
      box-shadow: var(--shadow-medium);
    }

    .btn-secondary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--branco);
      color: var(--azul-principal);
      border: 2px solid var(--azul-principal);
      padding: 14px 24px;
      border-radius: var(--border-radius);
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: var(--transition);
      text-decoration: none;
    }

    .btn-secondary:hover {
      background: var(--azul-principal);
      color: var(--branco);
    }

    .edit-button {
  background: var(--branco);
  color: var(--azul-principal);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  position: absolute;
  top: 2rem;
  right: 2rem;
  box-shadow: var(--shadow-card);
}

.edit-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

    /* ===================== */
    /* Product Features      */
    /* ===================== */
    .product-features {
      display: grid;
      gap: 16px;
      margin-top: 24px;
    }
	
	.feature-content *{
		white-space: pre-wrap;
		word-wrap: break-word; /* para compatibilidade antiga */
		font-family: Neuemontreal, sans-serif;
    }

    .feature-card {
      background: var(--branco);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      padding: 20px;
    }

    .feature-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--escuro);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .feature-icon {
      width: 20px;
      height: 20px;
      color: var(--azul-principal);
    }

    .feature-content {
      color: var(--azul-secundario);
      line-height: 1.6;
    }

    .feature-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 16px;
      margin-top: 20px;
    }

    .feature-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: var(--fundo-claro);
      border-radius: 8px;
    }

    .feature-item-icon {
      width: 24px;
      height: 24px;
      color: var(--azul-principal);
      flex-shrink: 0;
    }

    .feature-item-text {
      font-size: 14px;
      color: var(--escuro);
      font-weight: 500;
    }

    /* ===================== */
    /* Frequently Bought    */
    /* ===================== */
    .frequently-bought {
      background: var(--fundo-claro);
      border-radius: var(--border-radius);
      padding: 24px;
      margin-top: 32px;
    }

    .section-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--escuro);
      margin-bottom: 20px;
    }

    .bundle-items {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 20px;
    }

    .bundle-item {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--branco);
      padding: 16px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
    }

    .bundle-image {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .bundle-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .bundle-info {
      flex: 1;
    }

    .bundle-name {
      font-weight: 600;
      color: var(--escuro);
      font-size: 14px;
      margin-bottom: 4px;
    }

    .bundle-brand {
      font-size: 12px;
      color: var(--azul-secundario);
    }

    .bundle-price {
      font-weight: 700;
      color: var(--azul-principal);
      font-size: 16px;
    }

    .bundle-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      background: var(--branco);
      border-radius: 8px;
      border: 1px solid var(--border-color);
      margin-bottom: 16px;
    }

    .bundle-total-text {
      font-weight: 600;
      color: var(--escuro);
    }

    .bundle-total-price {
      font-size: 18px;
      font-weight: 700;
      color: var(--azul-principal);
    }

    /* ===================== */
    /* Responsive Design     */
    /* ===================== */
    @media (min-width: 640px) {
      .container {
        padding: 0 24px;
      }

      .nav-container {
        padding: 16px 24px;
      }

      .nav-logo img {
        height: 75px;
      }

      .product-container {
        padding: 32px 0;
      }

      .thumbnail {
        width: 80px;
        height: 80px;
      }

      .bundle-items {
        flex-direction: row;
        align-items: flex-start;
      }

      .bundle-item {
        flex-direction: column;
        text-align: center;
        flex: 1;
      }

      .bundle-image {
        width: 80px;
        height: 80px;
        margin: 0 auto;
      }
    }

    @media (min-width: 768px) {
      .product-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;
      }

      .product-title {
        font-size: 28px;
      }

      .price-main {
        font-size: 32px;
      }

      .action-buttons {
        flex-direction: row;
      }

      .btn-primary,
      .btn-secondary {
        flex: 1;
      }
    }

    @media (min-width: 1024px) {
      .container {
        padding: 0 32px;
      }

      .product-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 48px;
      }

      .thumbnail-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        display: grid;
        gap: 12px;
      }

      .thumbnail {
        width: 100%;
        height: 80px;
      }
    }

    @media (min-width: 1200px) {
      .nav-logo img {
        height: 100px;
      }

      .product-container {
        padding: 48px 0;
      }

      .product-grid {
        gap: 64px;
      }
    }

    /* ===================== */
    /* Icons                 */
    /* ===================== */
    .icon {
      width: 20px;
      height: 20px;
      display: inline-block;
      fill: currentColor;
    }

    /* ===================== */
    /* Utilities             */
    /* ===================== */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .hidden {
      display: none;
    }

    /* ===================== */
    /* Loading States        */
    /* ===================== */
    .loading {
      opacity: 0.7;
      pointer-events: none;
    }

    .spinner {
      width: 20px;
      height: 20px;
      border: 2px solid transparent;
      border-top: 2px solid currentColor;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

/* ===================== */
/* Inputs & Forms        */
/* ===================== */
input, select, textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: var(--branco);
  color: var(--texto-base);
  box-sizing: border-box;
  font-weight: 400;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--azul-principal);
  box-shadow: 0 0 0 2px rgba(0,183,248,0.2);
  outline: none;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%2300b7f8' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}
input[type="checkbox"] {
  accent-color: var(--azul-principal);
  width: 1rem;
  height: 1rem;
}
.formulario-consulta {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1rem; /* Adiciona espaço lateral */
}
@media (min-width: 992px) {
  .formulario-consulta {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem 2rem;
    align-items: start;
  }
}
/* Formulário agrupado */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.formulario-definicoes label {
  font-weight: 600;
  color: var(--azul-principal);
  margin-bottom: 0.25rem;
  text-align: left;
  display: block;
}
/* ===================== */
/* Formulários duplos    */
/* ===================== */
.nome-duplo,
.codigo-postal-duplo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nome-duplo .form-group,
.codigo-postal-duplo .form-group {
  flex: 1;
}
@media (min-width: 992px) {
  .nome-duplo,
  .codigo-postal-duplo {
    flex-direction: row;
  }
}
/* ===================== */
/* Botões                */
/* ===================== */
.btn-enviar, .btn-ok, .add-cart-btn {
  background-color: var(--azul-principal);
  color: var(--branco);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.btn-enviar, .btn-ok {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}
.add-cart-btn {
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  border-radius: 6px;
}
.btn-enviar:hover, .btn-ok:hover, .add-cart-btn:hover {
  background-color: var(--azul-secundario);
}
/* ===================== */
/* Avisos                */
/* ===================== */
.aviso {
  padding: 1.25rem 1.5rem;
  background-color: #fff8e1;
  border-left: 4px solid var(--amarelo);
  border-radius: 6px;
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--escuro);
  position: relative;
}
/* ===== Contactos Wrapper ===== */
.contactos-wrapper {
  padding: 2rem;
  background-color: var(--fundo-claro);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  margin: 2rem auto;
  max-width: 1200px;
}
.contactos-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 992px) {
  .contactos-wrapper {
    padding: 0 2rem;
  }
  .contactos-grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .info-contacto {
    flex: 0 0 45%;
  }
  .contact-form {
    flex: 0 0 50%;
  }
}
/* Bloco de informação */
.info-contacto {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.info-linha {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.info-linha svg {
  flex-shrink: 0;
  margin-top: 0.25rem;
}
.info-contacto h5 {
  font-size: 1rem;
  color: var(--azul-principal);
  margin-bottom: 0.25rem;
}
.info-contacto p {
  font-size: 0.95rem;
  margin: 0;
}
.info-contacto a {
  text-decoration: underline;
  color: var(--escuro);
}
/* Formulário */
.contact-form h2 {
  font-family: 'Boogaloo', cursive;
  color: var(--escuro);
  margin-bottom: 1.5rem;
}
.contact-form .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.contact-form label {
  font-weight: 600;
  color: var(--azul-principal);
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  text-align: left;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-size: 1rem;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: var(--branco);
  color: var(--escuro);
  font-family: inherit;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--azul-principal);
  box-shadow: 0 0 0 2px rgba(0, 183, 248, 0.2);
  outline: none;
}
.contact-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%2300b7f8' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}
.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}
.btn-enviar {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--azul-principal);
  color: var(--branco);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease-in-out;
}
.btn-enviar:hover {
  background-color: var(--azul-secundario);
}
/* ===================== */
/* Responsivo            */
/* ===================== */
 /* Menu Area Reservada */
.menu-lateral {
  background-color: #022c3f;
  color: #fff;
  width: 260px;
  min-height: 100vh;
  padding: 1.5rem 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.user-card {
  background-color: #a3e7ff;
  color: #062d3e;
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.user-avatar svg {
  width: 40px;
  height: 40px;
}
.user-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.user-nome {
  font-weight: 600;
  margin: 0;
}
.user-tag {
  font-size: 0.75rem;
  background-color: #ffc0ea;
  color: #062d3e;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  width: fit-content;
}
  .menu-nav a[aria-current="page"] {
  background-color: var(--azul-principal);
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
}
.menu-toggle {
  display: none;
}
.menu-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-nav li {
  margin-bottom: 1rem;
}
.menu-nav hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 1.5rem 0;
}
.menu-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  transition: background-color 0.2s ease-in-out;
}
.menu-nav a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.menu-nav a.ativo,
.menu-nav a[aria-current="page"] {
  background-color: var(--azul-principal);
  color: #fff;
  font-weight: 600;
}
.menu-nav svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}
@media (max-width: 768px) {
  .menu-lateral {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }
  .menu-lateral.aberto {
    transform: translateX(0);
  }
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  .filters-sidebar {
	display: none;
	position: fixed !important;
	z-index: 9999 !important;
	top: 0 !important;
	left: 0 !important;
	height: 100vw !important;
	max-height: 100vh !important;
  }
  .close-filters, .filters-sidebar.active {
    display: block !important;
  }
}

/*página loja online - dentro da categoria */

/* ======================
   HEADER DA PÁGINA
====================== */
/* Header da Página */
.page-header {
background: var(--branco);
border-bottom: 1px solid var(--border-color);
padding: 2rem 0;
margin-bottom: 2rem;
}

.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
font-size: 0.9rem;
color: var(--cinza-medio);
}

.breadcrumb a {
color: var(--azul-principal);
text-decoration: none;
}

.breadcrumb-separator {
color: var(--cinza-medio);
}

.page-title {
font-size: 2rem;
font-weight: 700;
color: var(--escuro);
margin-bottom: 0.5rem;
}

.page-description {
color: var(--cinza-escuro);
font-size: 1.1rem;
max-width: 800px;
}
/* Layout Principal */
.main-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: start;
}
/* Filtros Mobile */
.mobile-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.filters-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--azul-principal);
  color: var(--branco);
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.filters-toggle:hover {
  background: var(--azul-secundario);
}

/* ======================
   CONTROLES MOBILE
====================== */
.mobile-controls {
	position: sticky;
	top: 0;
	background: var(--branco);
	border-bottom: 1px solid var(--border-color);
	padding: 12px 0;
	z-index: 100;
	margin-bottom: 20px;
}

.controls-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.results-count {
	font-size: 12px;
	color: var(--cinza-medio);
	white-space: nowrap;
}

.controls-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.filters-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--azul-principal);
	color: white;
	border: none;
	padding: 8px 12px;
	border-radius: var(--border-radius);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: var(--transition);
}

.filters-btn:hover {
	background: var(--azul-secundario);
}

.sort-select {
	padding: 8px 32px 8px 12px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	background: var(--branco);
	font-size: 12px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
	background-position: right 8px center;
	background-repeat: no-repeat;
	background-size: 16px;
	min-width: 120px;
	cursor: pointer;
}

.view-toggle {
	display: flex;
	background: var(--cinza-claro);
	border-radius: var(--border-radius);
	padding: 2px;
}

.view-btn {
	padding: 6px 8px;
	background: none;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: var(--transition);
	font-size: 14px;
}

.view-btn.active {
	background: var(--branco);
	box-shadow: var(--sombra-card);
}

/* ======================
   FILTROS MOBILE OVERLAY
====================== */
.filters-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 200;
	display: none;
	backdrop-filter: blur(4px);
}

.filters-overlay.active {
	display: block;
}

.filters-sidebar {
	position: fixed;
	top: 0;
	left: -100%;
	width: 320px;
	max-width: 90vw;
	height: 100vh;
	background: var(--branco);
	z-index: 300;
	transition: left 0.3s ease-in-out;
	overflow-y: auto;
	border-right: 1px solid var(--border-color);
	box-shadow: var(--sombra-intensa);
}

.filters-sidebar.active {
	left: 0;
}

.filters-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	background: var(--branco);
	z-index: 10;
}

.close-filters {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--cinza-medio);
	padding: 4px;
	width: 32px;
	height: 32px;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: var(--transition);
}

.close-filters:hover {
	background: var(--cinza-claro);
}

.filters-content {
	padding: 20px;
}

/* Sidebar de Filtros */
    .filters-sidebar {
      background: var(--branco);
      border-radius: var(--border-radius);
      padding: 1.5rem;
      box-shadow: var(--shadow-card);
      position: sticky;
      top: 2rem;
      max-height: calc(100vh - 4rem);
      overflow-y: auto;
    }

    .filters-title {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--escuro);
      margin-bottom: 1.5rem;
      padding-bottom: 0.75rem;
      border-bottom: 2px solid var(--azul-principal);
	  margin: 16px 0 24px 0;
	  line-height: normal;
    }

    /* Grupos de Filtros */
    .filter-group {
      margin-bottom: 2rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--border-color);
    }

    .filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .filter-label {
      font-weight: 600;
      color: var(--escuro);
      font-size: 1rem;
    }

    .clear-filter {
      background: none;
      border: none;
      color: var(--azul-principal);
      font-size: 0.85rem;
      cursor: pointer;
      text-decoration: underline;
    }

    /* Search Input */
    .search-input {
      width: 100%;
      padding: 0.75rem 1rem 0.75rem 2.5rem;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: 0.9rem;
      background: var(--fundo-claro);
    }

    .search-input:focus {
      outline: none;
      border-color: var(--azul-principal);
      box-shadow: 0 0 0 3px rgba(0, 183, 248, 0.1);
    }

    .search-icon {
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--cinza-medio);
      width: 16px;
      height: 16px;
    }

    /* Filtros por Checkboxes */
    .filter-options {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .filter-option {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem 0.75rem;
      border-radius: 6px;
      cursor: pointer;
      transition: var(--transition);
    }

    .filter-option:hover {
      background: var(--fundo-claro);
    }

    .filter-checkbox {
      appearance: none;
      width: 18px;
      height: 18px;
      border: 2px solid var(--border-color);
      border-radius: 4px;
      position: relative;
      cursor: pointer;
      transition: var(--transition);
    }

    .filter-checkbox:checked {
      background: var(--azul-principal);
      border-color: var(--azul-principal);
    }

    .filter-checkbox:checked::after {
      content: '✓';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 12px;
      font-weight: bold;
    }

    .filter-text {
      flex: 1;
      font-size: 0.9rem;
      color: var(--escuro);
    }

    .filter-count {
      font-size: 0.8rem;
      color: var(--cinza-medio);
      background: var(--cinza-claro);
      padding: 0.2rem 0.5rem;
      border-radius: 10px;
      min-width: 20px;
      text-align: center;
    }

    /* Filtros Ativos */
    .active-filters {
      margin-bottom: 1.5rem;
    }

    .active-filters-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--escuro);
      margin-bottom: 0.75rem;
    }

    .active-filters-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .active-filter {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--azul-principal);
      color: var(--branco);
      padding: 0.4rem 0.75rem;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 500;
    }

    .remove-filter {
      background: none;
      border: none;
      color: var(--branco);
      cursor: pointer;
      font-size: 1rem;
      padding: 0;
      margin-left: 0.25rem;
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }

    .remove-filter:hover {
      background: rgba(255, 255, 255, 0.2);
    }
	
/* ======================
   GRUPOS DE FILTROS
====================== */
.filter-group {
	margin-bottom: 28px;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 24px;
}

.filter-title {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 16px;
	color: var(--escuro);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.filter-clear {
	background: none;
	border: none;
	color: var(--azul-principal);
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
	padding: 2px 4px;
	border-radius: 4px;
	transition: var(--transition);
}

.filter-clear:hover {
	background: var(--cinza-claro);
}

.filter-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.filter-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	cursor: pointer;
	transition: var(--transition);
	border-radius: 6px;
}

.filter-option:hover {
	background: var(--cinza-claro);
	padding: 8px 12px;
	margin: 0 -12px;
}

.filter-option input[type="checkbox"] {
	appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--border-color);
	border-radius: 4px;
	position: relative;
	cursor: pointer;
	transition: var(--transition);
	flex-shrink: 0;
}

.filter-option input[type="checkbox"]:checked {
	background: var(--azul-principal);
	border-color: var(--azul-principal);
}

.filter-option input[type="checkbox"]:checked::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 12px;
	font-weight: bold;
}

.filter-label {
	flex: 1;
	font-size: 13px;
	line-height: 1.4;
}

.filter-count {
	color: var(--cinza-medio);
	font-size: 11px;
	background: var(--cinza-claro);
	padding: 2px 8px;
	border-radius: 12px;
	min-width: 24px;
	text-align: center;
}

/* ======================
   FILTROS ESPECIAIS
====================== */
.price-range {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 16px;
}

.price-input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	font-size: 13px;
	text-align: center;
	transition: var(--transition);
}

.price-input:focus {
	outline: none;
	border-color: var(--azul-principal);
	box-shadow: 0 0 0 3px rgba(0, 183, 248, 0.1);
}

.price-separator {
	color: var(--cinza-medio);
	font-size: 14px;
	font-weight: 500;
}

.filter-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.filter-tag {
	padding: 6px 12px;
	background: var(--cinza-claro);
	border: 1px solid var(--border-color);
	border-radius: 20px;
	font-size: 12px;
	cursor: pointer;
	transition: var(--transition);
	font-weight: 500;
}

.filter-tag:hover {
	background: var(--cinza-medio);
	color: white;
	border-color: var(--cinza-medio);
}

.filter-tag.active {
	background: var(--azul-principal);
	color: white;
	border-color: var(--azul-principal);
}

.rating-filter {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rating-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	cursor: pointer;
	border-radius: 6px;
	transition: var(--transition);
}

.rating-option:hover {
	background: var(--cinza-claro);
	padding: 8px 12px;
	margin: 0 -12px;
}

.stars {
	display: flex;
	gap: 1px;
}

.star {
	color: var(--amarelo);
	font-size: 14px;
}

.star.empty {
	color: var(--cinza-claro);
}

/* ======================
   FILTROS ATIVOS
====================== */
.active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	padding: 0 16px;
}

.active-filter {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--azul-principal);
	color: white;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
}

.remove-filter {
	background: none;
	border: none;
	color: white;
	cursor: pointer;
	font-size: 14px;
	padding: 0 2px;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}

.remove-filter:hover {
	background: rgba(255, 255, 255, 0.2);
}
/* Área de Produtos */
.products-area {
  min-height: 400px;
}

.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  background: var(--branco);
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card);
}

.results-info {
  font-size: 0.9rem;
  color: var(--cinza-escuro);
}

.results-count {
  font-weight: 600;
  color: var(--escuro);
}

.view-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.view-toggle {
  display: flex;
  background: var(--fundo-claro);
  border-radius: 6px;
  padding: 2px;
}

.view-btn {
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--cinza-medio);
  transition: var(--transition);
}

.view-btn.active {
  background: var(--branco);
  color: var(--azul-principal);
  box-shadow: var(--shadow-light);
}

/* ======================
   LAYOUT PRINCIPAL
====================== */
.main-content {
	display: block;
}

.desktop-controls {
	display: none;
}

/* ======================
   GRID DE PRODUTOS
====================== */
.products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-bottom: 3rem;
}
.products-grid.list-view {
	grid-template-columns: 1fr;
}
.product-card {
  background: var(--branco);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.product-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--fundo-claro);
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 2;
}

.badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.badge.discount {
  background: var(--laranja);
  color: var(--branco);
}

.badge.new {
  background: var(--verde);
  color: var(--branco);
}

/* Quick View Overlay */
.quick-view-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
  z-index: 1;
}

.product-card:hover .quick-view-overlay {
  opacity: 1;
}

.quick-view-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--branco);
  color: var(--azul-principal);
  padding: 0.75rem 1rem;
  border-radius: 25px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--shadow-medium);
  transform: translateY(10px);
  transition: var(--transition);
}

.product-card:hover .quick-view-btn {
  transform: translateY(0);
}

.quick-view-btn:hover {
  background: var(--azul-principal);
  color: var(--branco);
  transform: scale(1.05);
}

.product-info {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-brand {
  font-size: 0.85rem;
  color: var(--cinza-medio);
  font-weight: 500;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--escuro);
  margin-bottom: 0.75rem;
  line-height: 1.4;
  flex: 1;
  margin: 16px 0 12px 0;
}

.product-options {
  font-size: 0.85rem;
  color: var(--azul-principal);
  background: rgba(0, 183, 248, 0.1);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 500;
}

.product-pricing {
  margin-bottom: 1rem;
}

.product-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--azul-principal);
  margin-bottom: 0.25rem;
}

.price-per-kg {
  font-size: 0.8rem;
  color: var(--cinza-medio);
}

.product-actions {
  padding: 0 1.25rem 1.25rem;
}

.add-to-cart {
  background: var(--azul-principal);
  color: var(--branco);
  border: none;
  padding: 0.875rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.9rem;
  width: 100%;
}

.add-to-cart:hover {
  background: var(--azul-secundario);
  transform: translateY(-1px);
}

.product-options {
  font-size: 0.85rem;
  color: var(--azul-principal);
  background: rgba(0, 183, 248, 0.1);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 500;
}

.product-pricing {
  margin-bottom: 1rem;
}

.product-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--azul-principal);
  margin-bottom: 0.25rem;
}

.price-per-kg {
  font-size: 0.8rem;
  color: var(--cinza-medio);
}

.add-to-cart {
  background: var(--azul-principal);
  color: var(--branco);
  border: none;
  padding: 0.875rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.9rem;
}

.add-to-cart:hover {
  background: var(--azul-secundario);
  transform: translateY(-1px);
}

/* ======================
   VISTA LISTA MOBILE
====================== */
.products-grid.list-view .product-card {
	flex-direction: row;
	height: auto;
}

.products-grid.list-view .product-image-container {
	width: 100px;
	min-width: 100px;
	aspect-ratio: 1;
}

.products-grid.list-view .product-info {
	padding: 12px;
	flex: 1;
}

.products-grid.list-view .product-name {
	font-size: 12px;
	-webkit-line-clamp: 2;
}

.products-grid.list-view .current-price {
	font-size: 14px;
}

.products-grid.list-view .add-to-cart {
	padding: 8px 12px;
	font-size: 11px;
}

/* ======================
   ESTADOS ESPECIAIS
====================== */
.loading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200px;
}

.spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--cinza-claro);
	border-top: 3px solid var(--azul-principal);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--cinza-medio);
}

.empty-state h3 {
	font-size: 20px;
	margin-bottom: 12px;
	font-weight: 600;
}

.empty-state p {
	font-size: 14px;
	line-height: 1.5;
}

/* ======================
   PAGINAÇÃO
====================== */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 40px;
	padding: 0 16px;
}

.pagination-btn {
	padding: 10px 14px;
	border: 1px solid var(--border-color);
	background: var(--branco);
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: var(--transition);
	font-size: 13px;
	min-width: 40px;
	text-align: center;
	font-weight: 500;
}

.pagination-btn:hover,
.pagination-btn.active {
	background: var(--azul-principal);
	color: white;
	border-color: var(--azul-principal);
}

.pagination-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pagination-dots {
	padding: 10px 6px;
	color: var(--cinza-medio);
}

/* ======================
   ANIMAÇÕES
====================== */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.product-card {
	animation: fadeIn 0.3s ease-out;
}

/* ======================
   TABLET - 768px+
====================== */
@media (min-width: 768px) {
	.container {
		padding: 0 24px;
	}

	.page-header {
		padding: 40px 0;
	}

	.page-title {
		font-size: 36px;
		margin-bottom: 16px;
	}

	.page-description {
		font-size: 16px;
		margin-bottom: 0;
		max-width: 800px;
	}

	.breadcrumb {
		font-size: 14px;
		margin-bottom: 20px;
	}

	.mobile-controls {
		padding: 16px 0;
	}

	.controls-row {
		gap: 16px;
	}

	.results-count {
		font-size: 14px;
	}

	.sort-select {
		font-size: 14px;
		padding: 10px 36px 10px 14px;
		min-width: 180px;
	}

	.filters-btn {
		padding: 10px 16px;
		font-size: 14px;
	}

	.products-grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 16px;
	}

	.current-price {
		font-size: 18px;
	}

	.active-filters {
		padding: 0 24px;
		gap: 10px;
	}

	.pagination {
		gap: 8px;
		padding: 0 24px;
	}

	.pagination-btn {
		padding: 12px 16px;
		font-size: 14px;
	}
}

/* ======================
   DESKTOP - 1024px+
====================== */
@media (min-width: 1024px) {
	body {
		font-size: 15px;
	}

	.page-header {
		padding: 50px 0;
	}

	.page-title {
		font-size: 42px;
		margin-bottom: 20px;
	}

	.page-description {
		font-size: 18px;
		line-height: 1.6;
	}

	/* Esconder controles mobile */
	.mobile-controls {
		display: none;
	}

	/* Sidebar de filtros desktop */
	.filters-sidebar {
		position: static;
		width: auto;
		height: auto;
		background: var(--branco);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		padding: 24px;
		box-shadow: var(--sombra-card);
		position: sticky;
		top: 20px;
		max-height: calc(100vh - 40px);
		overflow-y: auto;
	}

	.filters-header {
		display: none;
	}

	.filters-content {
		padding: 0;
	}

	/* Controles desktop */
	.desktop-controls {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32px;
		padding: 20px 24px;
		background: var(--branco);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		box-shadow: var(--sombra-card);
	}

	.results-info {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.results-count {
		font-size: 16px;
		font-weight: 600;
		color: var(--escuro);
	}

	.sort-select {
		font-size: 15px;
		padding: 12px 40px 12px 16px;
		min-width: 220px;
		border: 2px solid var(--border-color);
	}

	.sort-select:focus {
		outline: none;
		border-color: var(--azul-principal);
		box-shadow: 0 0 0 3px rgba(0, 183, 248, 0.1);
	}

	.view-toggle {
		padding: 3px;
	}

	.view-btn {
		padding: 8px 12px;
		font-size: 16px;
	}

	/* Grid de produtos desktop */
	.products-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 24px;
		margin-bottom: 60px;
	}

	.product-card {
		transition: all 0.3s ease;
		border-radius: 12px;
	}

	.product-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--sombra-intensa);
	}

	.product-card:hover .product-image {
		transform: scale(1.05);
	}

	.product-image-container {
		border-radius: 12px 12px 0 0;
	}

	.feature-tag {
		padding: 3px 8px;
		font-size: 10px;
		border-radius: 6px;
	}

	.product-rating {
		margin-bottom: 14px;
		gap: 8px;
	}

	.product-rating .star {
		font-size: 13px;
	}

	.rating-text {
		font-size: 11px;
	}

	.current-price {
		font-size: 20px;
	}

	.original-price {
		font-size: 14px;
	}

	.discount-percentage {
		padding: 3px 8px;
		font-size: 10px;
		border-radius: 6px;
	}

	/* Lista view desktop */
	.products-grid.list-view {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.products-grid.list-view .product-card {
		flex-direction: row;
		height: auto;
		align-items: center;
	}

	.products-grid.list-view .product-image-container {
		width: 140px;
		min-width: 140px;
		height: 140px;
		border-radius: 12px 0 0 12px;
	}

	.products-grid.list-view .product-info {
		padding: 20px;
		flex: 1;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 16px;
		align-items: center;
	}

	.products-grid.list-view .product-details {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.products-grid.list-view .product-name {
		font-size: 16px;
		-webkit-line-clamp: 2;
	}

	.products-grid.list-view .product-actions-area {
		display: flex;
		flex-direction: column;
		gap: 12px;
		align-items: flex-end;
	}

	.products-grid.list-view .current-price {
		font-size: 18px;
	}

	.products-grid.list-view .add-to-cart {
		padding: 12px 20px;
		font-size: 13px;
		min-width: 140px;
	}

	/* Filtros ativos desktop */
	.active-filters {
		padding: 0;
		margin-bottom: 32px;
		gap: 12px;
	}

	.active-filter {
		padding: 8px 16px;
		font-size: 13px;
		border-radius: 24px;
	}

	.remove-filter {
		width: 18px;
		height: 18px;
		font-size: 16px;
	}

	/* Paginação desktop */
	.pagination {
		gap: 10px;
		padding: 0;
		margin-top: 60px;
	}

	.pagination-btn {
		padding: 14px 18px;
		font-size: 15px;
		min-width: 48px;
		border-radius: 8px;
	}

	/* Melhorias nos filtros desktop */
	.filter-group {
		margin-bottom: 32px;
		padding-bottom: 28px;
	}

	.filter-title {
		font-size: 16px;
		margin-bottom: 20px;
	}

	.filter-options {
		gap: 14px;
	}

	.filter-option {
		padding: 10px 0;
		border-radius: 8px;
	}

	.filter-option:hover {
		padding: 10px 16px;
		margin: 0 -16px;
	}

	.filter-option input[type="checkbox"] {
		width: 20px;
		height: 20px;
		border-radius: 5px;
	}

	.filter-label {
		font-size: 14px;
	}

	.filter-count {
		font-size: 12px;
		padding: 3px 10px;
		border-radius: 15px;
	}

	.filter-tags {
		gap: 10px;
	}

	.filter-tag {
		padding: 8px 16px;
		font-size: 13px;
		border-radius: 24px;
	}

	.price-range {
		gap: 16px;
		margin-bottom: 20px;
	}

	.price-input {
		padding: 12px 16px;
		font-size: 14px;
		border-radius: 8px;
	}

	.rating-option {
		padding: 10px 0;
		border-radius: 8px;
	}

	.rating-option:hover {
		padding: 10px 16px;
		margin: 0 -16px;
	}

	.stars .star {
		font-size: 16px;
	}

	/* Estados hover para desktop */
	.filter-option:hover {
		color: var(--azul-principal);
	}

	.filter-tag:hover:not(.active) {
		background: var(--cinza-medio);
		color: white;
		transform: translateY(-1px);
	}

	.product-card:hover {
		opacity: 1;
	}

	.action-btn {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
}

/* ======================
   LARGE DESKTOP - 1200px+
====================== */
@media (min-width: 1200px) {

  .left-box {
    max-width: 800px;
    margin-top: 15svh;
  }
	.container {
		padding: 0 32px;
	}

	.filters-sidebar {
		padding: 32px;
		border-radius: 16px;
	}

	.desktop-controls {
		padding: 24px 32px;
		border-radius: 16px;
	}

	.products-grid {
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
		gap: 28px;
	}

	.product-card {
		border-radius: 16px;
	}

	.product-image-container {
		border-radius: 16px 16px 0 0;
	}

	.products-grid.list-view .product-image-container {
		width: 160px;
		min-width: 160px;
		height: 160px;
		border-radius: 16px 0 0 16px;
	}

	.current-price {
		font-size: 22px;
	}
}

/* ======================
   EXTRA LARGE - 1400px+
====================== */
@media (min-width: 1400px) {
	.products-grid {
		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
		gap: 32px;
	}
}

/* ======================
   ESTADOS TOUCH/HOVER
====================== */
@media (hover: none) {
	.product-card:hover {
		transform: none;
	}

	.product-card:active {
		transform: scale(0.98);
	}
}

/* ======================
   ACCESSIBILITY
====================== */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Focus states para navegação por teclado */
.filter-option:focus-within,
.filter-tag:focus,
.pagination-btn:focus,
.add-to-cart:focus,
.action-btn:focus {
	outline: 2px solid var(--azul-principal);
	outline-offset: 2px;
}

/* ======================
   SCROLL CUSTOMIZADO
====================== */
.filters-sidebar::-webkit-scrollbar {
	width: 6px;
}

.filters-sidebar::-webkit-scrollbar-track {
	background: var(--cinza-claro);
	border-radius: 10px;
}

.filters-sidebar::-webkit-scrollbar-thumb {
	background: var(--cinza-medio);
	border-radius: 10px;
}

.filters-sidebar::-webkit-scrollbar-thumb:hover {
	background: var(--azul-principal);
}

/* PÁGINA DE SIGN-UP*/
.small-container {
	max-width: clamp(320px, 90vw, 800px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 2rem);
	padding-block: 2rem;
}
.header {
	text-align: center;
	margin-bottom: 3rem;
	background: var(--branco);
	padding: 2rem;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.paw-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}
h1 {
	font-family: 'Boogaloo', cursive;
	color: var(--azul-principal);
	font-size: clamp(2.5rem, 6vw, 3rem);
	margin-bottom: 0.5rem;
	font-weight: 600;
	line-height: 1.2;
	margin-top: 0;
}
.subtitle {
	font-family: 'Boogaloo', cursive;
	color: var(--azul-secundario);
	font-size: clamp(1.5rem, 4vw, 2rem);
	margin-bottom: 1rem;
}
.intro-text {
	color: var(--texto-base);
	font-size: clamp(1rem, 2vw, 1.125rem);
	line-height: 1.6;
	margin-bottom: 0;
}
.signup-form {
	background: var(--branco);
	padding: 2.5rem;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	margin-bottom: 2rem;
}
.form-section {
	margin-bottom: 2rem;
}
.form-section h3 {
	color: var(--azul-secundario);
	margin-bottom: 1rem;
	font-size: clamp(1.125rem, 2.5vw, 1.5rem);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	line-height: 1.2;
	margin-top: 0;
}
.form-group {
	margin-bottom: 1.5rem;
}
label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--azul-principal);
	font-size: 0.95rem;
	text-align: left;
}
.checkbox-group {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 1rem;
}
.checkbox-group input[type="checkbox"] {
	width: auto;
	margin-top: 0.2rem;
}
.checkbox-group label {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	font-weight: 500;
	color: var(--texto-base);
}
.benefits {
	background: var(--fundo-claro);
	padding: 1.5rem;
	border-radius: 12px;
	border-left: 4px solid var(--azul-principal);
	margin-bottom: 2rem;
}
.benefits h3 {
	color: var(--azul-principal);
	margin-bottom: 1rem;
	font-size: 1.2rem;
}
.benefits ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.benefits li {
	padding: 0.3rem 0;
	position: relative;
	padding-left: 1.5rem;
	font-size: clamp(1rem, 2vw, 1.125rem);
}
.benefits li:before {
	content: "🐾";
	position: absolute;
	left: 0;
}
.cta-button {
	background-color: var(--azul-principal);
	color: var(--branco);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	width: 100%;
}
.cta-button:hover {
	background-color: var(--azul-secundario);
}
.trust-message {
	text-align: center;
	margin-top: 1.5rem;
	padding: 1rem;
	background: var(--fundo-claro);
	border-radius: 8px;
	font-size: 0.9rem;
	color: var(--texto-base);
}
.pet-types {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}
.pet-type {
	text-align: center;
	padding: 1rem;
	background: var(--fundo-claro);
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease;
}
.pet-type:hover {
	border-color: var(--azul-principal);
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.pet-type input[type="radio"] {
	display: none;
}
.pet-type input[type="radio"]:checked + .pet-content {
	color: var(--azul-principal);
	font-weight: bold;
}
.pet-emoji {
	font-size: 2rem;
	display: block;
	margin-bottom: 0.5rem;
}
.pet-content {
	color: var(--texto-base);
	font-weight: 500;
}
.pet-block {
	background: var(--fundo-claro);
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 1rem;
	position: relative;
}
.pet-block:first-child {
	border-color: var(--azul-principal);
	background: var(--branco);
}
.remove-pet {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: var(--laranja);
	color: var(--branco);
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	font-size: 0.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}
.remove-pet:hover {
	background: #c44600;
}
.outro-animal-group {
	margin-top: 1rem;
	padding: 1rem;
	background: #f0f8ff;
	border-radius: 8px;
	border-left: 3px solid var(--azul-principal);
}
a {
	color: var(--azul-principal);
	text-decoration: underline;
}
a:hover {
	color: var(--azul-secundario);
}
::placeholder {
	font-size: 0.9rem;
	color: #888;
	padding-left: 0.25rem;
}
@media (max-width: 768px) {
  .small-container {
	padding-inline: 1rem;
  }
  .signup-form {
	padding: 1.5rem;
  }
  .main-layout {
	grid-template-columns: 1fr;
	gap: 1rem;
  }
}
/* FIM DE PÁGINA DE SIGN-UP*/

/* login*/
.login-container {
  background: var(--branco);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 183, 248, 0.15);
  padding: 3rem;
  width: 100%;
  max-width: 480px;
  margin: 2rem;
}
.logo-section {
  text-align: center;
  margin-bottom: 2.5rem;
}
.logo-placeholder {
  width: 120px;
  height: 120px;
  background: var(--azul-principal);
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--branco);
  font-weight: 600;
}
.welcome-text {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--azul-secundario);
  margin-bottom: 2rem;
  font-weight: 500;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
label {
  font-weight: 600;
  color: var(--azul-principal);
  font-size: 0.95rem;
}
.password-wrapper {
  position: relative;
}
.toggle-password {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--azul-secundario);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.25rem;
}
.toggle-password:hover {
  color: var(--azul-principal);
}
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}
.remember-me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
input[type="checkbox"] {
  accent-color: var(--azul-principal);
  width: 1rem;
  height: 1rem;
}
.forgot-password {
  color: var(--azul-principal);
  text-decoration: none;
  font-weight: 500;
}
.forgot-password:hover {
  text-decoration: underline;
}
.btn-login {
  width: 100%;
  background: linear-gradient(135deg, var(--azul-principal), var(--azul-secundario));
  color: var(--branco);
  border: none;
  border-radius: 8px;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}
.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 183, 248, 0.3);
}
.btn-login:active {
  transform: translateY(0);
}
.divider {
  text-align: center;
  position: relative;
  margin: 2rem 0;
  color: var(--azul-secundario);
  font-size: 0.9rem;
}
.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e0e0e0;
  z-index: 1;
}
.divider span {
  background: var(--branco);
  padding: 0 1rem;
  position: relative;
  z-index: 2;
}
.register-link, .register-link p{
  text-align: center;
  font-size: 0.95rem;
}
.register-link a {
  color: var(--azul-principal);
  text-decoration: none;
  font-weight: 600;
}
.register-link a:hover {
  text-decoration: underline;
}
.footer-text {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--azul-secundario);
  opacity: 0.8;
}
.paw-icon {
  display: inline-block;
  margin: 0 0.25rem;
  color: var(--azul-principal);
}
@media (max-width: 480px) {
  .login-container {
	padding: 2rem 1.5rem;
	margin: 1rem;
  }
  .logo-placeholder {
	width: 100px;
	height: 100px;
	font-size: 1.5rem;
  }
}
/* ===== PÁGINA SINGLE DE ANIMAL ===== */
.header-perfil-animal {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background-color: var(--fundo-claro);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .header-perfil-animal {
    flex-direction: row;
    align-items: flex-start;
  }
}
.img-animal {
  flex: 0 0 auto;
  text-align: center;
}
.profile_img.perfil-animal {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--azul-principal);
  margin-bottom: 1rem;
}
.profile_button-div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .profile_button-div {
    flex-direction: row;
    justify-content: center;
  }
}
.profile_button {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background-color: var(--azul-principal);
  color: var(--branco);
  transition: background-color 0.2s ease-in-out;
}
.profile_button:hover {
  background-color: var(--azul-secundario);
}
.profile_button.is-blue {
  background-color: var(--azul-secundario);
}
.div-block-7 {
  flex: 1;
}
.info-animal {
  font-size: 1rem;
  line-height: 1.7;
}
.info-animal .label {
  font-weight: 600;
  color: var(--azul-secundario);
  display: inline-block;
  min-width: 140px;
}
.dashboard-card h2 {
  font-size: 1.4rem;
  color: var(--azul-secundario);
  margin-bottom: 1rem;
}
.dashboard-card.sub-card {
  background-color: var(--branco);
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 1.25rem;
  transition: box-shadow 0.2s ease-in-out;
}
.dashboard-card.sub-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
}
.dashboard-card.sub-card .link {
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--azul-principal);
  font-size: 0.9rem;
}
.quick-tiles-flex {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .quick-tiles-flex {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem;
  }
}
/* Grid principal */
.contactos-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 992px) {
  .contactos-grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .info-contacto {
    flex: 0 0 45%;
  }
  .contact-form {
    flex: 0 0 50%;
  }
}
/* Bloco de informação */
.info-contacto {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.info-linha {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.info-linha svg {
  flex-shrink: 0;
  margin-top: 0.25rem;
}
.info-contacto h5 {
  font-size: 1rem;
  color: var(--azul-principal);
  margin-bottom: 0.25rem;
}
.info-contacto p {
  font-size: 0.95rem;
  margin: 0;
}
.info-contacto a {
  text-decoration: underline;
  color: var(--escuro);
}
/* Formulário */
.contact-form h2 {
  font-family: 'Boogaloo', cursive;
  color: var(--escuro);
  margin-bottom: 1.5rem;
}
.contact-form .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.contact-form label {
  font-weight: 600;
  color: var(--azul-principal);
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  text-align: left;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-size: 1rem;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: var(--branco);
  color: var(--escuro);
  font-family: inherit;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--azul-principal);
  box-shadow: 0 0 0 2px rgba(0, 183, 248, 0.2);
  outline: none;
}
.contact-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%2300b7f8' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}
.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}
.btn-enviar {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--azul-principal);
  color: var(--branco);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease-in-out;
  width: 100%;
}
.btn-enviar:hover {
  background-color: var(--azul-secundario);
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}

.w-checkbox-input--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: #3898ec;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}

.w-checkbox-input--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: var(--escuro);
  font-family: Neuemontreal, sans-serif;
  font-size: 1rem;
  line-height: 1.5em;
  letter-spacing: 0.02rem;
}

h1 {
  letter-spacing: 1px;
}

h4 {
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 10px;
}

h5, h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

a {
  color: var(--escuro);
  font-weight: 700;
  text-decoration: underline;
}

label {
  color: var(--azul-principal);
  margin-bottom: 5px;
  font-weight: 700;
  display: block;
}

.section {
  justify-content: center;
  align-items: center;
  padding: 100px 10px;
  position: relative;
}

.section.hero {
  min-height: 70svh;
  padding-top: 50px;
  position: relative;
}

.section.divisoria-amarela {
  background-color: var(--amarelo);
  background-image: url('images/dhol.avif');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
}

.section.contactos-homepage {
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  display: flex;
}

.section.background-color-accent {
  color: var(--branco);
}

.left-box {
  max-width: 800px;
}

.fancy-text {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.heading-hero {
  color: #062d3e;
  text-transform: uppercase;
  margin-top: .5em;
  font-size: 96px;
  line-height: 100px;
}

.yellow-span {
  color: var(--azul-principal);
  font-size: 96px;
  font-weight: 600;
}

.text-block {
  color: #fff;
  letter-spacing: 1px;
}

.btn-main {
  background-color: var(--azul-principal);
  color: #000;
  letter-spacing: 1.5px;
  border-radius: 247px;
  padding: 16px 36px;
  font-weight: 400;
  text-decoration: none;
  transition: all .2s;
}

.btn-main:hover {
  border: 1px solid var(--escuro);
  background-color: var(--escuro);
  transform: scale(.96);
}

.image {
  margin-left: 25px;
}

.dogo-wrapper {
  justify-content: center;
  align-items: center;
  width: 500px;
  display: flex;
  position: absolute;
  inset: 5% 8% 0% auto;
}

.dogo-slider-replace {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  height: 100%;
}

.nav-container {
  justify-content: space-between;
  align-items: center;
  max-width: 97svw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.nav-container.loja {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  align-items: center;
}

.links {
  grid-column-gap: 20px;
  justify-content: center;
  align-items: center;
  font-size: .9rem;
  display: flex;
}

.nav-menu {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-flow: row;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  /*display: flex;*/
}

.brand {
  padding-right: 12px;
}

._2-col-flex {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.foto-socios {
  max-width: 400px;
}

.brix---hidden-desktop {
  display: none;
}

.slider-arrow-left {
  border: 1px solid var(--elements-webflow-library--neutral--300\<deleted\|variable-37cef123\>);
  background-color: var(--azul-principal);
  box-shadow: 0 2px 12px 0 var(--elements-webflow-library--general--shadow-02);
  color: var(--elements-webflow-library--neutral--800\<deleted\|variable-44c33ad4\>);
  transform-style: preserve-3d;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 75px;
  height: 75px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 26px;
  text-decoration: none;
  transition: transform .3s;
  display: flex;
  left: 40%;
  right: auto;
}

.slider-arrow-left:hover {
  transform: scale3d(.94, .94, 1.01);
}

.mg-bottom-32px {
  margin-bottom: 32px;
}

.icon-servicos-slider {
  width: 8rem;
  margin-bottom: 2rem;
}

.slide-item-servicos {
  margin-top: 100px;
  margin-right: 2rem;
}

.card-servicos {
  color: var(--escuro);
  width: 450px;
  padding: 56px 48px;
  text-decoration: none;
  transition: all .4s cubic-bezier(.165, .84, .44, 1);
  position: relative;
}

.card-servicos:hover {
  box-shadow: none;
}

.slider-mask-servicos {
  max-width: 450px;
  height: 100%;
  overflow: visible;
}

.slider-wrapper {
  background-color: #0000;
  height: 100%;
}

.fundo-slider-servicos {
  background-image: url('images/right-design.svg');
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: auto;
  padding-top: 50px;
  padding-bottom: 87px;
}

.left-dog-wrap {
  max-width: 40%;
  height: 100%;
}

.right-newsletter-wrap {
  background-image: url('images/right-art.svg');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto;
  flex: 1;
  height: 100%;
  padding-left: 60px;
}

.dog-wrapper-newsletter {
  justify-content: center;
  align-items: stretch;
}

.brix---social-icon-square-30px {
  background-color: var(--elements-webflow-library--secondary--color-2\<deleted\|variable-8edf41ba\>);
  filter: brightness(0) invert(1);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  text-decoration: none;
  transition: transform .3s, background-color .3s, color .3s;
  display: flex;
}

.brix---social-icon-square-30px:hover {
  transform: scale(.92);
}

.social-media-wrapper {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex: 1;
  grid-template-rows: auto;
  grid-template-columns: repeat(auto-fit, 36px);
  justify-content: end;
  align-self: center;
  justify-items: end;
}

.footer-copyright {
  grid-template-rows: auto;
  grid-template-columns: 1fr .4fr;
  align-items: center;
  margin-top: 2rem;
}

.instagram-preview {
  object-fit: cover;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  transition: transform .3s;
}

.instagram-preview:hover {
  transform: scale3d(1.2, 1.2, 1.01);
}

.brix---instagram-link-wrapper {
  border-radius: 14px;
  width: 170px;
  height: 170px;
  overflow: hidden;
  transform: translate(0);
}

.brix---grid-2-columns-instagram {
  place-content: center;
  place-items: center;
}

.footer-link {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  transition: color .3s;
}

.footer-link:hover {
  color: var(--escuro);
}

.footer-list-item {
  margin-bottom: 18px;
  padding-left: 0;
}

.footer-list-wrapper {
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}

.footer-logo {
  mix-blend-mode: screen;
  transform-style: preserve-3d;
  width: 300px;
  transition: transform .3s;
}

.footer-logo:hover {
  transform: scale3d(.97, .97, 1.01);
}

.footer-logo-wrapper {
  margin-bottom: 20px;
}

.footer-grid {
  grid-column-gap: 3em;
  grid-row-gap: 2em;
  color: var(--branco);
  grid-template-rows: auto;
  /*grid-template-columns: 1fr auto auto .7fr;*/
  grid-template-columns: 2fr auto 1fr;
}

.footer-wrapper {
  background-color: var(--azul-principal);
  padding-top: 50px;
  padding-bottom: 50px;
}

.text-span {
  color: var(--elements-webflow-library--neutral--300\<deleted\|variable-37cef123\>);
}

.image-6 {
  color: var(--laranja);
}

.efeito-torto {
  z-index: -1;
  border: 1px solid #a3a3a3;
  border-radius: 50px;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  transform: skew(0deg, 4deg);
}

.efeito-torto.v2 {
  transform: skew(0deg, -4deg);
}

.navlinks {
  font-weight: 500;
  transition: all .3s;
}

.navlinks:hover {
  color: var(--azul-principal);
}

.navlinks.w--current {
  font-weight: 700;
  text-decoration: underline;
}

.btn-inverse {
  border: 2px solid var(--escuro);
  background-color: var(--escuro);
  color: var(--branco);
  border-radius: 247px;
  padding: 16px 36px;
  font-weight: 400;
  text-decoration: none;
  transition: all .2s;
}

.btn-inverse:hover {
  background-color: var(--azul-principal);
  transform: scale(.96);
  box-shadow: 0 2px 3px #0003;
}

.margin-large {
  margin: 3rem;
}

.background-color-accent {
  background-color: var(--azul-principal);
}

.background-color-accent.destaque-titulo-pagina {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.margin-vertical, .margin-vertical.margin-large {
  margin-left: 0;
  margin-right: 0;
}

.hide {
  display: none;
}

.text-color-accent {
  color: var(--azul-principal);
}

.padding-vertical, .padding-vertical.padding-medium {
  padding-left: 0;
  padding-right: 0;
}

.text-weight-medium {
  font-weight: 500;
}

.container-large {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.button {
  background-color: var(--azul-principal);
  color: #fff;
  text-align: center;
  border-radius: .5em;
  padding: .75rem 1.5rem;
}

.margin-xsmall {
  margin: 1rem;
}

.text-color-light {
  color: #faf9f7;
}

.padding-medium {
  padding: 2rem;
}

.z-index-1 {
  z-index: 1;
  position: relative;
}

.text-size-small {
  font-size: .875rem;
}

.text-size-small.text-color-grey {
  color: #aaa;
}

.margin-xxlarge {
  margin: 5rem;
}

.overflow-hidden {
  overflow: hidden;
}

.margin-bottom, .margin-bottom.margin-xsmall, .margin-bottom.margin-xxlarge, .margin-bottom.margin-large {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.align-center {
  margin-left: auto;
  margin-right: auto;
}

.slider-arrow-right {
  border: 1px solid var(--elements-webflow-library--neutral--300\<deleted\|variable-37cef123\>);
  background-color: var(--azul-principal);
  box-shadow: 0 2px 12px 0 var(--elements-webflow-library--general--shadow-02);
  color: var(--elements-webflow-library--neutral--800\<deleted\|variable-44c33ad4\>);
  transform-style: preserve-3d;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 75px;
  height: 75px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 26px;
  text-decoration: none;
  transition: transform .3s;
  display: flex;
  left: 55%;
  right: auto;
}

.slider-arrow-right:hover {
  transform: scale3d(.94, .94, 1.01);
}

.global-styles-2 {
  display: block;
  position: fixed;
  inset: 0% auto auto 0%;
}

.filters5_results-text {
  font-size: .875rem;
}

.dropdown-icon {
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 1rem;
}

.dropdown-icon.no-margin-right {
  margin-right: 0;
}

.page-padding {
  color: #1b1b1b;
  padding-left: 5%;
  padding-right: 5%;
}

.filtros {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.button-row_shop {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.button-row_shop.padding-vertical.align-center.margin-top-small {
  justify-content: center;
  margin-top: 60px;
}

.product7_image-wrapper {
  width: 100%;
}

.filters5_sort-link {
  padding: .5rem;
}

.filters5_sort-link.w--current {
  color: #1b1b1b;
}

.filters5_sort-dropdown-toggle {
  padding: .5rem 1.5rem .5rem 0;
}

.img-product {
  width: 100%;
  height: 100%;
}

.grid-product-wrapper {
  border: .5px solid var(--azul-principal);
  border-radius: .5rem;
  flex-flow: column;
  grid-template-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 1rem;
  display: flex;
}

.grid-product-wrapper:hover {
  box-shadow: 0 2px 17px -9px #00b7f8bf;
}

.filters5_sort-dropdown-list.w--open {
  background-color: #fff;
  border: 1px solid #000;
  padding: .5rem;
  right: 0%;
}

.button-secondary {
  color: #1b1b1b;
  text-align: center;
  background-color: #0000;
  border: 1px solid #1b1b1b;
  padding: .75rem 1.5rem;
}

.grid-produtos-categoria {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
}

.filters5_sort-dropdown {
  margin-left: 0;
  margin-right: 0;
}

.services-header {
  background-color: #0000;
  width: 50%;
  padding-top: 0;
  padding-bottom: 0;
}

.services-header.align-center {
  text-align: center;
}

.paragraph {
  color: var(--elements-webflow-library--neutral--100\<deleted\|variable-07926372\>);
}

.container-default-2 {
  max-width: 1218px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.container-default-2.z-index-1 {
  z-index: 1;
  position: relative;
}

.cta-section {
  background-color: var(--azul-principal);
  padding-top: 160px;
  padding-bottom: 160px;
  position: relative;
  overflow: hidden;
}

.floating-item {
  position: absolute;
}

.floating-item.cta-v5-02 {
  opacity: .2;
  max-width: 50%;
  inset: auto 0% 10% auto;
}

.color-neutral-100 {
  color: #fff;
}

.grid-2-columns {
  grid-column-gap: 3rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-2-columns.cta-v4 {
  grid-column-gap: 100px;
  grid-template-columns: .86fr 1fr;
}

.btn-secundary {
  border: 1px solid var(--escuro);
  color: var(--escuro);
  text-align: center;
  letter-spacing: 1.5px;
  transform-style: preserve-3d;
  background-color: #0000;
  border-radius: 48px;
  padding: 26px 38px;
  font-weight: 500;
  line-height: 20px;
  transition: border-color .3s, transform .3s, background-color .3s, color .3s;
  box-shadow: 0 4px 10px #14142b0a;
}

.btn-secundary:hover {
  border-color: var(--azul-principal);
  background-color: var(--azul-principal);
  color: #fff;
  transform: translate3d(0, -3px, .01px);
}

.btn-secundary.white {
  border-color: var(--branco);
  color: #fff;
  background-color: #0000;
}

.btn-secundary.white:hover {
  color: #211f54;
  background-color: #fff;
  border-color: #fff;
}

.buttons-row {
  align-items: center;
  display: flex;
}

.heading-2 {
  color: var(--azul-principal);
}

.breadcrumbs-loja {
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.lac-a-decor-2 {
  margin-left: .6em;
  position: relative;
}

.grid-2-col {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-content: start;
  align-items: start;
  display: grid;
}

.lac-a-text-2 {
  color: #a6a6a6;
  font-size: 1rem;
  text-decoration: line-through;
}

.lac-pic-1 {
  width: 100%;
}

.lac-text-1 {
  color: var(--azul-principal);
  text-transform: uppercase;
  margin-left: 1em;
  margin-right: 1em;
  font-size: 1.1em;
  line-height: 1.3em;
}

.lac-link-1 {
  color: var(--escuro);
  letter-spacing: 1.3px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3em;
  text-decoration: none;
}

.lac-link-1.one {
  font-weight: 400;
}

.lac-a-decor-3 {
  background-color: #a6a6a6;
  height: .1em;
  margin-top: .7em;
  position: absolute;
  inset: 0%;
}

.caracteristicas-produto {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-top: 20px;
  padding-bottom: 20px;
  display: grid;
}

.lac-a-decor-1, .caratceristica-wrapper {
  align-items: center;
  display: flex;
}

.lac-decor-1 {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.btn-cart-grid {
  border: 1.5px solid var(--azul-principal);
  background-color: var(--azul-principal);
  color: var(--branco);
  text-align: center;
  border-radius: .5rem;
  margin-top: 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: .9rem;
}

.btn-cart-grid:hover {
  color: var(--escuro);
  background-color: #fff;
}

.lac-icon-1 {
  object-fit: cover;
  height: 1.7em;
  margin-right: 1em;
}

.lac-a-text-1 {
  color: var(--azul-principal);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3em;
}

.mask {
  height: 100%;
}

.slider-2 {
  background-color: #0000;
  height: 100%;
}

.div-block {
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
}

.image-9 {
  opacity: .15;
  width: 300px;
  position: absolute;
  inset: 10% 0% auto 75%;
}

.h1-except {
  font-size: 1.2rem;
  font-weight: 400;
}

.grid-preco-produto {
  color: var(--azul-principal);
  font-size: 1.2rem;
  font-weight: 700;
}

.grid-nome-produto {
  color: var(--escuro);
  font-size: 1rem;
  font-weight: 500;
}

.grid-nome-marca {
  color: #02b7f8c9;
  font-size: .9rem;
}

.grid-wrap-precos {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  display: flex;
}

.image-11 {
  width: 100%;
}

.grid-4-col {
  grid-column-gap: 1.5rem;
  grid-row-gap: 2rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.nome-equipa {
  color: var(--azul-principal);
}

.tag-opcoers {
  color: var(--escuro);
  text-align: center;
  background-color: #c4f0ff40;
  border: 1px solid #00b7f880;
  border-radius: .5rem;
  width: 100%;
  margin-top: .5rem;
  margin-bottom: .5rem;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: .9rem;
}

.wrapper-filtros {
  color: var(--escuro);
  font-size: .85rem;
  position: sticky;
  top: 0;
}

.results-classes {
  display: none;
}

.ms-multi-select-wrap {
  border: 1px solid var(--azul-principal);
  border-radius: 8px;
  flex-wrap: wrap;
  width: 100%;
  max-height: 150px;
  padding: .5rem .5rem .25rem;
  display: flex;
  overflow: scroll;
}

.input-pesquisa {
  border: 1px solid var(--azul-principal);
  color: #121331;
  background-color: #fff;
  border-radius: .5rem;
  min-height: 40px;
  padding: 8px 12px;
  transition: box-shadow .2s, border-color .2s;
  position: relative;
  box-shadow: 0 5px 10px -5px #0000001a;
}

.input-pesquisa:hover {
  z-index: 2;
  box-shadow: none;
  border-color: #2962ff;
}

.input-pesquisa::placeholder {
  color: #909090;
}

.input-pesquisa.com-icon {
  padding-left: 38px;
}

.input-pesquisa.com-icon::placeholder {
  color: #00293880;
  letter-spacing: .1rem;
}

.input-pesquisa.com-icon.pesquisa-main {
  border-radius: 2rem;
  margin-bottom: 0;
  padding-top: 25px;
  padding-bottom: 25px;
}

.input-pesquisa.com-icon.pesquisa-main:hover {
  border-color: var(--azul-principal);
}

.input-pesquisa.com-icon-esquerda {
  padding-left: 38px;
}

.input-pesquisa.com-icon-esquerda::placeholder {
  color: #00293880;
  letter-spacing: .1rem;
}

.ms-svg {
  z-index: 3;
  color: var(--azul-principal);
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
  position: absolute;
  inset: 17.5px auto auto 10px;
}

.ms-dropdown-cb-label {
  z-index: 3;
  color: var(--escuro);
  width: 100%;
  font-weight: 400;
  position: relative;
}

.ms-input-wrap {
  padding: 0;
  display: flex;
  position: relative;
}

.search-result {
  z-index: 2;
  flex: none;
  align-items: center;
  width: 100%;
  margin-bottom: .25rem;
  padding-top: .3rem;
  padding-bottom: .2rem;
  padding-left: .7rem;
  line-height: 1.4em;
  display: flex;
  position: relative;
}

.search-result:hover {
  border-color: #1200ee;
  position: relative;
  box-shadow: 0 20px 30px -10px #00000021;
}

.search-result.noresults {
  display: none;
}

.search-result.results {
  order: 2;
}

.ms-dropdown-cb {
  z-index: 3;
  cursor: pointer;
  border-color: #0000;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  display: inline-block;
  position: absolute;
  inset: 0%;
}

.ms-dropdown-cb:hover {
  background-color: #02b7f80d;
}

.ms-dropdown-cb.w--redirected-checked {
  border: 2px solid var(--azul-principal);
  background-image: url('images/noun_Close_3610311.svg'), linear-gradient(to bottom, #ffffffe6, #ffffffe6), linear-gradient(to bottom, var(--azul-principal), var(--azul-principal));
  background-position: 90%, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 14px, auto, auto;
  border-radius: 6px;
  width: 100%;
  height: 100%;
}

.div-block-3 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: .35fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.heading-filtros {
  color: var(--escuro);
  font-weight: 500;
}

.current-categoria {
  color: var(--azul-principal);
  margin-bottom: 5px;
  font-weight: 700;
}

.sub-categoria {
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 20px;
}

.text-span-2 {
  color: var(--azul-principal);
  font-weight: 700;
}

.ms-checkbox-wrap {
  align-items: flex-start;
  margin-bottom: 10px;
  display: flex;
}

.ms-checkbox-2 {
  border-width: 1.5px;
  border-color: #12133140;
  border-radius: 33%;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0;
  margin-right: 10px;
}

.ms-checkbox-2:hover {
  border-style: solid;
  border-color: var(--azul-principal);
  background-image: linear-gradient(to bottom, #ffffffe6, #ffffffe6), linear-gradient(to bottom, var(--azul-principal), var(--azul-principal));
}

.ms-checkbox-2.w--redirected-checked {
  border-style: solid;
  border-color: var(--azul-principal);
  background-color: var(--azul-principal);
  background-image: url('images/smallcheck.svg');
  background-size: 70%;
  border-radius: 33%;
}

.pesquisar-wrapper-menu {
  width: 80%;
  margin-bottom: 0;
}

.btn-carrinho {
  border: 1px solid var(--azul-principal);
  color: var(--azul-principal);
  background-color: #0000;
  border-radius: 192px;
  font-family: Neuemontreal, sans-serif;
  line-height: 38px;
  transition: all .2s;
}

.btn-carrinho:hover {
  border-color: var(--azul-principal);
  background-color: #00b7f896;
  transform: scale(.96);
}

.slider-3 {
  background-color: #0000;
  width: 100%;
  height: 120%;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.grid-produtos-destaque {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-categorias-destaque {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.grid-categoria-wrapper {
  text-align: center;
  flex-flow: column;
  grid-template-columns: 1fr;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.grid-categoria-wrapper:hover {
  transform: scale(1.1);
}

.grid-nome-categoria {
  color: var(--escuro);
  font-size: 1rem;
  font-weight: 500;
}

.wrapper-nome-categoria {
  width: 100%;
}

.ms-radio-group {
  margin-bottom: 30px;
}

.radio-hide {
  display: none;
}

.ms-radio-wrap {
  align-items: flex-start;
  padding-top: 8px;
  display: flex;
  position: relative;
}

.ms-radio-wrap.is-card {
  align-items: stretch;
  padding-left: 0;
}

.grid-3-columns {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-items: stretch;
  display: grid;
}

.nome-produto-single {
  color: var(--escuro);
  font-size: 3rem;
  line-height: 3rem;
}

.card-text-right {
  float: right;
  background-color: var(--amarelo);
  border-radius: .5rem;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.2rem;
  line-height: 1.4em;
}

.ms-radio-contents {
  z-index: 2;
  width: 100%;
  font-weight: 700;
  position: relative;
}

.radio-card {
  color: var(--escuro);
  border: 1px solid #00b7f8;
  border-radius: 6px;
  width: 100%;
  padding: 12px 16px 10px;
  font-weight: 700;
  position: relative;
  box-shadow: 0 5px 10px -5px #0000001a;
}

.ms-radio-border.w--redirected-checked {
  z-index: 1;
  border: 3px solid var(--azul-principal);
  border-radius: 6px;
  width: auto;
  height: auto;
  margin-top: 0;
  margin-left: 0;
  position: absolute;
  inset: -1px;
}

.card-price {
  float: right;
  font-weight: 400;
}

.peso {
  font-size: 1.2rem;
}

.counter-button {
  background-color: var(--azul-principal);
  color: #fff;
  cursor: pointer;
  border-radius: .5rem;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: .25rem;
  padding: .0625rem .625rem;
  font-size: 1rem;
  font-weight: 900;
  transition: background-color .1s;
  display: flex;
}

.counter-button:hover {
  background-color: var(--escuro);
}

.counter-box {
  align-items: center;
  display: flex;
}

.price-value {
  color: #c3baba;
  margin-left: 1rem;
  font-size: .95rem;
}

.price {
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1;
}

.counter-input {
  border: .0625rem solid #0000006e;
  border-radius: .5rem;
  width: 5rem;
  height: 3.375rem;
  margin-bottom: 0;
  margin-right: .25rem;
  padding-left: 1.15rem;
  font-size: 1.25rem;
  line-height: 1.625rem;
}

.counter-input::placeholder {
  color: #240c2e;
}

.field {
  border: .0625rem solid #00000078;
  border-radius: .625rem;
  min-height: 3.375rem;
  margin-bottom: 0;
}

.field:focus-visible, .field[data-wf-focus-visible] {
  border-color: #31fe6a;
}

.field.hide {
  display: none;
}

.counter-arrow {
  width: 1.375rem;
}

.counter-arrow.flip {
  transform: rotate(180deg);
}

.counter-row {
  align-items: center;
  display: flex;
}

.frequentemente {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border: .5px solid var(--azul-principal);
  border-radius: .5rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: space-between;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
}

.grid-product-wrapper-frequente {
  border-radius: .5rem;
  flex-flow: column;
  grid-template-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  max-width: 20svw;
  height: 100%;
  padding: 1rem;
  display: flex;
}

.grid-product-wrapper-frequente:hover {
  box-shadow: 0 2px 17px -9px #00b7f8bf;
}

.text-block-2 {
  color: var(--azul-principal);
  font-size: 2rem;
}

.text-span-3 {
  font-size: 2rem;
  font-weight: 700;
}

.div-block-4 {
  align-items: center;
  width: auto;
  display: flex;
}

.div-block-5 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  display: flex;
}

.headings-produto {
  color: var(--azul-principal);
}

.div-block-6 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column;
  display: flex;
}

.link {
  font-weight: 500;
  text-decoration: underline;
}

.banner-categoria {
  background-color: var(--elements-webflow-library--general--shadow-03);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  display: flex;
}

.lightbox-link, .image-12 {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.tab-galeria {
  background-color: #0000;
  border-radius: 50px;
  font-weight: 400;
  transition: all .2s;
}

.tab-galeria:hover {
  background-color: #00b7f833;
}

.tab-galeria.w--current {
  background-color: var(--azul-principal);
  color: var(--branco);
  font-weight: 700;
}

.tabs-menu {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.seta-slide-inicial {
  color: var(--escuro);
}

.wrapper-icones-menu {
  align-items: center;
  display: flex;
}

.image-13 {
  width: 100%;
}

.slide {
  height: 120%;
}

.dashboard-wrapper-master {
  background-color: #f9fafb;
  display: flex;
}

.margin-right-8px {
  margin-right: 8px;
}

.dashboard-card {
  background-color: #fff;
  border-radius: 8px;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
  height: auto;
  padding: 16px 16px 20px;
  display: flex;
  position: relative;
}

.dashboard-card.mobile-cards-padding-right-0.overflow-hidden.overflow-visible-desktop {
  overflow: visible;
}

.dashboard-card.mobile-cards-padding-right-0.overflow-hidden.overflow-visible-desktop.stretch {
  justify-content: space-between;
}

.dashboard-card.sub-card {
  border-style: none;
  margin-bottom: 16px;
  padding-top: 12px;
  box-shadow: inset 0 0 2px -1.3px #000000a3, 0 0 2px -1.3px #000000a3;
}

.dashboard-card.sub-card.link-card {
  border: 1px solid var(--azul-principal-50);
  box-shadow: none;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 30%;
  min-width: 31.85%;
  min-height: 12vw;
  padding-top: 20px;
  font-weight: 400;
  text-decoration: none;
  transition: all .32s;
}

.dashboard-card.sub-card.link-card:hover {
  text-decoration: none;
  box-shadow: inset 0 0 2px -1.3px #3affe5a3, 0 1px 8px -4px #006572a3;
}

.dashboard-card.sub-card.link-card.hidden {
  display: none;
}

.dashboard-card.sub-card.link-card-100 {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  border: 1px solid var(--azul-principal-50);
  box-shadow: none;
  text-align: center;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 30%;
  min-width: 100%;
  margin-bottom: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: 400;
  text-decoration: none;
  transition: all .32s;
}

.dashboard-card.sub-card.link-card-100:hover {
  text-decoration: none;
  box-shadow: inset 0 0 2px -1.3px #3affe5a3, 0 1px 8px -4px #006572a3;
}

.quick-tiles-flex {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-wrap: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  margin-top: 1rem;
  display: flex;
}

.ed-flex-horizontal {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-wrap: nowrap;
  align-items: center;
  display: flex;
}

.ed-flex-horizontal._100-width {
  width: 100%;
}

.ed-flex-horizontal._100-width.ed-flex-space-between {
  justify-content: space-between;
}

.hidden {
  display: none;
}

.ed-text-link {
  color: var(--azul-principal);
  margin: 4px 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.dashboard-sub-pane {
  flex-direction: row;
  padding-left: 8px;
  padding-right: 8px;
  display: flex;
}

.dashboard-sub-pane._65 {
  flex: 1;
  width: 60%;
}

.dashboard-sub-pane._65.min-60 {
  min-width: 60%;
}

.dashboard-sub-pane._40 {
  flex-direction: column;
  flex: 1;
  width: 40%;
  min-width: 340px;
}

.icon-title-flex {
  align-items: center;
  margin-bottom: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  display: flex;
}

._3d-icon-master {
  height: 40px;
  position: relative;
  top: 4px;
  left: -8px;
}

._3d-icon-master.featured {
  height: 38px;
  top: -7px;
  left: 1px;
  transform: rotate(-4deg);
}

.ed-dashboard-tabs-system {
  width: 100%;
  display: flex;
  position: relative;
}

.tile-icon-wrap {
  height: 40px;
}

.dashboard-pane-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 16px;
  align-content: flex-start;
  padding: 4rem;
  width: 100%;
}

.dashboard-pane-wrapper.contains-subpanes {
  flex-flow: wrap;
  padding-top: 16px;
  padding-left: 0;
  padding-right: 8px;
  display: flex;
}

.ed-h6 {
  color: #272338;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 16px;
}

.dashboard-tabs {
  z-index: 0;
  background-color: var(--escuro);
  flex-direction: column;
  align-items: stretch;
  width: 24%;
  min-width: 280px;
  max-width: 280px;
  display: flex;
}

.no-underline {
  text-decoration: none;
}

.highlight-color {
  color: var(--azul-principal);
}

.animal-card {
  border: 1.3px solid var(--amarelo-50);
  background-color: #fff;
  border-radius: 8px;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 20px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.animal-card.adicionar {
  border-color: var(--azul-principal-50);
  background-color: #00b7f826;
  margin-top: 20px;
  padding-top: 0;
  padding-bottom: 0;
  font-weight: 500;
  text-decoration: none;
}

.animal-card.adicionar:hover {
  background-color: #00b7f826;
}

.nome-animal {
  color: var(--azul-principal);
}

.pic-animal {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-right: 20px;
}

.lista-animais {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}

.foto-nome-wrapper-animal {
  flex-flow: row;
  align-items: center;
  display: flex;
}

.ver-perfil {
  font-weight: 400;
  text-decoration: underline;
}

.heading-3, .no-margin {
  margin-top: 0;
  margin-bottom: 0;
}

.text-block-4 {
  margin-left: 20px;
}

.animal-card-completo {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr .5fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
}

.profile_button {
  color: #202142;
  background-color: #3898ec00;
  border: 1px solid #a4a4cb;
  border-radius: 10px;
  padding: 15px 30px;
  font-weight: 500;
  transition: all .3s;
}

.profile_button:hover {
  transform: scale(1.05);
  color: #ffffff;
}

.profile_button.is-blue {
  background-color: var(--azul-principal);
  color: #fff;
  border-style: none;
}

.profile_button.is-blue:hover {
  transform: scale(1.05);
}

.profile_img {
  border: 15px solid #fff;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin-top: 0;
}

.header-perfil-animal {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-content: start;
  place-items: center start;
  display: grid;
}

.profile_button-div {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.profile_button-div.ed-flex-horizontal {
  flex-flow: row;
  font-size: .9em;
}

.area-reservada-conteudo {
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.area-reservada-conteudo.grid-3-col {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
}

.area-reservada-conteudo.grid-4-cols {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.notifica-o {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  border: 1px solid var(--azul-principal-50);
  background-color: #fff;
  border-radius: 8px;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
  font-weight: 400;
  text-decoration: none;
  display: flex;
}

.texto-notificacao {
  margin-top: .25em;
  margin-bottom: .25em;
  font-size: .9em;
  line-height: 1.4em;
}

.texto-notificacao.hora {
  opacity: .7;
  font-size: .8em;
}

.lista-notifica-es {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
}

.wrapper-funcionario {
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.label {
  color: var(--laranja);
  margin-right: 1rem;
  font-family: Boogaloo, sans-serif;
  font-size: 1.25rem;
}

.img-animal {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
}

.button-editar {
  color: #202142;
  background-color: #3898ec00;
  border: 1px solid #a4a4cb;
  border-radius: 10px;
  margin-left: auto;
  padding: 15px 30px;
  font-weight: 500;
  transition: all .3s;
}

.button-editar:hover {
  transform: scale(1.05);
}

.div-block-8 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.dashboard_content {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 24px 20px 20px;
}

.reservas-info {
  font-size: 1rem;
}

.reservas-info.align-right {
  margin-left: auto;
}

.dashboard-prox-reservas {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  margin-bottom: 24px;
  display: flex;
}

.dashboard-heading {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
  position: relative;
}

.radio-button-label {
  display: none;
}

.filter_block {
  grid-column-gap: 1rem;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  display: grid;
  position: relative;
}

.filter_block._2 {
  grid-template-columns: 1fr;
  width: 16rem;
  margin-right: 1rem;
  display: flex;
}

.dropdown_icon {
  margin-right: 1.2rem;
  font-size: 1rem;
}

.radio_button {
  width: 18px;
  height: 18px;
  margin-top: 0;
  margin-left: 0;
}

.radio_button.w--redirected-checked {
  border-color: #acc87f;
}

.radio_button.header {
  display: none;
}

.form_header {
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  margin-bottom: 16px;
  display: flex;
}

.form_header.tudo {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: stretch;
  margin-bottom: 50px;
  display: grid;
}

.tabela-lista {
  justify-content: space-between;
}

.sort_field {
  color: #4e4e4e;
  cursor: pointer;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px #e6e6e6;
  border-right: 1px #e6e6e6;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  padding: 1rem;
  font-size: 1rem;
  text-decoration: none;
  display: flex;
}

.sort_field:hover {
  color: #000122;
  background-color: #f8f8fa;
}

.sort_field:focus-visible, .sort_field[data-wf-focus-visible] {
  outline-offset: 0px;
  outline: 1px solid #000122;
}

.sort_field.w--current {
  color: #4347e7;
  background-color: #f7f7fa;
}

.contrato-recente-wrap {
  grid-column-gap: 9px;
  grid-row-gap: 9px;
  cursor: pointer;
  border: 1px solid #eee;
  border-radius: 8px;
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr .5fr .5fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  place-items: center start;
  padding: 10px 12px;
  transition: all .5s;
  display: grid;
  box-shadow: 0 2px 5px #eee;
}

.contrato-recente-wrap:hover {
  box-shadow: 0 2px 5px #ccc;
}

.contrato-recente-wrap.header {
  background-color: var(--azul-principal);
  color: #fff;
  grid-template-columns: .75fr 1fr .5fr .5fr;
  padding-top: 15px;
  padding-bottom: 15px;
  font-weight: 700;
  text-decoration: none;
}

.dashboard_icon {
  width: 18px;
}

.dashboard_input {
  background-color: #fff0;
  border: 1px #000;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-weight: 400;
}

.dashboard_input::placeholder {
  font-size: .9rem;
}

.nav-menu-2 {
  z-index: 9999;
  background-color: #fff;
}

.dashboard_container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 80px;
  padding-left: 80px;
  padding-right: 80px;
}

.contrato-dropdown {
  background-color: #0000;
}

.profile_button-2 {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 10px 30px;
  font-size: .9rem;
  text-decoration: none;
  transition: all .6s;
  display: flex;
}

.dropdown_list.w--open {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: .25rem;
  margin-top: -.25rem;
  padding-top: .25rem;
  box-shadow: 0 4px 20px #00000014;
}

.todos-contratos {
  margin-top: 50px;
}

.radio_button-wrap {
  color: #000;
  justify-content: flex-start;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 0;
  display: flex;
}

.dash_icon {
  justify-content: center;
  align-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 3px;
  display: flex;
  overflow: hidden;
}

.text-color-grey {
  color: #aaa;
}

.history_wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  margin-top: 16px;
  display: flex;
}

.dashboard_button {
  grid-column-gap: 9px;
  grid-row-gap: 9px;
  cursor: pointer;
  border: 1px solid #eee;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
  font-weight: 400;
  text-decoration: none;
  transition: all .5s;
  display: flex;
}

.dashboard_button:hover {
  box-shadow: 0 2px 5px #ccc;
}

.fs-cmsfilter_highlight {
  color: #fff;
  background-color: #4347e7;
}

.filter_results-text {
  color: var(--escuro);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
}

.filter_sort-by {
  border: 1px solid #e2e2ec;
  border-radius: .25rem;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem 3rem 1rem 1.2rem;
  display: flex;
}

.filter_sort-by:hover {
  background-color: var(--azul-principal-50);
}

.filter_sort-by:focus-visible, .filter_sort-by[data-wf-focus-visible] {
  outline-offset: 0px;
  outline: 1px solid #222;
}

.filter_sort-by.w--open {
  z-index: 5;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.filter_header-2 {
  border: 1px solid var(--amarelo);
  background-color: var(--amarelo-50);
  border-radius: .25rem;
  flex-direction: row;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  min-height: 3rem;
  padding: .5rem 1rem;
  display: flex;
}

.sort-dropdown {
  flex: 1;
  margin-left: 0;
  margin-right: 0;
}

.menu-button-2 {
  z-index: 0;
  background-color: #fff;
  padding: 10px;
}

.menu-button-2.w--open {
  color: #046342;
  background-color: #acc87f33;
}

.number-results {
  font-weight: 700;
}

.text-size-xlarge {
  text-wrap: balance;
  font-size: 1.5rem;
}

.mask-2 {
  height: 120%;
}

.btn-loja-menu {
  background-color: var(--azul-principal);
  border-radius: 192px;
  font-family: Neuemontreal, sans-serif;
  font-weight: 400;
  transition: all .2s;
}

.btn-loja-menu:hover {
  border-color: var(--escuro);
  background-color: #00b7f896;
  transform: scale(.96);
}

.btn-ar-menu {
  border: 2px solid var(--azul-principal);
  color: var(--azul-principal);
  background-color: #0000;
  border-radius: 192px;
  font-family: Neuemontreal, sans-serif;
  font-weight: 400;
  transition: all .2s;
}

.btn-ar-menu:hover {
  border-color: var(--azul-principal);
  background-color: #00b7f896;
  transform: scale(.96);
}

.cover-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.paragraph-sm {
  letter-spacing: 0;
  margin-bottom: .7em;
  font-size: .88rem;
  line-height: 1.6em;
}

.flex-horizontal {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  display: flex;
}

.flex-horizontal.flex-vertical {
  flex-direction: column;
}

.flex-horizontal.flex-vertical.x-center {
  justify-content: flex-start;
  align-items: center;
}

.image-15 {
  object-fit: contain;
  border-radius: .75rem;
  width: 100%;
}

.grid-layout-2 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-layout-2.mobile-landscape-1-column.grid-gap-md {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-auto-flow: column;
}

.card {
  border: 1px solid var(--azul-principal-50);
  color: #00001f;
  background-color: #fff;
  border-radius: .75rem;
  flex-flow: column;
  font-weight: 400;
  text-decoration: none;
  list-style-type: none;
  overflow: hidden;
}

.card:hover {
  background-color: #00b7f80d;
}

.add-cart-btn {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  background-color: var(--azul-principal);
  color: var(--branco);
  text-align: center;
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: .5rem;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding: .5em 1.5em;
  text-decoration: none;
  transition: border-color .3s, color .3s, background-color .3s cubic-bezier(.165, .84, .44, 1);
  display: inline-flex;
}

.add-cart-btn:hover {
  color: #00001f;
  background-color: #97d8ff;
  border-color: #0000;
}

.add-cart-btn:focus {
  outline-offset: 2px;
  outline: 2px solid #5ac1ff;
}

.divider-2 {
  -webkit-text-stroke-width: 0px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: color-mix(in srgb, currentColor 60%, transparent);
  align-self: stretch;
}

.divider-2.secondary-divider {
  color: var(--azul-principal);
  border-bottom-color: color-mix(in srgb, currentColor 20%, transparent);
}

.nome-produto {
  color: var(--azul-principal);
  letter-spacing: -.01em;
  margin-bottom: .7em;
  font-weight: 400;
}

.preco-produto {
  color: var(--azul-principal);
  text-align: center;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin-top: 0;
  margin-bottom: .35em;
  font-weight: 700;
}

.nome-marca {
  letter-spacing: 0;
}

.card-produto {
  z-index: 1;
  flex-flow: column;
  height: 100%;
  padding: 1.5rem;
  display: flex;
  position: relative;
}

.cover-image-contacts {
  object-fit: cover;
  height: auto;
}

.text-link {
  color: #5ac1ff;
  text-decoration: underline;
  -webkit-text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  font-weight: 400;
  display: inline;
}

.text-link:hover {
  color: #5ac1ff99;
  text-decoration: underline;
  -webkit-text-decoration-color: color-mix(in srgb, currentColor 100%, transparent);
  text-decoration-color: color-mix(in srgb, currentColor 100%, transparent);
}

.text-link.secondary-text-link {
  color: #00001f;
  text-decoration: underline;
  -webkit-text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
}

.text-link.secondary-text-link:hover {
  -webkit-text-decoration-color: color-mix(in srgb, currentColor 100%, transparent);
  text-decoration-color: color-mix(in srgb, currentColor 100%, transparent);
}

.utility-display-block {
  display: block;
}

.utility-text-secondary {
  color: color-mix(in srgb, currentColor 60%, transparent);
}

.grid-contactos {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start;
  margin-top: 3rem;
  display: grid;
}

.text-span-4 {
  font-size: 1.5rem;
}

.title-icon {
  color: var(--laranja);
  align-items: center;
  display: flex;
}

.title-icon.margin-bottom-1rem {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  margin-bottom: 1rem;
}

.m-0 {
  margin-top: 0;
  margin-bottom: 0;
}

@media screen and (min-width: 1280px) {
  .foto-socios {
    max-width: 500px;
  }

  .container {
    max-width: 1140px;
  }

  .container-large {
    max-width: 84vw;
  }
}
@media screen and (max-width: 1440px) {
  .heading-hero {
    font-size: 75px;
  }
  .yellow-span{
    font-size: 75px;
  }
  .left-box {
    max-width: 600px;
  }
  .dogo-wrapper {
    width: 390px;
	inset: 5% 5% 0% auto;
  }
}
@media screen and (max-width: 1120px) {
  .dogo-wrapper {
    width: 390px;
	inset: 5% 3% 0% auto;
  }
}

@media screen and (max-width: 1280px) {
  .grid-2-col-sobre-nos {
	grid-column-gap: 1em;
	grid-row-gap: 1em;
	grid-template-rows: auto;
	grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 1440px) {
  h2 {
    line-height: 3.5rem;
  }

  .card-servicos {
    box-shadow: none;
    position: relative;
    transform: none;
  }

  .card-servicos:hover {
    transform: none;
  }

  .brix---grid-2-columns-instagram {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .footer-grid {
    grid-column-gap: 80px;
  }

  .container {
    max-width: 1280px;
  }

  .grid-produtos-categoria {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .btn-carrinho:hover {
    border-color: var(--azul-principal);
    background-color: #00b7f821;
  }

  .grid-produtos-destaque {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .grid-categoria-wrapper {
    align-items: stretch;
  }

  .wrapper-nome-categoria {
    width: 100%;
  }

  .frequentemente {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .btn-loja-menu:hover {
    background-color: #00b7f8a6;
  }

  .btn-ar-menu:hover {
    border-color: var(--azul-principal);
    background-color: #00b7f821;
  }

  .nome-produto {
    margin-top: 0;
  }

  .nome-marca {
    margin-bottom: 15px;
    font-size: .95rem;
  }
}

@media screen and (max-width: 991px) {
  .w-nav-menu{
    display: none;
  }
  
  h1 {
    font-size: 2.5em;
  }

  .section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .section.hero {
    background-image: none;
    background-repeat: repeat;
    background-size: auto;
    flex-flow: column;
    min-height: 80svh;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .section.divisoria-amarela {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .left-box {
    text-align: center;
    max-width: none;
  }

  .fancy-text {
    justify-content: center;
    align-items: flex-start;
  }

  .heading-hero {
    text-align: center;
    margin-top: .4em;
    margin-bottom: .5em;
    font-size: 70px;
    line-height: 80px;
  }

  .yellow-span {
    font-size: 70px;
  }

  .dogo-wrapper {
    width: 350px;
    position: static;
  }


  ._2-col-flex {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .foto-socios {
    max-width: 100%;
  }

  .mg-bottom-32px {
    margin-bottom: 24px;
  }

  .icon-servicos-slider {
    width: 6rem;
    margin-bottom: 1.5rem;
  }

  .slide-item-servicos {
    margin-right: 2rem;
  }

  .card-servicos {
    width: 500px;
  }

  .slider-mask-servicos {
    max-width: 500px;
    position: static;
  }

  .fundo-slider-servicos {
    padding-top: 0;
    padding-bottom: 50px;
  }

  .social-media-wrapper {
    grid-column-gap: 10px;
    justify-content: center;
    justify-items: center;
  }

  .footer-copyright {
    grid-row-gap: 14px;
    text-align: center;
    grid-template-columns: 1fr;
  }

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

  .background-color-accent.destaque-titulo-pagina {
    padding-top: 2rem;
  }

  .margin-vertical {
    margin-left: 0;
    margin-right: 0;
  }

  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }

  .container-large {
    max-width: none;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .dropdown-icon {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    inset: auto 0% auto auto;
  }

  .filtros {
    z-index: 999;
    max-width: 100%;
  }

  .button-row_shop {
    flex: none;
  }

  .button-row_shop.padding-vertical.align-center.margin-top-small {
    justify-content: center;
    margin-top: 50px;
  }

  .filters5_sort-link {
    width: auto;
    padding: .75rem 0 .75rem 5%;
  }

  .filters5_sort-dropdown-toggle {
    align-items: center;
    display: flex;
  }

  .filters5_sort-dropdown-list {
    overflow: hidden;
  }

  .filters5_sort-dropdown-list.w--open {
    min-width: 12rem;
    overflow: hidden;
  }

  .grid-produtos-categoria {
    grid-template-columns: .75fr .75fr;
  }

  .services-header {
    width: 80%;
  }

  .cta-section {
    padding-top: 112px;
    padding-bottom: 112px;
  }

  .floating-item.cta-v5-02 {
    width: 70%;
  }

  .grid-2-columns {
    grid-template-columns: .5fr;
  }

  .grid-2-columns.cta-v4 {
    grid-row-gap: 60px;
    grid-template-columns: 1fr;
  }

  .breadcrumbs-loja {
    flex-flow: wrap;
  }

  .grid-2-col {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .lac-pic-1 {
    object-fit: cover;
  }

  .lac-a-decor-3 {
    margin-top: .9em;
    inset: 0%;
  }

  .caracteristicas-produto {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }

  .lac-decor-1 {
    flex-direction: column;
    align-items: stretch;
  }

  .lac-wrap-2 {
    display: flex;
  }

  .btn-cart-grid {
    justify-content: center;
    display: flex;
  }

  .lac-a-wrap-1 {
    margin-bottom: 1.5em;
  }

  .grid-4-col {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .grid-produtos-destaque {
    grid-template-columns: .75fr .75fr;
    padding: 2px;
  }

  .frequentemente {
    grid-template-columns: .75fr .75fr;
  }

  .dashboard-sub-pane._65 {
    flex: 0 auto;
    width: 100%;
  }

  .dashboard-sub-pane._40 {
    width: 100%;
  }

  .ed-dashboard-tabs-system {
    position: relative;
  }

  .dashboard-pane-wrapper {
    padding: 1rem 2rem;
  }

  .dashboard-pane-wrapper.contains-subpanes {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex: 0 auto;
    align-content: flex-start;
    align-items: flex-start;
    width: 66%;
  }

  .dashboard-tabs {
    width: 40%;
    max-width: 248px;
    top: 16px;
  }

  .header-perfil-animal {
    grid-template-columns: 1fr;
  }

  .profile_button-div.ed-flex-horizontal {
    flex-flow: column;
  }

  .area-reservada-conteudo.grid-4-cols {
    text-align: center;
  }

  .button-editar {
    margin-right: auto;
  }

  .div-block-8 {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    flex-flow: column;
  }

  .filter_block._2 {
    width: 12rem;
    margin-bottom: .5rem;
  }

  .dropdown_icon {
    margin-right: .5rem;
  }

  .dashboard_container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .filter_sort-by {
    padding-right: 2rem;
  }

  .filter_header-2 {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .btn-loja-menu {
    background-color: var(--laranja);
  }

  .btn-ar-menu {
    background-color: var(--escuro);
    color: var(--branco);
  }

  .paragraph-sm {
    font-size: .88rem;
  }

  .flex-horizontal {
    flex-flow: wrap;
  }

  .flex-horizontal.flex-vertical.x-center.utility-text-align-center {
    flex-flow: column;
  }

  .nome-produto {
    font-size: 1.6rem;
  }

  .preco-produto {
    font-size: 2.26rem;
  }

  .nome-marca {
    font-size: .88rem;
  }

  .card-produto {
    padding: 2rem;
  }

  .cover-image-contacts {
    height: 40svh;
  }

  .grid-contactos {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 767px) {
  .section.contactos-homepage {
    flex-flow: column;
    align-items: stretch;
  }

  .links {
    grid-row-gap: 1rem;
    justify-items: stretch;
    padding-left: 5svw;
    padding-right: 5svw;
  }

  .slider-arrow-left {
    font-size: 22px;
    line-height: 24px;
  }

  .icon-servicos-slider {
    margin-bottom: 2px;
  }

  .card-servicos {
    width: 90svw;
    padding: 48px 32px;
  }

  .slider-mask-servicos {
    max-width: 90svw;
    margin-left: auto;
    margin-right: auto;
  }

  .left-dog-wrap {
    max-width: 100%;
  }

  .right-newsletter-wrap {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0;
    display: flex;
  }

  .social-media-wrapper {
    justify-content: center;
    justify-items: center;
  }

  .footer-list-item {
    margin-bottom: 10px;
  }

  .footer-list-wrapper {
    text-align: center;
  }

  .footer-logo-wrapper {
    width: 239px;
  }

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

  .background-color-accent.destaque-titulo-pagina {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  .margin-vertical {
    margin-left: 0;
    margin-right: 0;
  }

  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .slider-arrow-right {
    font-size: 22px;
    line-height: 24px;
  }

  .button-row_shop {
    justify-content: flex-start;
    width: 100%;
  }

  .button-row_shop.padding-vertical.align-center.margin-top-small {
    justify-content: center;
    margin-top: 50px;
  }

  .product7_image-wrapper {
    height: 100%;
  }

  .cta-section {
    padding-top: 96px;
    padding-bottom: 96px;
  }

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

  .btn-secundary {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .grid-2-col {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-flow: column dense;
  }

  .lac-pic-1 {
    object-fit: contain;
  }

  .caracteristicas-produto {
    grid-template-columns: 1fr 1fr;
  }

  .lac-wrap-2 {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    display: inline;
  }

  .btn-cart-grid {
    padding-top: .7em;
    padding-bottom: .7em;
  }

  .grid-4-col {
    grid-template-columns: 1fr;
  }

  .btn-carrinho {
    font-size: 18px;
    line-height: 24px;
  }

  .counter-button {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }

  .counter-button.up {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .img-ar-login {
    width: 400px;
  }

  .dashboard-card {
    width: 100%;
  }

  .dashboard-card.sub-card.link-card-100 {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
  }

  .dashboard-section-main {
    padding-top: 80px;
  }

  .dashboard-sub-pane._65 {
    padding-left: 0;
    padding-right: 0;
  }

  .dashboard-sub-pane._40 {
    padding-top: 8px;
    padding-left: 0;
    padding-right: 0;
  }

  .icon-title-flex {
    max-width: 80vw;
  }

  .dashboard-pane-wrapper {
    padding: 1rem;
  }

  .dashboard-pane-wrapper.contains-subpanes {
    width: 100%;
    padding: 4px 12px 12px;
    overflow: hidden;
  }

  .dashboard-tabs {
    z-index: 12;
    color: #2f3033;
    background-color: #0000;
    width: 64px;
    height: 64px;
    padding: 12px 0 0 12px;
    position: fixed;
    inset: 0% auto auto 0%;
  }

  .header-perfil-animal {
    place-items: center;
  }

  .filter_block._2 {
    width: auto;
    margin-bottom: 1rem;
    margin-right: 0;
  }

  .profile_button-2 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .filter_header-2 {
    flex-flow: column;
    align-items: flex-start;
  }

  .sort-dropdown {
    z-index: 1;
  }

  .text-size-xlarge {
    font-size: 1.125rem;
  }

  .footer-col {
    flex-flow: column;
    align-items: center;
    display: flex;
  }

  .btn-loja-menu, .btn-ar-menu {
    line-height: 24px;
  }

  .paragraph-sm {
    font-size: .88rem;
  }

  .grid-layout-2.mobile-landscape-1-column {
    grid-template-columns: 1fr;
  }

  .grid-layout-2.mobile-landscape-1-column.grid-gap-md {
    grid-auto-flow: row dense;
  }

  .nome-produto {
    font-size: 1.28rem;
  }

  .preco-produto {
    font-size: 1.81rem;
  }

  .nome-marca {
    font-size: .88rem;
  }

  .card-produto {
    padding: 1.5rem;
  }

  .cover-image-contacts {
    height: 35svh;
  }

  .grid-contactos {
    text-align: center;
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

@media screen and (max-width: 479px) {
  .section.hero {
    padding-bottom: 40px;
  }

  .section.divisoria-amarela {
    padding-top: 60px;
    padding-bottom: 20px;
  }

  .section.contactos-homepage {
    flex-flow: column;
    height: auto;
  }

  .heading-hero {
    font-size: 40px;
    line-height: 130%;
  }

  .yellow-span {
    font-size: 40px;
  }

  .text-block {
    font-size: 16px;
  }

  .btn-main {
    text-align: center;
    font-size: 12px;
  }

  .image {
    display: none;
    position: relative;
    bottom: -30px;
  }

  .links {
    flex-flow: column;
    margin-bottom: 10px;
  }

  .card-servicos {
    padding-left: 24px;
    padding-right: 24px;
  }

  .left-dog-wrap {
    max-width: none;
    position: static;
  }

  .right-newsletter-wrap {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .dog-wrapper-newsletter, .image-5 {
    position: static;
  }

  .brix---social-icon-square-30px {
    border-radius: 6px;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    font-size: 14px;
  }

  .social-media-wrapper {
    grid-template-columns: repeat(auto-fit, 30px);
  }

  .brix---instagram-link-wrapper {
    width: 100px;
    height: 100px;
  }

  .footer-link {
    font-size: 16px;
    line-height: 19px;
  }

  .footer-list-item {
    margin-bottom: 8px;
  }

  .footer-list-wrapper {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
  }

  .footer-logo {
    width: 100%;
    max-width: 240px;
  }

  .footer-grid {
    grid-column-gap: 27px;
    flex-flow: column;
    display: flex;
  }

  .margin-vertical {
    margin-left: 0;
    margin-right: 0;
  }

  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .button-row_shop.padding-vertical.align-center {
    justify-content: center;
  }

  .button-row_shop.padding-vertical.align-center.margin-top-small {
    margin-top: 50px;
  }

  .grid-produtos-categoria {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-columns: 1fr;
  }

  .container-default-2 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .cta-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .btn-secundary {
    width: 100%;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .buttons-row {
    flex-direction: column;
  }

  .lac-pic-1 {
    width: 100%;
  }

  .lac-a-decor-3 {
    margin-top: 1.1em;
  }

  .caracteristicas-produto {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
    grid-template-columns: 1fr 1fr;
  }

  .lac-decor-1 {
    margin-bottom: 2em;
  }

  .btn-cart-grid {
    padding-top: 1em;
    padding-bottom: 1em;
  }

  .image-9 {
    position: fixed;
    top: 30%;
  }

  .ms-checkbox-wrap {
    display: flex;
  }

  .grid-produtos-destaque {
    grid-template-columns: 1fr;
  }

  .ms-radio-wrap {
    align-items: flex-start;
    display: flex;
  }

  .counter-box {
    margin-bottom: 1rem;
  }

  .price-value {
    font-size: .7rem;
  }

  .price {
    font-size: 1.4rem;
  }

  .counter-row {
    flex-direction: column;
  }

  .frequentemente {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-columns: 1fr;
  }

  .img-ar-login {
    width: 300px;
  }

  .mobile-padding-right-12px {
    padding-right: 12px;
  }

  .dashboard-wrapper-master {
    margin-left: 0;
  }

  .margin-right-8px {
    position: static;
  }

  .dashboard-card {
    padding: 16px;
  }

  .dashboard-card.mobile-cards-padding-right-0 {
    padding-right: 0;
  }

  .dashboard-card.mobile-cards-padding-right-0.overflow-hidden, .dashboard-card.mobile-cards-padding-right-0.overflow-hidden.overflow-visible-desktop {
    overflow: hidden;
  }

  .dashboard-card.sub-card.link-card, .dashboard-card.sub-card.link-card-100 {
    min-width: 48vw;
    min-height: 45vw;
    margin-bottom: 0;
  }

  .quick-tiles-flex {
    flex-wrap: nowrap;
    align-items: flex-start;
    max-width: 100vw;
    margin-top: 0;
    margin-left: -16vw;
    padding: 12px 8vw 12px 16vw;
    display: flex;
    overflow: scroll;
    box-shadow: inset 7px 0 6px 5px #fff;
  }

  .ed-flex-horizontal {
    flex-wrap: wrap;
  }

  .dashboard-sub-pane._65 {
    padding-left: 0;
    padding-right: 0;
  }

  .dashboard-sub-pane._40 {
    min-width: auto;
    padding-top: 8px;
    padding-left: 0;
    padding-right: 0;
  }

  .icon-title-flex {
    text-align: left;
    flex-direction: row;
    align-items: center;
    max-width: 80vw;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .dashboard-tabs {
    z-index: 1;
  }

  .animal-card, .animal-card-completo, .area-reservada-conteudo, .notifica-o {
    padding: 16px;
  }

  .img-animal {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .dashboard_content {
    padding: 16px;
  }

  .reservas-info.align-right {
    position: relative;
  }

  .dashboard-prox-reservas {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    place-items: center stretch;
    display: flex;
  }

  .dashboard-heading {
    flex-flow: row;
  }

  .form_header {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    align-items: stretch;
    display: flex;
  }

  .contrato-recente-wrap {
    flex-flow: column;
    grid-template-columns: .25fr;
    justify-items: center;
    padding-bottom: 20px;
    position: relative;
  }

  .dashboard_input {
    text-align: center;
  }

  .dashboard_container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .dashboard_button {
    flex-flow: column;
    padding-top: 4px;
    padding-bottom: 4px;
    position: relative;
  }

  .paragraph-sm {
    font-size: .88rem;
  }

  .add-cart-btn {
    white-space: nowrap;
  }

  .nome-produto {
    font-size: 1.02rem;
  }

  .preco-produto {
    font-size: 1.45rem;
  }

  .nome-marca {
    font-size: .88rem;
  }

  .card-produto {
    padding: 1.5rem;
  }
}

/* ======================== */
/* SIDEBAR   area reservada         */
/* ===================== */
.sidebar {
  background: linear-gradient(135deg, var(--escuro), #0a3a4a);
  color: var(--branco);
  width: 280px;
  min-height: calc(100vh - 80px);
  padding: 2rem 1rem;
  position: fixed;
  left: 0;
  top: 80px;
  z-index: 999;
  transform: translateX(-100%);
  transition: var(--transition);
  box-shadow: var(--shadow-hover);
}

.sidebar.open {
  transform: translateX(0);
}

.user-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.1));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.user-avatar {
  width: 60px;
  height: 60px;
  background: var(--azul-principal);
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.user-tag {
  background: var(--amarelo);
  color: var(--escuro);
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-block;
}



#w-node-_07354a1c-ca48-90e2-f7c1-50a1cd32b3f5-ec8e9a4b {
  place-self: center;
}

#w-node-_41af3b8d-7c18-ad19-c41f-f37e1c64cd29-1c64cd1d {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_575e4db7-d8a9-abbc-b4e9-b89eb28d083c-ec8e9a4d {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-_2eefce99-cbdc-97b8-4d04-bd18be3d53e2-ec8e9a4d, #w-node-f894cddf-d97d-ef04-5c01-7ce4d4995c14-ec8e9a4d, #w-node-_9238679e-211c-da89-1356-b5d0e2b50155-ec8e9a4d, #w-node-_78f65301-258e-93f0-4a1d-4ac54d826e5d-ec8e9a4d, #w-node-eaabd05d-5dcb-9e1f-3f61-6f508a42e1d1-ec8e9a4d, #w-node-e31139fb-4360-2ffc-7dce-9e84e692bdaa-ec8e9a4d {
  align-self: end;
}

#w-node-e9e656ea-5a2a-fdb1-2c54-86f5e4c73df9-ec8e9a4e {
  grid-area: 1 / 4 / 2 / 10;
}

#w-node-f4862a2a-7faf-3624-3319-a65a8dd5e057-ec8e9a4e {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-aea1bf01-d59d-6bc3-5a4b-396ef1b431be-ec8e9a4e, #w-node-ab1ad561-d7b8-51aa-1c8d-e43056d7528f-ec8e9a4e, #w-node-_6ccb1668-555c-b7e8-3508-43e4e2a29f94-ec8e9a4e, #w-node-_694abfb3-75bf-ce7c-76a4-802fc3617e03-ec8e9a4e, #w-node-c4bb04a1-f79a-556c-5e4d-70e4a3626e14-ec8e9a4e, #w-node-_065ffdf9-1258-0c18-eff7-ed6b3c4dbb8c-ec8e9a4e {
  align-self: end;
}

#w-node-_7cb7760a-3eda-e178-206a-01fd10dd32e1-ec8e9a4e {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-dc5768e4-08fe-957c-355e-907b5a8b85fb-ec8e9a4e {
  align-self: start;
}

#w-node-dc5768e4-08fe-957c-355e-907b5a8b85fe-ec8e9a4e {
  align-self: end;
}

#w-node-f46faa89-2920-5d2e-9b40-397f011bd440-ec8e9a4e {
  align-self: start;
}

#w-node-f46faa89-2920-5d2e-9b40-397f011bd443-ec8e9a4e {
  align-self: end;
}

#w-node-_36c67702-d14a-a82d-7a8d-8b574984609e-ec8e9a4e {
  align-self: start;
}

#w-node-_36c67702-d14a-a82d-7a8d-8b57498460a1-ec8e9a4e {
  align-self: end;
}

#w-node-fe2b9693-c00c-5aad-3283-a0dbb5d96a2a-ec8e9a4e {
  align-self: start;
}

#w-node-fe2b9693-c00c-5aad-3283-a0dbb5d96a2d-ec8e9a4e {
  align-self: end;
}

#w-node-_0ead2293-e22f-4aed-dd40-97dee8f57926-ec8e9a4e {
  align-self: start;
}

#w-node-_0ead2293-e22f-4aed-dd40-97dee8f57929-ec8e9a4e {
  align-self: end;
}

#w-node-_14258fad-8b71-367a-1ca9-d50325ebd4f9-ec8e9a4e {
  align-self: start;
}

#w-node-_14258fad-8b71-367a-1ca9-d50325ebd4fc-ec8e9a4e {
  align-self: end;
}

#w-node-_20b36c76-825a-e5d6-b916-df168cef965f-ec8e9a4e {
  grid-area: span 1 / span 6 / span 1 / span 6;
}

#w-node-d847bb70-969a-6fa0-168c-b5b31b68dd1f-e484c3fa.w-node-_6e4959fd-fd99-f22a-6967-3a27fd4577b0-ec8e9a4e, #w-node-ed7d9018-9705-1f10-8813-bea207c4df90-e484c3fa.w-node-_6e4959fd-fd99-f22a-6967-3a27fd4577b8-ec8e9a4e {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_4f012f49-b4ac-7886-2433-dbc6e7e44a40-ec8e9a4f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_4f012f49-b4ac-7886-2433-dbc6e7e44a4c-ec8e9a4f {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_4f012f49-b4ac-7886-2433-dbc6e7e44a4d-ec8e9a4f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_4f012f49-b4ac-7886-2433-dbc6e7e44a4f-ec8e9a4f, #w-node-_4f012f49-b4ac-7886-2433-dbc6e7e44a51-ec8e9a4f, #w-node-_4f012f49-b4ac-7886-2433-dbc6e7e44a55-ec8e9a4f {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_4f012f49-b4ac-7886-2433-dbc6e7e44a71-ec8e9a4f, #w-node-_43c545b2-ca28-f8e9-3df5-da154d4bb2d2-ec8e9a4f, #w-node-_63ed0090-1575-0242-af55-f2d58c647124-ec8e9a4f {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_9ce3e6f1-4f76-edf2-729c-ff5c1ddee839-ec8e9a4f {
  align-self: center;
}

#w-node-_4f012f49-b4ac-7886-2433-dbc6e7e44a59-ec8e9a4f {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-_85ae97be-8d0e-3261-2d78-62ae3dea822b-ec8e9a4f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_5a480f1b-e4d9-4063-b415-1a04cf0e9d4f-ec8e9a4f {
  align-self: start;
}

#w-node-_5a480f1b-e4d9-4063-b415-1a04cf0e9d52-ec8e9a4f {
  align-self: end;
}

#w-node-_46d919ce-f536-09b0-d581-b8b6a5830f98-ec8e9a4f {
  align-self: start;
}

#w-node-_46d919ce-f536-09b0-d581-b8b6a5830f9b-ec8e9a4f {
  align-self: end;
}

#w-node-_4f012f49-b4ac-7886-2433-dbc6e7e44a8e-ec8e9a4f, #w-node-a83976c5-e92c-9ae2-bff4-26186818bafd-ec8e9a4f, #w-node-a83976c5-e92c-9ae2-bff4-26186818bb01-ec8e9a4f, #w-node-a83976c5-e92c-9ae2-bff4-26186818bb05-ec8e9a4f, #w-node-a83976c5-e92c-9ae2-bff4-26186818bb09-ec8e9a4f, #w-node-a83976c5-e92c-9ae2-bff4-26186818bb0d-ec8e9a4f, #w-node-a83976c5-e92c-9ae2-bff4-26186818bb11-ec8e9a4f {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_4afc0879-b4b9-7ea8-a709-179d514d6a91-ec8e9a50 {
  place-self: center;
}

#w-node-e0c3bbcf-defd-0b8f-c11e-713aa1c12337-ec8e9a50 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_13ee7ba7-410c-57df-eedb-ade4486d3b2d-ec8e9a50 {
  align-self: stretch;
}

#w-node-_2bed0700-9fec-54df-89cc-a113de013e1b-ec8e9a50 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-bd28f60d-61f1-739c-9c43-646314ab209f-cdfe7320 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#build-booking.w-node-_9fe0912a-439a-77a4-60e1-a4cca130eeb4-cdfe7320, #build-booking.w-node-_0473fb7a-43ae-a0e9-444e-d08d16cfc9a3-cdfe7320 {
  justify-self: center;
}

#build-booking.w-node-_44376a25-557b-7861-b450-c9e461dd61bb-cdfe7320 {
  place-self: center;
}

#w-node-bd28f60d-61f1-739c-9c43-646314ab209f-0d40a4ff {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#build-booking.w-node-_9fe0912a-439a-77a4-60e1-a4cca130eeb4-0d40a4ff, #build-booking.w-node-_62c241a5-89ef-2292-1c63-d851a56dfacc-0d40a4ff {
  justify-self: center;
}

#w-node-bd28f60d-61f1-739c-9c43-646314ab209f-d6491010 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#build-booking.w-node-_9fe0912a-439a-77a4-60e1-a4cca130eeb4-d6491010, #build-booking.w-node-_62c241a5-89ef-2292-1c63-d851a56dfacc-d6491010, #build-booking.w-node-_81f57915-0b30-e2ab-3024-7f70d0cee17b-d6491010, #build-booking.w-node-_16ab8287-d99f-e074-716d-7f66ea71ee4b-d6491010, #build-booking.w-node-b6cb0dd6-31b4-ec4c-66ec-bbe55bfb9e33-d6491010, #build-booking.w-node-_47b3f50f-412a-df43-06e1-3b0c0c4d1d69-d6491010 {
  justify-self: center;
}

#w-node-_1e70fa33-392d-4051-7e37-f6a88b2679bd-8287ffcf, #w-node-_6683107d-e32a-11cf-d35e-b05c736f23e5-8287ffcf {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-bd28f60d-61f1-739c-9c43-646314ab209f-428191f3 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_81ab43e2-840c-97fa-81f0-1340fdc9250d-428191f3 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_6683107d-e32a-11cf-d35e-b05c736f23e5-428191f3 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_88c51897-809e-f027-3f42-a973668e2643-428191f3 {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: start;
}

#w-node-_681715cf-31b3-57e6-6e91-54d41d6e1ec0-428191f3 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-b2a8d9f3-2145-4d9e-8179-371f9af3e392-428191f3, #w-node-_5d9825ee-bc94-2feb-8756-97e896ab1ce5-428191f3, #w-node-_7be3d6c6-ba22-7319-d689-64b39c21e65b-6be702ba {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_7be3d6c6-ba22-7319-d689-64b39c21e673-6be702ba, #w-node-_7be3d6c6-ba22-7319-d689-64b39c21e676-6be702ba {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_7be3d6c6-ba22-7319-d689-64b39c21e691-6be702ba {
  grid-area: span 1 / span 8 / span 1 / span 8;
}

#w-node-_7be3d6c6-ba22-7319-d689-64b39c21e6a4-6be702ba {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_7be3d6c6-ba22-7319-d689-64b39c21e6a6-6be702ba {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_30e08ee1-6a09-6c48-e15f-dfdbf82b108f-6be702ba {
  grid-area: 1 / 3 / 2 / 4;
}

#w-node-_7be3d6c6-ba22-7319-d689-64b39c21e6aa-6be702ba {
  grid-area: 1 / 4 / 2 / 5;
  justify-self: end;
}

#w-node-_7be3d6c6-ba22-7319-d689-64b39c21e6b5-6be702ba, #w-node-_3ab9c83e-cf7f-f5fe-6692-a21b5d965e72-6be702ba {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_7be3d6c6-ba22-7319-d689-64b39c21e6b7-6be702ba {
  justify-self: end;
}

#w-node-_3d337c12-5218-3c29-cbf0-66432f125b5f-6be702ba, #w-node-_3d337c12-5218-3c29-cbf0-66432f125b61-6be702ba {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_3d337c12-5218-3c29-cbf0-66432f125b63-6be702ba {
  justify-self: end;
}

#w-node-_8ee767df-7b1a-a40f-2325-f53db335757e-6be702ba, #w-node-_8ee767df-7b1a-a40f-2325-f53db3357580-6be702ba {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_8ee767df-7b1a-a40f-2325-f53db3357582-6be702ba {
  justify-self: end;
}

#w-node-bbd0e70b-9b22-28ba-8de6-5f1218cd3bda-6be702ba, #w-node-bbd0e70b-9b22-28ba-8de6-5f1218cd3bdc-6be702ba {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-bbd0e70b-9b22-28ba-8de6-5f1218cd3bde-6be702ba {
  justify-self: end;
}

#w-node-a4f0d210-3fd7-923f-7ef4-322db47a0746-6be702ba, #w-node-a4f0d210-3fd7-923f-7ef4-322db47a0748-6be702ba {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-a4f0d210-3fd7-923f-7ef4-322db47a074a-6be702ba {
  justify-self: end;
}

@media screen and (max-width: 991px) {
  #w-node-_41af3b8d-7c18-ad19-c41f-f37e1c64cd21-1c64cd1d {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_41af3b8d-7c18-ad19-c41f-f37e1c64cd29-1c64cd1d {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_575e4db7-d8a9-abbc-b4e9-b89eb28d083c-ec8e9a4d {
    justify-self: end;
  }

  #w-node-e9e656ea-5a2a-fdb1-2c54-86f5e4c73df9-ec8e9a4e {
    grid-area: span 1 / span 8 / span 1 / span 8;
  }

  #w-node-_4f012f49-b4ac-7886-2433-dbc6e7e44a40-ec8e9a4f {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_9ce3e6f1-4f76-edf2-729c-ff5c1ddee839-ec8e9a4f {
    grid-area: span 1 / span 3 / span 1 / span 3;
    align-self: center;
  }

  #w-node-_4f012f49-b4ac-7886-2433-dbc6e7e44a59-ec8e9a4f {
    align-self: center;
  }

  #w-node-_85ae97be-8d0e-3261-2d78-62ae3dea822b-ec8e9a4f {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-d2aa3741-aba5-82bd-b84f-b151244d145d-ec8e9a52 {
    order: -9999;
    justify-self: center;
  }

  #w-node-bd28f60d-61f1-739c-9c43-646314ab209f-428191f3, #w-node-_81ab43e2-840c-97fa-81f0-1340fdc9250d-428191f3 {
    grid-area: span 1 / span 4 / span 1 / span 4;
  }

  #w-node-_88c51897-809e-f027-3f42-a973668e2643-428191f3 {
    grid-area: span 1 / span 4 / span 1 / span 4;
    justify-self: start;
  }

  #w-node-_681715cf-31b3-57e6-6e91-54d41d6e1ec0-428191f3 {
    grid-area: span 1 / span 4 / span 1 / span 4;
  }

  #w-node-b3aa1cfb-a87b-f7fb-22dc-496af057d2f8-cebcb7c0, #w-node-_23b939c4-89f1-8eaf-77af-7e11ce8b117b-ce8b1171.w-node-_2192cbec-e9fd-d5ef-6ae7-0c33b6765468-cebcb7c0 {
    order: -9999;
  }

  #w-node-_23b939c4-89f1-8eaf-77af-7e11ce8b117d-ce8b1171.w-node-_2192cbec-e9fd-d5ef-6ae7-0c33b676546f-cebcb7c0 {
    order: -9999;
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_23b939c4-89f1-8eaf-77af-7e11ce8b1175-ce8b1171.w-node-_2192cbec-e9fd-d5ef-6ae7-0c33b6765466-cebcb7c0 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    justify-self: center;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_41af3b8d-7c18-ad19-c41f-f37e1c64cd21-1c64cd1d {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_41af3b8d-7c18-ad19-c41f-f37e1c64cd42-1c64cd1d {
    grid-area: span 1 / span 1 / span 1 / span 1;
    align-self: auto;
  }

  #w-node-_20b36c76-825a-e5d6-b916-df168cef965f-ec8e9a4e {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-d2aa3741-aba5-82bd-b84f-b151244d145d-ec8e9a52 {
    order: -9999;
    place-self: center;
  }

  #w-node-_593c75c5-6e68-5903-9c84-cdf48af43315-cebcb7c0 {
    justify-self: center;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_7be3d6c6-ba22-7319-d689-64b39c21e676-6be702ba {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_7be3d6c6-ba22-7319-d689-64b39c21e68d-6be702ba {
    grid-area: 1 / 2 / 2 / 2;
  }
}


@font-face {
  font-family: 'Neuemontreal';
  src: url('fonts/NeueMontreal-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neuemontreal';
  src: url('fonts/NeueMontreal-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neuemontreal';
  src: url('fonts/NeueMontreal-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neuemontreal';
  src: url('fonts/NeueMontreal-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* CARRINHO */
.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.back-to-shop {
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 25px;
	transition: all 0.3s;
}
/* Cart Section */
.cart-section {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.page-title {
	font-size: 2rem;
	color: var(--texto-base);
	margin-bottom: 1rem;
}
/* Delivery Section */
.delivery-section {
	background: var(--branco);
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.delivery-header {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--texto-base);
	margin-bottom: 1rem;
}
.delivery-promo {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: #e8f5e8;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}
.promo-icon {
	width: 50px;
	height: 50px;
	background: var(--verde);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--branco);
	font-size: 1.5rem;
}
.promo-text {
	flex: 1;
	font-size: 0.9rem;
	color: var(--texto-base);
}
.promo-link {
	color: var(--verde);
	text-decoration: underline;
	cursor: pointer;
}
/* Cart Item */
.cart-item {
	background: var(--branco);
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.item-content {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: 1rem;
	align-items: start;
}
.item-image {
	width: 80px;
	height: 80px;
	background: var(--fundo-claro);
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}
   .item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
}
.item-details {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.item-title {
	font-weight: 600;
	color: var(--texto-base);
	font-size: 1rem;
}
.item-subtitle {
	color: #718096;
	font-size: 0.9rem;
}
.item-price {
	font-weight: bold;
	color: var(--texto-base);
	margin: 0.5rem 0;
}
.item-controls {
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 1rem;
}
.quantity-controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--fundo-claro);
	border-radius: 25px;
	padding: 0.2rem;
}
.qty-btn {
	width: 32px;
	height: 32px;
	border: none;
	background: var(--branco);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: var(--escuro);
	transition: all 0.3s;
	font-size: 1.2rem;
}
.qty-btn:hover {
	background: var(--azul-principal);
	color: var(--branco);
}
.qty-input {
	width: 40px;
	text-align: center;
	border: none;
	background: transparent;
	font-weight: 600;
	font-size: 1rem;
}
.item-total {
	font-weight: bold;
	color: var(--texto-base);
	font-size: 1.1rem;
}
/* Service Info */
.service-info {
	background: #f0f8ff;
	border-radius: 8px;
	padding: 1rem;
	margin-top: 1rem;
	border-left: 4px solid var(--azul-principal);
}
.service-badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: var(--texto-base);
}
.service-icon {
	width: 20px;
	height: 20px;
	background: var(--azul-principal);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--branco);
	font-size: 0.7rem;
}
.discount-badge {
	background: var(--verde);
	color: var(--branco);
	padding: 0.2rem 0.6rem;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: 600;
	margin-left: 0.5rem;
}
/* Summary Section */
.summary-section {
	background: var(--branco);
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	height: fit-content;
	position: sticky;
	top: 2rem;
}
.checkout-btn {
	width: 100%;
	background: var(--amarelo);
	color: var(--texto-base);
	border: none;
	padding: 1rem;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s;
	margin-bottom: 1.5rem;
}
.checkout-btn:hover {
	background: #f4b005;
	transform: translateY(-2px);
}
.summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.8rem;
	font-size: 0.95rem;
}
.summary-label {
	color: var(--texto-base);
}
.summary-value {
	font-weight: 600;
	color: var(--texto-base);
}
.shipping-info {
	color: #718096;
	font-size: 0.9rem;
	margin-left: 1rem;
}
.promo-section {
	margin: 1rem 0;
	padding: 1rem 0;
	border-top: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
}
.promo-input-container {
	position: relative;
}
.promo-input {
	width: 100%;
	padding: 0.8rem;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	outline: none;
	transition: border-color 0.3s;
	font-size: 0.9rem;
}
.promo-input:focus {
	border-color: var(--azul-principal);
}
.promo-placeholder {
	color: var(--azul-principal);
	font-size: 0.9rem;
	margin-top: 0.5rem;
	cursor: pointer;
}
.total-section {
	border-top: 1px solid #e2e8f0;
	padding-top: 1rem;
	margin-top: 1rem;
}
.total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--texto-base);
}
.tax-note {
	font-size: 0.8rem;
	color: #718096;
	margin-top: 0.3rem;
}
/* Recommendations */
.recommendations {
	margin-top: 3rem;
}
.section-title {
	font-size: 1.5rem;
	color: var(--texto-base);
	margin-bottom: 1.5rem;
}
/* Navigation arrows */
.nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--branco);
	border: 1px solid #e2e8f0;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s;
	z-index: 10;
}
.nav-arrow:hover {
	background: var(--azul-principal);
	color: var(--branco);
	border-color: var(--azul-principal);
}
.nav-left {
	left: -20px;
}
.nav-right {
	right: -20px;
}
.products-container {
	position: relative;
}
/* Responsive */
@media (max-width: 768px) {
	.item-content {
		grid-template-columns: 60px 1fr;
		gap: 0.8rem;
	}
	.item-controls {
		grid-column: 1 / -1;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 1rem;
	}
	.summary-section {
		position: static;
	}
	.products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* Header da página melhorado */
.page-header-animals {
  background: var(--azul-principal);
  color: var(--branco);
  padding: 3rem 0;
  margin-bottom: 2rem;
}

.page-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.page-title-animals {
  margin-bottom: 1rem;
  color: var(--branco);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.stats-row {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Ações rápidas */
.quick-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--branco);
  color: var(--azul-principal);
  border: 2px solid var(--azul-principal);
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
}

.quick-action-btn:hover {
  background: var(--azul-principal);
  color: var(--branco);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.quick-action-btn svg {
  width: 20px;
  height: 20px;
}

/* Filtros e pesquisa */
.animals-controls {
  max-width: 1400px;
  margin: 0 auto 2rem;
  padding: 0 2rem;
}

.controls-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--branco);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card);
  flex-wrap: wrap;
}

.search-wrapper {
  flex: 1;
  min-width: 250px;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 3rem;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 1rem;
  transition: var(--transition);
}

.search-input:focus {
  border-color: var(--azul-principal);
  box-shadow: 0 0 0 3px rgba(0, 183, 248, 0.1);
  outline: none;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cinza-medio);
  width: 20px;
  height: 20px;
}

.filter-group {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.filter-select {
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--branco);
  font-size: 0.9rem;
  min-width: 120px;
  cursor: pointer;
  transition: var(--transition);
}

.filter-select:focus {
  border-color: var(--azul-principal);
  outline: none;
}

.view-toggle {
  display: flex;
  background: var(--fundo-claro);
  border-radius: var(--border-radius);
  padding: 0.25rem;
  border: 1px solid var(--border-color);
}

.view-btn {
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  border-radius: calc(var(--border-radius) - 2px);
  cursor: pointer;
  transition: var(--transition);
  color: var(--cinza-medio);
}

.view-btn.active {
  background: var(--azul-principal);
  color: var(--branco);
  box-shadow: var(--shadow-light);
}

.view-btn svg {
  width: 18px;
  height: 18px;
}

/* Grid de animais melhorado */
.animals-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.animals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Desktop: 3 colunas */
@media (min-width: 1024px) {
  .animals-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

/* Extra large screens: manter 3 colunas mas com mais espaçamento */
@media (min-width: 1400px) {
  .animals-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

.animals-grid.list-view {
  grid-template-columns: 1fr;
}

/* Card de animal aprimorado */
.animal-card-enhanced {
  background: var(--branco);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-color);
}

.animal-card-enhanced:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--azul-principal);
}

.animal-card-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--azul-principal), var(--verde));
  transform: scaleX(0);
  transition: var(--transition);
}

.animal-card-enhanced:hover::before {
  transform: scaleX(1);
}

.animal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.animal-avatar {
  position: relative;
}

.animal-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--azul-principal);
  transition: var(--transition);
}

.animal-card-enhanced:hover .animal-photo {
  transform: scale(1.05);
  border-color: var(--verde);
}

.status-indicator {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--branco);
}

.status-indicator.healthy {
  background: var(--verde);
}

.status-indicator.attention {
  background: var(--amarelo);
}

.status-indicator.urgent {
  background: var(--laranja);
}

.animal-info h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.4rem;
  color: var(--azul-principal);
  font-weight: 700;
}

.animal-breed {
  color: var(--cinza-escuro);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.animal-age {
  color: var(--azul-secundario);
  font-weight: 600;
  font-size: 0.9rem;
}

.animal-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.detail-icon {
  width: 16px;
  height: 16px;
  color: var(--azul-principal);
  flex-shrink: 0;
}

.detail-label {
  color: var(--cinza-escuro);
  font-weight: 500;
}

.detail-value {
  color: var(--escuro);
  font-weight: 600;
}

.animal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
}

.action-btn.primary {
  background: var(--azul-principal);
  color: var(--branco);
}

.action-btn.primary:hover {
  background: var(--azul-secundario);
  transform: translateY(-1px);
}

.action-btn.secondary {
  background: var(--fundo-claro);
  color: var(--azul-principal);
  border: 1px solid var(--border-color);
}

.action-btn.secondary:hover {
  background: var(--azul-principal);
  color: var(--branco);
  border-color: var(--azul-principal);
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

/* Card para adicionar animal */
.add-animal-card {
  background: linear-gradient(135deg, var(--fundo-claro) 0%, rgba(0, 183, 248, 0.05) 100%);
  border: 2px dashed var(--azul-principal);
  border-radius: var(--border-radius);
  padding: 3rem 1.5rem;
  text-align: center;
  text-decoration: none;
  color: var(--azul-principal);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.add-animal-card:hover {
  background: linear-gradient(135deg, rgba(0, 183, 248, 0.1) 0%, rgba(0, 183, 248, 0.15) 100%);
  border-color: var(--azul-secundario);
  transform: translateY(-2px);
}

.add-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
  color: var(--azul-principal);
}

.add-animal-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  color: var(--azul-principal);
}

.add-animal-card p {
  margin: 0;
  color: var(--cinza-escuro);
  font-size: 0.9rem;
}

/* Vista lista */
.animals-grid.list-view .animal-card-enhanced {
  display: flex;
  align-items: center;
  padding: 1.5rem;
}

.animals-grid.list-view .animal-header {
  margin-bottom: 0;
  flex-shrink: 0;
}

.animals-grid.list-view .animal-details {
  display: flex;
  gap: 2rem;
  margin: 0 2rem 0 0;
  flex: 1;
}

.animals-grid.list-view .animal-actions {
  flex-direction: column;
  gap: 0.5rem;
  min-width: 140px;
}

/* Estados vazios */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--cinza-medio);
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 2rem;
  color: var(--cinza-claro);
}

.empty-state h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--cinza-escuro);
}

.empty-state p {
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Paginação */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 3rem 0;
}

.pagination-btn {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  background: var(--branco);
  color: var(--azul-principal);
  text-decoration: none;
  border-radius: calc(var(--border-radius) - 2px);
  transition: var(--transition);
  font-weight: 500;
}

.pagination-btn:hover,
.pagination-btn.active {
  background: var(--azul-principal);
  color: var(--branco);
  border-color: var(--azul-principal);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsivo */
@media (max-width: 768px) {
  .page-header-animals {
    padding: 2rem 0;
  }
  
  .page-title-animals {
    font-size: 2.5rem;
  }
  
  .stats-row {
    gap: 2rem;
  }
  
  .quick-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .controls-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-wrapper {
    min-width: auto;
  }
  
  .filter-group {
    justify-content: space-between;
  }
  
  .animals-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .animal-details {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .animal-actions {
    flex-direction: column;
  }
  
  .animals-grid.list-view .animal-card-enhanced {
    flex-direction: column;
    text-align: center;
  }
  
  .animals-grid.list-view .animal-details {
    margin: 1rem 0;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .animals-grid.list-view .animal-actions {
    flex-direction: row;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .page-header-content {
    padding: 0 1rem;
  }
  
  .animals-container {
    padding: 0 1rem;
  }
  
  .animals-controls {
    padding: 0 1rem;
  }
  
  .stats-row {
    flex-direction: column;
    gap: 1rem;
  }
  
  .pagination {
    flex-wrap: wrap;
  }
}

/* Animações */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animal-card-enhanced {
  animation: fadeInUp 0.5s ease-out;
}

/* Loading state */
.loading-skeleton {
  background: linear-gradient(90deg, var(--fundo-claro) 25%, var(--cinza-claro) 50%, var(--fundo-claro) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.dashboard-header {
  background: var(--branco);
  border-radius: var(--border-radius);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.dashboard-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
}

.dashboard-welcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.welcome-text h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--escuro);
  margin-bottom: 0.5rem;
}

.welcome-subtitle {
  color: var(--azul-secundario);
  font-size: 1rem;
  opacity: 0.8;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.stat-card {
  background: var(--branco);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  border-left: 4px solid var(--azul-principal);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.stat-card.success {
  border-left-color: var(--verde-sucesso);
}

.stat-card.warning {
  border-left-color: var(--amarelo);
}

.stat-card.info {
  border-left-color: var(--roxo);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--azul-principal);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--azul-secundario);
  font-weight: 500;
}

.stat-trend {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.stat-trend.up {
  color: var(--verde-sucesso);
}

.reminder-card {
  background: linear-gradient(135deg, #fff8e1, #fffbeb);
  border: 1px solid var(--amarelo);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
}

.reminder-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.reminder-icon {
  width: 24px;
  height: 24px;
  color: var(--amarelo);
}

.reminder-title {
  font-weight: 600;
  color: var(--escuro);
  font-size: 1.1rem;
  margin-top: 1rem;
}

.reminder-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--amarelo);
  cursor: pointer;
  transition: var(--transition);
}

.reminder-close:hover {
  color: #f59e0b;
}

.reminder-content {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--escuro);
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.action-card {
  background: var(--gradient-primary);
  color: white;
  padding: 1.5rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  display: block;
}

.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255,255,255,0);
  transition: var(--transition);
}

.action-card:hover::before {
  background: rgba(255,255,255,0.1);
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.action-card.warning {
  background: var(--gradient-warning);
}

.action-card.success {
  background: var(--gradient-success);
}

.action-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 1rem;
}

.action-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: white;
}

.action-description {
  font-size: 0.9rem;
  opacity: 0.9;
  color: white;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.dashboard-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.dashboard-card {
  background: var(--branco);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  border: 1px solid var(--border-color);
  height: 100%;
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.card-header {
  padding: 1.5rem 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--escuro);
}

.card-icon {
  width: 24px;
  height: 24px;
  color: var(--azul-principal);
}

.card-action {
  color: var(--azul-principal);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--transition);
}

.card-action:hover {
  color: var(--azul-secundario);
}

.card-content {
  padding: 1.5rem;
}

.appointment-item {
  background: var(--fundo-claro);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  border-left: 4px solid var(--azul-principal);
  transition: var(--transition);
}

.appointment-item:hover {
  background: #f0f9ff;
  transform: translateX(4px);
}

.appointment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.appointment-type {
  font-weight: 600;
  color: var(--azul-principal);
  font-size: 0.95rem;
}

.appointment-status {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.appointment-status.confirmed {
  background: rgba(16, 185, 129, 0.1);
  color: var(--verde-sucesso);
}

.appointment-status.pending {
  background: rgba(251, 189, 8, 0.1);
  color: var(--amarelo);
}

.appointment-details {
  font-size: 0.9rem;
  color: var(--azul-secundario);
  line-height: 1.4;
}

.appointment-pet {
  font-weight: 500;
  color: var(--escuro);
}

.appointment-time {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--azul-secundario);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.pet-card {
  background: var(--branco);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  text-align: center;
  border: 2px solid var(--border-color);
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
  display: block;
}

.pet-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--azul-principal);
}

.pet-card.add-new {
  border-style: dashed;
  border-color: var(--azul-principal);
  background: rgba(0, 183, 248, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.pet-card.add-new:hover {
  background: rgba(0, 183, 248, 0.05);
}

.pet-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--azul-principal);
  margin: 0 auto 1rem;
}

.pet-name {
  font-weight: 600;
  color: var(--azul-principal);
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.pet-age {
  color: var(--azul-secundario);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.pet-health-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.pet-health-status.healthy {
  background: rgba(16, 185, 129, 0.1);
  color: var(--verde-sucesso);
}

.pet-health-status.needs-attention {
  background: rgba(251, 189, 8, 0.1);
  color: var(--amarelo);
}

.notification-item {
  background: var(--branco);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  border-left: 4px solid var(--azul-principal);
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
  display: block;
}

.notification-item:hover {
  background: var(--fundo-claro);
  transform: translateX(2px);
}

.notification-item.urgent {
  border-left-color: var(--vermelho-erro);
}

.notification-item.info {
  border-left-color: var(--azul-principal);
}

.notification-item.success {
  border-left-color: var(--verde-sucesso);
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.notification-content {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--escuro);
}

.notification-time {
  font-size: 0.8rem;
  color: var(--azul-secundario);
  opacity: 0.8;
}

.notification-badge {
  width: 8px;
  height: 8px;
  background: var(--vermelho-erro);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--fundo-claro);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  transition: var(--transition);
}

.order-item:hover {
  background: #f0f9ff;
}

.order-info h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--escuro);
  margin-bottom: 0.25rem;
}

.order-details {
  font-size: 0.85rem;
  color: var(--azul-secundario);
}

.order-price {
  font-weight: 600;
  color: var(--azul-principal);
  font-size: 1rem;
}

.order-status {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

.order-status.delivered {
  background: rgba(16, 185, 129, 0.1);
  color: var(--verde-sucesso);
}

.order-status.shipped {
  background: rgba(0, 183, 248, 0.1);
  color: var(--azul-principal);
}

/* Sidebar original */
.user-card {
  background-color: #a3e7ff;
  color: #062d3e;
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.user-avatar svg {
  width: 40px;
  height: 40px;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.user-nome {
  font-weight: 600;
  margin: 0;
}

.user-tag {
  font-size: 0.75rem;
  background-color: #ffc0ea;
  color: #062d3e;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  width: fit-content;
}

.menu-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-nav li {
  margin-bottom: 1rem;
}

.menu-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  transition: background-color 0.2s ease-in-out;
}

.menu-nav a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-nav a.ativo,
.menu-nav a[aria-current="page"] {
  background-color: var(--azul-principal);
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
}

.menu-nav svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Responsivo */
@media (max-width: 1024px) {
  .dashboard-pane-wrapper {
	margin-left: 0;
	max-width: 100vw;
	padding: 1rem;
	padding-top: 3rem;
  }
  
  .dashboard-grid {
	grid-template-columns: 1fr;
  }
  
  .dashboard-stats {
	grid-template-columns: repeat(2, 1fr);
  }
  
  .quick-actions {
	grid-template-columns: 1fr;
  }

  .menu-lateral {
	transform: translateX(-100%);
	transition: transform 0.3s ease-in-out;
    display: none;
  }

  .menu-lateral.aberto {
	transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .dashboard-welcome {
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
  }
  
  .dashboard-stats {
	grid-template-columns: 1fr;
  }
  
  .pets-grid {
	grid-template-columns: repeat(2, 1fr);
  }
  
  .appointment-header {
	flex-direction: column;
	gap: 0.5rem;
  }
}

@keyframes fadeIn {
  from {
	opacity: 0;
	transform: translateY(20px);
  }
  to {
	opacity: 1;
	transform: translateY(0);
  }
}

.dashboard-card,
.action-card,
.pet-card {
  animation: fadeIn 0.5s ease-out;
}

/* Container principal com largura máxima aumentada */
.page-container {
  max-width: 1600px; /* Aumentado de 1200px para 1600px */
  margin: 0 auto;
  width: 100%;
}

/* Header da página */
.page-header {
  background: var(--branco);
  border-radius: var(--border-radius);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--escuro);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.page-icon {
  width: 32px;
  height: 32px;
  color: var(--azul-principal);
}

.page-subtitle {
  color: var(--azul-secundario);
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

/* Stats com mais colunas em desktop */
.page-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

/* Desktop específico - stats em linha única */
@media (min-width: 1200px) {
  .page-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

.stat-item {
  background: var(--fundo-claro);
  padding: 1.25rem;
  border-radius: 8px;
  text-align: center;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--azul-principal);
}

.stat-label {
  font-size: 0.9rem;
  color: var(--azul-secundario);
  margin-top: 0.25rem;
}

/* Filtros e pesquisa */
.filters-section {
  background: var(--branco);
  border-radius: var(--border-radius);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.filters-title {
  font-weight: 600;
  color: var(--escuro);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Grid de filtros mais espaçoso */
.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  align-items: end;
}

/* Desktop - filtros em linha única */
@media (min-width: 1200px) {
  .filters-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
  }
}

.filter-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--azul-principal);
}

.filter-input,
.filter-select {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.9rem;
  transition: var(--transition);
}

.filter-input:focus,
.filter-select:focus {
  border-color: var(--azul-principal);
  box-shadow: 0 0 0 3px rgba(0, 183, 248, 0.1);
  outline: none;
}

.search-button {
  background: var(--azul-principal);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.search-button:hover {
  background: var(--azul-secundario);
}

/* Lista de documentos */
.documents-section {
  background: var(--branco);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.documents-header {
  padding: 2rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.documents-title {
  font-weight: 600;
  color: var(--escuro);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.documents-count {
  font-size: 0.9rem;
  color: var(--azul-secundario);
  background: var(--fundo-claro);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.sort-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.9rem;
  min-width: 150px;
}

.view-toggle {
  display: flex;
  background: var(--fundo-claro);
  border-radius: 6px;
  padding: 2px;
}

.view-btn {
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  transition: var(--transition);
}

/* Grid de documentos - LARGURA AUMENTADA */
.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

/* Desktop - mais colunas */
@media (min-width: 1200px) {
  .documents-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 1400px) {
  .documents-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
  }
}

/* Extra large screens */
@media (min-width: 1600px) {
  .documents-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

.document-card {
  background: var(--branco);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.document-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--azul-principal);
}

.document-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--azul-principal);
}

.document-card.invoice::before {
  background: var(--verde-sucesso);
}

.document-card.receipt::before {
  background: var(--amarelo);
}

.document-card.report::before {
  background: var(--roxo);
}

.document-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.document-icon {
  width: 40px;
  height: 40px;
  background: var(--fundo-claro);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azul-principal);
}

.document-type {
  background: rgba(0, 183, 248, 0.1);
  color: var(--azul-principal);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.document-type.invoice {
  background: rgba(16, 185, 129, 0.1);
  color: var(--verde-sucesso);
}

.document-type.receipt {
  background: rgba(251, 189, 8, 0.1);
  color: var(--amarelo);
}

.document-type.report {
  background: rgba(139, 92, 246, 0.1);
  color: var(--roxo);
}

.document-number {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--escuro);
  margin-bottom: 0.5rem;
}

.document-date {
  font-size: 0.9rem;
  color: var(--azul-secundario);
  margin-bottom: 1rem;
}

.document-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex: 1;
}

.document-detail {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

.detail-label {
  color: var(--azul-secundario);
}

.detail-value {
  font-weight: 500;
  color: var(--escuro);
}

.document-amount {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--azul-principal);
  text-align: center;
  margin-bottom: 1rem;
}

.document-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

/* Vista em lista */
.documents-list {
  padding: 0;
}

.document-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
}

.document-row:hover {
  background: var(--fundo-claro);
}

.document-row:last-child {
  border-bottom: none;
}

.row-icon {
  width: 32px;
  height: 32px;
  background: var(--fundo-claro);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azul-principal);
}

.row-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.row-number {
  font-weight: 600;
  color: var(--escuro);
}

.row-description {
  font-size: 0.85rem;
  color: var(--azul-secundario);
}

.row-date,
.row-amount,
.row-status {
  font-size: 0.9rem;
}

.row-date {
  color: var(--azul-secundario);
}

.row-amount {
  font-weight: 600;
  color: var(--azul-principal);
}

.row-status {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
}

.status-paid {
  background: rgba(16, 185, 129, 0.1);
  color: var(--verde-sucesso);
}

.status-pending {
  background: rgba(251, 189, 8, 0.1);
  color: var(--amarelo);
}

.row-actions {
  display: flex;
  gap: 0.5rem;
}

.row-action-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: var(--branco);
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-action-btn:hover {
  border-color: var(--azul-principal);
  color: var(--azul-principal);
}

/* Paginação */
.pagination {
  padding: 2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.pagination-btn {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border-color);
  background: var(--branco);
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: var(--escuro);
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover,
.pagination-btn.active {
  background: var(--azul-principal);
  color: white;
  border-color: var(--azul-principal);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sidebar original */
.user-card {
  background-color: #a3e7ff;
  color: #062d3e;
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.user-avatar svg {
  width: 40px;
  height: 40px;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.user-nome {
  font-weight: 600;
  margin: 0;
}

.user-tag {
  font-size: 0.75rem;
  background-color: #ffc0ea;
  color: #062d3e;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  width: fit-content;
}

.menu-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-nav li {
  margin-bottom: 1rem;
}

.menu-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  transition: background-color 0.2s ease-in-out;
}

.menu-nav a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-nav a.ativo,
.menu-nav a[aria-current="page"] {
  background-color: var(--azul-principal);
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
}

.menu-nav svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Estados vazios */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--azul-secundario);
}

.empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  opacity: 0.5;
}

.empty-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--escuro);
}

.empty-description {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Responsivo ATUALIZADO */
@media (max-width: 1200px) {
  .page-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .filters-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 1024px) {
  .documents-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
  }
  
  .filters-grid {
    grid-template-columns: 1fr;
  }

  .page-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .documents-header {
    padding: 1.5rem;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .sort-controls {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .documents-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }
  
  .page-stats {
    grid-template-columns: 1fr;
  }
  
  .document-row {
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    padding: 1rem;
  }
  
  .row-amount,
  .row-date,
  .row-status {
    display: none;
  }
  
  .filters-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .page-header,
  .filters-section {
    padding: 1.5rem;
  }
  
  .pagination {
    padding: 1.5rem;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.document-card,
.document-row {
  animation: fadeIn 0.5s ease-out;
}

/* Animações para notificações */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

 /* Estilos específicos para a página de contactos AR */
    .contactos-page-header {
      color: var(--azul-principal);
      padding: 2rem;
      margin-bottom: 2rem;
      text-align: center;
    }

    .contactos-page-header p {
      font-size: 1.1rem;
      margin: 0;
      opacity: 0.9;
    }

    .contactos-main-wrapper {
      background: var(--branco);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      margin-bottom: 2rem;
    }

    .contactos-grid-enhanced {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
    }

    @media (min-width: 992px) {
      .contactos-grid-enhanced {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* Informações de contacto */
    .info-contacto-enhanced {
      background: var(--fundo-claro);
      padding: 2.5rem;
      position: relative;
    }

    .info-contacto-enhanced::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--azul-principal), var(--verde));
    }

    .info-contacto-enhanced h2 {
      font-family: 'Boogaloo', cursive;
      color: var(--azul-secundario);
      margin-bottom: 1.5rem;
      font-size: 1.8rem;
    }

    .contact-method {
      background: var(--branco);
      border: 1px solid #e8f4fd;
      border-radius: 12px;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .contact-method::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(0, 183, 248, 0.1), transparent);
      transition: left 0.5s ease;
    }

    .contact-method:hover::before {
      left: 100%;
    }

    .contact-method:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 183, 248, 0.15);
      border-color: var(--azul-principal);
    }

    .contact-method-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .contact-icon {
      width: 48px;
      height: 48px;
      background: var(--azul-secundario);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--branco);
    }

    .contact-method h3 {
      color: var(--azul-principal);
      font-size: 1.1rem;
      font-weight: 600;
      margin: 0;
    }

    .contact-method p {
      margin: 0;
      color: var(--escuro);
      line-height: 1.6;
    }

    .contact-method a {
      color: var(--azul-principal);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .contact-method a:hover {
      color: var(--azul-secundario);
    }

    /* Formulário melhorado */
    .contact-form-enhanced {
      padding: 2.5rem;
      background: var(--branco);
    }

    .contact-form-enhanced h2 {
      font-family: 'Boogaloo', cursive;
      color: var(--azul-secundario);
      margin-bottom: 1.5rem;
      font-size: 1.8rem;
    }

    .form-group-enhanced {
      margin-bottom: 1.5rem;
      position: relative;
    }

    .form-group-enhanced label {
      display: block;
      font-weight: 600;
      color: var(--azul-principal);
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .form-input-enhanced {
      width: 100%;
      padding: 1rem;
      border: 2px solid #e8f4fd;
      border-radius: 12px;
      font-size: 1rem;
      transition: all 0.3s ease;
      background: var(--fundo-claro);
      color: var(--escuro);
      font-family: inherit;
    }

    .form-input-enhanced:focus {
      outline: none;
      border-color: var(--azul-principal);
      background: var(--branco);
      box-shadow: 0 0 0 4px rgba(0, 183, 248, 0.1);
      transform: translateY(-1px);
    }

    .form-input-enhanced::placeholder {
      color: #a0a0a0;
      font-style: italic;
    }

    .textarea-enhanced {
      min-height: 120px;
      resize: vertical;
      font-family: inherit;
    }

    .select-enhanced {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300b7f8' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 20px;
      padding-right: 3rem;
    }

    .btn-enviar-enhanced {
      background: linear-gradient(135deg, var(--azul-principal), var(--azul-secundario));
      color: var(--branco);
      border: none;
      padding: 1rem 2rem;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      width: 100%;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      position: relative;
      overflow: hidden;
    }

    .btn-enviar-enhanced::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s ease;
    }

    .btn-enviar-enhanced:hover::before {
      left: 100%;
    }

    .btn-enviar-enhanced:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 183, 248, 0.4);
    }

    .btn-enviar-enhanced:active {
      transform: translateY(0);
    }

    /* Seção de emergência */
    .emergency-section {
      background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
      color: var(--branco);
      padding: 2rem;
      border-radius: 16px;
      margin-top: 2rem;
      text-align: center;
      box-shadow: 0 8px 32px rgba(255, 107, 107, 0.3);
    }

    .emergency-section h3 {
      font-family: 'Boogaloo', cursive;
      font-size: 1.5rem;
      margin: 0 0 1rem 0;
      color: var(--branco);
    }

    .emergency-section p {
      margin: 0 0 1.5rem 0;
      font-size: 1rem;
    }

    .emergency-phone {
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.3);
      color: var(--branco);
      padding: 1rem 2rem;
      border-radius: 12px;
      font-size: 1.2rem;
      font-weight: 700;
      text-decoration: none;
      display: inline-block;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }

    .emergency-phone:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    /* Modal melhorado */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      backdrop-filter: blur(4px);
    }

    .modal-content-enhanced {
      background: var(--branco);
      padding: 3rem;
      border-radius: 20px;
      text-align: center;
      max-width: 400px;
      width: 90%;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      transform: scale(0.8);
      transition: transform 0.3s ease;
    }

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

    .modal-success-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--verde), #4caf50);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      color: var(--branco);
      font-size: 2rem;
    }

    .modal-content-enhanced h3 {
      color: var(--azul-secundario);
      font-size: 1.5rem;
      margin: 0 0 1rem 0;
    }

    .modal-content-enhanced p {
      color: var(--escuro);
      margin: 0 0 2rem 0;
      line-height: 1.6;
    }

    .btn-modal-ok {
      background: var(--azul-principal);
      color: var(--branco);
      border: none;
      padding: 0.8rem 2rem;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-modal-ok:hover {
      background: var(--azul-secundario);
      transform: translateY(-1px);
    }

    /* Animações */
    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .contact-method {
      animation: slideInUp 0.6s ease forwards;
    }

    .contact-method:nth-child(2) { animation-delay: 0.1s; }
    .contact-method:nth-child(3) { animation-delay: 0.2s; }
    .contact-method:nth-child(4) { animation-delay: 0.3s; }
    .contact-method:nth-child(5) { animation-delay: 0.4s; }

    /* Status de envio */
    .form-status {
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
      display: none;
      text-align: center;
      font-weight: 500;
    }

    .form-status.loading {
      background: #e3f2fd;
      color: var(--azul-principal);
      border: 1px solid var(--azul-principal);
    }

    .form-status.success {
      background: #e8f5e8;
      color: var(--verde);
      border: 1px solid var(--verde);
    }

    .form-status.error {
      background: #ffebee;
      color: #d32f2f;
      border: 1px solid #d32f2f;
    }

    /* Loading spinner */
    .loading-spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid var(--azul-principal);
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 1s ease-in-out infinite;
      margin-right: 0.5rem;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Responsive */
    @media (max-width: 991px) {
      .contactos-page-header {
        padding: 1.5rem;
      }

      .info-contacto-enhanced,
      .contact-form-enhanced {
        padding: 2rem;
      }

      .emergency-section {
        padding: 1.5rem;
      }

      .modal-content-enhanced {
        padding: 2rem;
        margin: 1rem;
      }
    }

    @media (max-width: 767px) {
      .contactos-page-header {
        padding: 1rem;
      }

      .info-contacto-enhanced,
      .contact-form-enhanced {
        padding: 1.5rem;
      }

      .contact-method {
        padding: 1rem;
      }

      .contact-icon {
        width: 40px;
        height: 40px;
      }

      .emergency-section {
        padding: 1rem;
      }

      .emergency-phone {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
      }
    }
	
.form-container {
	margin: 0 auto;
	background: var(--branco);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-light);
	overflow: hidden;
}

.form-header {
	color: var(--azul-principal);
	padding: 2rem;
	text-align: center;
}

.form-header h2 {
	margin: 0 0 0.5rem 0;
	font-size: 2rem;
	font-weight: 700;
}

.form-header p {
	margin: 0;
	opacity: 0.9;
	font-size: 1.1rem;
}

.form-content {
	padding: 2rem;
}

.progress-bar {
	width: 100%;
	height: 6px;
	background: var(--cinza-claro);
	border-radius: 3px;
	margin-bottom: 2rem;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--azul-principal), var(--verde));
	width: 0%;
	transition: width 0.5s ease;
	border-radius: 3px;
}

.form-step {
	display: none;
}

.form-step.active {
	display: block;
	animation: slideIn 0.3s ease;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.step-title {
	color: var(--azul-secundario);
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.step-icon {
	width: 32px;
	height: 32px;
	background: var(--azul-principal);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
}

.form-group {
	margin-bottom: 1.5rem;
}

.form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--azul-secundario);
	font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 1rem;
	border: 2px solid var(--border-color);
	border-radius: var(--border-radius);
	font-size: 1rem;
	transition: var(--transition);
	background: var(--branco);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--azul-principal);
	box-shadow: 0 0 0 3px rgba(0, 183, 248, 0.1);
}

.form-group textarea {
	resize: vertical;
	min-height: 120px;
}

/* Animal Selection Cards */
.animal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.select-animal {
	border: 2px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 1.5rem;
	text-align: center;
	cursor: pointer;
	transition: var(--transition);
	background: var(--branco);
	position: relative;
}

.select-animal:hover {
	border-color: var(--azul-principal);
	transform: translateY(-2px);
	box-shadow: var(--shadow-light);
}

.select-animal.selected {
	border-color: var(--azul-principal);
	background: rgba(0, 183, 248, 0.05);
}

.select-animal .animal-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--azul-principal);
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: white;
}

.select-animal h4 {
	margin: 0 0 0.5rem 0;
	color: var(--azul-secundario);
	font-weight: 600;
}

.select-animal p {
	margin: 0;
	color: var(--cinza-medio);
	font-size: 0.9rem;
}

/* Service Type Cards */
.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
}

.service-card {
	border: 2px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 1.5rem;
	cursor: pointer;
	transition: var(--transition);
	background: var(--branco);
}

.service-card:hover {
	border-color: var(--azul-principal);
	transform: translateY(-2px);
	box-shadow: var(--shadow-light);
}

.service-card.selected {
	border-color: var(--azul-principal);
	background: rgba(0, 183, 248, 0.05);
}

.service-card .service-icon {
	font-size: 2rem;
	margin-bottom: 1rem;
	display: block;
}

.service-card h4 {
	margin: 0 0 0.5rem 0;
	color: var(--azul-secundario);
	font-weight: 600;
}

.service-card p {
	margin: 0;
	color: var(--cinza-medio);
	font-size: 0.9rem;
}

/* Days Selection */
.days-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0.75rem;
}

.day-card {
	border: 2px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 1rem;
	text-align: center;
	cursor: pointer;
	transition: var(--transition);
	background: var(--branco);
}

.day-card:hover {
	border-color: var(--azul-principal);
	background: rgba(0, 183, 248, 0.05);
}

.day-card.selected {
	border-color: var(--azul-principal);
	background: var(--azul-principal);
	color: white;
}

.day-card .day-name {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.day-card .day-short {
	font-size: 0.8rem;
	opacity: 0.8;
}

/* Time Selection */
.time-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 0.5rem;
	margin-top: 1rem;
}

.time-slot {
	border: 2px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 0.75rem;
	text-align: center;
	cursor: pointer;
	transition: var(--transition);
	background: var(--branco);
	font-weight: 600;
}

.time-slot:hover {
	border-color: var(--azul-principal);
	background: rgba(0, 183, 248, 0.05);
}

.time-slot.selected {
	border-color: var(--azul-principal);
	background: var(--azul-principal);
	color: white;
}

.time-slot.unavailable {
	background: var(--cinza-claro);
	color: var(--cinza-medio);
	cursor: not-allowed;
	opacity: 0.5;
}

/* Buttons */
.form-actions {
	display: flex;
	gap: 1rem;
	margin-top: 2rem;
	justify-content: space-between;
}

.btn {
	padding: 1rem 2rem;
	border: none;
	border-radius: var(--border-radius);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.btn-primary {
	background: var(--azul-principal);
	color: white;
}

.btn-primary:hover {
	background: var(--azul-secundario);
	transform: translateY(-1px);
	box-shadow: var(--shadow-medium);
}

.btn-secondary {
	background: transparent;
	color: var(--azul-principal);
	border: 2px solid var(--azul-principal);
}

.btn-secondary:hover {
	background: var(--azul-principal);
	color: white;
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
}

/* Summary */
.summary-card {
	background: var(--fundo-claro);
	border-radius: var(--border-radius);
	padding: 1.5rem;
	margin-top: 1rem;
}

.summary-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border-color);
}

.summary-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.summary-label {
	font-weight: 600;
	color: var(--azul-secundario);
}

.summary-value {
	color: var(--texto-base);
}

/* Success Message */
.success-message {
	text-align: center;
	padding: 2rem;
}

.success-icon {
	width: 80px;
	height: 80px;
	background: var(--verde);
	border-radius: 50%;
	margin: 0 auto 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: white;
}

.help-text {
	font-size: 0.9rem;
	color: var(--cinza-medio);
	margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
	.form-content {
		padding: 1rem;
	}

	.form-header {
		padding: 1.5rem;
	}

	.form-header h2 {
		font-size: 1.5rem;
	}

	.animal-grid,
	.service-grid {
		grid-template-columns: 1fr;
	}

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

	.time-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.form-actions {
		flex-direction: column;
	}

	.btn {
		justify-content: center;
	}
}

/* Loading state */
.loading {
	opacity: 0.7;
	pointer-events: none;
}

.spinner {
	width: 20px;
	height: 20px;
	border: 2px solid transparent;
	border-top: 2px solid currentColor;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* ===================== */
/* PET PROFILE CARD      */
/* ===================== */
.pet-profile-card {
  background: var(--branco);
  border-radius: var(--border-radius);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}

.pet-profile-card:hover {
  box-shadow: var(--shadow-hover);
}

.pet-profile-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.pet-image-section {
  text-align: center;
  flex-shrink: 0;
}

.pet-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--azul-principal);
  box-shadow: var(--shadow-card);
  transition: var(--transition-fast);
}

.pet-image:hover {
  transform: scale(1.05);
}

.pet-image-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--azul-principal);
  color: var(--azul-principal);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--azul-principal);
  color: var(--branco);
}

.btn-primary {
  background: var(--azul-principal);
  color: var(--branco);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-primary:hover {
  background: var(--azul-secundario);
  transform: translateY(-1px);
}

.pet-info-section {
  flex: 1;
  min-width: 300px;
}

.pet-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.info-item {
  display: flex;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
}

.info-label {
  font-weight: 600;
  color: var(--azul-secundario);
  min-width: 140px;
  flex-shrink: 0;
}

.info-value {
  color: var(--escuro);
  flex: 1;
}

/* ===================== */
/* CONTENT SECTIONS      */
/* ===================== */
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.section-card {
  background: var(--branco);
  border-radius: var(--border-radius);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.section-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--fundo-claro);
}

.section-title {
  color: var(--azul-secundario);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-link {
  color: var(--azul-principal);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.section-link:hover {
  text-decoration: underline;
}

/* ===================== */
/* TIMELINE ITEMS        */
/* ===================== */
.timeline-container {
  position: relative;
  padding-left: 2rem;
}

.timeline-container::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--azul-principal), var(--azul-secundario));
}

.timeline-item {
  position: relative;
  padding: 1rem 0;
  margin-bottom: 1rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.65rem;
  top: 1.2rem;
  width: 12px;
  height: 12px;
  background: var(--azul-principal);
  border-radius: 50%;
  border: 3px solid var(--branco);
  box-shadow: var(--shadow-card);
}

.timeline-content {
  background: var(--fundo-claro);
  padding: 1.5rem;
  border-radius: 10px;
  border-left: 4px solid var(--azul-principal);
  transition: var(--transition-fast);
}

.timeline-content:hover {
  background: rgba(0, 183, 248, 0.05);
  transform: translateX(5px);
}

.timeline-date {
  color: var(--azul-principal);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.timeline-title {
  color: var(--escuro);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.timeline-description {
  color: var(--cinza-escuro);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ===================== */
/* APPOINTMENT CARDS     */
/* ===================== */
.appointment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.appointment-card {
  background: var(--fundo-claro);
  border-radius: 10px;
  padding: 1.5rem;
  border-left: 4px solid var(--verde);
  transition: var(--transition-fast);
  cursor: pointer;
}

.appointment-card:hover {
  background: rgba(0, 183, 248, 0.05);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.appointment-card.urgent {
  border-left-color: var(--laranja);
}

.appointment-card.completed {
  border-left-color: var(--verde);
  opacity: 0.8;
}

.appointment-date {
  color: var(--azul-principal);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.appointment-title {
  color: var(--escuro);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.appointment-status {
  color: var(--cinza-escuro);
  font-size: 0.85rem;
}

.add-appointment-card {
  background: var(--azul-principal);
  color: var(--branco);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
  text-decoration: none;
}

.add-appointment-card:hover {
  background: var(--azul-secundario);
  color: #ffffff;
}

/* ===================== */
/* RESPONSIVE DESIGN     */
/* ===================== */
@media (max-width: 1024px) {
  .content-wrapper.sidebar-open {
    margin-left: 0;
  }
  
  .sidebar {
    width: 100%;
    top: 0;
    height: 100vh;
    padding-top: 100px;
  }
  
  .menu-toggle {
    display: block;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  
  .pet-profile-header {
    flex-direction: column;
    text-align: center;
  }
  
  .pet-info-grid {
    grid-template-columns: 1fr;
  }
  
  .content-grid {
    gap: 1rem;
  }
  
  .section-card {
    padding: 1.5rem;
  }
  
  .edit-button {
    position: static;
    margin-top: 1rem;
    width: 100%;
  }
  
  .page-header {
    text-align: center;
    padding: 2rem 1rem;
  }
  
  .timeline-container {
    padding-left: 1rem;
  }
  
  .appointment-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }
  
  .content-wrapper {
    padding: 1rem;
  }
  
  .section-card {
    padding: 1rem;
  }
  
  .pet-image-buttons {
    flex-direction: column;
  }
  
  .nav-container {
    padding: 1rem;
  }
  
}

/* ===================== */
/* ANIMATIONS            */
/* ===================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-card {
  animation: fadeInUp 0.6s ease-out;
}

.section-card:nth-child(2) { animation-delay: 0.1s; }
.section-card:nth-child(3) { animation-delay: 0.2s; }
.section-card:nth-child(4) { animation-delay: 0.3s; }

/* ===================== */
/* ACCESSIBILITY         */
/* ===================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus states */
button:focus,
a:focus,
input:focus {
  outline: 2px solid var(--azul-principal);
  outline-offset: 2px;
}