/* CSS Design System for Patoka Pet - Apple & Glassmorphism Refined Version */

/* 1. CASCADE LAYERS RESET & BASE SETUP */

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

html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}

body {
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
}

input, button, textarea, select {
font: inherit;
}

button {
cursor: pointer;
background: none;
border: none;
user-select: none;
}

a {
color: inherit;
text-decoration: none;
}

ul, ol {
list-style: none;
}

:root {
/* Brand Colors */
--brand-pink: #fa9da8;
--brand-pink-rgb: 250, 157, 168;
--brand-pink-dark: #e88692;
--brand-pink-light: #fff0f1;

--brand-green: #8fb694;
--brand-green-rgb: 143, 182, 148;
--brand-green-dark: #6e9a74;
--brand-green-light: #f0f7f2;

/* Apple Palette Darks & Neutrals */
--apple-dark: #1d1d1f;
--apple-text-dark: #1d1d1f;
--apple-text-gray: #515154;
--apple-bg-light: #f5f5f7;
--apple-bg-white: #ffffff;
--apple-border: rgba(0, 0, 0, 0.08);

/* Glassmorphism Presets */
--glass-bg: rgba(255, 255, 255, 0.45);
--glass-bg-hover: rgba(255, 255, 255, 0.65);
--glass-border: rgba(255, 255, 255, 0.5);
--glass-border-hover: rgba(143, 182, 148, 0.3);
--glass-blur: blur(20px) saturate(190%);

/* Typography */
--font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

/* Spacings */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4.5rem;
--space-xl: 9rem;

/* Apple-style Soft Depth Shadows */
--shadow-s: 0 4px 12px rgba(0, 0, 0, 0.03);
--shadow-m: 0 8px 24px rgba(0, 0, 0, 0.04);
--shadow-l: 0 20px 40px rgba(0, 0, 0, 0.06);
--shadow-glass: 0 10px 30px rgba(143, 182, 148, 0.06);

/* Transitions */
--transition-fast: 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
--transition-normal: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
--transition-slow: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

/* Layout */
--max-width: 1200px;
--header-height: 76px;

color-scheme: light;
}

body {
font-family: var(--font-body);
font-size: 1rem;
color: var(--apple-text-dark);
background-color: var(--apple-bg-light);
background: radial-gradient(circle at 0% 0%, rgba(250, 157, 168, 0.07) 0%, transparent 35%),
              radial-gradient(circle at 100% 100%, rgba(143, 182, 148, 0.07) 0%, transparent 35%),
              var(--apple-bg-light);
background-attachment: fixed;
overflow-x: hidden;
}

body.no-scroll {
overflow: hidden !important;
height: 100vh !important;
}

h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
color: var(--apple-dark);
letter-spacing: -0.015em;
}

h1 {
font-size: clamp(2.0rem, 1.2rem + 2.5vw, 2.8rem);
text-wrap: balance;
}

h2 {
font-size: clamp(1.8rem, 1.2rem + 3.5vw, 2.8rem);
text-wrap: balance;
letter-spacing: -0.02em;
}

h3 {
font-size: clamp(1.3rem, 1.1rem + 1.5vw, 1.8rem);
letter-spacing: -0.01em;
}

p {
font-size: 1.05rem;
line-height: 1.6;
color: var(--apple-text-gray);
text-wrap: pretty;
}

.container {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--space-md);
}

section {
padding-block: var(--space-lg);
position: relative;
}

/* Section Header */
.section-header {
text-align: center;
max-width: 620px;
margin-inline: auto;
margin-bottom: var(--space-lg);
}

.section-tag {
display: inline-block;
padding: 0.35rem 0.85rem;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--brand-green-dark);
background-color: var(--brand-green-light);
border: 1px solid rgba(143, 182, 148, 0.3);
border-radius: 9999px;
margin-bottom: 0.85rem;
}

.section-title {
margin-bottom: 0.85rem;
}

.section-subtitle {
color: var(--apple-text-gray);
font-size: 1.1rem;
font-weight: 400;
}

.text-highlight-pink {
color: var(--brand-pink-dark);
display: inline-block;
}

.text-highlight-green {
color: var(--brand-green-dark);
display: inline-block;
}

.text-highlight-white {
color: var(--apple-bg-white);
display: inline-block;
}

.grid-4 {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-sm);
}

@media (min-width: 640px) {
    .grid-4 {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .grid-4 {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-md);
    }
}

/* 2. COMPONENTS STYLING */
/* Glass Card Base Style */
.glass-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 28px;
box-shadow: var(--shadow-glass), var(--shadow-s);
transition: transform var(--transition-normal),
              box-shadow var(--transition-normal),
              border-color var(--transition-normal),
              background-color var(--transition-normal);
}

.glass-card:hover {
background: var(--glass-bg-hover);
border-color: var(--glass-border-hover);
box-shadow: var(--shadow-l), 0 10px 40px rgba(143, 182, 148, 0.08);
}

/* Buttons - Apple Style */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.85rem;
font-weight: 600;
border-radius: 16px;
transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              background-color var(--transition-fast);
text-align: center;
border: 1px solid transparent;
}

.btn-lg {
padding: 1.1rem 2.5rem;
font-size: 1.05rem;
border-radius: 18px;
}

.btn-sm {
padding: 0.55rem 1.35rem;
font-size: 0.9rem;
border-radius: 12px;
}

.btn-block {
display: flex;
width: 100%;
}

.btn-primary {
background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-pink-dark) 100%);
color: var(--apple-bg-white);
box-shadow: 0 4px 16px rgba(250, 157, 168, 0.35);
}

.btn-primary:hover {
transform: scale(1.02);
box-shadow: 0 6px 22px rgba(250, 157, 168, 0.45);
}

.btn-primary:active {
transform: scale(0.98);
}

.btn-secondary {
background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
color: var(--apple-bg-white);
box-shadow: 0 4px 16px rgba(143, 182, 148, 0.35);
}

.btn-secondary:hover {
transform: scale(1.02);
box-shadow: 0 6px 22px rgba(143, 182, 148, 0.45);
}

.btn-secondary:active {
transform: scale(0.98);
}

.btn-outline {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(143, 182, 148, 0.4);
color: var(--brand-green-dark);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
}

.btn-outline:hover {
background: rgba(143, 182, 148, 0.1);
border-color: var(--brand-green-dark);
transform: scale(1.02);
}

.btn-outline-white {
border: 1px solid rgba(255, 255, 255, 0.5);
color: var(--apple-bg-white);
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.btn-outline-white:hover {
background: var(--apple-bg-white);
color: var(--brand-pink-dark);
transform: scale(1.02);
}

.btn-white {
background: var(--apple-bg-white);
color: var(--apple-dark);
box-shadow: var(--shadow-m);
}

.btn-white:hover {
background: var(--apple-bg-light);
transform: scale(1.02);
}

/* Accessibility Touch Target */
@media (pointer: coarse) {
    .btn, .nav-link, .category-card, .faq-question {
      min-height: 48px;
    }
}

/* Focus States styling */
*:focus-visible {
outline: 3px solid rgba(143, 182, 148, 0.7);
outline-offset: 4px;
}

/* 3. PAGES (18 SECTIONS INDIVIDUAL STYLING) */

/* 2. Header (Navegação style "Floating Dock") */
.main-header {
height: var(--header-height);
background: rgba(255, 255, 255, 0.45);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
position: sticky;
top: 1rem;
z-index: 100;
display: flex;
align-items: center;
border-radius: 22px;
width: calc(100% - 2rem);
max-width: var(--max-width);
margin-inline: auto;
margin-top: 1rem;
margin-bottom: calc(-1 * (var(--header-height) + 1rem)); /* Floating & overlapping the Hero section */
transition: background-color var(--transition-normal),
              box-shadow var(--transition-normal);
}

.header-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}

