/* Reset e Variáveis */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Cores principais - Verde e Dourado do Zé dos Pintos */
    --primary-red: #C9A961;      /* Dourado (substitui vermelho) */
    --primary-blue: #1B4D3E;     /* Verde Escuro */
    --primary-white: #FFFFFF;    /* Branco */
    --secondary-white: #F8FAFC; /* Branco gelo */
    --light-red: #E6C57A;      /* Dourado claro */
    --light-blue: #2D6F5A;      /* Verde médio */
    --dark-red: #A68A4F;       /* Dourado escuro */
    --dark-blue: #0F3328;      /* Verde muito escuro */
    
    /* Cores neutras */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    
    /* Tipografia */
    --font-primary: 'Poppins', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    /* Espaçamentos */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-32: 8rem;
    
    /* Bordas */
    --border-radius: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;
    
    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transições */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
}

/* Base */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--gray-700);
    background: linear-gradient(180deg, #f5f0ea 0%, #e0d4c5 25%, #d4c4b0 50%, #c8b49a 75%, #bda485 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    width: 100%;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* Tipografia */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--gray-800);
}

h1 {
    font-size: var(--font-size-5xl);
}

h2 {
    font-size: var(--font-size-4xl);
}

h3 {
    font-size: var(--font-size-3xl);
}

h4 {
    font-size: var(--font-size-2xl);
}

/* Botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background-color: var(--primary-blue);
    color: var(--primary-white);
    box-shadow: 0 4px 15px rgba(27, 77, 62, 0.4);
}

.btn-primary:hover {
    background-color: var(--dark-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(27, 77, 62, 0.6);
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-white);
    border: 2px solid var(--primary-white);
    backdrop-filter: blur(10px);
}

.btn-outline:hover {
    background-color: var(--primary-white);
    color: var(--primary-red);
    border-color: var(--primary-white);
}

.btn-full {
    width: 100%;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-white);
    box-shadow: var(--shadow);
    z-index: 1000;
    transition: transform 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.navbar {
    padding: var(--spacing-5) 0;
}

.navbar .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-8);
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

.navbar .btn {
    margin-right: var(--spacing-12);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-blue);
    padding-left: var(--spacing-6);
}

.logo-circle {
    height: 90px;
    width: 90px;
    object-fit: contain;
    background-color: white;
    border-radius: 50%;
    padding: 2px;
}

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.logo-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--primary-blue);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.logo-subtitle {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--dark-red);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}



.nav-brand i {
    color: var(--primary-red);
    font-size: var(--font-size-3xl);
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-10);
}

.nav-link {
    font-weight: 600;
    font-size: var(--font-size-xl);
    color: var(--gray-800);
    transition: var(--transition);
    position: relative;
    text-transform: uppercase;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-red);
}

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

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

/* Dropdown Menu */
.nav-dropdown {
    position: relative;
}

.nav-dropdown .nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.nav-dropdown .nav-link i {
    font-size: 0.75rem;
    transition: var(--transition);
}

.nav-dropdown:hover .nav-link i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-white);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius);
    padding: var(--spacing-4) 0;
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    margin-top: 20px;
    z-index: 1000;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    margin-top: 10px;
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-link {
    display: block;
    padding: var(--spacing-3) var(--spacing-6);
    color: var(--gray-700);
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: var(--transition);
    text-transform: none;
}

.dropdown-link:hover {
    background-color: var(--secondary-white);
    color: var(--primary-blue);
    padding-left: calc(var(--spacing-6) + var(--spacing-2));
}

.nav-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-2);
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--primary-blue);
    margin: 3px 0;
    transition: var(--transition);
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    padding-top: 160px;
    padding-bottom: var(--spacing-16);
    justify-content: flex-start;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
    overflow: hidden;
    scroll-margin-top: 130px;
}

/* Hero com imagem de fundo */
.hero[style*="background-image"] {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    background-attachment: scroll; /* Melhor qualidade sem parallax */
}

.hero[style*="background-image"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero[style*="background-image"] .hero-content {
    position: relative;
    z-index: 2;
    padding: var(--spacing-8) 0;
}

.hero-text-content {
    max-width: 650px;
    margin: 0 0 var(--spacing-12);
    padding: 0 var(--spacing-8);
    margin-left: 2%;
}

.hero-main-title {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    margin-bottom: var(--spacing-8);
    line-height: 1.3;
    color: var(--primary-white);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 
                 4px 4px 8px rgba(0,0,0,0.6);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: left;
}

.hero-text-paragraph {
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.8;
    color: var(--primary-white);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 
                 3px 3px 6px rgba(0,0,0,0.6);
    margin-bottom: var(--spacing-6);
    text-align: left;
}

.btn-large {
    padding: var(--spacing-4) var(--spacing-10);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 180px;
    transition: all 0.3s ease;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: var(--spacing-8);
    margin-left: 2%;
    padding-left: var(--spacing-8);
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2) var(--spacing-4);
    margin-top: var(--spacing-6);
    margin-left: 2%;
    padding-left: var(--spacing-8);
    list-style: none;
}

.hero-trust li {
    color: var(--primary-white);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.hero-trust li + li {
    position: relative;
    padding-left: var(--spacing-4);
}

.hero-trust li + li::before {
    content: '·';
    position: absolute;
    left: 0;
    opacity: 0.7;
}

.hero-no-overlay .hero-buttons .btn {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    font-weight: 600;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--primary-white);
}

.hero-no-overlay .hero-content {
    text-align: center;
    max-width: 1200px;
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Seções */
.section-title {
    text-align: center;
    font-size: var(--font-size-4xl);
    font-weight: 700;
    margin-bottom: var(--spacing-3);
    margin-top: 0;
    color: var(--primary-blue);
    padding-top: 0;
}

.section-subtitle {
    text-align: center;
    font-size: var(--font-size-lg);
    color: var(--gray-600);
    margin-bottom: var(--spacing-8);
    margin-top: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.services .section-title {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--spacing-4);
    font-weight: 700;
    font-family: 'Fredoka', 'Poppins', sans-serif;
    transform: rotate(-2deg);
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);
}

.services .section-subtitle {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-16);
}

.gallery .section-title {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--spacing-4);
    font-weight: 700;
    font-family: 'Fredoka', 'Poppins', sans-serif;
    transform: rotate(2deg);
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);
}

.gallery .section-subtitle {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-8);
}

/* About Section */
.about {
    padding: var(--spacing-16) 0;
    background: transparent;
    scroll-margin-top: 130px;
    position: relative;
    height: auto;
}

.about::after {
    content: '';
    position: absolute;
    right: -8.5%;
    top: calc(50% - 25px);
    transform: translateY(-50%);
    width: 49%;
    height: 490px;
    background-image: url('../images/pintinho-cerca-transparente.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.35)) contrast(1.1) brightness(1.05);
}

.about .container {
    max-width: 100%;
    padding-left: var(--spacing-12);
    padding-right: 37%;
    position: relative;
    z-index: 2;
}

.about-title-center{
    position:absolute;
    right:10%;
    top:20px;
    font-size:5rem;
    color:var(--primary-blue);
    font-weight:700;
    font-family: 'Fredoka', 'Poppins', sans-serif;
    z-index:10;
    text-align:center;
    margin:0;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
    letter-spacing:0.5px;
    transform: rotate(-3deg);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
    align-items: start;
    overflow: visible;
}

.about-text p {
    font-size: var(--font-size-lg);
    color: var(--gray-800);
    margin-bottom: var(--spacing-5);
    line-height: 1.8;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3);
    margin-top: var(--spacing-6);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 190px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: var(--spacing-2);
    border-radius: 50%;
    border: 3px dashed rgba(255, 255, 255, 0.55);
    background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transform: rotate(-4deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat:nth-child(2) {
    background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
    transform: rotate(3deg);
}

.stat:nth-child(3) {
    background: linear-gradient(135deg, var(--light-blue), var(--primary-blue));
    transform: rotate(-2deg);
}

.stat:hover {
    transform: rotate(0deg) scale(1.08);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
}

.stat-icon {
    font-size: var(--font-size-2xl);
    line-height: 1;
    margin-bottom: var(--spacing-1);
}

.stat-number {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--primary-white);
    line-height: 1.1;
}

.stat-label {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--spacing-1);
}

.about-text {
    display: flex;
    flex-direction: column;
    padding-left: var(--spacing-16);
    padding-top: var(--spacing-6);
    opacity: 0;
    transform: translateX(-70px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.about-image {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: fit-content;
    padding: var(--spacing-4) 0;
    z-index: 10;
    opacity: 0;
    transform: translateY(-70px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.about.in-view .about-text,
.about.in-view .about-image {
    opacity: 1;
    transform: none;
}

.founder-image {
    width: 80%;
    height: auto;
    max-height: none;
    aspect-ratio: 597 / 1024;
    object-fit: contain;
    object-position: center center;
    border-radius: var(--border-radius-lg);
    border: 8px solid var(--primary-white);
    box-shadow: var(--shadow-xl);
    transition: transform 0.3s ease;
    background: var(--gray-100);
    position: relative;
    z-index: 10;
    transform: rotate(-2deg);
}

.founder-image:hover {
    transform: rotate(-2deg) scale(1.02);
}

.founder-seal {
    position: absolute;
    bottom: 0%;
    right: -3%;
    z-index: 15;
    width: 140px;
    height: 170px;
    transform: rotate(8deg);
    transition: transform 0.3s ease;
}

.founder-seal:hover {
    transform: rotate(0deg) scale(1.06);
}

.founder-seal-medal {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--light-red), var(--primary-red) 45%, var(--dark-red));
    clip-path: polygon(50% 0%, 59.83% 13.3%, 75% 6.7%, 76.87% 23.13%, 93.3% 25%, 86.7% 40.17%, 100% 50%, 86.7% 59.83%, 93.3% 75%, 76.87% 76.87%, 75% 93.3%, 59.83% 86.7%, 50% 100%, 40.17% 86.7%, 25% 93.3%, 23.13% 76.87%, 6.7% 75%, 13.3% 59.83%, 0% 50%, 13.3% 40.17%, 6.7% 25%, 23.13% 23.13%, 25% 6.7%, 40.17% 13.3%);
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
    display: flex;
    align-items: center;
    justify-content: center;
}

.founder-seal-inner {
    width: 72%;
    height: 72%;
    border-radius: 50%;
    background: var(--primary-blue);
    border: 2px solid var(--light-red);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--light-red);
}

.founder-seal-check {
    font-size: 1.6rem;
    line-height: 1;
}

.founder-seal-label {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
    margin-top: 2px;
}

.founder-seal-ribbon {
    position: absolute;
    top: 90px;
    width: 34px;
    height: 70px;
    background: linear-gradient(180deg, var(--dark-blue), var(--primary-blue));
    clip-path: polygon(0% 0%, 100% 0%, 100% 78%, 50% 100%, 0% 78%);
    z-index: -1;
}

.founder-seal-ribbon-left {
    left: 26px;
    transform: rotate(-18deg);
}

.founder-seal-ribbon-right {
    right: 26px;
    transform: rotate(18deg);
}

/* Services Section */
.services {
    padding: var(--spacing-16) 0;
    background: transparent;
    scroll-margin-top: 130px;
    position: relative;
    min-height: calc(100vh - 130px);
    display: flex;
    align-items: center;
    height: auto;
}

.services > .container {
    width: 100%;
}

.services::before {
    content: '';
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    height: 480px;
    background-image: url('../images/pintinho_prancheta_v2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.35)) contrast(1.1) brightness(1.05);
}

.services .container {
    max-width: 100%;
    padding-left: 40%;
    padding-right: var(--spacing-12);
    position: relative;
    z-index: 2;
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-6);
}

.service-card {
    flex: 1 1 300px;
    max-width: calc((100% - (2 * var(--spacing-6))) / 3);
    background-color: var(--primary-white);
    padding: var(--spacing-5);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    text-align: left;
    transition: transform 1s ease-out, opacity 1s ease-out, box-shadow 0.3s ease;
    border: 3px dashed var(--gray-200);
    transform: rotate(-1deg) translateX(-450px);
    opacity: 0;
}

.service-card:nth-child(2) {
    transform: rotate(1deg) translateX(450px);
}

.services.in-view .service-card:nth-child(1) {
    opacity: 1;
    transform: rotate(-1deg) translateX(0);
}

.services.in-view .service-card:nth-child(2) {
    opacity: 1;
    transform: rotate(1deg) translateX(0);
}

.service-card:hover,
.services.in-view .service-card:nth-child(1):hover,
.services.in-view .service-card:nth-child(2):hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-red);
}

