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

:root {
    --cocoa: #1b1412;
    --cocoa-deep: #0f0b09;
    --cocoa-mid: #2a1f1a;
    --cocoa-light: #3d2e26;
    --cream: #f9f9f9;
    --cream-warm: #f5f0eb;
    --cream-dark: #e8e0d8;
    --gold: #c9a96e;
    --gold-light: #d4ba85;
    --gold-dark: #a8894f;
    --chocolate: #4a2c2a;
    --whatsapp: #25d366;
    --whatsapp-hover: #1faf55;

    --font-display: "Playfair Display", Georgia, serif;
    --font-body: "DM Sans", -apple-system, sans-serif;
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
}

html {
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) var(--cocoa);
}

body {
    font-family: var(--font-body);
    color: var(--cream);
    background: var(--cocoa);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

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

button {
    border: none;
    cursor: pointer;
    font-family: inherit;
    background: none;
}

/* ═══════════ LOADER ═══════════ */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--cocoa-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition:
        opacity 0.8s var(--ease-out-expo),
        visibility 0.8s;

    .loader-logo {
        width: 15rem;
    }
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes loaderReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.loader-bar {
    width: 160px;
    height: 1px;
    background: var(--cocoa-light);
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
}

.loader-bar::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: var(--gold);
    animation: loaderBar 2s var(--ease-in-out-circ) forwards;
    transform-origin: left;
    transform: scaleX(0);
}

@keyframes loaderBar {
    to {
        transform: scaleX(1);
    }
}

/* ═══════════ NAVIGATION ═══════════ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition:
        transform 0.5s var(--ease-out-expo),
        background 0.4s,
        box-shadow 0.4s;
}

.nav.solid {
    background: rgba(249, 249, 249, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 30px rgba(27, 20, 18, 0.05);
}

.nav.nav-hidden {
    transform: translateY(-100%);
}

.nav-logo {
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s;
}

.nav-logo img {
    height: 36px;
    width: auto;
    display: block;
}

.nav.solid .nav-logo {
    opacity: 1;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--cocoa);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    opacity: 0;
    transition:
        opacity 0.4s,
        color 0.3s;
}

.nav.solid .nav-links a {
    opacity: 1;
}

.nav-links a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 0.4s var(--ease-out-expo);
}

.nav-links a:hover {
    color: var(--gold-dark);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-wa {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--whatsapp);
    color: white;
    padding: 0.55rem 1.2rem;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0;
    transition:
        opacity 0.4s,
        background 0.3s,
        transform 0.3s;
}

.nav.solid .nav-wa {
    opacity: 1;
}

.nav-wa:hover {
    background: var(--whatsapp-hover);
    transform: scale(1.04);
}

.nav-wa svg {
    width: 15px;
    height: 15px;
    fill: white;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
}

.nav-toggle span {
    width: 26px;
    height: 1.5px;
    background: var(--cocoa);
    transition: all 0.4s var(--ease-out-expo);
    transform-origin: center;
}

/* ═══════════ HERO — GSAP PIN ═══════════ */
.hero-wrapper {
    height: 200vh;
    position: relative;
}

.hero {
    height: 100vh;
    width: 100%;
    background: var(--cream-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
            rgba(201, 169, 110, 0.08) 0%,
            transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hero-center {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    pointer-events: auto;
}

.hero-tag {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

.hero-logo {
    width: 22rem;
}

.hero-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--chocolate);
    line-height: 1.7;
    max-width: 440px;
}

.hero-cta {
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--cocoa);
    color: var(--cream);
    padding: 1rem 2.2rem;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease-out-expo);
}

.cta-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gold);
    border-radius: 100px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out-expo);
}

.cta-pill:hover {
    transform: scale(1.04);
}

.cta-pill:hover::before {
    transform: scaleX(1);
}

.cta-pill span,
.cta-pill svg {
    position: relative;
    z-index: 1;
}

.cta-pill svg {
    width: 16px;
    height: 16px;
    fill: white;
}

.hero-social {
    display: flex;
    gap: 0.6rem;
}

.hero-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(27, 20, 18, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s var(--ease-out-expo);
}

