/* ==========================================================
   PROJETO SSA - SISTEMA E SERVIÇOS DE ARMAZENAGEM
   Diretrizes Apple Design: Tipografia Óptica, Materiais Translúcidos,
   Scroll Effects Fluidos & Foco Total em Porta-Paletes
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Identidade Cromática SSA Refinada */
    --color-primary: #080E2A;
    --color-primary-card: #0F173D;
    --color-primary-light: #18235C;
    --color-accent: #FF6A00;
    --color-accent-hover: #E55C00;
    --color-accent-soft: rgba(255, 106, 0, 0.14);
    --color-accent-glow: rgba(255, 106, 0, 0.35);
    
    --color-whatsapp: #25D366;
    --color-whatsapp-hover: #1EBE5D;
    --color-whatsapp-glow: rgba(37, 211, 102, 0.4);

    --color-dark: #060919;
    --color-gray-900: #0F172A;
    --color-gray-800: #1E293B;
    --color-gray-700: #334155;
    --color-gray-500: #64748B;
    --color-gray-400: #94A3B8;
    --color-gray-200: #E2E8F0;
    --color-gray-100: #F1F5F9;
    --color-gray-50: #F8FAFC;
    --color-white: #FFFFFF;

    /* Materiais Apple Translúcidos (Backdrop Blur + Light-catching top borders) */
    --glass-nav: rgba(8, 14, 42, 0.82);
    --glass-card: rgba(255, 255, 255, 0.85);
    --glass-card-dark: rgba(15, 23, 61, 0.75);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-border-light: rgba(0, 0, 0, 0.08);

    /* Tipografia Óptica (SF / Apple Style: display headings with negative tracking) */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

    /* Sombras Físicas com Profundidade */
    --shadow-soft: 0 4px 20px -2px rgba(8, 14, 42, 0.06);
    --shadow-medium: 0 12px 32px -4px rgba(8, 14, 42, 0.12);
    --shadow-deep: 0 24px 48px -8px rgba(8, 14, 42, 0.22);
    --shadow-glow: 0 0 40px rgba(255, 106, 0, 0.25);

    /* Curvas de Animação Apple (Critically damped spring-like feel) */
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-fast: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-apple: 0.5s var(--ease-spring);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --radius-full: 9999px;
}

/* Reset Universal e Tipografia */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--color-gray-700);
    background-color: var(--color-white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tipografia Estilo Apple: Optical Tracking & Tight Leading */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-weight: 700;
    letter-spacing: -0.025em; /* Negative tracking for large text */
}

h1 {
    line-height: 1.05;
    letter-spacing: -0.035em;
}

h2 {
    line-height: 1.15;
    letter-spacing: -0.028em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

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

.container {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 1.75rem;
}

/* ==========================================================
   APPLE DESIGN: PRINCÍPIO 1 - RESPOSTA IMEDIATA (:active)
   Eliminação de latência no clique/toque
   ========================================================== */

button, .btn, .nav-link, .service-card, .faq-item, .anatomy-card {
    -webkit-tap-highlight-color: transparent;
}

.btn:active, button:active, .interactive-click:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s var(--ease-fast) !important;
}

/* ==========================================================
   APPLE DESIGN: MATERIAIS TRANSLÚCIDOS & NAVBAR FLUTUANTE
   ========================================================== */

.topbar-apple {
    background: var(--color-dark);
    color: var(--color-gray-400);
    font-size: 0.8rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-apple .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.topbar-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 106, 0, 0.15);
    border: 1px solid rgba(255, 106, 0, 0.3);
    color: #FF9B4D;
    padding: 0.2rem 0.75rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.75rem;
}

.header-apple {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.header-container-apple {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}

.brand-logo-apple {
    display: flex;
    align-items: center;
}

.brand-logo-apple img {
    height: 46px;
    width: auto;
}

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

.nav-link-item {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-primary);
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
}

.nav-link-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 2px;
    background-color: var(--color-accent);
    border-radius: 2px;
    transition: width var(--transition-apple);
}

.nav-link-item:hover {
    color: var(--color-accent);
}

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