.services.in-view .service-card:nth-child(3) {
    opacity: 1;
    transform: rotate(-1deg) translateX(0);
}

.services.in-view .service-card:nth-child(3):hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--gray-300);
}

/* Servico "em breve" - mesmo card, mas "bloqueado" tipo personagem nao
   liberado ainda em jogo: camada cinza translucida por cima + cadeado */
.service-card-soon {
    position: relative;
    background-color: var(--gray-50);
}

.service-soon-badge {
    position: absolute;
    top: -18px;
    right: var(--spacing-5);
    z-index: 2;
    background: linear-gradient(135deg, var(--gray-500), var(--gray-700));
    color: var(--primary-white);
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-lg);
    padding: var(--spacing-2) var(--spacing-5);
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.service-icon-soon {
    background: linear-gradient(135deg, var(--gray-400), var(--gray-500));
}

.service-card-soon h3,
.service-card-soon p {
    color: var(--gray-500);
}

.service-card-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(140, 140, 140, 0.4);
    -webkit-backdrop-filter: grayscale(70%) blur(1px);
    backdrop-filter: grayscale(70%) blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-lg);
}

.service-card-lock-overlay i {
    font-size: 2.75rem;
    color: rgba(255, 255, 255, 0.92);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

.service-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
    color: var(--primary-white);
    font-size: var(--font-size-xl);
    border: 3px dashed rgba(255, 255, 255, 0.55);
    transform: rotate(-6deg);
}

.service-card:nth-child(2) .service-icon {
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    transform: rotate(6deg);
}

.service-card h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-3);
    color: var(--primary-blue);
    font-weight: 600;
}

.service-card p {
    color: var(--gray-600);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Card "em breve" grande standalone (página Nutrição Animal) - prévia com várias
   seções (linhas de ração, nutrientes, preços) coberta por um cadeado único por
   cima de tudo. Fora do grid/animação de scroll do .services, então não herda o
   .service-card puro (que fica invisível fora dali). */
.nutricao-preview-card {
    margin: 0;
    padding: var(--spacing-10) var(--spacing-8);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border: 3px dashed var(--gray-200);
}

.nutricao-preview-block {
    margin-bottom: var(--spacing-8);
}

.nutricao-preview-block:last-of-type {
    margin-bottom: 0;
}

.nutricao-preview-heading {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.nutricao-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
}

.nutricao-type-card {
    background-color: var(--primary-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-5);
    text-align: center;
}

.nutricao-type-card .nutricao-type-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--spacing-2);
}

.nutricao-type-card h4 {
    color: var(--gray-500);
    font-weight: 600;
    margin-bottom: var(--spacing-1);
}

.nutricao-type-card p {
    color: var(--gray-400);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-2);
}

.nutricao-type-stat {
    display: inline-block;
    background-color: var(--gray-200);
    color: var(--gray-500);
    font-weight: 600;
    font-size: var(--font-size-sm);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: 999px;
}

.nutricao-nutrients-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.nutricao-nutrient-chip {
    background-color: var(--primary-white);
    color: var(--gray-500);
    font-weight: 600;
    font-size: var(--font-size-sm);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 999px;
}

.nutricao-price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
}

.nutricao-price-card {
    background-color: var(--primary-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-5);
    text-align: center;
}

.nutricao-price-card h4 {
    color: var(--gray-500);
    font-weight: 600;
    margin-bottom: var(--spacing-2);
}

.nutricao-price-value {
    display: block;
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-400);
}

.nutricao-lock-overlay {
    flex-direction: column;
    gap: var(--spacing-3);
}

.nutricao-lock-text {
    color: var(--primary-white);
    font-weight: 700;
    font-size: var(--font-size-lg);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.service-notice {
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    border: 3px solid rgba(255, 255, 255, 0.5);
    padding: var(--spacing-5);
    border-radius: var(--border-radius-lg);
    margin-top: var(--spacing-8);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
}

.service-notice-icon {
    font-size: var(--font-size-2xl);
    line-height: 1;
    flex-shrink: 0;
}

.service-notice p {
    margin: 0;
    color: var(--primary-white);
    font-size: var(--font-size-lg);
    line-height: 1.6;
}

/* Page Header (usado nas páginas internas: nossos-pintinhos, cuidados, etc.) */
.page-header {
    position: relative;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%);
    padding: 150px 0 90px;
    text-align: center;
    overflow: hidden;
}

/* Textura sutil de bolinhas por cima do gradiente, pra tirar o efeito "liso demais" */
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 2px, transparent 2px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Variante com foto de fundo (ex: contato) - mesmo estilo escuro da vitrine de
   fotos da home (overlay preto translucido) com uma frase escrita por cima */
.page-header-photo {
    position: relative;
    height: 600px;
    padding: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-header-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.6);
    pointer-events: none;
}

.page-header-photo-caption {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 var(--spacing-6);
    margin-top: 90px;
}

.page-header-photo-title {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-size: var(--font-size-5xl);
    font-weight: 700;
    color: var(--primary-white);
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

.page-header-photo-subtitle {
    font-size: var(--font-size-xl);
    color: var(--primary-white);
    opacity: 0.95;
}

/* Variacoes de altura de algumas paginas (antes estavam inline no HTML e anulavam o
   ajuste de celular). Ficam ANTES do bloco de max-width: 768px, que continua vencendo. */
.page-header-photo--tall {
    height: 620px;
}

.page-header-photo--short {
    height: 500px;
}

.page-header-photo-caption--low {
    margin-top: 170px;
}

/* Selo estourado dourado (mesma forma do selo do fundador), no lugar do emoji flutuando sozinho */
.page-header-icon {
    position: relative;
    z-index: 1;
    width: 108px;
    height: 108px;
    margin: 0 auto var(--spacing-5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    background: linear-gradient(135deg, var(--light-red), var(--primary-red) 55%, var(--dark-red));
    clip-path: polygon(50% 0%, 59.83% 13.3%, 75% 6.7%, 76.87% 23.13%, 93.3% 25%, 86.7% 40.17%, 100% 50%, 86.7% 59.83%, 93.3% 75%, 76.87% 76.87%, 75% 93.3%, 59.83% 86.7%, 50% 100%, 40.17% 86.7%, 25% 93.3%, 23.13% 76.87%, 6.7% 75%, 13.3% 59.83%, 0% 50%, 13.3% 40.17%, 6.7% 25%, 23.13% 23.13%, 25% 6.7%, 40.17% 13.3%);
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(-4deg);
    }
    50% {
        transform: translateY(-10px) rotate(4deg);
    }
}

.page-header h1 {
    position: relative;
    z-index: 1;
    color: var(--primary-white);
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-size: var(--font-size-5xl);
    margin-bottom: var(--spacing-4);
    font-weight: 700;
}

.page-header p {
    position: relative;
    z-index: 1;
    color: var(--primary-white);
    font-size: var(--font-size-xl);
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.95;
}

/* Breeds Section (usado em nossos-pintinhos.html) */
.pintinhos-content {
    position: relative;
}

.pintinhos-content .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

/* Pintinho minerador - grudado na borda direita da tela, comecando no
   mesmo nivel do titulo da secao */
.pintinhos-mascot-miner {
    position: absolute;
    top: var(--spacing-24);
    right: 0;
    width: 300px;
    height: auto;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(10px 14px 12px rgba(0, 0, 0, 0.35));
}

/* Sem espaco sobrando do lado do titulo em telas estreitas, entao some */
@media (max-width: 900px) {
    .pintinhos-mascot-miner {
        display: none;
    }
}

/* Pintinho minerador 1 - do lado do card do Hisex Brown, alinhado pela
   parte de baixo dele. Fica num wrapper fora do card (que tem overflow:
   hidden por causa do zoom da foto no hover) pra nao ser cortado. */
.breed-card-hisex-wrap {
    position: relative;
    max-width: 900px;
}

.pintinhos-mascot-miner-1 {
    position: absolute;
    bottom: 0;
    left: calc(100% + var(--spacing-8));
    width: 300px;
    height: auto;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(10px 14px 12px rgba(0, 0, 0, 0.35));
}

/* Sem espaco sobrando do lado do card em telas mais estreitas, entao some */
@media (max-width: 1099px) {
    .pintinhos-mascot-miner-1 {
        display: none;
    }
}

/* Pintinho escalando o penhasco - grudado na borda direita da tela
   (igual o pintinho minerador la em cima), na altura do card do Embrapa 051 */
.pintinhos-mascot-penhasco {
    position: absolute;
    top: 2900px;
    right: 0;
    width: 440px;
    height: auto;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(10px 14px 12px rgba(0, 0, 0, 0.35));
}

@media (max-width: 1099px) {
    .pintinhos-mascot-penhasco {
        display: none;
    }
}

/* CTA final - volta ao dourado, mas agora como um cartao flutuante (com
   cantos arredondados, sombra e respiro em volta) em vez de uma faixa
   full-bleed encostada na secao de cima e no rodape de baixo */
.cta-gold {
    padding: var(--spacing-16) var(--spacing-4);
}

.cta-gold .container {
    position: relative;
    overflow: hidden;
    max-width: 1100px;
    background: linear-gradient(135deg, var(--light-red) 0%, var(--primary-red) 55%, var(--dark-red) 100%);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
    padding: var(--spacing-16) var(--spacing-6);
    text-align: center;
    transform-origin: top center;
    animation: ctaLeafSway 7s ease-in-out infinite;
}

/* Balanco suave, como uma folha balancando no vento - lento e sutil */
@keyframes ctaLeafSway {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    20% { transform: rotate(-0.6deg) translateY(-3px); }
    50% { transform: rotate(0.5deg) translateY(2px); }
    80% { transform: rotate(-0.3deg) translateY(-2px); }
}

.cta-gold::before {
    content: none;
}

.cta-gold .container::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 28px 28px;
    pointer-events: none;
}