.hero-social a:hover {
    background: var(--gold);
    border-color: var(--gold);
    transform: translateY(-3px);
}

.hero-social a:hover svg {
    stroke: white;
}

.hero-social svg {
    width: 17px;
    height: 17px;
    stroke: var(--cocoa);
    stroke-width: 1.5;
    fill: none;
}

.scroll-hint {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

.scroll-hint span {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--chocolate);
    opacity: 0.5;
}

.scroll-line {
    width: 1px;
    height: 36px;
    background: var(--cream-dark);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gold);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0% {
        top: -100%;
    }

    50% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

/* Floating cards in hero */
.float-item {
    position: absolute;
    will-change: transform, opacity;
    z-index: 5;
    pointer-events: none;
}

.float-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(27, 20, 18, 0.12),
        0 4px 16px rgba(27, 20, 18, 0.06);
    width: 240px;
}

.float-card-lg {
    width: 280px;
}

.float-card-sm {
    width: 190px;
}

.float-card-img {
    height: 180px;
    overflow: hidden;
}

.float-card-lg .float-card-img {
    height: 210px;
}

.float-card-sm .float-card-img {
    height: 140px;
}

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

.float-card-body {
    padding: 0.9rem 1rem;
}

.float-card-body h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--cocoa);
    margin-bottom: 0.15rem;
}

.float-card-body .float-price {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--gold-dark);
    font-weight: 500;
}

/* Deco */
.float-deco {
    position: absolute;
    will-change: transform, opacity;
    z-index: 3;
    pointer-events: none;
}

.deco-circle {
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 110, 0.2);
}

.deco-dot {
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.3;
}

/* ═══════════ SHARED ═══════════ */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity 0.9s var(--ease-out-expo),
        transform 0.9s var(--ease-out-expo);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-d1 {
    transition-delay: 0.1s;
}

.reveal-d2 {
    transition-delay: 0.2s;
}

.reveal-d3 {
    transition-delay: 0.3s;
}

.reveal-d4 {
    transition-delay: 0.4s;
}

.reveal-d5 {
    transition-delay: 0.5s;
}

.reveal-d6 {
    transition-delay: 0.6s;
}

.wave-div {
    width: 100%;
    height: 70px;
    position: relative;
    overflow: hidden;
    line-height: 0;
    margin-top: -1px;
    margin-bottom: -1px;
}

.wave-div svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section-tag {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 400;
    line-height: 1.2;
}

.section-title em {
    font-style: italic;
}

.divider-line {
    width: 60px;
    height: 1px;
    margin: 1.5rem auto 0;
}

.btn-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--whatsapp);
    color: white;
    padding: 0.85rem 1.8rem;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.4s var(--ease-out-expo);
}

.btn-wa:hover {
    background: var(--whatsapp-hover);
    transform: scale(1.03);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.25);
}

.btn-wa svg {
    width: 16px;
    height: 16px;
    fill: white;
    flex-shrink: 0;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    padding: 0.75rem 1.6rem;
    border-radius: 100px;
    border: 1px solid;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.4s var(--ease-out-expo);
}

.price-tag {
    font-family: var(--font-display);
    font-weight: 600;
    display: inline-block;
}

.price-tag .cur {
    font-size: 0.55em;
    vertical-align: super;
    margin-right: 2px;
    font-weight: 400;
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
}

.price-row .price-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 400;
}

.sec-inner {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.sec-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* "Clique para ver mais" hint on images */
.gallery-trigger {
    cursor: pointer;
    position: relative;
}

.gallery-trigger::before {
    content: "Clique para ver mais fotos";
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(27, 20, 18, 0.75);
    backdrop-filter: blur(6px);
    color: white;
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0.5rem 1.2rem;
    border-radius: 100px;
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 3;
    white-space: nowrap;
    pointer-events: none;
}

.gallery-trigger:hover::before {
    opacity: 1;
}

/* Gallery icon */
.gallery-trigger::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231B1412' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center / 18px no-repeat;
    z-index: 3;
    opacity: 0.8;
    transition:
        opacity 0.3s,
        transform 0.3s;
    pointer-events: none;
}

.gallery-trigger:hover::after {
    opacity: 1;
    transform: scale(1.1);
}