.brand-logo {
height: 40px;
width: auto;
transition: var(--transition-fast);
}

.brand-logo:hover {
transform: scale(1.03);
}

.mobile-menu-toggle {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border-radius: 12px;
background-color: rgba(0, 0, 0, 0.04);
color: var(--apple-dark);
transition: var(--transition-fast);
}

.mobile-menu-toggle:hover {
background-color: rgba(0, 0, 0, 0.08);
}

/* Backdrop do Menu Mobile */
.menu-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
opacity: 0;
pointer-events: none;
z-index: 90;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-backdrop.active {
opacity: 1;
pointer-events: auto;
}

.nav-menu {
display: block;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: absolute;
top: calc(var(--header-height) - 1px);
left: -1px;
right: -1px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: var(--space-md);
border-radius: 0 0 22px 22px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-top: none;
box-shadow: var(--shadow-l);
z-index: 99;
}

.mobile-nav-cta {
display: block;
width: 100%;
margin-top: 1.5rem;
}

.header-cta {
display: none;
}

.nav-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.nav-link {
font-family: var(--font-heading);
font-weight: 600;
font-size: 1.05rem;
color: var(--apple-text-gray);
padding: 0.5rem;
transition: var(--transition-fast);
position: relative;
}

.nav-link:hover, .nav-link.active {
color: var(--apple-dark);
}

/* Desktop Navigation */
@media (min-width: 1024px) {
    .mobile-menu-toggle {
      display: none;
    }

    .nav-menu {
      display: block !important;
      position: static;
      opacity: 1 !important;
      pointer-events: auto !important;
      transform: none !important;
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      padding: 0;
      border: none;
      box-shadow: none;
      z-index: auto;
      transition: none;
    }

    .mobile-nav-cta {
      display: none;
    }

    .header-cta {
      display: block;
    }

    .nav-list {
      flex-direction: row;
      gap: 1.25rem;
    }

    .nav-link {
      font-size: 0.92rem;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 50%;
      width: 0;
      height: 2px;
      background-color: var(--brand-pink-dark);
      transition: var(--transition-fast);
      transform: translateX(-50%);
    }

    .nav-link:hover::after, .nav-link.active::after {
      width: 60%;
    }
}

/* Mobile menu open styles */
.main-header.menu-open {
background: rgba(255, 255, 255, 0.95);
border-radius: 22px 22px 0 0;
border-bottom: none;
}

.main-header.menu-open .nav-menu {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}

/* 3. Hero Principal */
.hero-section {
padding-top: calc(var(--space-lg) + 2.5rem);
padding-bottom: calc(var(--space-lg) + 1.5rem);
background: radial-gradient(circle at 15% 20%, rgba(250, 157, 168, 0.16) 0%, transparent 60%),
              radial-gradient(circle at 85% 80%, rgba(143, 182, 148, 0.16) 0%, transparent 60%),
              linear-gradient(to bottom, rgba(250, 157, 168, 0.05) 0%, rgba(143, 182, 148, 0.05) 100%),
              var(--apple-bg-light);
overflow: hidden;
position: relative;
}

.hero-pets-bg-banner {
position: absolute;
inset: 0;
background-image: url('assets/hero-pets-bg.png');
background-size: cover;
background-position: center 65%;
background-repeat: no-repeat;
opacity: 0.15;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 0;
}

.hero-container {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
align-items: center;
position: relative;
z-index: 1;
}

.hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 1rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--brand-pink-dark);
background-color: rgba(250, 157, 168, 0.1);
border: 1px solid rgba(250, 157, 168, 0.25);
border-radius: 9999px;
margin-bottom: 1.5rem;
}

.hero-title {
margin-bottom: 1.5rem;
letter-spacing: -0.035em;
color: var(--apple-dark);
}

.hero-subtitle {
font-size: 1.15rem;
color: var(--apple-text-gray);
margin-bottom: 2rem;
line-height: 1.6;
}

.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
width: 100%;
}

.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px; /* Enable 3D tilt */
}

.hero-img-backdrop {
position: absolute;
width: 105%;
height: 105%;
border-radius: 40px;
background: linear-gradient(135deg, rgba(250, 157, 168, 0.75) 0%, rgba(143, 182, 148, 0.75) 100%);
opacity: 0.85;
filter: blur(40px);
z-index: 0;
animation: rotateBg 25s linear infinite;
}

.hero-image {
position: relative;
z-index: 1;
border-radius: 32px;
border: 6px solid var(--apple-bg-white);
background-color: var(--apple-bg-white);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
animation: float 7s ease-in-out infinite;
transform-style: preserve-3d;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
}

.hero-visual .floating-badge {
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 0.65rem 1rem;
border-radius: 14px;
box-shadow: var(--shadow-m);
display: flex;
align-items: center;
gap: 0.5rem;
z-index: 2;
font-weight: 700;
font-size: 0.82rem;
border: 1px solid rgba(255, 255, 255, 0.4);
}

.badge-top-left {
top: 8%;
left: 4%;
color: var(--brand-pink-dark);
animation: floatBadge1 6s ease-in-out infinite;
}

.badge-bottom-right {
bottom: 12%;
right: 4%;
color: var(--brand-green-dark);
animation: floatBadge2 6.5s ease-in-out infinite;
}

@media (max-width: 576px) {
    h1 {
      font-size: 2.0rem;
    }
    .hero-subtitle {
      font-size: 1.05rem;
    }
    .hero-visual .floating-badge {
      font-size: 0.72rem;
      padding: 0.45rem 0.75rem;
      border-radius: 10px;
    }
    .badge-top-left {
      top: 4%;
      left: 2%;
    }
    .badge-bottom-right {
      bottom: 4%;
      right: 2%;
    }
    .hero-buttons {
      flex-direction: column;
      align-items: stretch;
    }
    .hero-buttons .btn {
      width: 100%;
      justify-content: center;
    }
}

@media (min-width: 1024px) {
    .hero-container {
      grid-template-columns: 1.15fr 0.85fr;
      gap: var(--space-xl);
    }
    .hero-buttons {
      width: auto;
    }
    .hero-visual {
      align-self: end;
      margin-bottom: -3.5rem; /* pull down to sit on the wave divider */
    }
}

/* 4. Faixa de Diferenciais */
.features-strip {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-block: 1px solid var(--apple-border);
padding-block: var(--space-md);
margin-top: 3.5rem; /* Separates the strip from the hero buttons */
}

.feature-item {
display: flex;
flex-direction: column;
gap: 0.85rem;
align-items: flex-start;
padding: 1.25rem;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.45);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
transition: var(--transition-normal);
}

@media (max-width: 576px) {
    .feature-item {
      flex-direction: row;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
    }
}