.cta-gold-icon {
    position: relative;
    z-index: 1;
    width: 84px;
    height: 84px;
    margin: 0 auto var(--spacing-5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    background: var(--primary-blue);
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.cta-gold h2 {
    position: relative;
    z-index: 1;
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--dark-blue);
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-4);
}

.cta-gold p {
    position: relative;
    z-index: 1;
    color: var(--dark-blue);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-8);
    opacity: 0.88;
}

.cta-gold-btn {
    position: relative;
    z-index: 1;
    background: var(--primary-blue);
    color: var(--primary-white);
    border: none;
}

.cta-gold-btn:hover {
    background: var(--dark-blue);
}

.pintinhos-content .section-title,
.pintinhos-content .section-subtitle {
    padding-left: var(--spacing-4);
}

.pintinhos-content .section-subtitle {
    margin-left: 0;
    margin-right: 0;
}

.breeds-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
    margin-top: var(--spacing-12);
    padding-left: var(--spacing-4);
}

.breed-card {
    background: white;
    border: 3px solid var(--primary-red);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    max-width: 900px;
}

.breed-card:hover {
    border-color: var(--dark-red);
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.breed-image {
    width: 350px;
    min-width: 350px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    flex-shrink: 0;
}

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

.breed-card:hover .breed-image img {
    transform: scale(1.1);
}

.breed-content {
    padding: var(--spacing-8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.breed-content h3 {
    font-size: var(--font-size-2xl);
    color: var(--primary-blue);
    margin-bottom: var(--spacing-4);
    font-weight: 600;
}

.breed-content p {
    color: var(--gray-600);
    line-height: 1.8;
    font-size: var(--font-size-lg);
}

.breed-type {
    color: var(--primary-blue);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-4);
}

.breed-specs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.breed-specs li {
    color: var(--gray-700);
    font-size: var(--font-size-base);
    line-height: 2;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--gray-100);
}

.breed-specs li:last-child {
    border-bottom: none;
}

.breed-specs li strong {
    color: var(--primary-blue);
    font-weight: 600;
    min-width: 140px;
    display: inline-block;
}

/* Differential Section - Full-bleed photo com card sobreposto */
.differential {
    position: relative;
    height: 700px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: var(--spacing-12) 0;
}

.differential-card {
    max-width: 720px;
    width: 90%;
    margin-left: 3%;
    margin-bottom: var(--spacing-8);
    background: rgba(15, 15, 15, 0.62);
    backdrop-filter: blur(3px);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-10) var(--spacing-12);
    color: var(--primary-white);
    text-align: center;
}

.differential-card h2 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-size: var(--font-size-3xl);
    color: var(--primary-white);
    margin-bottom: var(--spacing-4);
}

.differential-card p {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--spacing-6);
    text-align: center;
}

/* Gallery Section - Coverflow */
.gallery {
    padding: var(--spacing-16) 0;
    background: transparent;
    scroll-margin-top: 130px;
    height: auto;
}

/* Carrossel Polaroid - um slide por vez, com autoplay */
.coverflow-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: var(--spacing-8) auto;
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coverflow-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.coverflow-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.coverflow-item.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: 5;
}

.coverflow-item img {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: 520px;
    max-height: 460px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    border: 12px solid var(--primary-white);
    border-bottom-width: 46px;
    border-radius: 6px;
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35);
    rotate: -3deg;
}

.coverflow-item:nth-child(even) img {
    rotate: 3deg;
}

/* Botões de navegação - estilo adesivo */
.coverflow-nav {
    position: absolute;
    top: 50%;
    margin-top: -28px;
    z-index: 20;
    background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
    color: var(--primary-white);
    border: 3px dashed rgba(255, 255, 255, 0.6);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.coverflow-nav:hover {
    transform: scale(1.12);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

.coverflow-prev {
    left: -28px;
}

.coverflow-next {
    right: -28px;
}

/* Mascote decorativo ao lado direito da galeria */
.gallery-mascot {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 40px;
    width: 320px;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 25px 20px rgba(0, 0, 0, 0.35));
}

/* Pintinho segurando o difusor, espelhado do lado esquerdo da galeria.
   A arte tem mais margem vazia ao redor do pintinho do que a da câmera,
   então usa um width maior + deslocamento vertical pra equiparar o
   tamanho aparente e o nível dos dois personagens. */
.gallery-mascot-secondary {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(calc(-50% - 58px));
    margin-right: 40px;
    width: 425px;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 25px 20px rgba(0, 0, 0, 0.35));
}

/* Esconde os mascotes quando não há espaço lateral suficiente - limite mais
   alto que os outros mascotes do site porque estes ficam ao lado de uma
   caixa central de largura fixa (nao encostados na borda da tela), entao
   sobra menos espaco lateral em notebooks de tela menor. 1600px = medido
   na pratica (getBoundingClientRect) o ponto a partir do qual nenhum dos
   dois mascotes (320px e 425px de largura) vaza da tela, com folga. */
@media (max-width: 1600px) {
    .gallery-mascot,
    .gallery-mascot-secondary {
        display: none;
    }
}

/* Indicadores - bolinhas */
.coverflow-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-8);
}

.coverflow-dot {
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 50%;
    background: var(--gray-300);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.coverflow-dot:hover {
    background: var(--light-red);
}

.coverflow-dot.active {
    background: var(--primary-red);
    border-color: var(--dark-red);
    transform: scale(1.35);
}

/* Coverflow Responsivo */
@media (max-width: 992px) {
    .coverflow-container {
        height: 460px;
    }

    .coverflow-item img {
        max-width: 400px;
        max-height: 380px;
    }
}

/* Contact Section */
.contact {
    padding: var(--spacing-10) 0 var(--spacing-16);
    background: transparent;
    scroll-margin-top: 130px;
    height: auto;
}

.contact .section-title {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--spacing-2);
    font-weight: 700;
    font-family: 'Fredoka', 'Poppins', sans-serif;
    transform: rotate(-2deg);
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);
}

.contact .section-subtitle {
    margin-bottom: var(--spacing-6);
}

.contact-content {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
    align-items: start;
}

/* Mascote decorativo ao lado esquerdo da seção de contato, só quando
   sobra espaço de verdade fora do container */
.contact-mascot {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(calc(-50% - 46px));
    margin-right: 0;
    width: 300px;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.3));
}

/* 1800px = medido na pratica (getBoundingClientRect) o ponto a partir do
   qual o mascote (300px) nao vaza mais da tela pela esquerda - o layout em
   grade dessa secao (2 colunas ocupando a largura toda) deixa menos folga
   lateral que a caixa central fixa da galeria, entao precisa de mais espaco */
@media (max-width: 1800px) {
    .contact-mascot {
        display: none;
    }
}

.contact-info {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-4);
    /* Item da grade (coluna 1fr): sem isso o e-mail longo dentro dos cartoes estica a
       coluna alem da tela em celulares e o overflow-x do body esconde o corte */
    min-width: 0;
}

/* Trilho vertical de redes sociais, com uma linha passando por trás
   dos ícones */
.contact-social-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    padding: 0 var(--spacing-1);
    flex-shrink: 0;
}

/* Linha com aparência de corda trançada (mas continua reta e parada) —
   listras diagonais repetidas simulam as fibras torcidas de uma corda */
.contact-social-rail::before {
    content: '';
    position: absolute;
    top: 6%;
    bottom: 6%;
    left: 50%;
    width: 7px;
    border-radius: 4px;
    background:
        repeating-linear-gradient(
            35deg,
            var(--dark-blue) 0px,
            var(--dark-blue) 2px,
            var(--light-blue) 2px,
            var(--light-blue) 4px
        );
    box-shadow:
        inset 2px 0 0 rgba(255, 255, 255, 0.25),
        inset -2px 0 0 rgba(0, 0, 0, 0.3);
    opacity: 0.9;
    transform: translateX(-50%);
    z-index: 0;
}

.contact-cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-3);
    flex: 1;
    min-width: 0;
}

/* Cards de contato: sempre abertos, adesivo torto com sombra deslocada.
   Entram deslizando de lado ao aparecer na tela - comecam 30% visiveis
   (nao escondidos, so "espiando" pela borda) e deslizam ate a posicao final. */
.contact-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    background-color: var(--primary-white);
    border: 3px solid var(--primary-red);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-3) var(--spacing-4);
    box-shadow: 5px 5px 0 rgba(27, 77, 62, 0.18);
    transform: rotate(-1deg) translateX(70%);
    transition: transform 0.7s ease-out, box-shadow 0.3s ease;
    min-width: 0;
}

.contact-card:nth-child(2) {
    transform: rotate(1deg) translateX(70%);
}

.contact-card:nth-child(3) {
    transform: rotate(-0.6deg) translateX(70%);
}

.contact.in-view .contact-card:nth-child(1) {
    transform: rotate(-1deg) translateX(0);
}

.contact.in-view .contact-card:nth-child(2) {
    transform: rotate(1deg) translateX(0);
}

.contact.in-view .contact-card:nth-child(3) {
    transform: rotate(-0.6deg) translateX(0);
}

.contact-card:hover,
.contact.in-view .contact-card:hover {
    transform: rotate(0deg) translateY(-3px);
    box-shadow: 7px 7px 0 rgba(27, 77, 62, 0.22);
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-white);
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.contact-card:nth-child(2) .contact-icon {
    background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
}

.contact-card:nth-child(3) .contact-icon {
    background: linear-gradient(135deg, var(--light-blue), var(--primary-blue));
}

.contact-text {
    min-width: 0;
}

.contact-text h4 {
    color: var(--primary-blue);
    margin-bottom: var(--spacing-1);
    font-family: 'Fredoka', 'Poppins', sans-serif;
}

.contact-text p {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: var(--spacing-1);
    overflow-wrap: break-word;
}

.contact-text small {
    color: var(--gray-500);
}

.social-link {
    width: 44px;
    height: 44px;
    background-color: var(--gray-100);
    border: 3px solid transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: var(--font-size-lg);
}

/* Ícones do trilho vertical de contato: maiores, coloridos por marca,
   levemente tortos, "pendurados" na linha atrás deles */
.contact-social-rail .social-link {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
    color: var(--primary-white);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
    transform: rotate(-4deg);
}

.contact-social-rail .social-link:nth-child(2) { transform: rotate(3deg); }
.contact-social-rail .social-link:nth-child(3) { transform: rotate(-3deg); }
.contact-social-rail .social-link:nth-child(4) { transform: rotate(4deg); }