/* ═══════════ SECTION: TABLETES ═══════════ */
.sec-tabletes {
    background: var(--cocoa);
    padding: 6rem 3rem 7rem;
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

.sec-tabletes::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 30%,
            rgba(74, 44, 42, 0.14) 0%,
            transparent 50%),
        radial-gradient(ellipse at 85% 70%,
            rgba(74, 44, 42, 0.1) 0%,
            transparent 50%);
    pointer-events: none;
}

.tabletes-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: center;
}

.tabletes-gallery {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 600px;
}

.tabletes-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo);
}

.tabletes-gallery:hover img {
    transform: scale(1.03);
}

.tabletes-gallery::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(27, 20, 18, 0.4) 0%,
            transparent 40%);
    pointer-events: none;
}

.tabletes-price-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    background: rgba(201, 169, 110, 0.93);
    backdrop-filter: blur(6px);
    padding: 0.7rem 1.3rem;
    border-radius: 100px;
}

.tabletes-price-badge .price-tag {
    color: var(--cocoa-deep);
    font-size: 1.3rem;
}

.tabletes-info .intro-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--cream-dark);
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 2rem;
}

.flavor-row {
    padding: 1.4rem 0;
    border-top: 1px solid rgba(201, 169, 110, 0.12);
}

.flavor-row:last-of-type {
    border-bottom: 1px solid rgba(201, 169, 110, 0.12);
}

.flavor-row h4 {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 500;
    color: var(--gold-light);
    margin-bottom: 0.4rem;
}

.flavor-row p {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--cream-dark);
    line-height: 1.7;
    font-weight: 300;
}

.tabletes-btns {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.tabletes-btns .btn-outline {
    color: var(--gold);
    border-color: var(--gold);
}

.tabletes-btns .btn-outline:hover {
    background: var(--gold);
    color: var(--cocoa-deep);
}

/* ═══════════ SECTION: OVO FRITO ═══════════ */
.sec-ovofrito {
    background: var(--cream-warm);
    padding: 6rem 3rem 7rem;
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

.sec-ovofrito::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse at center,
            rgba(201, 169, 110, 0.06) 0%,
            transparent 60%);
    pointer-events: none;
}

.ovofrito-layout {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.ovofrito-text .section-tag {
    color: var(--gold-dark);
}

.ovofrito-text .section-title {
    color: var(--cocoa);
    margin-bottom: 1.5rem;
}

.ovofrito-text .section-title em {
    color: var(--gold-dark);
}

.ovofrito-text .desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--chocolate);
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 2rem;
}

.ovofrito-text .btn-outline {
    color: var(--cocoa);
    border-color: var(--cocoa);
}

.ovofrito-text .btn-outline:hover {
    background: var(--cocoa);
    color: var(--cream);
}

.ovofrito-visual {
    position: relative;
}

.ovofrito-imgwrap {
    border-radius: 20px;
    overflow: hidden;
    height: 580px;
    position: relative;
}

.ovofrito-imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo);
}

.ovofrito-imgwrap:hover img {
    transform: scale(1.03);
}

.frame-accent {
    position: absolute;
    width: 70px;
    height: 70px;
    border-color: var(--gold);
    border-style: solid;
    z-index: 1;
    pointer-events: none;
}

.frame-accent.tl {
    top: -12px;
    left: -12px;
    border-width: 1px 0 0 1px;
}

.frame-accent.br {
    bottom: -12px;
    right: -12px;
    border-width: 0 1px 1px 0;
}

/* ═══════════ SECTION: INGREDIENTES ═══════════ */
.sec-ingredientes {
    background: var(--cream-warm);
    padding: 6rem 3rem;
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

.sec-ingredientes::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 15% 50%,
            rgba(201, 169, 110, 0.07) 0%,
            transparent 60%);
    pointer-events: none;
}

.ingredientes-layout {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.ingredientes-text .section-tag {
    color: var(--gold-dark);
}

.ingredientes-text .section-title {
    color: var(--cocoa);
    margin-bottom: 0.5rem;
}

.ingredientes-text .section-title em {
    color: var(--gold-dark);
}

.ingredientes-text .divider-line {
    background: var(--gold-dark);
    margin: 0 0 1.8rem;
}

.ingredientes-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--chocolate);
    line-height: 1.9;
    font-weight: 300;
    margin-bottom: 2rem;
}