.feature-item:hover {
background-color: rgba(255, 255, 255, 0.75);
border-color: rgba(255, 255, 255, 0.6);
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.feature-icon-wrapper {
background-color: rgba(143, 182, 148, 0.15);
color: var(--brand-green-dark);
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.feature-icon {
width: 1.45rem;
height: 1.45rem;
}

.feature-title {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.25rem;
letter-spacing: -0.015em;
color: var(--apple-dark);
}

.feature-text {
font-size: 0.88rem;
color: var(--apple-text-gray);
line-height: 1.5;
}

/* 5. Bloco de Categorias */
.categories-section {
background-color: var(--apple-bg-light);
}

.categories-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}

@media (min-width: 640px) {
    .categories-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .categories-grid {
      grid-template-columns: repeat(5, 1fr);
      gap: 1.25rem;
    }
}

.category-card {
/* Inherits .glass-card via script or directly using custom properties */
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 28px;
box-shadow: var(--shadow-glass), var(--shadow-s);
padding: var(--space-md) var(--space-sm);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform var(--transition-normal),
              box-shadow var(--transition-normal),
              border-color var(--transition-normal),
              background-color var(--transition-normal);
}

.category-card:hover {
background: var(--glass-bg-hover);
border-color: rgba(143, 182, 148, 0.4);
box-shadow: var(--shadow-l), 0 12px 40px rgba(143, 182, 148, 0.08);
transform: translateY(-8px) scale(1.02);
}

.category-icon-wrapper {
background-color: rgba(250, 157, 168, 0.15);
color: var(--brand-pink-dark);
width: 54px;
height: 54px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
transition: var(--transition-normal);
}

.category-card:hover .category-icon-wrapper {
background-color: var(--brand-pink);
color: var(--apple-bg-white);
transform: rotate(8deg) scale(1.05);
}

.category-title {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: -0.015em;
}

.category-text {
font-size: 0.88rem;
color: var(--apple-text-gray);
margin-bottom: auto;
line-height: 1.5;
}

.category-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.88rem;
font-weight: 700;
color: var(--brand-green-dark);
margin-top: 1.5rem;
transition: var(--transition-fast);
}

.category-card:hover .category-link {
color: var(--brand-pink-dark);
transform: translateX(2px);
}

/* 6. Seção Institucional do Banho */
.about-bath-section {
background-color: var(--apple-bg-white);
}

.about-bath-container {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
align-items: center;
}

.about-bath-visual {
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-height: 340px;
perspective: 1000px;
}

@media (max-width: 576px) {
    .about-bath-visual {
      min-height: 240px;
    }
    .pulse-ring {
      width: 200px;
      height: 200px;
    }
    .logo-symbol-container {
      width: 140px;
      height: 140px;
    }
    .logo-symbol-large {
      width: 70px !important;
      height: auto !important;
    }
}

.pulse-ring {
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
border: 2px dashed rgba(143, 182, 148, 0.3);
animation: rotateBg 50s linear infinite;
}

.logo-symbol-container {
width: 190px;
height: 190px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
box-shadow: var(--shadow-l);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.6);
z-index: 2;
animation: scalePulse 4.5s infinite ease-in-out;
}

.logo-symbol-large {
width: 95px;
height: auto;
}

.about-bath-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.about-bath-text {
font-size: 1.1rem;
line-height: 1.65;
margin-bottom: 1.5rem;
}

.about-bath-features {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-bottom: 2rem;
width: 100%;
}

.bath-feat-item {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 600;
font-size: 0.95rem;
color: var(--apple-text-dark);
}

.bath-feat-icon {
color: var(--brand-green-dark);
width: 1.3rem;
height: 1.3rem;
flex-shrink: 0;
}

@media (min-width: 960px) {
    .about-bath-container {
      grid-template-columns: 0.95fr 1.05fr;
      gap: var(--space-xl);
    }
}

/* 7. Como Funciona o Atendimento (Processo) */
.process-section {
background-color: var(--brand-green-light);
}

.process-steps {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}

@media (min-width: 768px) {
    .process-steps {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .process-steps {
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }
}

.step-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 28px;
box-shadow: var(--shadow-glass), var(--shadow-s);
padding: var(--space-md) var(--space-sm);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform var(--transition-normal),
              box-shadow var(--transition-normal),
              border-color var(--transition-normal);
}

.step-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-l);
border-color: rgba(250, 157, 168, 0.4);
background: var(--glass-bg-hover);
}

.step-number {
position: absolute;
top: 12px;
right: 18px;
font-family: var(--font-heading);
font-size: 2.25rem;
font-weight: 800;
color: rgba(250, 157, 168, 0.22);
line-height: 1;
}

.step-icon-wrapper {
background-color: rgba(143, 182, 148, 0.15);
color: var(--brand-green-dark);
width: 58px;
height: 58px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
transition: var(--transition-normal);
}

.step-card:hover .step-icon-wrapper {
background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
color: var(--apple-bg-white);
}

.step-title {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: -0.01em;
}

.step-text {
font-size: 0.9rem;
color: var(--apple-text-gray);
line-height: 1.5;
}

/* 8. Serviços Detalhados */
.services-section {
background-color: var(--apple-bg-white);
}

.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
align-items: stretch;
}

@media (min-width: 768px) {
    .services-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .services-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }
}

.service-card {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.95) 100%), var(--card-bg);
background-size: cover;
background-position: center;
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 32px;
box-shadow: var(--shadow-glass), var(--shadow-s);
padding: var(--space-md);
display: flex;
flex-direction: column;
position: relative;
transition: transform var(--transition-normal),
              box-shadow var(--transition-normal),
              border-color var(--transition-normal),
              background-image var(--transition-normal);
}

.service-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-l);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.9) 100%), var(--card-bg);
}

.service-featured {
border: 2px solid var(--brand-pink);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.92) 100%), var(--card-bg);
box-shadow: var(--shadow-l), 0 10px 30px rgba(250, 157, 168, 0.08);
}

.service-featured:hover {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.88) 100%), var(--card-bg);
}

.featured-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-pink-dark) 100%);
color: var(--apple-bg-white);
padding: 0.35rem 1.15rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
box-shadow: 0 4px 12px rgba(250, 157, 168, 0.3);
}

.service-header {
margin-bottom: 1.25rem;
}

.service-name {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: -0.015em;
}

.service-desc {
font-size: 0.88rem;
color: var(--apple-text-gray);
line-height: 1.5;
}

.service-price {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
}

.price-from {
font-size: 0.8rem;
color: var(--apple-text-gray);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.03em;
}

.price-val {
font-family: var(--font-heading);
font-size: 2.25rem;
font-weight: 800;
color: var(--brand-green-dark);
line-height: 1.1;
}

.service-featured .price-val {
color: var(--brand-pink-dark);
}

.service-features {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-bottom: 2rem;
font-size: 0.88rem;
margin-top: auto; /* Push features to bottom */
}

.service-features li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
line-height: 1.4;
color: var(--apple-text-dark);
}

.service-feat-icon {
width: 1.15rem;
height: 1.15rem;
color: var(--brand-green-dark);
flex-shrink: 0;
margin-top: 0.05rem;
}

/* 9. Seção de Preço de Entrada */
.price-call-section {
background: transparent;
}

.price-call-container {
display: flex;
justify-content: center;
}

.price-call-card {
width: 100%;
background: linear-gradient(135deg, rgba(250, 157, 168, 0.8) 0%, rgba(232, 134, 146, 0.9) 100%);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 32px;
padding: var(--space-md);
color: var(--apple-bg-white);
display: flex;
flex-direction: column;
gap: var(--space-md);
align-items: center;
box-shadow: var(--shadow-l), 0 20px 40px rgba(250, 157, 168, 0.15);
}

.price-call-details {
flex: 1;
text-align: center;
}

.price-call-badge {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 0.25rem 0.85rem;
border-radius: 9999px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
display: inline-block;
margin-bottom: 0.85rem;
}

.price-call-title {
color: var(--apple-bg-white);
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
}

.price-call-text {
font-size: 1.1rem;
line-height: 1.6;
opacity: 0.95;
text-wrap: pretty;
}

.price-call-action {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
flex-shrink: 0;
}