/* Precisa da mesma especificidade das regras de rotação acima (que
   vencem o :hover genérico mais fraco), senão só o 1º ícone reagia */
.contact-social-rail .social-link:hover {
    transform: rotate(0deg) scale(1.12) translateY(-2px);
}

.social-link-whatsapp { background: linear-gradient(135deg, #34d399, #128c4f); }
.social-link-instagram { background: linear-gradient(135deg, #f9a34e, #d6336c, #7048c9); }
.social-link-youtube { background: linear-gradient(135deg, #ff5a5f, #c9184a); }
.social-link-facebook { background: linear-gradient(135deg, #4d8cf5, #2456b8); }

.social-link:hover {
    transform: rotate(0deg) scale(1.12) translateY(-2px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.3);
}

/* Form */
.contact-form {
    position: relative;
    background-color: var(--primary-white);
    padding: var(--spacing-5);
    border-radius: var(--border-radius-lg);
    border: 3px solid var(--primary-blue);
    box-shadow: 8px 8px 0 rgba(27, 77, 62, 0.15);
    transform: rotate(0.6deg);
    backface-visibility: hidden;
}

.contact-form-badge {
    position: absolute;
    top: -18px;
    right: var(--spacing-6);
    background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
    color: var(--primary-white);
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-sm);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    transform: rotate(3deg);
}

.form-group {
    margin-bottom: var(--spacing-3);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-weight: 500;
    color: var(--gray-700);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-4);
    border: 2px solid var(--gray-200);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    transition: var(--transition);
    font-family: var(--font-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}

.form-message {
    margin-top: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--border-radius);
    font-weight: 500;
    display: none;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Formulario de curriculo (pagina Trabalhe Conosco) */
.resume-form-wrap {
    max-width: 780px;
    margin: 0 auto var(--spacing-8);
}

.resume-form-wrap .section-title,
.resume-form-wrap .section-description {
    margin-left: auto;
    margin-right: auto;
}

.resume-form {
    margin-top: var(--spacing-8);
    padding: var(--spacing-8);
    transform: none;
    backface-visibility: visible;
}

.resume-form .form-group label {
    font-size: var(--font-size-lg);
}

.resume-form .form-group input[type="text"],
.resume-form .form-group input[type="tel"],
.resume-form .form-group input[type="email"] {
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-lg);
}

.resume-form .form-row {
    gap: var(--spacing-6);
}

/* Dropzone de upload de currículo */
.file-dropzone {
    position: relative;
    border: 3px dashed var(--gray-300);
    border-radius: var(--border-radius-lg);
    background: var(--gray-50);
    padding: var(--spacing-8) var(--spacing-4);
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.file-dropzone:hover {
    border-color: var(--primary-red);
    background: rgba(201, 169, 97, 0.08);
}

.file-dropzone.dragover {
    border-color: var(--primary-blue);
    background: rgba(27, 77, 62, 0.08);
    transform: scale(1.01);
}

.file-dropzone.has-file {
    border-style: solid;
    border-color: var(--primary-blue);
    background: rgba(27, 77, 62, 0.06);
}

.file-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-dropzone-icon {
    font-size: 2.75rem;
    color: var(--primary-blue);
    margin-bottom: var(--spacing-3);
}

.file-dropzone-text {
    margin: 0;
    color: var(--gray-600);
    font-size: var(--font-size-lg);
}

.file-dropzone-text span {
    color: var(--primary-red);
    font-weight: 600;
    text-decoration: underline;
}

.file-dropzone-hint {
    margin: var(--spacing-2) 0 0;
    color: var(--gray-400);
    font-size: var(--font-size-sm);
}

/* Consentimento LGPD (formulario de curriculo) - checkbox alinhado com o
   texto, sem o visual "flutuante" dos outros campos do form */
.form-consent label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--gray-600);
    line-height: 1.5;
    cursor: pointer;
}

.form-consent input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin-top: 0;
    accent-color: var(--primary-blue);
    cursor: pointer;
}

.form-consent a {
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: underline;
}

.file-dropzone-filename {
    margin: var(--spacing-3) 0 0;
    font-weight: 600;
    color: var(--primary-blue);
    font-size: var(--font-size-base);
    word-break: break-all;
}

.file-dropzone-filename:empty {
    display: none;
}

/* Map */
.map-container {
    margin-top: 0;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 3px solid var(--primary-red);
    box-shadow: 8px 8px 0 rgba(27, 77, 62, 0.15);
    padding: var(--spacing-2);
    background-color: var(--primary-white);
}

.map-container iframe {
    border-radius: var(--border-radius);
    display: block;
}

.photo-showcase {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 700px;
    margin-top: var(--spacing-8);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--spacing-12) 0;
}

.photo-showcase-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.6);
    z-index: 3;
    pointer-events: none;
}

.photo-showcase-card {
    position: relative;
    z-index: 4;
    max-width: 720px;
    width: 90%;
    margin-right: 3%;
    background: rgba(48, 46, 42, 0.78);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-10) var(--spacing-12);
    color: var(--primary-white);
    text-align: center;
}

.photo-showcase-card h2 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-size: var(--font-size-3xl);
    color: var(--primary-white);
    margin-bottom: var(--spacing-2);
}

.photo-showcase-card-subtitle {
    display: block;
    font-style: italic;
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-4);
}

.photo-showcase-card p {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--spacing-6);
    text-align: center;
}

/* Crossfade em vez de deslizar: duas fotos absolutas, do mesmo tamanho, na mesma
   posicao, se sobrepondo via opacity. Nao ha como "rasgar" - nunca existe uma borda
   entre elas, so um blend por cima do outro. */
.photo-showcase-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
    animation: photoShowcaseFade 15s infinite;
    will-change: opacity;
}

.photo-showcase-slide:nth-child(2) {
    animation-delay: 5s;
}

.photo-showcase-slide:nth-child(3) {
    animation-delay: 10s;
}

@keyframes photoShowcaseFade {
    0% { opacity: 0; }
    6% { opacity: 1; }
    28% { opacity: 1; }
    34% { opacity: 0; }
    100% { opacity: 0; }
}

/* Footer */
.footer {
    background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
    color: var(--primary-white);
    padding: var(--spacing-16) 0 var(--spacing-8);
}

.footer .container {
    max-width: 100%;
    padding: 0 var(--spacing-12);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: var(--spacing-10);
    margin-bottom: var(--spacing-12);
}

.footer-section h4 {
    color: var(--primary-white);
    margin-bottom: var(--spacing-5);
    font-size: var(--font-size-xl);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-5);
}

.logo-circle-footer {
    height: 220px;
    width: 220px;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent;
}

.logo-text-footer {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.2;
}

.logo-title-footer {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--primary-white);
    letter-spacing: 0.5px;
}

.logo-subtitle-footer {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--light-red);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-brand i {
    color: var(--light-red);
    font-size: var(--font-size-3xl);
}

.footer p {
    color: var(--gray-300);
    margin-bottom: var(--spacing-4);
}

.footer-links li {
    margin-bottom: var(--spacing-3);
    color: var(--gray-300);
    line-height: 1.6;
}

.footer-links a {
    color: var(--gray-300);
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--light-red);
}

.footer-note {
    margin-top: var(--spacing-3);
    color: var(--light-red);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.footer-social {
    display: flex;
    gap: var(--spacing-3);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gray-400);
}

.footer-bottom p {
    margin-bottom: var(--spacing-2);
}

.developer-credit {
    font-size: var(--font-size-sm);
    color: var(--gray-400);
    margin-top: var(--spacing-3);
}

.footer-legal-link a {
    color: var(--gray-400);
    font-size: var(--font-size-sm);
    text-decoration: underline;
}

.footer-legal-link a:hover {
    color: var(--light-blue);
}

/* Pagina de Politica de Privacidade - conteudo textual e denso, sem o
   visual "brincalhao" (cards tortos, mascotes) do resto do site, pra
   ficar facil de ler */
.legal-content .container {
    max-width: 820px;
}

.legal-updated {
    color: var(--gray-500);
    font-size: var(--font-size-sm);
    font-style: italic;
    margin-bottom: var(--spacing-6);
}

.legal-intro {
    font-size: var(--font-size-lg);
    color: var(--gray-700);
    line-height: 1.8;
    margin-bottom: var(--spacing-10);
    padding-bottom: var(--spacing-8);
    border-bottom: 2px dashed var(--gray-200);
}

.legal-content h2 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-blue);
    font-size: var(--font-size-2xl);
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-4);
}

.legal-content h3 {
    color: var(--dark-red);
    font-size: var(--font-size-lg);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-2);
}

.legal-content p {
    color: var(--gray-700);
    line-height: 1.8;
    margin-bottom: var(--spacing-4);
}

.legal-content ul {
    margin: 0 0 var(--spacing-4);
    padding-left: var(--spacing-6);
}

.legal-content ul li {
    list-style: disc;
    color: var(--gray-700);
    line-height: 1.8;
    margin-bottom: var(--spacing-2);
}

.legal-content a {
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: underline;
}

.developer-link {
    color: var(--light-blue);
    text-decoration: none;
    transition: var(--transition);
    font-weight: 500;
}

.developer-link:hover {
    color: var(--primary-white);
    text-decoration: underline;
}

.developer-link i {
    margin-right: 5px;
    color: var(--primary-red);
}

.footer-link {
    color: var(--light-red);
    transition: var(--transition);
}

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

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: var(--primary-white);
    font-size: var(--font-size-3xl);
    cursor: pointer;
    transition: var(--transition);
}

.lightbox-close:hover {
    color: var(--light-red);
}

.lightbox img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--border-radius-lg);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--primary-white);
    font-size: var(--font-size-2xl);
    padding: var(--spacing-4);
    cursor: pointer;
    transition: var(--transition);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-nav:hover {
    background-color: var(--primary-red);
}

.lightbox-nav.prev {
    left: 20px;
}

.lightbox-nav.next {
    right: 20px;
}

/* Pintinho voador puxando faixa, tipo avião de praia cruzando o espaço
   entre o formulário de contato e o mapa (o gap de 8rem entre os dois) */