.ingredientes-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 2.5rem;
}

.ingredientes-pill {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: var(--cocoa);
    background: rgba(74, 44, 42, 0.07);
    border: 1px solid rgba(74, 44, 42, 0.12);
    border-radius: 100px;
    padding: 0.4rem 1rem;
    text-transform: uppercase;
}

.ingredientes-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.ingredientes-photo {
    overflow: hidden;
    border-radius: 14px;
    position: relative;
    cursor: pointer;
}

.ingredientes-photo:nth-child(odd) {
    margin-top: 1.4rem;
}

.ingredientes-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ease-out-expo);
    aspect-ratio: 3/4;
}

.ingredientes-photo:hover img {
    transform: scale(1.04);
}

.ingredientes-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(27, 20, 18, 0);
    transition: background 0.4s;
}

.ingredientes-photo:hover::after {
    background: rgba(27, 20, 18, 0.08);
}

/* ═══════════ SECTION: IDENTIDADE DA MARCA ═══════════ */
.sec-marca {
    background: var(--cocoa);
    padding: 6rem 3rem 7rem;
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

.sec-marca::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%,
            rgba(201, 169, 110, 0.06) 0%,
            transparent 55%);
    pointer-events: none;
}

.sec-marca .sec-header {
    max-width: 640px;
    margin: 0 auto 4rem;
    text-align: center;
}

.sec-marca .section-tag {
    color: var(--gold);
}

.sec-marca .section-title {
    color: var(--cream);
}

.sec-marca .section-title em {
    color: var(--gold-light);
}

.sec-marca .divider-line {
    background: var(--gold);
}

.marca-mosaic {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    grid-template-rows: 280px 280px;
    gap: 0.75rem;
    border-radius: 24px;
    overflow: hidden;
}

.marca-cell {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.marca-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ease-out-expo);
}

.marca-cell:hover img {
    transform: scale(1.05);
}

.marca-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(18, 16, 15, 0);
    transition: background 0.4s;
}

.marca-cell:hover::after {
    background: rgba(18, 16, 15, 0.18);
}

.marca-cell-main {
    grid-column: 1;
    grid-row: 1 / 3;
}

.marca-cell-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.1rem 1.2rem;
    background: linear-gradient(to top,
            rgba(18, 16, 15, 0.65) 0%,
            transparent 100%);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s;
}

.marca-cell:hover .marca-cell-caption {
    opacity: 1;
}

.marca-cell-caption span {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
}

/* ═══════════ SECTION: MINI OVOS ═══════════ */
.sec-miniovos {
    background: var(--cocoa);
    padding: 6rem 3rem 5rem;
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

.sec-miniovos::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%,
            rgba(74, 44, 42, 0.15) 0%,
            transparent 50%);
    pointer-events: none;
}

.miniovos-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.miniovos-intro p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--cream-dark);
    line-height: 1.8;
    font-weight: 300;
}

.miniovos-intro .price-row {
    justify-content: center;
    margin-top: 1rem;
}

.miniovos-intro .price-row .price-tag {
    font-size: 2rem;
    color: var(--gold);
}

.miniovos-intro .price-row .price-label {
    color: var(--cream-dark);
}

.miniovos-cta {
    text-align: center;
    margin-bottom: 3.5rem;
}

.flavors-banner {
    text-align: center;
    margin-bottom: 3rem;
}

.flavors-banner h3 {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 400;
    color: var(--cream);
    letter-spacing: 0.03em;
}

.flavors-banner h3 em {
    color: var(--gold-light);
}

/* IMAGE-FIRST FLAVOR CARDS */
.flavors-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
}

.flavor-card-img {
    height: 280px;
    overflow: hidden;
    position: relative;
}

.flavor-card {
    background: var(--cocoa-mid);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.5s var(--ease-out-expo);
    cursor: pointer;
}

.flavor-card:hover {
    transform: translateY(-6px);
}

.flavor-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo);
}