.price-badge-circle {
width: 110px;
height: 110px;
border-radius: 50%;
background-color: var(--apple-bg-white);
color: var(--brand-pink-dark);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-l);
border: 4px solid rgba(255,255,255,0.4);
animation: scalePulse 4s infinite ease-in-out;
}

.pb-text {
font-size: 0.65rem;
text-transform: uppercase;
font-weight: 700;
line-height: 1;
}

.pb-num {
font-family: var(--font-heading);
font-size: 1.85rem;
font-weight: 800;
line-height: 1.1;
}

@media (min-width: 960px) {
    .price-call-card {
      flex-direction: row;
      padding: var(--space-md) var(--space-lg);
      text-align: left;
      gap: var(--space-lg);
    }

    .price-call-details {
      text-align: left;
    }

    .price-call-action {
      flex-direction: row;
      gap: 1.5rem;
    }
}

/* 10. Rações */
.food-section {
background-color: var(--apple-bg-white);
}

.food-container {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
align-items: center;
}

.food-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.food-text {
font-size: 1.1rem;
line-height: 1.65;
margin-bottom: 1.5rem;
}

.food-brands {
margin-bottom: 2rem;
width: 100%;
}

.food-brands-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--apple-dark);
display: block;
margin-bottom: 0.75rem;
}

.brands-logo-flex {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.brand-item {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
padding: 0.5rem 1rem;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
color: var(--apple-text-gray);
box-shadow: var(--shadow-s);
}

.food-visual {
position: relative;
width: 100%;
min-width: 0;
}

.food-card-deco {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 2px dashed var(--brand-green);
border-radius: 28px;
padding: var(--space-md);
max-width: 320px;
box-shadow: var(--shadow-l);
text-align: center;
z-index: 2;
transform: rotate(-1.5deg);
transition: transform var(--transition-normal);
}

.food-card-deco:hover {
transform: rotate(0) scale(1.02);
}

.food-deco-icon {
width: 2.75rem;
height: 2.75rem;
color: var(--brand-green);
margin-bottom: 1rem;
}

.food-card-deco h4 {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.5rem;
}

.food-card-deco p {
font-size: 0.88rem;
color: var(--apple-text-gray);
line-height: 1.5;
}

.food-pattern-circles {
position: absolute;
width: 240px;
height: 240px;
border-radius: 50%;
background-color: rgba(250, 157, 168, 0.08);
top: 10%;
right: 8%;
z-index: 1;
}

@media (min-width: 960px) {
    .food-container {
      grid-template-columns: 1fr 1.35fr;
      gap: var(--space-xl);
      align-items: flex-start;
    }
}

/* Products Showcase Carousel */
.products-carousel-wrapper {
position: relative;
width: 100%;
display: flex;
align-items: center;
overflow: visible;
padding-inline: 1.5rem;
}

.products-carousel-container {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
width: 100%;
padding-block: 0.5rem 1rem;
scrollbar-width: none;
}

.products-carousel-container::-webkit-scrollbar {
display: none;
}

.product-showcase-card {
background-color: var(--apple-bg-white);
border: 1px solid var(--apple-border);
border-radius: 24px;
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease;
display: flex;
flex-direction: column;
flex: 0 0 100%;
scroll-snap-align: start;
}

@media (min-width: 576px) {
    .product-showcase-card {
      flex: 0 0 calc(50% - 0.5rem);
    }
}

.products-carousel-control {
position: absolute;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--apple-border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-m);
color: var(--apple-dark);
}

.products-carousel-control:hover {
background-color: var(--apple-bg-white);
transform: scale(1.1);
color: var(--brand-green-dark);
box-shadow: var(--shadow-l);
}

.products-carousel-control.prev {
left: -4px;
}

.products-carousel-control.next {
right: -4px;
}

@media (max-width: 768px) {
    .products-carousel-control {
      width: 32px;
      height: 32px;
    }
    .products-carousel-control.prev {
      left: -2px;
    }
    .products-carousel-control.next {
      right: -2px;
    }
}

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

.product-img-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background-color: var(--apple-bg-light);
}

.product-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.product-showcase-card:hover .product-img-wrapper img {
transform: scale(1.06);
}

.product-tag {
position: absolute;
top: 0.75rem;
left: 0.75rem;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

.tag-green { background-color: rgba(87, 139, 93, 0.88); }
.tag-gold { background: linear-gradient(135deg, #b8860b, #d4a931); }
.tag-blue { background-color: rgba(59, 130, 246, 0.88); }
.tag-purple { background-color: rgba(139, 92, 176, 0.88); }
.tag-orange { background-color: rgba(234, 125, 52, 0.88); }
.tag-pink { background-color: rgba(225, 119, 135, 0.88); }

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

.product-title {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: var(--apple-dark);
margin-bottom: 0.35rem;
}

.product-desc {
font-size: 0.82rem;
line-height: 1.5;
color: var(--apple-text-gray);
margin-bottom: 1rem;
flex: 1;
}

.product-cta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--brand-green-dark);
text-decoration: none;
transition: gap 0.25s ease, color 0.25s ease;
margin-top: auto;
}

.product-cta:hover {
gap: 0.65rem;
color: var(--brand-pink-dark);
}

.product-cta i {
width: 0.85rem;
height: 0.85rem;
transition: transform 0.25s ease;
}

.product-cta:hover i {
transform: translateX(3px);
}

/* 11. Cartão Fidelidade (Wallet style) */
.loyalty-section {
background-color: var(--brand-pink-light);
}

.loyalty-container {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
align-items: center;
}

.loyalty-card-visual {
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
}

.loyalty-physical-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 100%);
backdrop-filter: blur(25px) saturate(200%);
-webkit-backdrop-filter: blur(25px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 28px;
padding: var(--space-md);
width: 100%;
max-width: 360px;
box-shadow: var(--shadow-l), 0 30px 60px rgba(143, 182, 148, 0.08);
display: flex;
flex-direction: column;
gap: 1.25rem;
transition: transform var(--transition-slow),
              box-shadow var(--transition-slow);
transform-style: preserve-3d;
}

.loyalty-physical-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 28px;
padding: 1px;
background: linear-gradient(to bottom right, rgba(255,255,255,0.7), rgba(143,182,148,0.3));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}

.card-header-branding {
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding-bottom: 0.75rem;
transform: translateZ(20px); /* 3D layer */
}

.card-mini-symbol {
height: 28px;
width: auto;
}

.card-title-text {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--brand-green-dark);
}

.card-paws-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.65rem;
transform: translateZ(30px);
}

.paw-slot {
aspect-ratio: 1;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(0, 0, 0, 0.02);
display: flex;
align-items: center;
justify-content: center;
color: rgba(113, 128, 150, 0.15);
font-size: 1.15rem;
transition: var(--transition-normal);
}

.paw-slot.stamped {
border-color: rgba(250, 157, 168, 0.4);
background: rgba(250, 157, 168, 0.15);
color: var(--brand-pink-dark);
animation: stampReveal 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.gift-slot {
border-color: rgba(143, 182, 148, 0.4);
background: rgba(143, 182, 148, 0.1);
color: var(--brand-green-dark);
}

.card-footer-branding {
font-size: 0.72rem;
font-weight: 700;
color: var(--apple-text-gray);
text-align: center;
border-top: 1px solid rgba(0, 0, 0, 0.05);
padding-top: 0.75rem;
transform: translateZ(10px);
}

.loyalty-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.loyalty-text {
font-size: 1.1rem;
line-height: 1.65;
margin-bottom: 1.5rem;
}

.loyalty-steps-list {
display: flex;
flex-direction: column;
gap: 1.15rem;
margin-bottom: 2rem;
width: 100%;
}

.loyalty-steps-list li {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 0.95rem;
font-weight: 600;
color: var(--apple-text-dark);
}

.step-num-circle {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-pink-dark) 100%);
color: var(--apple-bg-white);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.88rem;
font-weight: 700;
flex-shrink: 0;
}