.flying-banner {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: var(--spacing-32);
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

.flying-banner-group {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transform: translateY(-50%) translateX(-130vw);
    animation: flyBannerAcross 24s linear infinite;
    will-change: transform;
}

.flying-banner-chick {
    display: inline-block;
    font-size: 2.4rem;
    line-height: 1;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.flying-banner-chick-run {
    display: inline-block;
    animation: chickRun 0.45s ease-in-out infinite;
    will-change: transform;
}

.flying-banner-rope {
    width: 34px;
    height: 2px;
    background: rgba(27, 77, 62, 0.5);
}

.flying-banner-flag {
    position: relative;
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    color: var(--primary-white);
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    padding: var(--spacing-2) var(--spacing-5);
    border-radius: 4px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
}

.flying-banner-flag::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -13px;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 13px 13px 13px 0;
    border-color: transparent var(--light-blue) transparent transparent;
}

@keyframes flyBannerAcross {
    from {
        transform: translateY(-50%) translateX(-130vw);
    }
    to {
        transform: translateY(-50%) translateX(130vw);
    }
}

/* Pulinho + gingado + esmagadinha no pouso, pra simular corrida com o emoji */
@keyframes chickRun {
    0% {
        transform: translateY(0) rotate(0deg) scaleY(1);
    }
    20% {
        transform: translateY(-9px) rotate(-9deg) scaleY(1.05);
    }
    45% {
        transform: translateY(0) rotate(5deg) scaleY(0.9);
    }
    70% {
        transform: translateY(-9px) rotate(-9deg) scaleY(1.05);
    }
    90% {
        transform: translateY(0) rotate(5deg) scaleY(0.9);
    }
    100% {
        transform: translateY(0) rotate(0deg) scaleY(1);
    }
}

@media (max-width: 768px) {
    .flying-banner {
        height: var(--spacing-24);
    }

    .flying-banner-chick {
        font-size: 1.8rem;
    }

    .flying-banner-flag {
        font-size: var(--font-size-sm);
        padding: var(--spacing-1) var(--spacing-3);
    }
}

/* Back to Top */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--primary-red);
    color: var(--primary-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--font-size-lg);
    transition: var(--transition);
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--dark-red);
    transform: translateY(-3px);
}

/* Popup de consentimento de cookies (LGPD) - card compacto que sobe
   centralizado na parte de baixo, sem ocupar a tela toda. So aparece ate o
   visitante decidir; a escolha fica salva no localStorage e nao aparece de novo */
.cookie-consent {
    position: fixed;
    left: 50%;
    bottom: var(--spacing-6);
    z-index: 2000;
    width: calc(100% - var(--spacing-8));
    max-width: 400px;
    background: var(--dark-blue);
    padding: var(--spacing-5);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%) translateY(150%);
    transition: transform 0.4s ease, opacity 0.25s ease, visibility 0.25s ease;
}

.cookie-consent.visible {
    transform: translateX(-50%) translateY(0);
}

/* Menu mobile aberto: esconde o aviso pra ele nao tampar os ultimos itens do menu
   (classe nav-open ligada no body pelo js/script.js); volta quando o menu fecha */
body.nav-open .cookie-consent {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cookie-consent-text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.cookie-consent-text a {
    color: var(--light-red);
    font-weight: 600;
    text-decoration: underline;
}

.cookie-consent-buttons {
    display: flex;
    gap: var(--spacing-3);
}

.cookie-consent-buttons .btn {
    flex: 1;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.cookie-consent-accept {
    background: linear-gradient(135deg, var(--light-red), var(--primary-red));
    color: var(--dark-blue);
    border: none;
}

.cookie-consent-accept:hover {
    background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
    color: var(--primary-white);
}

@media (max-width: 480px) {
    .cookie-consent {
        left: var(--spacing-4);
        right: var(--spacing-4);
        bottom: var(--spacing-4);
        width: auto;
        max-width: none;
        transform: translateY(150%);
    }

    .cookie-consent.visible {
        transform: translateY(0);
    }
}

/* Caixinha de redes sociais flutuante - foto real da caixa de pintinho */
.social-float {
    position: fixed;
    left: var(--spacing-4);
    bottom: var(--spacing-6);
    z-index: 999;
    filter: drop-shadow(2px 4px 3.5px rgba(0, 0, 0, 0.4));
}

.social-float-box {
    position: relative;
    width: 75px;
    height: 62px;
}

.social-float-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

/* Tiras da propria foto da caixa, recortadas e coladas na FRENTE dos icones -
   criam a oclusao real (a parede "tampa" parte da bolinha, em vez dela flutuar por cima) */
.social-float-occlude {
    position: absolute;
    left: 0;
    width: 75px;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Divisoria do meio: uma faixa cheia (borda a borda) furava as paredes anguladas da
   caixa. Em vez disso, recorta so a janela embaixo de cada icone de tras (bem longe
   das paredes), usando a mesma foto pra manter a textura identica ao resto da caixa. */
.social-float-occlude-divider {
    top: 33%;
    height: 12%;
    background-image: url('../images/caixa_oficial_final.png');
    background-size: 75px 62px;
    background-position: 0 -20.46px;
    z-index: 2;
}

.social-float-occlude-divider-left {
    clip-path: inset(0 58% 0 8%);
}

.social-float-occlude-divider-right {
    clip-path: inset(0 15% 0 50%);
}

/* Base da caixa: tampa a fileira da frente, que fica por cima de tudo o resto */
.social-float-occlude-front {
    top: 68%;
    height: 32%;
    background-image: url('../images/caixa_oficial_final.png');
    background-size: 75px 62px;
    background-position: 0 -42.15px;
    z-index: 5;
}

/* Icones em formato de esfera brilhante, sentados dentro dos compartimentos */
.social-float-icon {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow:
        inset -2.5px -3.5px 5px rgba(0, 0, 0, 0.35),
        inset 2px 2.5px 3.5px rgba(255, 255, 255, 0.2),
        0 2.5px 4px rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.social-float-icon::before {
    content: '';
    position: absolute;
    top: 14%;
    left: 18%;
    width: 26%;
    height: 20%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.social-float-icon:hover {
    transform: translate(-50%, -50%) scale(1.18) translateY(-3px);
    box-shadow:
        inset -2.5px -3.5px 5px rgba(0, 0, 0, 0.35),
        inset 2px 2.5px 3.5px rgba(255, 255, 255, 0.2),
        0 6px 9px rgba(0, 0, 0, 0.45);
    z-index: 8;
}

/* Fileira de tras: um pouco menor, encaixada nos compartimentos de tras - fica ATRAS da divisoria */
.social-float-icon-back {
    width: 20px;
    height: 20px;
    font-size: 7px;
    top: 20%;
    z-index: 1;
}

.social-float-icon-back.social-float-icon-left { left: 25.5%; }
.social-float-icon-back.social-float-icon-right { left: 67.7%; }

/* Fileira da frente: um pouco maior, encaixada nos compartimentos da frente - fica NA FRENTE da divisoria */
.social-float-icon-front {
    width: 24px;
    height: 24px;
    font-size: 8px;
    top: 59%;
    z-index: 4;
}

.social-float-icon-front.social-float-icon-left { left: 24.8%; }
.social-float-icon-front.social-float-icon-right { left: 70.7%; }

.social-float-icon-whatsapp { background: radial-gradient(circle at 38% 32%, #50c888, #25a35a 55%, #0f6b39 100%); }
.social-float-icon-youtube { background: radial-gradient(circle at 38% 32%, #f36068, #e8323d 55%, #a3121c 100%); }
.social-float-icon-facebook { background: radial-gradient(circle at 38% 32%, #5d8ee7, #3568d4 55%, #1c3f8f 100%); }
.social-float-icon-instagram { background: radial-gradient(circle at 38% 32%, #ee8773, #e0466e 45%, #7d3bc9 100%); }

/* Tablet / tela de toque acima de 768px (onde a caixinha aparece): icones de 20-24px sao
   pequenos demais pro dedo, entao a caixinha inteira cresce mantendo a proporcao (a
   ilusao de oclusao da foto continua alinhada). Com mouse nada muda. */
@media (pointer: coarse) and (min-width: 769px) {
    .social-float-box {
        transform: scale(1.75);
        transform-origin: left bottom;
    }
}

/* ==========================================================================
   Pagina "Cuidados com os Pintinhos" - manual de boas praticas
   ========================================================================== */
.section {
    padding: var(--spacing-16) 0;
}

.section-intro {
    max-width: 780px;
    margin: 0 auto var(--spacing-12);
    text-align: center;
}

.section-intro .section-title {
    font-family: 'Fredoka', 'Poppins', sans-serif;
}

.section-description {
    color: var(--gray-600);
    font-size: var(--font-size-lg);
    line-height: 1.7;
    margin-bottom: var(--spacing-3);
}

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

/* Titulo + texto do "Manual de Boas Praticas" alinhados a esquerda,
   comecando na mesma linha que os cards em vez de centralizados */
.care-manual-section .section-intro {
    /* Largura das 2 primeiras colunas do care-grid (3 colunas, gap spacing-8),
       pra sobrar espaco livre em cima do 3o card pra uma arte depois */
    max-width: calc((2 * 100% - var(--spacing-8)) / 3);
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

@media (max-width: 1099px) {
    .care-manual-section .section-intro {
        max-width: 100%;
    }
}

.care-manual-section .section-title {
    text-align: left;
}

.care-manual-section .section-description {
    text-align: justify;
}

.care-manual-section .container {
    position: relative;
}

/* Pintinho na caixa, no espaco vazio em cima do 3o card */
.care-manual-mascot {
    position: absolute;
    top: -10px;
    right: 30px;
    width: 260px;
    height: auto;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(8px 12px 10px rgba(0, 0, 0, 0.3));
}

@media (max-width: 1099px) {
    .care-manual-mascot {
        display: none;
    }
}

/* Titulo + texto de "Nossa Area de Cobertura" alinhados a esquerda, com
   espaco livre a direita pra uma arte de pintinho depois */
.coverage-intro-section .section-intro {
    max-width: 60%;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

@media (max-width: 1099px) {
    .coverage-intro-section .section-intro {
        max-width: 100%;
    }
}

.coverage-intro-section .section-title {
    text-align: left;
}

.coverage-intro-section .section-description {
    text-align: justify;
}

.coverage-intro-wrap {
    position: relative;
}

/* Titulo + texto de "Por Que Trabalhar Com a Gente" alinhados a esquerda, com
   largura limitada as 2 primeiras colunas do care-grid, sobrando espaco livre
   em cima do 3o card pra uma arte depois */
.trabalhe-intro-section .section-intro {
    max-width: calc((2 * 100% - var(--spacing-8)) / 3);
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

@media (max-width: 1099px) {
    .trabalhe-intro-section .section-intro {
        max-width: 100%;
    }
}

.trabalhe-intro-section .section-title {
    text-align: left;
}

.trabalhe-intro-section .section-description {
    text-align: justify;
}

/* Titulo + texto da Nutrição Animal alinhados a esquerda, ao lado da arte do
   pintinho (flex, altura do bloco = maior dos dois, sem vazio sobrando).
   Card e texto ficam rente a esquerda (sem auto-centralizar) pra as bordas
   esquerdas baterem entre si. */
.nutricao-intro-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-20);
    margin-bottom: var(--spacing-8);
}

.nutricao-intro-section .section-intro {
    max-width: 560px;
    margin: 0;
    text-align: left;
}

.nutricao-building-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 999px;
    background: var(--light-red);
    color: var(--dark-blue);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.nutricao-intro-section .section-title {
    text-align: left;
}

.nutricao-intro-section .section-description {
    text-align: justify;
}

.nutricao-mascot {
    flex-shrink: 0;
    width: 280px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(10px 14px 12px rgba(0, 0, 0, 0.25));
}

@media (max-width: 900px) {
    .nutricao-intro-wrap {
        flex-direction: column;
        gap: var(--spacing-4);
        margin-bottom: var(--spacing-6);
    }

    .nutricao-intro-section .section-intro {
        max-width: 100%;
    }

    .nutricao-mascot {
        display: none;
    }
}

.trabalhe-intro-wrap {
    position: relative;
}

.trabalhe-mascot {
    position: absolute;
    top: 50%;
    right: var(--spacing-4);
    transform: translateY(-50%);
    width: 260px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(10px 14px 12px rgba(0, 0, 0, 0.3));
}

.coverage-mascot {
    position: absolute;
    top: 50%;
    right: calc(var(--spacing-4) + 20px);
    transform: translateY(-50%);
    width: 300px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(10px 14px 12px rgba(0, 0, 0, 0.3));
}

@media (max-width: 1099px) {
    .trabalhe-mascot,
    .coverage-mascot {
        display: none;
    }
}

/* Grid de cuidados essenciais */
.care-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-16);
}

.care-card {
    background: var(--primary-white);
    border: 3px solid var(--primary-red);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.care-card:hover {
    transform: translateY(-6px);
    border-color: var(--dark-red);
    box-shadow: var(--shadow-xl);
}

.care-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    color: var(--primary-white);
    border-radius: 50%;
    font-size: var(--font-size-2xl);
    box-shadow: 0 6px 14px rgba(27, 77, 62, 0.3);
}

.care-title {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-blue);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-4);
}

.care-content p {
    margin-bottom: var(--spacing-2);
    color: var(--gray-700);
}

.care-content p strong {
    color: var(--primary-blue);
}

.care-intro {
    font-style: italic;
    color: var(--gray-600);
    padding-bottom: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    border-bottom: 1px dashed var(--gray-200);
}

.care-tips {
    list-style: none;
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px dashed var(--gray-200);
}

.care-tips li {
    position: relative;
    padding-left: var(--spacing-6);
    margin-bottom: var(--spacing-2);
    color: var(--gray-600);
    line-height: 1.5;
}

.care-tips li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--light-blue);
    font-weight: 700;
}

/* Videos do canal */
.videos-section {
    margin-bottom: var(--spacing-16);
}

.videos-section .section-title {
    font-family: 'Fredoka', 'Poppins', sans-serif;
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-8);
    margin-top: var(--spacing-8);
}

.video-card {
    background: var(--primary-white);
    border: 3px solid var(--primary-red);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-3);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.video-card:hover {
    transform: translateY(-6px);
    border-color: var(--dark-red);
    box-shadow: var(--shadow-xl);
}

.video-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Sinais de alerta */
.alert-section {
    background: rgba(196, 60, 60, 0.06);
    border: 2px dashed rgba(196, 60, 60, 0.35);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-12) var(--spacing-8);
    margin-bottom: var(--spacing-16);
}

.alert-section .section-title {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: #a83232;
}

.alert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
    margin: var(--spacing-8) 0;
}

.alert-card.warning {
    background: var(--primary-white);
    border: 2px solid #d16a6a;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.alert-card.warning i {
    font-size: var(--font-size-3xl);
    color: #c43c3c;
    margin-bottom: var(--spacing-3);
}

.alert-card.warning h4 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: #a83232;
    margin-bottom: var(--spacing-3);
}

.alert-card.warning ul {
    list-style: none;
    text-align: left;
}

.alert-card.warning li {
    position: relative;
    padding-left: var(--spacing-5);
    margin-bottom: var(--spacing-2);
    color: var(--gray-600);
}

.alert-card.warning li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #c43c3c;
    font-weight: 700;
}

.alert-cta {
    background: rgba(196, 60, 60, 0.12);
    border-left: 4px solid #c43c3c;
    border-radius: var(--border-radius);
    padding: var(--spacing-5) var(--spacing-6);
}

.alert-cta p {
    color: #7a2424;
    line-height: 1.6;
}

/* Dicas de ouro */
.tips-section {
    margin-bottom: var(--spacing-8);
}

.tips-section .section-title {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    margin-bottom: var(--spacing-10);
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
}

.tip-card {
    position: relative;
    background: var(--primary-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    padding-top: var(--spacing-8);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

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

.tip-number {
    position: absolute;
    top: -18px;
    left: var(--spacing-6);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--light-red), var(--primary-red) 60%, var(--dark-red));
    color: var(--dark-blue);
    font-weight: 700;
    font-size: var(--font-size-lg);
    border-radius: 50%;
    border: 3px solid var(--primary-white);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.tip-card h4 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-blue);
    margin-bottom: var(--spacing-3);
}

.tip-card p {
    color: var(--gray-600);
    line-height: 1.6;
}

.tip-ebook-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--spacing-3);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 1px dashed var(--gray-300);
}