.flavor-card:hover .flavor-card-img img {
    transform: scale(1.06);
}

.flavor-card-img::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top,
            rgba(27, 20, 18, 0.7) 0%,
            transparent 100%);
}

/* Name overlaid on image bottom */
.flavor-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.2rem 1.1rem;
    z-index: 2;
}

.flavor-card-overlay h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: white;
    margin-bottom: 0.2rem;
}

.flavor-card-overlay p {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 300;
    line-height: 1.5;
}

/* Gallery hint on flavor cards */
.flavor-card .gallery-icon {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    opacity: 0;
    transition:
        opacity 0.3s,
        transform 0.3s;
}

.flavor-card:hover .gallery-icon {
    opacity: 1;
}

.gallery-icon svg {
    width: 15px;
    height: 15px;
    stroke: var(--cocoa);
    stroke-width: 2;
    fill: none;
}

/* ═══════════ TRIO SHOWCASE ═══════════ */
.trio-showcase {
    margin-bottom: 4rem;
}

.trio-showcase-label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    justify-content: center;
    margin-bottom: 1.3rem;
}

.trio-showcase-label::before,
.trio-showcase-label::after {
    content: "";
    flex: 1;
    max-width: 70px;
    height: 1px;
    background: var(--gold);
    opacity: 0.35;
}

.trio-showcase-label span {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    white-space: nowrap;
}

.trio-mosaic {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1fr;
    grid-template-rows: 230px 230px;
    gap: 0.65rem;
    border-radius: 22px;
    overflow: hidden;
}

.trio-mosaic-cell {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.trio-mosaic-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ease-out-expo);
}

.trio-mosaic-cell:hover img {
    transform: scale(1.06);
}

.trio-mosaic-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(27, 20, 18, 0);
    transition: background 0.4s ease;
}

.trio-mosaic-cell:hover::after {
    background: rgba(27, 20, 18, 0.12);
}

.trio-mosaic-main {
    grid-column: 1;
    grid-row: 1 / 3;
}

.trio-mosaic-wide {
    grid-column: 2 / 4;
    grid-row: 2;
}

.trio-badge {
    position: absolute;
    bottom: 1.1rem;
    left: 1.1rem;
    z-index: 3;
    background: rgba(20, 14, 12, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 50px;
    padding: 0.5rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    pointer-events: none;
}

.trio-badge svg {
    width: 13px;
    height: 13px;
    stroke: var(--gold);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

.trio-badge span {
    font-family: var(--font-body);
    font-size: 0.73rem;
    letter-spacing: 0.1em;
    color: var(--gold);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: DUPLA DE OVOS DE COLHER 150g
   Adicionar ao final do style.css existente
   ═══════════════════════════════════════════════════════════════ */

.sec-dupla {
    background: var(--cream-warm);
    padding: 6rem 3rem 7rem;
    position: relative;
    overflow: hidden;
}

.sec-dupla::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(201, 169, 110, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(201, 169, 110, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.dupla-layout {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3.5rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* ── MOSAICO DE IMAGENS ── */
.dupla-mosaic {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1rem;
}

.dupla-mosaic-main {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    grid-row: 1 / 2;
}

.dupla-mosaic-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 520px;
    transition: transform 0.8s var(--ease-out-expo);
}

.dupla-mosaic-main:hover img {
    transform: scale(1.03);
}

.dupla-size-number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--cocoa);
    line-height: 1;
}

.dupla-size-unit {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--chocolate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dupla-mosaic-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dupla-mosaic-cell {
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    flex: 1;
}

.dupla-mosaic-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 250px;
    transition: transform 0.8s var(--ease-out-expo);
}

.dupla-mosaic-cell:hover img {
    transform: scale(1.04);
}

/* ── CONTEÚDO ── */
.dupla-content {
    padding-top: 1rem;
}

.dupla-content .section-title {
    color: var(--cocoa);
    margin-bottom: 1.5rem;
}

.dupla-content .section-title em {
    color: var(--gold-dark);
}

/* Destaque de gramatura */
.dupla-weight-highlight {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    background: rgba(201, 169, 110, 0.08);
    border: 1px solid rgba(201, 169, 110, 0.15);
    border-radius: 14px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.5rem;
}

.dupla-weight-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-top: 0.1rem;
}

.dupla-weight-highlight p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--chocolate);
    line-height: 1.6;
    font-weight: 400;
}