@media (min-width: 960px) {
    .loyalty-container {
      grid-template-columns: 0.95fr 1.05fr;
      gap: var(--space-xl);
    }
}

/* 12. Promoções e Campanhas */
.promotions-section {
background-color: var(--apple-bg-light);
}

.promotions-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}

@media (min-width: 640px) {
    .promotions-grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .promotions-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }
}

.promo-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 28px;
box-shadow: var(--shadow-glass), var(--shadow-s);
padding: var(--space-md);
display: flex;
flex-direction: column;
align-items: flex-start;
transition: transform var(--transition-normal),
              box-shadow var(--transition-normal),
              border-color var(--transition-normal);
}

.promo-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-l);
background: var(--glass-bg-hover);
}

.highlight-promo {
background: rgba(255, 255, 255, 0.7);
border: 2px solid var(--brand-pink);
}

.promo-badge {
background-color: var(--brand-green-light);
color: var(--brand-green-dark);
border: 1px solid rgba(143, 182, 148, 0.2);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1.25rem;
}

.highlight-promo .promo-badge {
background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-pink-dark) 100%);
color: var(--apple-bg-white);
border: none;
}

.promo-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.75rem;
letter-spacing: -0.015em;
}

.promo-desc {
font-size: 0.88rem;
color: var(--apple-text-gray);
line-height: 1.5;
margin-bottom: 1.25rem;
}

.promo-cta {
margin-top: auto;
font-size: 0.88rem;
font-weight: 700;
color: var(--brand-green-dark);
display: inline-flex;
align-items: center;
gap: 0.25rem;
transition: var(--transition-fast);
}

.promo-card:hover .promo-cta {
color: var(--brand-pink-dark);
transform: translateX(2px);
}

/* 13 & 14. Prova Social (Depoimentos e Avaliações Google) */
.social-proof-section {
background-color: var(--brand-green-light);
}

.social-proof-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
align-items: start;
}

@media (min-width: 960px) {
    .social-proof-grid {
      grid-template-columns: 0.7fr 1.3fr;
      gap: var(--space-lg);
    }
}

.social-proof-content {
display: flex;
flex-direction: column;
gap: var(--space-md);
width: 100%;
}

.testimonials-carousel-wrapper {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
gap: 1rem;
}

.testimonials-carousel-container {
width: 100%;
overflow: hidden;
position: relative;
min-height: 240px;
display: flex;
align-items: center;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 32px;
box-shadow: var(--shadow-glass), var(--shadow-s);
padding: var(--space-md);
}

.testimonial-slide {
display: none;
width: 100%;
text-align: center;
padding-inline: var(--space-sm);
}

.testimonial-slide.active {
display: block;
animation: fadeIn 0.4s ease-in-out;
}

.stars-rating {
display: inline-flex;
gap: 0.25rem;
color: #ffcc00; /* Apple Gold */
margin-bottom: 1rem;
}

.star-fill {
fill: currentColor;
width: 1.2rem;
height: 1.2rem;
}

.testimonial-quote {
font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
font-weight: 500;
color: var(--apple-dark);
line-height: 1.5;
margin-bottom: 1.25rem;
font-style: italic;
}

.testimonial-author {
display: flex;
flex-direction: column;
align-items: center;
font-style: normal;
}

.author-name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--apple-dark);
}

.author-pet {
font-size: 0.85rem;
color: var(--apple-text-gray);
margin-top: 0.15rem;
}

.carousel-control {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
color: var(--apple-dark);
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-m);
transition: var(--transition-fast);
flex-shrink: 0;
z-index: 10;
}

.carousel-control:hover {
background-color: var(--brand-pink);
color: var(--apple-bg-white);
border-color: var(--brand-pink-dark);
transform: scale(1.05);
}

.carousel-indicators {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: var(--space-sm);
}

.indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.1);
transition: var(--transition-fast);
}

.indicator.active {
background-color: var(--brand-pink-dark);
width: 22px;
border-radius: 4px;
}

.google-rating-summary {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 32px;
padding: var(--space-md);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
box-shadow: var(--shadow-glass), var(--shadow-s);
width: 100%;
}

.google-logo-box {
display: flex;
align-items: center;
gap: 0.5rem;
}

.google-title {
font-weight: 700;
font-size: 1.15rem;
letter-spacing: -0.015em;
}

.rating-huge-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
}

.rating-num {
font-family: var(--font-heading);
font-size: 4.5rem;
font-weight: 800;
color: var(--apple-dark);
line-height: 1;
letter-spacing: -0.03em;
}

.rating-count {
font-size: 0.85rem;
color: var(--apple-text-gray);
font-weight: 600;
}

.google-cta-buttons {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.google-reviews-cards-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-sm);
width: 100%;
}

@media (min-width: 640px) {
    .google-reviews-cards-list {
      grid-template-columns: 1fr 1fr;
    }
}

.google-review-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 22px;
padding: var(--space-md);
transition: transform var(--transition-normal),
              box-shadow var(--transition-normal);
}

.google-review-card:hover {
box-shadow: var(--shadow-m);
border-color: rgba(143, 182, 148, 0.3);
transform: translateY(-2px);
}

.gr-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
position: relative;
}

.gr-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--apple-bg-white);
box-shadow: var(--shadow-s);
}

.gr-user-info {
display: flex;
flex-direction: column;
}

.gr-username {
font-size: 0.95rem;
font-weight: 700;
}

.gr-date {
font-size: 0.75rem;
color: var(--apple-text-gray);
}

.google-icon-tiny {
position: absolute;
top: 5px;
right: 5px;
opacity: 0.8;
}

.gr-comment {
font-size: 0.9rem;
color: var(--apple-text-gray);
line-height: 1.5;
margin-top: 0.5rem;
}

/* 15. Sobre a Patoka Pet */
.about-section {
background-color: var(--apple-bg-light);
}

.about-container {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
align-items: center;
}

.about-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.about-text {
font-size: 1.1rem;
line-height: 1.65;
margin-bottom: 1.5rem;
}

.about-location-details {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
width: 100%;
}

.loc-item {
display: flex;
gap: 0.85rem;
align-items: flex-start;
}

.loc-icon {
width: 1.35rem;
height: 1.35rem;
color: var(--brand-pink-dark);
flex-shrink: 0;
margin-top: 0.15rem;
}

.loc-text {
display: flex;
flex-direction: column;
font-size: 0.95rem;
}

.loc-text strong {
font-size: 0.9rem;
color: var(--apple-dark);
}

.loc-text span {
color: var(--apple-text-gray);
}

.about-map-box {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 32px;
overflow: hidden;
box-shadow: var(--shadow-l);
min-height: 360px;
display: flex;
}

.map-placeholder {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-md);
background: linear-gradient(135deg, rgba(143, 182, 148, 0.1) 0%, rgba(250, 157, 168, 0.1) 100%),
              repeating-linear-gradient(45deg, rgba(0,0,0,0.01) 0px, rgba(0,0,0,0.01) 2px, transparent 2px, transparent 10px);
}

.map-pin-giant {
width: 3.5rem;
height: 3.5rem;
color: var(--brand-pink-dark);
margin-bottom: 1rem;
animation: bounce 2s infinite alternate;
}

.map-placeholder h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: -0.015em;
}