.ebook-teaser-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
    margin-top: var(--spacing-10);
    padding: var(--spacing-6);
    background: linear-gradient(135deg, var(--light-red), var(--primary-red) 70%, var(--dark-red));
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius-lg);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
}

.ebook-teaser-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: var(--font-size-2xl);
    color: var(--primary-white);
}

.ebook-teaser-text {
    flex: 1;
}

.ebook-teaser-text h3 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-white);
    margin-bottom: var(--spacing-1);
}

.ebook-teaser-text p {
    color: var(--primary-white);
    line-height: 1.6;
    margin: 0;
}

.ebook-teaser-badge {
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.2);
    color: var(--primary-white);
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-sm);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--border-radius);
    border: 2px dashed rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .ebook-teaser-banner {
        flex-direction: column;
        text-align: center;
    }
}

.ebook-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--light-red), var(--primary-red) 70%, var(--dark-red));
    color: var(--primary-white);
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.ebook-hero-eyebrow-dark {
    background: rgba(0, 0, 0, 0.2);
    border: 2px dashed rgba(255, 255, 255, 0.6);
}

.ebook-cross-sell-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    width: fit-content;
    max-width: 100%;
    margin: var(--spacing-6) auto 0;
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--gray-50);
    border: 2px dashed var(--primary-red);
    border-radius: var(--border-radius);
    color: var(--gray-800);
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-align: center;
}

.ebook-cross-sell-note i {
    color: var(--primary-red);
    font-size: var(--font-size-2xl);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .ebook-cross-sell-note {
        font-size: var(--font-size-base);
    }
}

.cta-secondary-link {
    position: relative;
    z-index: 1;
    margin-top: var(--spacing-4);
}

.cta-secondary-link a {
    color: var(--light-red);
    font-size: var(--font-size-sm);
    text-decoration: underline;
}

.cta-secondary-link a:hover {
    color: var(--primary-white);
}

/* Area de cobertura (pagina Areas Atendidas) */
.coverage-highlight {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    background: var(--primary-white);
    border: 3px solid var(--primary-blue);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-16);
    box-shadow: var(--shadow-md);
}

.coverage-highlight-icon {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    color: var(--primary-white);
    border-radius: 50%;
    font-size: var(--font-size-3xl);
    box-shadow: 0 6px 14px rgba(27, 77, 62, 0.3);
}

.coverage-highlight-text h3 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-blue);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-2);
}

.coverage-highlight-text p {
    color: var(--gray-600);
    line-height: 1.6;
}

/* Cards de entrega */
.delivery-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-16);
}

.delivery-card {
    background: var(--primary-white);
    border: 3px solid var(--primary-red);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.delivery-card:hover {
    transform: translateY(-6px);
    border-color: var(--dark-red);
    box-shadow: var(--shadow-xl);
}

.delivery-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    color: var(--primary-white);
    border-radius: 50%;
    font-size: var(--font-size-xl);
    box-shadow: 0 6px 14px rgba(27, 77, 62, 0.3);
}

.delivery-card h3 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-blue);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
}

.delivery-card p {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* Politicas de venda e entrega (pagamento + frete) */
.policies-section {
    margin-bottom: var(--spacing-16);
}

.policies-section .section-title {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    margin-bottom: var(--spacing-10);
}

.policy-group {
    margin-bottom: var(--spacing-10);
}

.policy-group:last-child {
    margin-bottom: 0;
}

.policy-group-title {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-blue);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-6);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.policy-group-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-red);
    color: var(--primary-white);
    font-size: var(--font-size-base);
}

.payment-grid,
.freight-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
}

.payment-card,
.freight-card {
    background: var(--primary-white);
    border: 2px solid var(--gray-200);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.payment-card:hover,
.freight-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.payment-card-icon,
.freight-card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--font-size-xl);
    color: var(--primary-white);
    margin-bottom: var(--spacing-4);
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
}

.freight-card.is-free {
    border-color: var(--light-blue);
}

.freight-card.is-quote {
    border-color: var(--primary-red);
}

.freight-card.is-quote .freight-card-icon {
    background: linear-gradient(135deg, var(--light-red), var(--dark-red));
}

.payment-card h4,
.freight-card h4 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-blue);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
}

.payment-card p,
.freight-card p {
    color: var(--gray-600);
    line-height: 1.6;
}

/* Aviso de outras localidades */
/* Duvidas frequentes sobre entrega - substitui a antiga secao "sua cidade
   nao esta na lista", que prometia uma lista de cidades que nunca existiu */
.delivery-faq {
    background: var(--secondary-white);
    border: 2px dashed var(--gray-300);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-10);
    margin-bottom: var(--spacing-16);
}

.delivery-faq .section-title {
    margin-bottom: var(--spacing-8);
}

.delivery-faq-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6) var(--spacing-8);
    margin-bottom: var(--spacing-8);
}

.delivery-faq-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
}

.delivery-faq-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    color: var(--primary-white);
    border-radius: 50%;
    font-size: var(--font-size-lg);
    box-shadow: 0 6px 14px rgba(27, 77, 62, 0.3);
}

.delivery-faq-text h4 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-blue);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-1);
}

.delivery-faq-text p {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin: 0;
}

.location-cta-buttons {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}

.location-cta-buttons .btn-outline {
    color: var(--primary-blue);
    border-color: var(--primary-blue);
    backdrop-filter: none;
}

.location-cta-buttons .btn-outline:hover {
    background-color: var(--primary-blue);
    color: var(--primary-white);
    border-color: var(--primary-blue);
}

/* Timeline do processo de entrega */
.process-section {
    margin-bottom: var(--spacing-4);
}

.process-section .section-title {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    margin-bottom: var(--spacing-10);
}

.process-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-8);
}

.process-step {
    position: relative;
    background: var(--primary-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-6);
    padding-top: var(--spacing-8);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.process-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.process-number {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--light-red), var(--primary-red) 60%, var(--dark-red));
    color: var(--dark-blue);
    font-weight: 700;
    border-radius: 50%;
    border: 3px solid var(--primary-white);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.process-icon {
    width: 56px;
    height: 56px;
    margin: var(--spacing-2) auto var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
    color: var(--primary-white);
    border-radius: 50%;
    font-size: var(--font-size-xl);
}

.process-step h4 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-blue);
    margin-bottom: var(--spacing-2);
}