.dupla-weight-highlight strong {
    color: var(--cocoa);
    font-weight: 600;
}

.dupla-desc {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--chocolate);
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 2rem;
}

/* ── SABORES (chips com mini foto) ── */
.dupla-sabores {
    margin-bottom: 2rem;
}

.dupla-sabores h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--cocoa);
    margin-bottom: 0.8rem;
}

.dupla-sabores-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.dupla-sabor-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 1px solid var(--cream-dark);
    border-radius: 100px;
    padding: 0.35rem 1rem 0.35rem 0.35rem;
    transition: all 0.4s var(--ease-out-expo);
    cursor: pointer;
    text-decoration: none;
}

.dupla-sabor-chip:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(201, 169, 110, 0.15);
    transform: translateY(-2px);
}

.dupla-sabor-chip img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dupla-sabor-chip span {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--cocoa);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── COMPARATIVO VISUAL ── */
.dupla-comparativo {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    border: 1px solid var(--cream-dark);
    border-radius: 16px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 2rem;
}

.dupla-comp-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1;
}

.dupla-comp-item.featured {
    background: rgba(201, 169, 110, 0.06);
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(201, 169, 110, 0.12);
}

.dupla-comp-icon {
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chocolate);
}

.dupla-comp-icon.small {
    width: 32px;
    height: 32px;
    background: var(--cream);
    border: 1px solid var(--cream-dark);
}

.dupla-comp-icon.large {
    width: 40px;
    height: 40px;
    background: var(--gold);
    color: white;
    border: none;
}

.dupla-comp-text {
    display: flex;
    flex-direction: column;
}

.dupla-comp-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--chocolate);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dupla-comp-value {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cocoa);
}

.dupla-comp-item.featured .dupla-comp-value {
    color: var(--gold-dark);
}

.dupla-comp-divider {
    flex-shrink: 0;
    color: var(--cream-dark);
    display: flex;
    align-items: center;
}

/* ═══════════════════════════════════════
   RESPONSIVE — DUPLA
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {
    .dupla-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .dupla-mosaic-main img {
        min-height: 400px;
    }

    .dupla-mosaic-cell img {
        min-height: 190px;
    }
}

@media (max-width: 768px) {
    .sec-dupla {
        padding: 4rem 1.5rem 5rem;
    }

    .dupla-mosaic {
        grid-template-columns: 1fr;
    }

    .dupla-mosaic-main img {
        min-height: 320px;
    }

    .dupla-mosaic-side {
        flex-direction: row;
    }

    .dupla-mosaic-cell img {
        min-height: 160px;
    }

    .dupla-comparativo {
        flex-direction: column;
        gap: 0.8rem;
        align-items: stretch;
    }

    .dupla-comp-divider {
        justify-content: center;
        transform: rotate(90deg);
    }

    .dupla-sabores-grid {
        gap: 0.5rem;
    }

    .dupla-sabor-chip img {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .dupla-mosaic-side {
        flex-direction: column;
    }

    .dupla-sabor-chip {
        flex: 1 1 calc(50% - 0.3rem);
    }
}

/* ═══════════ SECTION: CAÇA AOS OVOS ═══════════ */
.sec-caca {
    background: var(--cream-warm);
    padding: 6rem 3rem 7rem;
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

.sec-caca::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 20%,
            rgba(201, 169, 110, 0.06) 0%,
            transparent 50%);
    pointer-events: none;
}

.caca-layout {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.caca-text .section-tag {
    color: var(--gold-dark);
}

.caca-text .section-title {
    color: var(--cocoa);
    margin-bottom: 0.5rem;
}

.caca-text .section-title em {
    color: var(--gold-dark);
}

.caca-text .subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--chocolate);
    font-weight: 400;
    font-style: italic;
    margin-bottom: 1.5rem;
}

.caca-text .intro {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--chocolate);
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 2rem;
}

.kit-list {
    margin-bottom: 2rem;
}

.kit-list h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--cocoa);
    margin-bottom: 1rem;
}