.map-placeholder p {
font-size: 0.88rem;
color: var(--apple-text-gray);
margin-bottom: 1.5rem;
max-width: 300px;
}

@media (min-width: 960px) {
    .about-container {
      grid-template-columns: 1.1fr 0.9fr;
      gap: var(--space-xl);
    }
}

/* 16. Instagram Feed */
.instagram-section {
background-color: var(--apple-bg-white);
}

.instagram-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
align-items: center;
}

@media (min-width: 960px) {
    .instagram-layout {
      grid-template-columns: 40% 60%;
      gap: var(--space-xl);
    }
}

.instagram-content-col {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}

@media (max-width: 959px) {
    .instagram-content-col {
      align-items: center;
      text-align: center;
    }
}

.btn-insta {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
border: none;
color: var(--apple-bg-white) !important;
font-weight: 700;
padding: 0.9rem 2rem;
border-radius: 9999px;
box-shadow: 0 10px 20px rgba(220, 39, 67, 0.25);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all var(--transition-normal);
text-decoration: none;
font-size: 0.95rem;
}

.btn-insta:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 15px 30px rgba(220, 39, 67, 0.4);
filter: brightness(1.05);
}

.btn-insta-below {
display: none;
}

@media (max-width: 959px) {
    #insta-follow-btn-above {
      display: none;
    }
    .btn-insta-below {
      display: inline-flex;
      margin-top: 1.5rem;
    }
    .instagram-feed-col {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
}

/* Active Story Ring Badge */
.insta-badge {
display: inline-block;
padding: 3px;
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
border-radius: 50%;
transition: transform var(--transition-normal);
margin-bottom: 1.25rem;
}

.insta-badge:hover {
transform: scale(1.05);
}

.insta-badge-inner {
background: var(--apple-bg-white);
padding: 4px;
border-radius: 50%;
width: 80px;
height: 80px;
overflow: hidden;
}

/* Embed Container */
.insta-embed-container {
width: 100%;
border-radius: 28px;
overflow: hidden;
box-shadow: var(--shadow-l), 0 20px 40px rgba(0, 0, 0, 0.04);
border: 1px solid var(--apple-border);
background: var(--apple-bg-white);
height: 520px;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}

.scrollable-insta-card::-webkit-scrollbar {
display: none;
}

.insta-embed-iframe-responsive {
width: 100% !important;
border: none !important;
display: block !important;
height: 720px !important;
}

@media (max-width: 576px) {
    .insta-embed-container {
      height: 400px;
    }
    .insta-embed-iframe-responsive {
      height: 550px !important;
    }
    .btn-insta {
      width: 100%;
      justify-content: center;
    }
}

/* 17. FAQ Accordion (Clean Glassmorphism) */
.faq-section {
background-color: var(--apple-bg-light);
}

.faq-accordion {
max-width: 720px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}

.faq-item {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 20px;
overflow: hidden;
transition: transform var(--transition-normal),
              box-shadow var(--transition-normal),
              border-color var(--transition-normal);
}

.faq-item[open] {
box-shadow: var(--shadow-m);
border-color: rgba(143, 182, 148, 0.4);
background: var(--glass-bg-hover);
}

.faq-question {
padding: 1.25rem 1.65rem;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.1rem;
color: var(--apple-dark);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
list-style: none;
}

.faq-question::-webkit-details-marker {
display: none;
}

.faq-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--apple-text-gray);
transition: var(--transition-normal);
}

.faq-item[open] .faq-icon {
transform: rotate(180deg);
color: var(--brand-pink-dark);
}

.faq-answer {
padding: 0 1.65rem 1.25rem;
color: var(--apple-text-gray);
font-size: 0.95rem;
line-height: 1.6;
border-top: 1px solid rgba(0, 0, 0, 0.03);
}

/* 18. CTA Final + Rodapé (Glassmorphism layout) */
.final-cta-section {
background: linear-gradient(135deg, rgba(250, 157, 168, 0.95) 0%, rgba(143, 182, 148, 0.95) 100%);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-top: 1px solid rgba(255, 255, 255, 0.25);
color: var(--apple-bg-white);
text-align: center;
padding-block: var(--space-lg);
}

.final-cta-container {
max-width: 680px;
display: flex;
flex-direction: column;
align-items: center;
}

.final-cta-title {
color: var(--apple-bg-white);
margin-bottom: 0.85rem;
letter-spacing: -0.025em;
}

.final-cta-text {
font-size: 1.15rem;
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.95;
}

.final-cta-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm);
width: 100%;
}

.final-cta-buttons .btn {
flex: 1 1 200px;
max-width: 280px;
}

/* Rodapé Principal */
.main-footer {
background-color: var(--apple-dark);
color: rgba(255, 255, 255, 0.6);
padding-block: var(--space-lg) var(--space-md);
font-size: 0.9rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
z-index: 1;
}

.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
    .footer-grid {
      grid-template-columns: 1.4fr 0.8fr 1.4fr;
      gap: var(--space-md);
    }
}

.footer-brand-col {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}

.footer-logo {
height: 38px;
width: auto;
filter: brightness(0) invert(1); /* Pure white logo */
}

.footer-brand-desc {
line-height: 1.55;
color: rgba(255, 255, 255, 0.5);
}

.social-links {
display: flex;
gap: 0.75rem;
}

.social-links a {
width: 38px;
height: 38px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.08);
color: var(--apple-bg-white);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-fast);
}

.social-links a:hover {
background-color: var(--brand-pink);
color: var(--apple-bg-white);
transform: translateY(-3px);
}

.footer-col-title {
color: var(--apple-bg-white);
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 1.25rem;
position: relative;
padding-bottom: 0.5rem;
letter-spacing: -0.01em;
}

.footer-col-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 24px;
height: 2px;
background-color: var(--brand-green);
}

.footer-links-list, .footer-contact-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.footer-links-list a {
transition: var(--transition-fast);
}

.footer-links-list a:hover {
color: var(--brand-pink);
padding-left: 4px;
}

.footer-contact-list li {
display: flex;
gap: 0.65rem;
align-items: flex-start;
line-height: 1.45;
}

.contact-icon {
width: 1.15rem;
height: 1.15rem;
color: var(--brand-green);
flex-shrink: 0;
margin-top: 0.1rem;
}

.footer-contact-list a {
transition: var(--transition-fast);
}

.footer-contact-list a:hover {
color: var(--brand-pink);
}

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: var(--space-md);
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
justify-content: space-between;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.4);
}

.footer-bottom-links {
display: flex;
gap: 1rem;
}

.footer-bottom-links a {
text-decoration: underline;
}

@media (min-width: 768px) {
    .footer-bottom {
      flex-direction: row;
    }
}

/* 4. MICRO-ANIMATIONS & SHINE EFFECTS */
.glass-card,
.category-card,
.step-card,
.service-card,
.promo-card,
.google-rating-summary,
.google-review-card,
.faq-item,
.loyalty-physical-card,
.about-map-box,
.food-card-deco {
position: relative;
overflow: hidden;
}

/* Glass gloss reflect shine on hover */
.glass-card::after,
.category-card::after,
.step-card::after,
.service-card::after,
.promo-card::after,
.google-rating-summary::after,
.google-review-card::after,
.faq-item::after,
.loyalty-physical-card::after,
.about-map-box::after,
.food-card-deco::after {
content: "";
position: absolute;
top: -50%;
left: -60%;
width: 30%;
height: 200%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
transform: rotate(30deg);
transition: left var(--transition-slow);
pointer-events: none;
z-index: 1;
}