/* ==========================================================
   BOTÕES E CTAS ESTILO APPLE
   ========================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.8rem 1.75rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    border: none;
    transition: all var(--transition-apple);
    text-align: center;
    position: relative;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
}

.btn-accent {
    background: linear-gradient(135deg, #FF7714 0%, #FF5A00 100%);
    color: var(--color-white);
    box-shadow: 0 10px 25px -4px rgba(255, 90, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-accent:hover {
    background: linear-gradient(135deg, #FF852E 0%, #E65100 100%);
    box-shadow: 0 14px 30px -4px rgba(255, 90, 0, 0.55);
    transform: translateY(-2px);
}

.btn-whatsapp {
    background: linear-gradient(135deg, #2ED86E 0%, #20C45C 100%);
    color: var(--color-white);
    box-shadow: 0 10px 25px -4px rgba(32, 196, 92, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-whatsapp:hover {
    background: linear-gradient(135deg, #37E579 0%, #1AB352 100%);
    box-shadow: 0 14px 32px -4px rgba(32, 196, 92, 0.6);
    transform: translateY(-2px);
}

.btn-glass {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-lg {
    padding: 1.05rem 2.25rem;
    font-size: 1.05rem;
}

/* ==========================================================
   SCROLL EFFECTS: CLASSES DE REVEAL & ANIMAÇÃO
   Compositor-only (transform & opacity) a 60fps/120fps
   ========================================================== */

.apple-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s var(--ease-spring), transform 0.8s var(--ease-spring);
    will-change: transform, opacity;
}

.apple-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.apple-reveal-delay-1 { transition-delay: 0.1s; }
.apple-reveal-delay-2 { transition-delay: 0.2s; }
.apple-reveal-delay-3 { transition-delay: 0.3s; }
.apple-reveal-delay-4 { transition-delay: 0.4s; }

.apple-scale-reveal {
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.8s var(--ease-spring), transform 0.8s var(--ease-spring);
    will-change: transform, opacity;
}

.apple-scale-reveal.is-revealed {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================================
   HERO SECTION - MULTI-LAYER PARALLAX (APPLE KEYNOTE)
   ========================================================== */

.hero-apple {
    position: relative;
    background: radial-gradient(circle at 50% 20%, #111A4D 0%, #080E2A 70%, #05091D 100%);
    color: var(--color-white);
    padding: 7rem 0 8rem;
    overflow: hidden;
    text-align: center;
}

.hero-bg-parallax {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background: url('../../Midias Sociais/Posts_Fotos/03.jpeg') center/cover no-repeat;
    opacity: 0.22;
    mix-blend-mode: luminosity;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0, var(--hero-bg-y, 0px), 0) scale(1.1);
    transition: transform 0.1s linear;
}

.hero-apple::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to top, var(--color-white) 0%, transparent 100%);
    pointer-events: none;
}

.hero-content-container {
    position: relative;
    z-index: 2;
}

.hero-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 106, 0, 0.18);
    border: 1px solid rgba(255, 106, 0, 0.4);
    color: #FFA55C;
    padding: 0.45rem 1.3rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

.hero-headline-apple {
    font-size: clamp(2.6rem, 5.5vw, 4.5rem);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.05;
    letter-spacing: -0.035em;
    max-width: 960px;
    margin: 0 auto 1.5rem;
    will-change: transform;
    transform: translate3d(0, var(--hero-title-y, 0px), 0);
}

.hero-headline-apple span {
    background: linear-gradient(135deg, #FF8C33 0%, #FF5A00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-lead-text {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--color-gray-300);
    max-width: 780px;
    margin: 0 auto 2.75rem;
    line-height: 1.6;
    font-weight: 400;
}

.hero-cta-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 3rem;
}

/* ==========================================================
   SHOWCASE 3D HERO (APPLE KEYNOTE PRODUCT CENTERPIECE)
   ========================================================== */

.hero-showcase-3d {
    position: relative;
    max-width: 980px;
    margin: 0 auto 3.5rem;
}

.hero-showcase-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 85%;
    background: radial-gradient(ellipse at center, rgba(255, 106, 0, 0.24) 0%, rgba(24, 35, 92, 0.45) 45%, transparent 70%);
    filter: blur(50px);
    z-index: 0;
    pointer-events: none;
}

.hero-showcase-card {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: radial-gradient(circle at 50% 30%, #0F173D 0%, #080E2A 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 28px 70px -10px rgba(0, 0, 0, 0.75), 0 0 40px rgba(255, 106, 0, 0.12);
    transition: transform var(--transition-apple), box-shadow var(--transition-apple);
}

.hero-showcase-card:hover {
    transform: translateY(-4px) scale(1.006);
    box-shadow: 0 36px 85px -10px rgba(0, 0, 0, 0.85), 0 0 55px rgba(255, 106, 0, 0.22);
}

.hero-showcase-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    transform: scale(1);
    transition: transform 0.8s var(--ease-spring);
}

.hero-showcase-card:hover .hero-showcase-img {
    transform: scale(1.02);
}

.hero-showcase-overlay {
    position: absolute;
    bottom: 1.25rem;
    left: 1.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
}