.kit-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(27, 20, 18, 0.06);
}

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

.kit-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cream);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cream-dark);
}

.kit-icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--gold-dark);
    stroke-width: 2;
    fill: none;
}

.kit-item span {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--chocolate);
    font-weight: 400;
}

.versions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.version-card {
    padding: 1.2rem 1.4rem;
    border-radius: 12px;
    border: 1px solid rgba(27, 20, 18, 0.08);
    background: rgba(255, 255, 255, 0.6);
    transition: all 0.4s var(--ease-out-expo);
}

.version-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 20px rgba(201, 169, 110, 0.1);
}

.version-card h5 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--cocoa);
    margin-bottom: 0.3rem;
}

.version-card p {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--chocolate);
    font-weight: 300;
    line-height: 1.5;
}

.caca-text .btn-outline {
    color: var(--cocoa);
    border-color: var(--cocoa);
}

.caca-text .btn-outline:hover {
    background: var(--cocoa);
    color: var(--cream);
}

.caca-visual {
    position: relative;
}

.caca-imgwrap {
    border-radius: 20px;
    overflow: hidden;
    height: 620px;
    position: relative;
}

.caca-imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo);
}

.caca-imgwrap:hover img {
    transform: scale(1.03);
}

.highlight-badge {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 2;
    background: rgba(201, 169, 110, 0.93);
    backdrop-filter: blur(8px);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    max-width: 260px;
}

.highlight-badge p {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--cocoa-deep);
    line-height: 1.5;
    font-weight: 500;
}

/* ═══════════ LIGHTBOX / GALLERY ═══════════ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 11, 9, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.4s,
        visibility 0.4s;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition:
        background 0.3s,
        transform 0.3s;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.lightbox-close svg {
    width: 22px;
    height: 22px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.lightbox-info {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}

.lightbox-info h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: white;
    margin-bottom: 0.3rem;
}

.lightbox-info p {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
}

.lightbox-swiper {
    width: 85vw;
    max-width: 500px;
    height: 70vh;
}

.lightbox-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    overflow: hidden;
}

.lightbox-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

/* Swiper nav arrows */
.lightbox-swiper .swiper-button-next,
.lightbox-swiper .swiper-button-prev {
    color: white;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: background 0.3s;
}

.lightbox-swiper .swiper-button-next:hover,
.lightbox-swiper .swiper-button-prev:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-swiper .swiper-button-next::after,
.lightbox-swiper .swiper-button-prev::after {
    font-size: 16px;
    font-weight: 700;
}

.lightbox-swiper .swiper-pagination-bullet {
    background: white;
    opacity: 0.4;
}

.lightbox-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--gold);
}

/* ═══════════ WHATSAPP FAB ═══════════ */
.wa-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--whatsapp);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35);
    transition: all 0.4s var(--ease-out-expo);
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}

.wa-fab.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.wa-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 32px rgba(37, 211, 102, 0.45);
}

.wa-fab svg {
    width: 28px;
    height: 28px;
    fill: white;
}

.wa-fab-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--whatsapp);
    animation: fabPulse 2s ease-in-out infinite;
}

@keyframes fabPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* ═══════════ FOOTER ═══════════ */
.footer {
    background: var(--cocoa);
    padding: 3.5rem 3rem;
    text-align: center;
    border-top: 1px solid rgba(201, 169, 110, 0.08);
}

.footer-socials {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.footer-socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 110, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s var(--ease-out-expo);
}

.footer-socials a:hover {
    background: var(--gold);
    border-color: var(--gold);
    transform: translateY(-3px);
}

.footer-socials svg {
    width: 16px;
    height: 16px;
    stroke: var(--cream-dark);
    stroke-width: 1.5;
    fill: none;
}

.footer-socials a:hover svg {
    stroke: var(--cocoa-deep);
}

.footer-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 0.6rem;
}

.footer-logo img {
    height: 8rem;
    width: auto;
    opacity: 0.9;
}

.footer-tagline {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(249, 249, 249, 0.35);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    font-weight: 300;
}

.footer-copy {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: rgba(249, 249, 249, 0.2);
    font-weight: 300;
}