.glass-card:hover::after,
.category-card:hover::after,
.step-card:hover::after,
.service-card:hover::after,
.promo-card:hover::after,
.google-rating-summary:hover::after,
.google-review-card:hover::after,
.faq-item:hover::after,
.loyalty-physical-card:hover::after,
.about-map-box:hover::after,
.food-card-deco:hover::after {
left: 150%;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes reveal {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

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

@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-8px) rotate(-0.5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes floatBadge1 {
0% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(2px, -4px) rotate(1deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes floatBadge2 {
0% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-2px, 4px) rotate(-1deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes bounce {
from { transform: translateY(0); }
to { transform: translateY(-6px); }
}

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

@keyframes scalePulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(250, 157, 168, 0.3); }
70% { transform: scale(1.03); box-shadow: 0 0 0 12px rgba(250, 157, 168, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(250, 157, 168, 0); }
}

@keyframes stampReveal {
0% { transform: scale(3) rotate(-20deg); opacity: 0; }
70% { transform: scale(0.95) rotate(5deg); }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes wiggle {
0% { transform: rotate(-3deg); }
100% { transform: rotate(3deg); }
}

/* Reduced Motion Preference overrides */
@media (prefers-reduced-motion: reduce) {
* {
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}
}

/* Section Wave Dividers Styling */
.wave-divider {
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
z-index: 5;
pointer-events: none;
}

.wave-divider svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 48px;
}

.wave-divider.bottom {
bottom: -1px;
}

.wave-divider.top {
top: -1px;
transform: rotate(180deg);
}

/* Specific background color variations for wave fills */
.fill-white {
color: var(--apple-bg-white);
}

.fill-light-gray {
color: var(--apple-bg-light);
}

.fill-pink-light {
color: var(--brand-pink-light);
}

.fill-green-light {
color: var(--brand-green-light);
}

.fill-pink-gradient {
color: #fa9da8;
}

.fill-green-gradient {
color: #8fb694;
}

.fill-footer-dark {
color: var(--apple-dark);
}

/* ==========================================
 INTERACTIVE SERVICES CALCULATOR STYLES
 ========================================== */

/* Breed Selector Grid Container */
.breed-selector-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 2.5rem;
}

@media (min-width: 576px) {
.breed-selector-grid {
    grid-template-columns: repeat(3, 1fr);
}
}

@media (min-width: 992px) {
.breed-selector-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}
}

/* Breed Card */
.breed-card {
position: relative;
height: 180px;
border-radius: 24px;
background-image: var(--breed-img);
background-size: cover;
background-position: center;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
box-shadow: var(--shadow-s);
transition: transform var(--transition-normal),
            box-shadow var(--transition-normal),
            border-color var(--transition-normal);
display: flex;
align-items: flex-end;
padding: 1.25rem;
box-sizing: border-box;
}

.breed-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-m);
}

.breed-card.active {
border-color: var(--brand-green-dark);
box-shadow: 0 8px 24px rgba(110, 154, 116, 0.25), var(--shadow-m);
transform: translateY(-4px);
}

/* Breed Card Overlay */
.breed-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.8) 100%);
transition: opacity var(--transition-normal);
z-index: 1;
}

.breed-card:hover .breed-card-overlay {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.breed-card.active .breed-card-overlay {
background: linear-gradient(to bottom, rgba(143, 182, 148, 0.1) 0%, rgba(29, 29, 31, 0.9) 100%);
}

/* Breed Card Info */
.breed-card-info {
position: relative;
z-index: 2;
width: 100%;
color: var(--apple-bg-white);
transition: transform var(--transition-normal);
text-align: left;
}

.breed-card:hover .breed-card-info {
transform: translateY(-2px);
}

.breed-badge {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brand-pink);
margin-bottom: 0.25rem;
}

.breed-card.active .breed-badge {
color: var(--brand-green);
}

.breed-title {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
line-height: 1.2;
margin: 0 0 0.15rem 0 !important;
color: var(--apple-bg-white) !important;
}

.breed-subtitle {
font-size: 0.75rem;
opacity: 0.85;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
margin: 0 !important;
}

/* Controls Wrapper */
.calculator-controls-wrapper {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1.25rem;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 24px;
box-shadow: var(--shadow-glass), var(--shadow-s);
margin-bottom: 2rem;
align-items: flex-start;
}

@media (min-width: 768px) {
.calculator-controls-wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 1.5rem 2.5rem;
}
}

.control-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
width: 100%;
}

@media (min-width: 768px) {
.control-group {
    width: auto;
}
}

.control-label {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--apple-text-gray);
}

/* Toggle switch iOS style */
.toggle-switch-wrapper {
display: flex;
background-color: rgba(0, 0, 0, 0.04);
padding: 3px;
border-radius: 9999px;
border: 1px solid var(--apple-border);
width: 100%;
box-sizing: border-box;
}

@media (min-width: 768px) {
.toggle-switch-wrapper {
    width: auto;
}
}

.toggle-btn {
flex: 1;
text-align: center;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--apple-text-gray);
padding: 0.45rem 1.15rem;
border-radius: 9999px;
transition: all var(--transition-fast);
white-space: nowrap;
outline: none;
}

@media (min-width: 768px) {
.toggle-btn {
    flex: none;
}
}

.toggle-btn.active {
background-color: var(--apple-bg-white);
color: var(--apple-text-dark);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.toggle-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}

/* Pinscher Ruler Wrapper */
.pinscher-ruler-wrapper {
background-color: var(--apple-bg-white);
border: 1px solid var(--apple-border);
border-radius: 24px;
padding: 1.25rem 1.5rem;
margin-bottom: 2rem;
box-shadow: var(--shadow-s);
}

.ruler-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1rem;
color: var(--brand-green-dark);
margin-bottom: 0.25rem;
}

.ruler-desc {
font-size: 0.88rem;
color: var(--apple-text-gray);
margin-bottom: 1.25rem;
}

.ruler-visual-container {
margin-top: 1rem;
width: 100%;
}

.ruler-labels {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
.ruler-labels {
    flex-direction: row;
    justify-content: space-between;
}
}

.ruler-labels span:first-child {
color: var(--brand-green-dark);
}

.ruler-labels span:last-child {
color: var(--brand-pink-dark);
text-align: right;
}

.ruler-bar {
position: relative;
height: 18px;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 9999px;
margin-bottom: 2.25rem;
border: 1px solid rgba(0, 0, 0, 0.02);
overflow: visible;
}

.ruler-fill-padrao {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 46.15%; /* 30cm out of 65cm */
background: linear-gradient(90deg, rgba(143,182,148,0.7) 0%, var(--brand-green-dark) 100%);
border-radius: 9999px 0 0 9999px;
border-right: 2px solid var(--apple-bg-white);
}

.ruler-fill-fora {
position: absolute;
left: 46.15%;
top: 0;
bottom: 0;
right: 0;
background: linear-gradient(90deg, rgba(250,157,168,0.7) 0%, var(--brand-pink-dark) 100%);
border-radius: 0 9999px 9999px 0;
}

.ruler-ticks {
position: absolute;
top: 24px;
left: 0;
right: 0;
height: 15px;
font-size: 0.75rem;
color: var(--apple-text-gray);
font-weight: 500;
}

.ruler-ticks span {
position: absolute;
transform: translateX(-50%);
}

.ruler-ticks span::before {
content: "";
position: absolute;
top: -12px;
left: 50%;
}

/* Ruler Comparison Cards */
.ruler-comparison-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
.ruler-comparison-grid {
    grid-template-columns: 1fr 1fr;
}
}

.ruler-card {
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--apple-border);
background-color: var(--apple-bg-light);
display: flex;
flex-direction: column;
}