.hero-showcase-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(8, 14, 42, 0.82);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-white);
    font-size: 0.825rem;
    font-weight: 600;
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-full);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 10px #25D366, 0 0 20px rgba(37, 211, 102, 0.6);
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

@media (max-width: 768px) {
    .hero-showcase-3d {
        margin-bottom: 2.5rem;
    }
    .hero-showcase-card {
        border-radius: var(--radius-lg);
    }
    .hero-showcase-overlay {
        bottom: 0.85rem;
        left: 0.85rem;
        right: 0.85rem;
    }
    .hero-showcase-tag {
        font-size: 0.72rem;
        padding: 0.35rem 0.75rem;
        width: 100%;
        justify-content: center;
    }
}

/* Métricas Apple Style (Camada com Parallax Diferencial) */
.hero-specs-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    will-change: transform;
    transform: translate3d(0, var(--hero-specs-y, 0px), 0);
    transition: transform 0.1s linear;
}

.hero-spec-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    transition: transform var(--transition-apple), border-color 0.3s ease;
}

.hero-spec-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 106, 0, 0.5);
}

.hero-spec-num {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.4rem;
    font-family: var(--font-heading);
    letter-spacing: -0.03em;
    color: var(--color-white);
}

.hero-spec-num span {
    color: var(--color-accent);
}

.hero-spec-label {
    font-size: 0.85rem;
    color: var(--color-gray-400);
    font-weight: 500;
}

/* ==========================================================
   SEÇÃO 1: STICKY STAGE PARALLAX (ANATOMIA DO PORTA-PALETES)
   Elemento visual fixo enquanto os cards rolam suavemente
   ========================================================== */

.anatomy-section {
    padding: 7rem 0;
    background: var(--color-white);
    position: relative;
}

.anatomy-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 4.5rem;
}

.eyebrow-text {
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
    display: block;
}

.anatomy-title {
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    margin-bottom: 1.25rem;
}

.anatomy-desc {
    font-size: 1.15rem;
    color: var(--color-gray-500);
    line-height: 1.6;
}

.anatomy-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3.5rem;
    align-items: start;
    position: relative;
}

/* Palco Visual Fixo (Sticky) */
.anatomy-visual-sticky {
    position: sticky;
    top: 110px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-deep);
    border: 1px solid var(--color-gray-200);
    background: var(--color-primary);
    transition: transform 0.6s var(--ease-spring), box-shadow 0.6s var(--ease-spring);
}

.anatomy-visual-sticky img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ease-spring), filter 0.6s ease;
}

.anatomy-visual-sticky.zoom-montantes img {
    transform: scale(1.08) translate(-2%, 2%);
}

.anatomy-visual-sticky.zoom-longarinas img {
    transform: scale(1.12) translate(0%, -3%);
}

.anatomy-visual-sticky.zoom-protetores img {
    transform: scale(1.15) translate(3%, 6%);
}

.anatomy-visual-sticky.zoom-sapatas img {
    transform: scale(1.12) translate(-2%, 8%);
}

.visual-floating-tag {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    background: rgba(8, 14, 42, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 1rem 1.4rem;
    border-radius: var(--radius-md);
    color: var(--color-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.visual-floating-tag strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-accent);
}

.visual-floating-tag span {
    font-size: 0.8rem;
    color: var(--color-gray-300);
}

.visual-step-indicator {
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.8rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anatomy-cards-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 2rem;
}

.anatomy-card {
    background: var(--color-gray-50);
    border: 1.5px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 2.2rem;
    transition: all var(--transition-apple);
    cursor: pointer;
    position: relative;
}

.anatomy-card:hover, .anatomy-card.is-active {
    background: var(--color-white);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-medium);
    transform: translateX(8px);
}

.anatomy-card-num {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-gray-400);
    transition: color 0.3s ease;
}

.anatomy-card.is-active .anatomy-card-num,
.anatomy-card:hover .anatomy-card-num {
    color: var(--color-accent);
}

.anatomy-card h3 {
    font-size: 1.35rem;
    margin-bottom: 0.6rem;
}

.anatomy-card p {
    font-size: 0.95rem;
    color: var(--color-gray-600);
    line-height: 1.6;
}

/* ==========================================================
   BANNER CINEMÁTICO PARALLAX (FULL-BLEED IMMERSION)
   Janela de imersão no galpão com efeito de deslocamento contínuo
   ========================================================== */

.parallax-cinematic-banner {
    position: relative;
    height: 480px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
}

.cinematic-bg-layer {
    position: absolute;
    top: -35%;
    left: 0;
    width: 100%;
    height: 170%;
    background: url('../../Midias Sociais/Posts_Fotos/03.jpeg') center/cover no-repeat;
    will-change: transform;
    transform: translate3d(0, var(--cinematic-y, 0px), 0);
    transition: transform 0.08s linear;
}