.mova-softwares-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #084B5E, #0D8BA8);
    padding: 0.5rem 0;

    img {
        width: 2.5rem;
    }

    span {
        font-size: 0.85rem;
        font-weight: 600;
        transition: all 0.2s;

        &:hover {
            text-decoration: underline;
        }
    }
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
    .tabletes-layout {
        grid-template-columns: 1fr;
    }

    .tabletes-gallery {
        height: 450px;
    }

    .ovofrito-layout {
        grid-template-columns: 1fr;
    }

    .ovofrito-text {
        order: 2;
    }

    .ovofrito-visual {
        order: 1;
    }

    .ovofrito-imgwrap {
        height: 420px;
    }

    .flavors-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .flavor-card-img {
        height: 260px;
    }

    .caca-layout {
        grid-template-columns: 1fr;
    }

    .ingredientes-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .ingredientes-photos {
        order: -1;
    }

    .ingredientes-photo {
        margin-top: 0 !important;
    }

    .marca-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 220px 220px 220px;
    }

    .marca-cell-main {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .caca-imgwrap {
        height: 450px;
    }

    .float-card {
        width: 180px;
    }

    .float-card-lg {
        width: 210px;
    }

    .float-card-sm {
        width: 155px;
    }

    .float-card-img {
        height: 130px;
    }

    .float-card-lg .float-card-img {
        height: 150px;
    }

    .float-card-sm .float-card-img {
        height: 105px;
    }
}

@media (max-width: 768px) {
    .nav {
        padding: 1rem 1.5rem;
    }

    .nav-links,
    .nav-wa {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        background: var(--cream);
        justify-content: center;
        align-items: center;
        gap: 2rem;
        z-index: 1000;
    }

    .nav-links.open a {
        font-size: 1.3rem;
        opacity: 1 !important;
    }

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

    .nav-toggle.open span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.open span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px);
    }

    .hero-logo {
        width: 12rem;
    }

    .hero-desc {
        font-size: 0.88rem;
        max-width: 320px;
    }

    .hero-cta {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-wrapper {
        height: 300vh;
    }

    .float-card {
        width: 140px;
        border-radius: 12px;
    }

    .float-card-lg {
        width: 165px;
    }

    .float-card-sm {
        width: 120px;
    }

    .float-card-img {
        height: 95px;
    }

    .float-card-lg .float-card-img {
        height: 110px;
    }

    .float-card-sm .float-card-img {
        height: 78px;
    }

    .float-card-body {
        padding: 0.6rem 0.7rem;
    }

    .float-card-body h4 {
        font-size: 0.78rem;
    }

    .float-card-body .float-price {
        font-size: 0.68rem;
    }

    .sec-tabletes,
    .sec-ovofrito,
    .sec-miniovos,
    .sec-caca {
        padding: 4rem 1.5rem 5rem;
    }

    .tabletes-gallery {
        height: 380px;
    }

    .ovofrito-imgwrap {
        height: 360px;
    }

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

    .flavor-card-img {
        height: 240px;
    }

    .caca-imgwrap {
        height: 380px;
    }

    .trio-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 200px 200px;
    }

    .trio-mosaic-main {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .trio-mosaic-wide {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    .sec-ingredientes,
    .sec-marca {
        padding: 4rem 1.5rem 5rem;
    }

    .ingredientes-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .ingredientes-photos {
        order: -1;
        grid-template-columns: 1fr 1fr;
    }

    .ingredientes-photo {
        margin-top: 0 !important;
    }

    .marca-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 200px 200px;
        border-radius: 16px;
    }

    .marca-cell-main {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .versions-row {
        grid-template-columns: 1fr;
    }

    .wa-fab {
        bottom: 1.2rem;
        right: 1.2rem;
        width: 54px;
        height: 54px;
    }

    .lightbox-swiper {
        width: 92vw;
        height: 55vh;
    }
}

@media (max-width: 480px) {
    .flavors-grid {
        grid-template-columns: 1fr;
    }

    .flavor-card-img {
        height: 280px;
    }

    .tabletes-btns {
        flex-direction: column;
    }

    .deco-circle,
    .deco-dot {
        display: none;
    }
}