.process-step p {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* CTA final da pagina */
/* CTA final - cartao flutuante verde, com cantos arredondados, sombra,
   textura de bolinhas e o mesmo balanco suave (tipo folha) do cta-gold */
.cta-section {
    padding: var(--spacing-16) var(--spacing-4);
}

.cta-section .container {
    position: relative;
    overflow: hidden;
    max-width: 1100px;
    background: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary-blue) 55%, var(--light-blue) 100%);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
    padding: var(--spacing-16) var(--spacing-6);
    text-align: center;
    transform-origin: top center;
    animation: ctaLeafSway 7s ease-in-out infinite;
}

.cta-section .container::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(201, 169, 97, 0.18) 2px, transparent 2px);
    background-size: 28px 28px;
    pointer-events: none;
}

.cta-title {
    position: relative;
    z-index: 1;
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-white);
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-4);
}

.cta-text {
    position: relative;
    z-index: 1;
    color: var(--light-red);
    font-size: var(--font-size-lg);
    max-width: 700px;
    margin: 0 auto var(--spacing-8);
    line-height: 1.7;
}

.btn-light {
    position: relative;
    z-index: 1;
    background: var(--primary-white);
    color: var(--primary-blue);
}

.btn-light:hover {
    background: var(--gray-100);
    transform: translateY(-2px);
}

.btn-lg {
    padding: var(--spacing-5) var(--spacing-10);
    font-size: var(--font-size-xl);
}

/* ==========================================================================
   Pagina "Depoimentos de Clientes"
   ========================================================================== */

/* Faixa de numeros no topo */
.stats-section {
    background: transparent;
    padding: var(--spacing-10) 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
}

/* Card quadrado padrao, igual ao usado no resto do site (care-card,
   payment-card, tip-card) */
.stats-section .stat-card {
    background: var(--primary-white);
    border: 3px solid var(--primary-red);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    text-align: center;
}

.stats-section .stat-card:hover {
    transform: translateY(-6px);
    border-color: var(--dark-red);
    box-shadow: var(--shadow-xl);
}

.stats-section .stat-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--primary-white);
    font-size: var(--font-size-2xl);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.stat-icon-1 { background: linear-gradient(135deg, var(--light-red), var(--primary-red) 60%, var(--dark-red)); }
.stat-icon-2 { background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue)); }
.stat-icon-3 { background: linear-gradient(135deg, var(--light-blue), var(--primary-blue) 70%, var(--dark-blue)); }

.stats-section .stat-number {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-size: var(--font-size-5xl);
    color: var(--primary-blue);
    margin-bottom: var(--spacing-1);
}

.stats-section .stat-label {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* Grid de depoimentos - 3 colunas. Os 2 ultimos depoimentos (4o e 5o) ficam
   explicitamente embaixo da 1a e 3a coluna, deixando a coluna do meio vazia
   de proposito pra uma arte de pintinho */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-16);
}

.testimonial-card {
    position: relative;
    background: var(--primary-white);
    border: 3px solid var(--primary-red);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.testimonial-card:nth-child(4) {
    grid-column: 1;
}

.testimonial-card:nth-child(5) {
    grid-column: 3;
}

/* Pintinho andando, no espaco vazio entre os 2 depoimentos de baixo */
.testimonials-mascot {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    align-self: end;
    width: 300px;
    height: auto;
    margin-bottom: 20px;
    pointer-events: none;
    filter: drop-shadow(8px 12px 10px rgba(0, 0, 0, 0.25));
}

@media (max-width: 1024px) {
    .testimonials-mascot {
        display: none;
    }
}

.testimonial-card:hover {
    transform: translateY(-6px);
    border-color: var(--dark-red);
    box-shadow: var(--shadow-xl);
}

.testimonial-card.featured {
    border-color: var(--primary-blue);
    background: linear-gradient(180deg, rgba(27, 77, 62, 0.04), var(--primary-white) 25%);
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.testimonial-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka', 'Poppins', sans-serif;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary-white);
    line-height: 1;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.testimonial-avatar-1 { background: linear-gradient(135deg, var(--light-red), var(--primary-red) 60%, var(--dark-red)); }
.testimonial-avatar-2 { background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue)); }
.testimonial-avatar-3 { background: linear-gradient(135deg, var(--light-blue), var(--primary-blue)); }
.testimonial-avatar-4 { background: linear-gradient(135deg, var(--primary-red), var(--dark-red)); }
.testimonial-avatar-5 { background: linear-gradient(135deg, var(--primary-blue), var(--light-blue)); }

.testimonial-name {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-blue);
    font-size: var(--font-size-lg);
    margin-bottom: 2px;
}

.testimonial-role {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-1);
}

.testimonial-rating i {
    color: var(--primary-red);
    font-size: var(--font-size-sm);
}

.testimonial-content {
    position: relative;
    flex: 1;
    margin-bottom: var(--spacing-4);
}

.quote-icon {
    color: var(--gray-200);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-2);
    display: block;
}

.testimonial-text {
    color: var(--gray-700);
    line-height: 1.7;
    font-style: italic;
}

.testimonial-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    padding-top: var(--spacing-4);
    border-top: 1px dashed var(--gray-200);
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

.testimonial-meta i {
    color: var(--light-blue);
    margin-right: 4px;
}

/* Depoimentos - Carrossel automatico (Home) */
.home-testimonials {
    padding: var(--spacing-16) 0;
}

.testi-carousel {
    position: relative;
}

.testi-carousel-viewport {
    overflow: hidden;
    padding: var(--spacing-4) 0;
}

.testi-carousel-track {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-6);
    transition: transform 0.6s ease;
    will-change: transform;
}

.testi-slide {
    flex: 0 0 auto;
    width: min(360px, 78vw);
    min-height: 320px;
    opacity: 0.35;
    transform: scale(0.85);
    transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s ease;
    cursor: pointer;
    z-index: 1;
}

.testi-slide.active {
    opacity: 1;
    transform: scale(1);
    cursor: default;
    z-index: 2;
}

.testi-slide:hover {
    transform: scale(0.9);
    border-color: var(--dark-red);
}

.testi-slide.active:hover {
    transform: scale(1);
}

.testi-carousel-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-8);
}

.testi-dot {
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 50%;
    background: var(--gray-300);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testi-dot:hover {
    background: var(--light-red);
}

.testi-dot.active {
    background: var(--primary-red);
    border-color: var(--dark-red);
    transform: scale(1.35);
}

.testi-carousel-cta {
    text-align: center;
    margin-top: var(--spacing-8);
}

/* Depoimentos em video */
.video-testimonials {
    margin-bottom: var(--spacing-16);
}

.video-testimonials .section-title {
    font-family: 'Fredoka', 'Poppins', sans-serif;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
}

.video-testimonials .video-card {
    background: var(--gray-100);
    border: 3px dashed var(--gray-300);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.video-thumbnail {
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    padding: var(--spacing-6);
    text-align: center;
}

.video-thumbnail i {
    font-size: 3rem;
    color: var(--gray-400);
}

.video-thumbnail p {
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

/* Selo de garantia */
.guarantee-section {
    background: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary-blue) 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-10);
    margin-bottom: var(--spacing-8);
}

.guarantee-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}

.guarantee-icon {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--light-red), var(--primary-red) 60%, var(--dark-red));
    color: var(--dark-blue);
    border-radius: 50%;
    font-size: var(--font-size-4xl);
    border: 4px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.guarantee-text h3 {
    font-family: 'Fredoka', 'Poppins', sans-serif;
    color: var(--primary-white);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-3);
}

.guarantee-text p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
}

.guarantee-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-2) var(--spacing-6);
}

.guarantee-list li {
    color: var(--primary-white);
    font-weight: 600;
}

.guarantee-list i {
    color: var(--light-red);
    margin-right: var(--spacing-2);
}

@media (max-width: 1024px) {
    .care-grid,
    .alert-grid,
    .tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .testimonial-card:nth-child(4),
    .testimonial-card:nth-child(5) {
        grid-column: auto;
    }

    .guarantee-content {
        flex-direction: column;
        text-align: center;
    }

    .guarantee-list {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .delivery-info-grid,
    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
    }

    .nutricao-types-grid,
    .nutricao-price-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .care-grid,
    .alert-grid,
    .tips-grid,
    .videos-grid,
    .stats-grid,
    .video-grid {
        grid-template-columns: 1fr;
    }

    .nutricao-types-grid,
    .nutricao-price-grid {
        grid-template-columns: 1fr;
    }

    .nutricao-preview-card {
        padding: var(--spacing-6) var(--spacing-4);
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-card:nth-child(4),
    .testimonial-card:nth-child(5) {
        grid-column: auto;
    }

    .alert-section {
        padding: var(--spacing-8) var(--spacing-4);
    }

    .guarantee-section {
        padding: var(--spacing-6);
    }

    .delivery-info-grid,
    .payment-grid,
    .freight-grid,
    .delivery-faq-list,
    .process-timeline {
        grid-template-columns: 1fr;
    }

    .coverage-highlight {
        flex-direction: column;
        text-align: center;
    }
}


/* Responsividade */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-6);
    }
    
    .about-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    .service-card {
        max-width: calc((100% - var(--spacing-6)) / 2);
    }

    .about-image {
        max-height: none;
    }

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

    .footer-content > .footer-section:first-child {
        grid-column: 1 / -1;
    }

    .footer .container {
        padding: 0 var(--spacing-6);
    }
}

/* Menu mobile (hamburguer) - usado ate uma largura bem alta de proposito.
   Nao da pra caber marca completa (com subtitulo) + menu + botao numa
   linha so sem cortar nada em telas de notebook comuns, e "encolher" tudo
   pra caber causava mais bug do que resolvia (subtitulo sumindo, altura
   do header variando e desalinhando os cliques do menu). Hamburguer com
   a marca inteira, sem risco de sobreposicao, ate telas bem largas. */