.cinematic-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--color-gray-50) 0%, rgba(8, 14, 42, 0.75) 30%, rgba(8, 14, 42, 0.8) 70%, var(--color-primary) 100%);
    z-index: 1;
}

.cinematic-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    padding: 0 1.5rem;
}

.cinematic-content h2 {
    color: var(--color-white);
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    line-height: 1.1;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

.cinematic-content p {
    font-size: 1.25rem;
    color: var(--color-gray-300);
    margin-bottom: 2rem;
}


/* ==========================================================
   SEÇÃO 2: TIPOS DE SISTEMAS PORTA-PALETES
   Cards com Vidro Jateado & Microinterações
   ========================================================== */

.systems-section {
    padding: 6.5rem 0;
    background: var(--color-gray-50);
}

.systems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
}

.system-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 2.2rem;
    transition: all var(--transition-apple);
    display: flex;
    flex-direction: column;
    position: relative;
}

.system-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-deep);
    border-color: rgba(255, 106, 0, 0.4);
}

.system-pill-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.2rem;
}

.system-card h3 {
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
}

.system-card p {
    font-size: 0.925rem;
    color: var(--color-gray-600);
    margin-bottom: 1.5rem;
    flex-grow: 1;
    line-height: 1.6;
}

.system-points {
    list-style: none;
    margin-bottom: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.system-points li {
    font-size: 0.875rem;
    color: var(--color-gray-700);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.system-points li::before {
    content: '•';
    color: var(--color-accent);
    font-size: 1.4rem;
    line-height: 0;
}

.system-card .btn-card-cta {
    margin-top: auto;
    width: 100%;
    background: var(--color-gray-100);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.system-card:hover .btn-card-cta {
    background: var(--color-accent);
    color: var(--color-white);
}

/* ==========================================================
   SEÇÃO 3: TABELA TÉCNICA - "APPLE TECH SPECS"
   Padrão de Especificações Pro
   ========================================================== */

.tech-specs-section {
    padding: 6.5rem 0;
    background: var(--color-primary);
    color: var(--color-white);
}

.tech-specs-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
}

.tech-specs-header .eyebrow-text {
    color: #FFA55C;
}

.tech-specs-header h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    margin-bottom: 1rem;
}

.tech-specs-header p {
    color: var(--color-gray-300);
    font-size: 1.15rem;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.spec-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: all var(--transition-apple);
}

.spec-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-accent);
    transform: translateY(-4px);
}

.spec-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.spec-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 0.6rem;
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

.spec-detail {
    font-size: 0.875rem;
    color: var(--color-gray-300);
    line-height: 1.5;
}

/* ==========================================================
   SEÇÃO 4: GALERIA REAL DE PORTA-PALETES EM OPERAÇÃO
   ========================================================== */

.gallery-section-apple {
    padding: 6.5rem 0;
    background: var(--color-white);
}

.apple-gallery-masonry {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

.gallery-card-apple {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-dark);
    box-shadow: var(--shadow-medium);
}

.gallery-card-apple img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: transform 0.8s var(--ease-spring);
}

.gallery-card-apple:hover img {
    transform: scale(1.04);
}

.gallery-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 14, 42, 0.92) 0%, rgba(8, 14, 42, 0.2) 60%, transparent 100%);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--color-white);
}

.gallery-card-overlay h4 {
    color: var(--color-white);
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
}

.gallery-card-overlay p {
    font-size: 0.85rem;
    color: var(--color-gray-300);
}

.gallery-card-apple:nth-child(1) { grid-column: span 7; }
.gallery-card-apple:nth-child(2) { grid-column: span 5; }
.gallery-card-apple:nth-child(3) { grid-column: span 4; }
.gallery-card-apple:nth-child(4) { grid-column: span 4; }
.gallery-card-apple:nth-child(5) { grid-column: span 4; }

/* ==========================================================
   SEÇÃO 5: DEMAIS SOLUÇÕES SSA (MENÇÃO COMPLEMENTAR)
   Subtle & elegant secondary capabilities
   ========================================================== */

.complementary-section {
    padding: 4.5rem 0;
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
}

.complementary-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.complementary-text {
    max-width: 680px;
}

.complementary-text h4 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.complementary-text p {
    font-size: 0.95rem;
    color: var(--color-gray-600);
}