.ruler-card-header {
padding: 0.6rem 1rem;
font-weight: 800;
font-size: 0.85rem;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 0.5rem;
}

.card-standard .ruler-card-header {
background-color: rgba(143, 182, 148, 0.15);
color: var(--brand-green-dark);
border-bottom: 1px solid rgba(143, 182, 148, 0.2);
}

.card-nonstandard .ruler-card-header {
background-color: rgba(250, 157, 168, 0.15);
color: var(--brand-pink-dark);
border-bottom: 1px solid rgba(250, 157, 168, 0.2);
}

.ruler-card-body {
padding: 1rem;
display: flex;
gap: 1rem;
align-items: center;
flex: 1;
}

@media (max-width: 576px) {
.ruler-card-body {
    flex-direction: column;
    text-align: center;
    align-items: center;
}
}

.ruler-card-img-wrapper {
width: 90px;
height: 90px;
border-radius: 14px;
overflow: hidden;
background-color: var(--apple-bg-white);
border: 1px solid var(--apple-border);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}

.ruler-card-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}

.ruler-card-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
text-align: left;
}

.ruler-card-list li {
font-size: 0.82rem;
line-height: 1.35;
display: flex;
align-items: flex-start;
gap: 0.4rem;
color: var(--apple-dark);
}

.card-standard .list-bullet {
color: var(--brand-green-dark);
flex-shrink: 0;
width: 0.9rem;
height: 0.9rem;
margin-top: 0.1rem;
}

.card-nonstandard .list-bullet {
color: var(--brand-pink-dark);
flex-shrink: 0;
width: 0.9rem;
height: 0.9rem;
margin-top: 0.1rem;
}

.ruler-indicator-labels {
text-align: center;
font-size: 0.72rem;
font-weight: 700;
color: var(--apple-text-gray);
margin-bottom: 0.5rem;
letter-spacing: 0.02em;
}

.ruler-indicator-labels i {
display: inline-block;
vertical-align: middle;
width: 0.8rem;
height: 0.8rem;
}

.ruler-zone-legend {
display: flex;
justify-content: space-between;
margin-top: -1.25rem;
margin-bottom: 0.75rem;
font-size: 0.75rem;
font-weight: 700;
}

.legend-padrao {
color: var(--brand-green-dark);
display: flex;
align-items: center;
gap: 0.25rem;
}

.legend-fora {
color: var(--brand-pink-dark);
display: flex;
align-items: center;
gap: 0.25rem;
}

.legend-padrao i, .legend-fora i {
width: 0.85rem;
height: 0.85rem;
}

/* Service Code Badge */
.service-code-badge {
display: inline-flex;
align-items: center;
background-color: var(--brand-green-light);
color: var(--brand-green-dark);
border: 1px dashed var(--brand-green);
padding: 0.2rem 0.6rem;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 0.85rem;
}

/* Pelos Embolados Alert Card */
.services-alert-card {
display: flex;
gap: 1rem;
background-color: #fff9db; /* soft orange/yellow */
border: 1px solid #ffe066;
border-radius: 20px;
padding: 1.25rem;
margin-top: 2rem;
align-items: flex-start;
box-shadow: var(--shadow-s);
}

.services-alert-card .alert-icon-wrapper {
color: #f59f00;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}

.services-alert-card .alert-icon-wrapper svg {
width: 1.5rem;
height: 1.5rem;
}

.services-alert-card .alert-title {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: #f08c00;
margin-bottom: 0.25rem;
letter-spacing: -0.01em;
}

.services-alert-card .alert-text {
font-size: 0.85rem;
color: #665c33;
line-height: 1.45;
}

.services-alert-card .alert-text strong {
font-weight: 700;
}

/* Extra hover adjustments to make dynamic cards look premium */
.dynamic-card {
height: 100%;
}

/* ==========================================
 MOBILE VIEWPORT AND UX OVERRIDES (RESPONSIVE)
 ========================================== */

@media (max-width: 767px) {
/* Seletor de Raças Horizontal Scrollable Tab Bar */
.breed-selector-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1.25rem;
    margin-inline: -1rem; /* negative margin to full-bleed to edge */
    padding-inline: 1rem;
    gap: 0.75rem;
    grid-template-columns: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.breed-selector-grid::-webkit-scrollbar {
    height: 4px;
}

.breed-selector-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.breed-selector-grid::-webkit-scrollbar-thumb {
    background: var(--brand-green);
    border-radius: 10px;
}

.breed-card {
    flex: 0 0 170px;
    height: 140px;
    scroll-snap-align: start;
    padding: 1rem;
}

.breed-title {
    font-size: 1rem;
}

.breed-subtitle {
    font-size: 0.7rem;
}

/* Carousel de Depoimentos Mobile */
.carousel-control {
    display: none !important;
}

.testimonials-carousel-wrapper {
    gap: 0;
}

.testimonials-carousel-container {
    min-height: 220px;
    padding: var(--space-md) var(--space-sm);
}
}

@media (max-width: 576px) {
/* Dynamic Calculator Stacked Controls */
.calculator-controls-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
}

.control-group {
    width: 100%;
}

.toggle-switch-wrapper {
    flex-direction: column;
    width: 100%;
    border-radius: 16px;
    gap: 4px;
    padding: 4px;
}

.toggle-btn {
    width: 100%;
    text-align: center;
    border-radius: 12px;
    padding: 0.6rem 1rem;
    white-space: normal; /* allow wrap inside stacked button if text is too long */
}

/* Pinscher Ruler ticks */
.ruler-ticks {
    font-size: 0.68rem;
}

/* Stretch Action buttons to full width for easy reach */
.price-call-action,
.price-call-card,
.final-cta-buttons {
    width: 100%;
}

/* Stretch buttons inside cards */
#food-cta-whatsapp,
#bath-cta-whatsapp,
#loyalty-cta-whatsapp,
#price-cta-whatsapp,
.price-call-action .btn,
.final-cta-buttons .btn,
.about-bath-content .btn {
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
    display: inline-flex !important;
}
}

/* Floating Contact Buttons (WhatsApp & Instagram) */
.floating-contact-group {
position: fixed;
bottom: 2rem;
right: 1.5rem;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
pointer-events: none;
}

.floating-contact-group a {
pointer-events: auto;
}

.floating-btn {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
text-decoration: none;
}

.floating-btn-img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
transition: filter 0.3s ease;
}

/* Instagram Floating Button */
.btn-insta-float {
animation: floatEntranceInsta 0.8s ease-out;
}

/* WhatsApp Floating Button */
.btn-wa-float {
animation: floatEntranceWA 0.8s ease-out, pulseWhatsAppGlow 2s infinite;
}

.floating-btn:hover {
transform: scale(1.1) translateY(-4px);
}

.floating-btn:hover .floating-btn-img {
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

/* Animations */
@keyframes floatEntranceInsta {
from {
opacity: 0;
transform: translateY(40px) scale(0.7);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

@keyframes floatEntranceWA {
from {
opacity: 0;
transform: translateY(60px) scale(0.7);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

@keyframes pulseWhatsAppGlow {
0% {
filter: drop-shadow(0 0 0 rgba(37, 211, 102, 0.6)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
70% {
filter: drop-shadow(0 0 15px rgba(37, 211, 102, 0)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
100% {
filter: drop-shadow(0 0 0 rgba(37, 211, 102, 0)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
}

/* Hide on header overlap or adjust for smaller mobile screens */
@media (max-width: 576px) {
.floating-contact-group {
    bottom: 1.5rem;
    right: 1rem;
    gap: 0.6rem;
}
.floating-btn {
    width: 48px;
    height: 48px;
}
}