@media (max-width: 1850px) {
    /* Navbar */
    .navbar {
        padding: var(--spacing-3) 0;
    }

    .navbar .container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--spacing-3);
    }

    .navbar .btn-primary {
        display: none;
    }

    .nav-brand {
        margin-right: 0;
        margin-left: 0;
        gap: var(--spacing-2);
        flex-shrink: 0;
        order: 1;
    }

    .nav-toggle {
        display: flex;
        order: 2;
        flex-shrink: 0;
        margin-left: auto;
    }

    .logo-circle {
        height: 50px;
        width: 50px;
        flex-shrink: 0;
        background-color: white;
        border-radius: 50%;
        padding: 2px;
    }

    .logo-text {
        overflow: visible;
        white-space: nowrap;
        display: flex;
        flex-direction: column;
    }

    .logo-title {
        font-size: 14px;
        white-space: nowrap;
        line-height: 1.2;
    }

    .logo-subtitle {
        font-size: 10px;
        white-space: nowrap;
        line-height: 1.2;
    }

    .nav-menu {
        /* Altura real do header fixo neste modo (padding 12px x2 + logo 50px);
           o painel abre exatamente embaixo dele, sem fresta */
        --header-h: 74px;
        position: fixed;
        top: var(--header-h);
        left: -100%;
        right: 0;
        background-color: var(--primary-white);
        flex-direction: column;
        padding: var(--spacing-6);
        box-shadow: var(--shadow-xl);
        transition: left 0.3s ease;
        width: 100%;
        gap: var(--spacing-4);
        z-index: 999;
        /* Com o submenu aberto o painel passa da altura de celulares baixos: rola por dentro */
        max-height: calc(100vh - var(--header-h));
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-link {
        font-size: var(--font-size-lg);
        padding: var(--spacing-3) 0;
        text-align: center;
    }

    /* Submenu "Mais": no toque nao existe :hover, entao vira uma sanfona dentro do
       painel, aberta pela classe .active (ligada no js/script.js) */
    .nav-dropdown .nav-link {
        justify-content: center;
    }

    .nav-dropdown:hover .nav-link i {
        transform: none;
    }

    .nav-dropdown.active .nav-link i {
        transform: rotate(180deg);
    }

    .nav-dropdown .dropdown-menu,
    .nav-dropdown:hover .dropdown-menu {
        position: static;
        transform: none;
        min-width: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
        display: none;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .nav-dropdown.active .dropdown-menu {
        display: block;
        margin-top: var(--spacing-2);
        background-color: var(--secondary-white);
        border-radius: var(--border-radius);
    }

    .dropdown-link,
    .dropdown-link:hover {
        padding: var(--spacing-3) var(--spacing-4);
        text-align: center;
        min-height: 44px;
    }
}

@media (max-width: 768px) {
    /* Container */
    .container {
        padding: 0 var(--spacing-4);
    }

    .footer .container {
        padding: 0 var(--spacing-4);
    }

    .btn-primary {
        margin-right: 0;
        width: 100%;
    }

    /* Hero */
    .hero {
        height: 100vh;
        min-height: 100vh;
        padding: var(--spacing-16) 0 var(--spacing-8) 0;
        align-items: center;
    }
    
    .hero-content {
        width: 100%;
    }
    
    .hero-text-content {
        max-width: 100%;
        padding: var(--spacing-4);
        margin-left: 0;
        margin-top: 0;
    }
    
    .hero-main-title {
        font-size: var(--font-size-3xl);
        padding: var(--spacing-3) var(--spacing-4);
    }
    
    .hero-text-content p {
        font-size: var(--font-size-sm);
        padding: var(--spacing-3) var(--spacing-4);
        line-height: 1.5;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: var(--spacing-3);
        padding: 0 var(--spacing-4);
    }

    .hero-trust {
        margin-left: 0;
        padding-left: var(--spacing-4);
    }

    .btn {
        width: 100%;
        max-width: 280px;
        font-size: var(--font-size-base);
        padding: var(--spacing-3) var(--spacing-6);
        min-height: 44px;
        /* Textos longos (ex: "Enviar Curriculo pelo WhatsApp") quebram em 2 linhas
           dentro do botao em vez de vazar pra fora dele */
        white-space: normal;
        text-align: center;
    }
    
    /* Sections */
    .section-title {
        font-size: var(--font-size-2xl);
    }

    /* Estes dois titulos tem seletor mais especifico (48px no desktop) e ficavam
       presos nos 48px no celular - aqui continuam maiores que o titulo comum, mas encolhem */
    .services .section-title,
    .gallery .section-title {
        font-size: var(--font-size-3xl);
    }
    
    .section-subtitle {
        font-size: var(--font-size-base);
    }
    
    /* About */
    .about {
        overflow: visible;
    }

    /* No desktop o "Sobre o Zé" flutua absoluto e a foto/mascote da cerca
       ocupam 37% reservado no container - no mobile isso so sobrepoe o
       texto, entao aqui a gente desliga os dois e volta o layout pra
       coluna unica normal. */
    .about-title-center {
        position: static;
        font-size: var(--font-size-3xl);
        transform: none;
        text-align: center;
        margin-bottom: var(--spacing-6);
    }

    .about::after {
        display: none;
    }

    .about .container {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    .about-content {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .about-text {
        padding-left: 0;
        padding-top: 0;
    }

    .about-image {
        max-height: none;
    }

    .founder-seal {
        width: 95px;
        height: 115px;
        right: 2%;
    }

    .founder-seal-medal {
        width: 95px;
        height: 95px;
    }

    .founder-seal-check {
        font-size: 1.1rem;
    }

    .founder-seal-label {
        font-size: 0.5rem;
    }

    .founder-seal-ribbon {
        top: 60px;
        width: 24px;
        height: 48px;
    }

    .about-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    /* Services */
    /* Mesmo problema do Sobre: mascote de 480px absoluto e 40% de padding
       reservado pra ele - no mobile so sobra em cima dos cards. */
    .services::before {
        display: none;
    }

    .services .container {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    .service-card {
        max-width: 100%;
        flex-basis: 100%;
    }

    /* Differential Mobile */
    .differential {
        height: 480px;
        padding: var(--spacing-6) 0;
        background-attachment: scroll;
    }

    .differential-card {
        max-width: none;
        width: auto;
        margin-left: var(--spacing-4);
        margin-right: var(--spacing-4);
        padding: var(--spacing-6);
    }

    .differential-card h2 {
        font-size: var(--font-size-2xl);
    }

    /* Vitrine de fotos Mobile - mesmo tratamento do differential, mas com altura
       flexivel pro cartao de texto nunca ser cortado */
    .photo-showcase {
        height: auto;
        min-height: 480px;
        padding: var(--spacing-8) 0;
    }

    .photo-showcase-card {
        width: calc(100% - var(--spacing-8));
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        padding: var(--spacing-6);
    }

    .photo-showcase-card h2 {
        font-size: var(--font-size-2xl);
    }

    /* Gallery - Coverflow Mobile */
    .coverflow-container {
        height: 380px;
    }

    .coverflow-item img {
        max-width: 280px;
        max-height: 320px;
        border-width: 8px;
        border-bottom-width: 32px;
    }

    .coverflow-nav {
        width: 44px;
        height: 44px;
        margin-top: -22px;
        font-size: var(--font-size-base);
    }

    .coverflow-prev {
        left: -4px;
    }

    .coverflow-next {
        right: -4px;
    }

    /* Page Header - Mobile */
    .page-header {
        padding: 110px 0 60px;
    }
    
    .page-header-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    .page-header h1 {
        font-size: var(--font-size-3xl);
    }
    
    .page-header p {
        font-size: var(--font-size-lg);
        padding: 0 var(--spacing-4);
    }

    /* Banner de foto no cabecalho (contato, nossos-pintinhos, cuidados,
       depoimentos, areas-atendidas) - sem isso a altura fixa de 600px
       tomava quase a tela toda num celular */
    .page-header-photo {
        height: 380px;
    }

    .page-header-photo-caption {
        margin-top: 60px;
        padding: 0 var(--spacing-4);
    }

    .page-header-photo-title {
        font-size: var(--font-size-3xl);
    }

    .page-header-photo-subtitle {
        font-size: var(--font-size-base);
    }

    /* Breeds Section - Mobile */
    .breeds-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .breed-card {
        flex-direction: column;
    }
    
    .breed-image {
        width: 100%;
        min-width: 100%;
    }

    .breed-content {
        padding: var(--spacing-6);
    }
    
    .breed-content h3 {
        font-size: var(--font-size-xl);
    }
    
    .breed-content p {
        font-size: var(--font-size-base);
    }
    
    /* Contact Form */
    .form-row {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .logo-circle-footer {
        height: 120px;
        width: 120px;
    }
    
    .logo-title-footer {
        font-size: var(--font-size-lg);
    }
    
    .logo-subtitle-footer {
        font-size: var(--font-size-xs);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-8);
    }
    
    .footer-social {
        justify-content: center;
    }
    
    /* Lightbox */
    .lightbox-content {
        max-width: 95%;
        padding: var(--spacing-4);
    }
    
    .lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-lg);
    }
    
    /* Back to Top */
    .back-to-top {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
    }

    /* Caixinha de redes sociais flutuante */
    .social-float {
        display: none;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .container {
        padding: 0 var(--spacing-2);
    }

    .footer .container {
        padding: 0 var(--spacing-4);
    }
    
    .navbar .container {
        padding: 0 var(--spacing-2);
        gap: var(--spacing-2);
    }
    
    .navbar {
        padding: var(--spacing-2) 0;
    }

    /* Header fixo menor nesta faixa (padding 8px x2 + botao do menu 44px): o painel acompanha */
    .nav-menu {
        --header-h: 60px;
    }

    .nav-brand {
        gap: var(--spacing-1);
    }
    
    .logo-circle {
        height: 40px;
        width: 40px;
        background-color: white;
        border-radius: 50%;
        padding: 2px;
    }
    
    .logo-title {
        font-size: 12px;
        line-height: 1.1;
    }
    
    .logo-subtitle {
        font-size: 10px;
        line-height: 1.1;
    }

    /* Area de toque de 44px (unico jeito de abrir o menu); as barras continuam do mesmo tamanho */
    .nav-toggle {
        padding: var(--spacing-1);
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }
    
    .nav-toggle span {
        width: 20px;
        height: 2px;
    }
    
    .hero {
        min-height: 100vh;
        height: 100vh;
        align-items: center;
    }
    
    .section-title {
        font-size: var(--font-size-xl);
    }

    .services .section-title,
    .gallery .section-title {
        font-size: var(--font-size-2xl);
    }

    .photo-showcase-card {
        padding: var(--spacing-5);
    }

    /* Cartoes de contato: o e-mail longo cabe numa linha em vez de quebrar no meio da palavra */
    .contact-text p {
        font-size: var(--font-size-base);
    }

    .contact-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .btn {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: var(--font-size-sm);
        /* Area de toque minima confortavel pro dedo (antes ficava ~38px) */
        min-height: 44px;
    }
    
    .hero-no-overlay .hero-content {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
    
    .hero-text-content {
        max-width: 100%;
    }
    
    .hero-main-title {
        font-size: var(--font-size-2xl);
        line-height: 1.3;
        margin-bottom: var(--spacing-4);
    }

    .hero-text-paragraph {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-4);
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .btn-large {
        padding: var(--spacing-4) var(--spacing-8);
        font-size: var(--font-size-base);
        width: 100%;
    }
}

/* Telas baixas (celular deitado, notebook com pouca altura): o topo tem altura fixa de
   100vh com overflow hidden e cortava o titulo (ficava embaixo do header) e os botoes.
   Aqui ele cresce com o conteudo; fica DEPOIS dos blocos de largura pra vencer o
   height: 100vh deles. Se o conteudo cabe, a altura continua igual a 100vh. */
@media (max-height: 700px) {
    .hero {
        height: auto;
        min-height: 100vh;
    }
}

/* Utilitários */
.text-center {
    text-align: center;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-red);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dark-red);
}