.complementary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.chip-item {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chip-item:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ==========================================================
   CTA BANNER KEYNOTE (APPLE STYLE)
   ========================================================== */

.keynote-cta-section {
    position: relative;
    padding: 6.5rem 0;
    background: radial-gradient(circle at 50% 30%, #152266 0%, #080E2A 70%, #040817 100%);
    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

.keynote-cta-container {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
}

.keynote-cta-section h2 {
    color: var(--color-white);
    font-size: clamp(2.3rem, 4.2vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

.keynote-cta-section p {
    font-size: 1.2rem;
    color: var(--color-gray-300);
    max-width: 680px;
    margin: 0 auto 2.5rem;
}

/* ==========================================================
   FAQ PORTA-PALETES
   ========================================================== */

.faq-section-apple {
    padding: 6.5rem 0;
    background: var(--color-white);
}

.faq-list-apple {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-card-apple {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-card-apple:hover {
    border-color: var(--color-gray-400);
}

.faq-summary-apple {
    padding: 1.4rem 1.75rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.faq-summary-apple::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--color-accent);
    font-weight: 400;
    transition: transform 0.3s var(--ease-spring);
}

.faq-card-apple[open] .faq-summary-apple::after {
    transform: rotate(45deg);
}

.faq-body-apple {
    padding: 0 1.75rem 1.5rem;
    color: var(--color-gray-600);
    font-size: 0.95rem;
    line-height: 1.6;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 1rem;
}

/* ==========================================================
   FOOTER
   ========================================================== */

.footer-apple {
    background: var(--color-dark);
    color: var(--color-gray-400);
    padding: 4.5rem 0 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid-apple {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 3.5rem;
}

.footer-logo-brand img {
    height: 44px;
    width: auto;
    object-fit: contain;
    margin-bottom: 1.25rem;
    display: block;
}

.footer-logo-brand p {
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 320px;
}

.footer-col-apple h5 {
    color: var(--color-white);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

.footer-links-apple {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.9rem;
}

.footer-links-apple a:hover {
    color: var(--color-accent);
}

.footer-bottom-apple {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.825rem;
}

.footer-bottom-apple a {
    color: var(--color-gray-300);
    text-decoration: underline;
}

.footer-bottom-apple a:hover {
    color: var(--color-accent);
}

/* ==========================================================
   MODAL DE CAPTURA WHATSAPP (APPLE TRANSLUCENCY + LGPD)
   Total conformidade com Google Ads & LGPD
   ========================================================== */

.lead-modal-apple {
    border: none;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: 0 32px 72px -16px rgba(0, 0, 0, 0.45);
    max-width: 460px;
    width: 92%;
    max-height: min(92vh, 92dvh);
    margin: auto;
    padding: 0;
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lead-modal-apple:not([open]) {
    display: none;
}

.lead-modal-apple::backdrop {
    background: rgba(6, 9, 25, 0.75);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    animation: fadeInBackdrop 0.3s ease-out;
}

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

.modal-header-apple {
    background: radial-gradient(circle at 50% 0%, #152266 0%, #080E2A 100%);
    padding: 1.35rem 1.5rem 1.15rem;
    color: var(--color-white);
    position: relative;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.modal-header-apple img {
    height: 38px;
    width: auto;
    max-width: 135px;
    object-fit: contain;
    margin: 0 auto 0.6rem;
    display: block;
}

.modal-header-apple h3 {
    color: var(--color-white);
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.modal-header-apple p {
    color: var(--color-gray-300);
    font-size: 0.825rem;
}

.modal-close-apple {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: var(--color-white);
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.modal-close-apple:hover {
    background: rgba(255, 255, 255, 0.25);
}

.modal-body-apple {
    padding: 1.25rem 1.5rem 1.35rem;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.modal-body-apple::-webkit-scrollbar {
    width: 5px;
}

.modal-body-apple::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body-apple::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.form-field-apple {
    margin-bottom: 0.75rem;
}

.form-field-apple label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}

.input-apple {
    width: 100%;
    padding: 0.72rem 1rem;
    font-size: 0.92rem;
    font-family: var(--font-body);
    border: 1.5px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background-color: var(--color-gray-50);
    color: var(--color-dark);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.input-apple:focus {
    outline: none;
    border-color: var(--color-accent);
    background-color: var(--color-white);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.form-field-apple.has-error .input-apple {
    border-color: #EF4444;
    background-color: #FEF2F2;
}

.field-error-text {
    color: #DC2626;
    font-size: 0.78rem;
    font-weight: 500;
    margin-top: 0.2rem;
    display: none;
}

.field-error-text:not(:empty) {
    display: block;
    margin-bottom: 0.25rem;
}

.checkbox-lgpd-apple {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0.65rem 0 0.85rem;
    padding: 0.65rem 0.85rem;
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.checkbox-lgpd-apple input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 0.1rem;
    accent-color: var(--color-accent);
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-lgpd-apple label {
    font-size: 0.78rem;
    color: var(--color-gray-700);
    line-height: 1.35;
    cursor: pointer;
}

.checkbox-lgpd-apple label a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
}

.btn-submit-apple {
    width: 100%;
    padding: 0.85rem 1.25rem;
    font-size: 0.98rem;
    background: linear-gradient(135deg, #2ED86E 0%, #20C45C 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-full);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    box-shadow: 0 10px 25px -4px rgba(32, 196, 92, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    transition: all var(--transition-apple);
    box-sizing: border-box;
}

.btn-submit-apple:hover:not(:disabled) {
    background: linear-gradient(135deg, #37E579 0%, #1AB352 100%);
    box-shadow: 0 14px 30px -4px rgba(32, 196, 92, 0.6);
    transform: translateY(-2px);
}

.btn-submit-apple:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner-apple {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

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

.modal-security-apple {
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-gray-500);
    margin-top: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

/* ==========================================================
   FLOATING WHATSAPP BUTTON (COM RESPOSTA FÍSICA E LOGO OFICIAL)
   ========================================================== */

.floating-whatsapp-apple {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px -2px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    border: none;
    outline: none;
    padding: 0;
    transition: transform var(--transition-apple), box-shadow 0.3s ease;
    animation: pulseAppleWhatsApp 2.8s infinite;
}

.floating-whatsapp-apple:hover {
    transform: scale(1.1);
    box-shadow: 0 14px 32px -4px rgba(37, 211, 102, 0.7);
}

.wa-icon-floating {
    width: 32px;
    height: 32px;
    fill: #ffffff;
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

.wa-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}

.wa-btn-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}


@keyframes pulseAppleWhatsApp {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 196, 92, 0.7);
    }
    70% {
        box-shadow: 0 0 0 18px rgba(32, 196, 92, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(32, 196, 92, 0);
    }
}

/* ==========================================================
   APPLE DESIGN: PRINCÍPIO 14 - REDUCED MOTION & ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .apple-reveal, .apple-scale-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .floating-whatsapp-apple {
        animation: none !important;
    }

    .hero-bg-parallax, .cinematic-bg-layer, [data-parallax-speed] {
        transform: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .header-apple {
        background: #ffffff !important;
        backdrop-filter: none !important;
    }
    .lead-modal-apple::backdrop {
        background: rgba(0, 0, 0, 0.85) !important;
        backdrop-filter: none !important;
    }
}

/* ==========================================================
   RESPONSIVIDADE (MOBILE & TABLET - ZERO OVERFLOW & APPLE POLISH)
   ========================================================== */

.btn-text-short {
    display: none;
}

@media (max-width: 992px) {
    .container {
        padding: 0 1.5rem;
    }
    .anatomy-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .anatomy-visual-sticky {
        position: relative;
        top: 0;
        margin-bottom: 2rem;
    }
    .anatomy-visual-sticky img {
        height: 340px;
    }
    .hero-specs-row {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
    .parallax-cinematic-banner {
        height: auto;
        min-height: 420px;
        padding: 4.5rem 1.5rem;
    }
    .gallery-card-apple:nth-child(1),
    .gallery-card-apple:nth-child(2),
    .gallery-card-apple:nth-child(3),
    .gallery-card-apple:nth-child(4),
    .gallery-card-apple:nth-child(5) {
        grid-column: span 6;
    }
    .footer-grid-apple {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100%;
        max-width: 100vw;
    }

    .container {
        padding: 0 1.25rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Topbar & Header */
    .topbar-apple {
        display: none;
    }
    .nav-links-apple {
        display: none;
    }
    .header-container-apple {
        height: 64px;
    }
    .brand-logo-apple img {
        height: 38px;
        max-width: 130px;
        object-fit: contain;
    }
    #btnHeaderCta {
        padding: 0.55rem 0.95rem;
        font-size: 0.82rem;
        gap: 0.4rem;
        box-shadow: 0 6px 16px -2px rgba(255, 90, 0, 0.4);
    }

    /* Botões Gerais no Celular: Permite quebra equilibrada sem estourar a tela */
    .btn {
        white-space: normal;
        word-break: normal;
        max-width: 100%;
        line-height: 1.3;
        text-align: center;
        box-sizing: border-box;
    }

    .btn-lg {
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
    }

    /* Hero Section */
    .hero-apple {
        padding: 3.5rem 0 4.5rem;
    }
    .hero-headline-apple {
        font-size: clamp(1.9rem, 7.5vw, 2.45rem);
        padding: 0;
        margin-bottom: 1.25rem;
        word-break: normal;
        overflow-wrap: break-word;
    }
    .hero-lead-text {
        font-size: 1rem;
        line-height: 1.55;
        padding: 0;
        margin-bottom: 2rem;
    }
    .hero-cta-group {
        flex-direction: column;
        align-items: stretch;
        max-width: 360px;
        margin: 0 auto 2.75rem;
        gap: 0.85rem;
        padding: 0;
    }
    .hero-cta-group .btn {
        width: 100%;
    }
    .hero-specs-row {
        grid-template-columns: 1fr;
        max-width: 360px;
        gap: 0.85rem;
        padding: 0;
    }
    .hero-spec-card {
        padding: 1.35rem 1.15rem;
    }
    .hero-spec-num {
        font-size: 2.1rem;
    }

    /* Seção Anatomia */
    .anatomy-section {
        padding: 4rem 0;
    }
    .anatomy-header {
        margin-bottom: 2.5rem;
    }
    .anatomy-title {
        font-size: clamp(1.7rem, 6.2vw, 2.2rem);
        margin-bottom: 1rem;
    }
    .anatomy-desc {
        font-size: 1rem;
    }
    .anatomy-visual-sticky {
        position: relative;
        top: 0;
        border-radius: var(--radius-lg);
        margin-bottom: 1.5rem;
    }
    .anatomy-visual-sticky img {
        height: 250px;
    }
    .visual-floating-tag {
        padding: 0.75rem 1rem;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
    }
    .visual-floating-tag strong {
        font-size: 0.88rem;
    }
    .visual-floating-tag span {
        font-size: 0.75rem;
    }
    .visual-step-indicator {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
        flex-shrink: 0;
    }
    .anatomy-cards-list {
        gap: 1.25rem;
    }
    .anatomy-card {
        padding: 1.5rem 1.25rem;
    }
    .anatomy-card h3 {
        font-size: 1.18rem;
        padding-right: 2rem;
    }
    .anatomy-card p {
        font-size: 0.9rem;
    }
    .anatomy-card-num {
        top: 1.25rem;
        right: 1.25rem;
        font-size: 1.2rem;
    }

    /* Seção Sistemas */
    .systems-section {
        padding: 4rem 0;
    }
    .systems-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .system-card {
        padding: 1.6rem 1.25rem;
    }
    .system-card h3 {
        font-size: 1.25rem;
    }
    .system-card p {
        font-size: 0.9rem;
    }
    .system-points li {
        font-size: 0.85rem;
    }
    .btn-card-cta {
        width: 100%;
        justify-content: center;
        white-space: normal;
        font-size: 0.88rem;
        padding: 0.8rem 1rem;
        box-sizing: border-box;
    }

    /* Banner Cinemático Parallax */
    .parallax-cinematic-banner {
        height: auto;
        min-height: 400px;
        padding: 4rem 1.25rem;
        box-sizing: border-box;
    }
    .cinematic-content {
        padding: 0;
        width: 100%;
        max-width: 480px;
        box-sizing: border-box;
    }
    .cinematic-content h2 {
        font-size: clamp(1.65rem, 6.5vw, 2.15rem);
        line-height: 1.2;
        letter-spacing: -0.025em;
        margin-bottom: 0.85rem;
        word-break: normal;
        overflow-wrap: break-word;
    }
    .cinematic-content p {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 1.75rem;
    }
    .cinematic-content .btn {
        width: 100%;
        max-width: 360px;
        padding: 0.85rem 1.15rem;
        font-size: 0.9rem;
        white-space: normal;
        box-sizing: border-box;
    }

    /* Especificações Técnicas */
    .tech-specs-section {
        padding: 4rem 0;
    }
    .tech-specs-header {
        margin-bottom: 2.5rem;
    }
    .tech-specs-header h2 {
        font-size: clamp(1.7rem, 6.2vw, 2.2rem);
    }
    .specs-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .spec-item {
        padding: 1.4rem 1.25rem;
    }
    .spec-title {
        font-size: 0.75rem;
    }
    .spec-value {
        font-size: 1.35rem;
    }
    .spec-detail {
        font-size: 0.85rem;
    }

    /* Galeria */
    .gallery-section-apple {
        padding: 4rem 0;
    }
    .apple-gallery-masonry {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .gallery-card-apple {
        grid-column: span 12 !important;
        height: 240px;
    }
    .gallery-card-overlay {
        padding: 1.25rem;
    }
    .gallery-card-overlay h4 {
        font-size: 1.1rem;
    }
    .gallery-card-overlay p {
        font-size: 0.82rem;
    }

    /* Seção Complementar */
    .complementary-section {
        padding: 3.5rem 0;
    }
    .complementary-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .complementary-chips {
        width: 100%;
    }
    .chip-item {
        font-size: 0.82rem;
        padding: 0.5rem 1rem;
    }

    /* Keynote CTA Banner */
    .keynote-cta-section {
        padding: 4.5rem 0;
    }
    .keynote-cta-container {
        padding: 0 1.25rem;
        box-sizing: border-box;
    }
    .keynote-cta-section h2 {
        font-size: clamp(1.65rem, 6.5vw, 2.25rem);
        line-height: 1.2;
        letter-spacing: -0.025em;
        margin-bottom: 1rem;
        word-break: normal;
        overflow-wrap: break-word;
    }
    .keynote-cta-section p {
        font-size: 0.98rem;
        line-height: 1.55;
        margin-bottom: 2rem;
    }
    .keynote-cta-section .btn {
        width: 100%;
        max-width: 380px;
        padding: 0.9rem 1.25rem;
        font-size: 0.92rem;
        white-space: normal;
        box-sizing: border-box;
    }

    /* FAQ */
    .faq-section-apple {
        padding: 4rem 0;
    }
    .faq-summary-apple {
        padding: 1.15rem 1.25rem;
        font-size: 0.98rem;
    }
    .faq-content-apple {
        padding: 0 1.25rem 1.25rem;
        font-size: 0.9rem;
    }

    /* Rodapé */
    .footer-grid-apple {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .footer-bottom-apple {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    /* Botão Flutuante do WhatsApp no Celular */
    .floating-whatsapp-apple {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 56px;
        height: 56px;
    }
    .floating-whatsapp-apple .wa-icon-floating {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    .header-container-apple {
        height: 60px;
    }
    .brand-logo-apple img {
        height: 32px;
        max-width: 110px;
    }
    .btn-text-full {
        display: none;
    }
    .btn-text-short {
        display: inline;
    }
    #btnHeaderCta {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
    .hero-badge-pill {
        font-size: 0.75rem;
        padding: 0.35rem 0.85rem;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }
    .hero-headline-apple {
        font-size: 1.85rem;
    }
    .hero-spec-num {
        font-size: 1.9rem;
    }
    .cinematic-content h2, .keynote-cta-section h2 {
        font-size: 1.55rem;
    }
    .lead-modal-apple {
        width: 95%;
        border-radius: var(--radius-lg);
        max-height: 94vh;
        max-height: 94dvh;
    }
    .modal-header-apple {
        padding: 1.15rem 1rem 0.95rem;
    }
    .modal-header-apple img {
        height: 32px;
        max-width: 110px;
        margin-bottom: 0.45rem;
    }
    .modal-header-apple h3 {
        font-size: 1.15rem;
    }
    .modal-body-apple {
        padding: 1rem 1rem 1.15rem;
    }
}

/* ==========================================================
   BANNER DE CONSENTIMENTO DE COOKIES LGPD (APPLE FROSTED GLASS)
   ========================================================== */
.cookie-banner-apple {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 30px);
    width: calc(100% - 32px);
    max-width: 1040px;
    z-index: 99999;
    background: rgba(8, 14, 42, 0.92);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: 1.4rem 1.75rem;
    color: var(--color-white);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-banner-apple.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.cookie-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cookie-banner-text {
    flex: 1;
}

.cookie-banner-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.cookie-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.cookie-banner-header h4 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-white);
    margin: 0;
}

.cookie-banner-text p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-gray-400);
    margin: 0;
}

.cookie-banner-text a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color 0.2s;
}

.cookie-banner-text a:hover {
    color: #FFA057;
}

.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.btn-cookie-primary {
    background: var(--color-accent);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-full);
    padding: 0.65rem 1.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s var(--ease-spring);
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(255, 106, 0, 0.3);
}

.btn-cookie-primary:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 106, 0, 0.45);
}

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

.btn-cookie-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-gray-200);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-full);
    padding: 0.65rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-cookie-secondary:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.3);
}

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

/* Link discreto para reabrir preferências de cookies no rodapé */
.btn-cookie-preferences {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    opacity: 0.8;
    transition: opacity 0.2s, color 0.2s;
}

.btn-cookie-preferences:hover {
    opacity: 1;
    color: var(--color-accent);
}

@media (max-width: 860px) {
    .cookie-banner-apple {
        bottom: 16px;
        width: calc(100% - 24px);
        padding: 1.25rem;
    }
    .cookie-banner-content {
        flex-direction: column;
        align-items: stretch;
        gap: 1.1rem;
    }
    .cookie-banner-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 0.6rem;
    }
    .btn-cookie-primary,
    .btn-cookie-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 0.7rem 0.5rem;
        font-size: 0.825rem;
    }
}