/* Kit Presença Digital — mobile-first */

body[data-page="kit"] {
    background-color: var(--color-background);
    --kit-sticky-bar-height: 0px;
}

body[data-page="kit"] main {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

body[data-page="kit"] .section-label {
    color: var(--color-primary);
    font-weight: 900;
}

body[data-page="kit"] .section-headline {
    font-size: clamp(1.65rem, 7.2vw, 3.25rem);
    line-height: 1.08;
    margin: 0.5rem 0 var(--space-s);
    font-weight: 800;
    transform: none;
    letter-spacing: -0.02em;
    color: var(--color-dark);
}

body[data-page="kit"] .hero-lp-premium {
    padding-top: clamp(1.25rem, 5vh, 2.5rem);
    padding-bottom: var(--space-m);
    align-items: flex-start;
    min-height: auto;
}

body[data-page="kit"] .headline-lp {
    font-size: clamp(2rem, 10.5vw, 6.5rem);
    line-height: 0.95;
    margin-bottom: 0.85rem;
    transform: none;
    max-width: 100%;
}

body[data-page="kit"] .subheadline-lp {
    font-size: clamp(0.92rem, 3.6vw, 1.45rem);
    margin: 0 0 1rem;
    line-height: 1.4;
    max-width: 100%;
}

body[data-page="kit"] .section-padding,
body[data-page="kit"] .section-alt,
body[data-page="kit"] .kit-cta-block {
    padding: var(--space-m) 0;
}

body[data-page="kit"] .text-block {
    font-size: clamp(0.92rem, 3.5vw, 1.15rem);
    line-height: 1.55;
    margin-top: var(--space-s);
}

body[data-page="kit"] .price-tag-value {
    font-size: clamp(1.75rem, 8vw, 2.2rem);
}

body[data-page="kit"] .btn-cta-premium {
    width: 100%;
    max-width: none;
    padding: 1.1rem 1.15rem;
    font-size: 0.68rem;
    min-height: 48px;
}

body[data-page="kit"] .hero-action-group {
    width: 100%;
    margin-bottom: var(--space-s);
    opacity: 1;
    animation: none;
}

body[data-page="kit"] .hero-lp-premium .hero-technical-stats {
    opacity: 1;
    animation: none;
}

body[data-page="kit"] .hero-action-group .kit-btn-outline {
    width: 100%;
    min-height: 48px;
    padding: 1rem 1.15rem;
    font-size: 0.68rem;
    background-color: transparent;
    color: var(--color-dark);
    border: 1px solid var(--color-border);
}

body[data-page="kit"] .hero-action-group .kit-btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    opacity: 1;
    background-color: transparent;
}

body[data-page="kit"] .hero-technical-stats {
    gap: var(--space-s);
    flex-wrap: wrap;
    padding-top: var(--space-s);
    margin: 0;
}

body[data-page="kit"] .tech-spec {
    flex: 1 1 30%;
    min-width: 88px;
}

body[data-page="kit"] .tech-spec strong {
    font-size: 1rem;
}

.kit-back {
    padding-top: 0.65rem;
    padding-bottom: 0.15rem;
}

.kit-back-link {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-dim);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.kit-back-link:hover {
    color: var(--color-primary);
}

/* Hero — ordem mobile: título → imagem → preço/CTA */
.kit-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kit-hero-label {
    margin-bottom: 0.35rem;
}

.kit-hero-title {
    margin-bottom: 0.65rem;
}

.kit-hero-sub {
    margin-bottom: 0.85rem;
}

.kit-hero-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.kit-hero-visual {
    margin: 0 0 var(--space-s);
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    padding: 0.4rem;
    border-radius: 4px;
}

.kit-hero-visual picture,
.kit-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(26, 31, 38, 0.04) 100%);
}

.kit-hero-visual-caption {
    margin-top: 0.35rem;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    text-align: center;
}

.price-tag-note {
    margin-top: 0.4rem;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    line-height: 1.4;
}

.kit-btn-label-short {
    display: inline;
}

.kit-btn-label-full {
    display: none;
}

/* Botão outline — hero e fundos claros */
.kit-btn-outline {
    background-color: transparent;
    color: var(--color-dark);
    border: 1px solid var(--color-border);
}

.kit-btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    opacity: 1;
    background-color: transparent;
}

/* CTA escuro — fundo fixo (não usa var(--color-dark), que muda no modo contraste) */
body[data-page="kit"] .kit-cta-block {
    background-color: #1A1F26;
}

/* CTA escuro — secundário outline */
.kit-cta-block .kit-btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #FFFFFF;
    width: 100%;
    min-height: 48px;
}

.kit-cta-block .kit-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #FFFFFF;
    color: #FFFFFF;
    opacity: 1;
}

/* CTA escuro — botão principal legível sobre fundo escuro */
.kit-cta-block .btn-secondary {
    background-color: var(--color-primary);
    color: #FFFFFF;
    border-color: var(--color-primary);
}

.kit-cta-block .btn-secondary:hover {
    background-color: var(--color-primary-text);
    border-color: var(--color-primary-text);
    opacity: 1;
}

.kit-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    margin: var(--space-s) 0;
    width: 100%;
}

.kit-trust--compact {
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .kit-trust--compact {
        grid-template-columns: repeat(3, 1fr);
    }
}

.kit-trust--compact .kit-trust-item {
    padding: 0.45rem 0.5rem;
    gap: 0.45rem;
}

.kit-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-alt);
    min-height: 44px;
}

.kit-trust-item img {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.kit-trust-item span {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.kit-trust-item strong {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--color-dark);
    line-height: 1.2;
}

.kit-trust-item small {
    font-size: 0.52rem;
    color: var(--color-text-dim);
    line-height: 1.25;
    font-weight: 600;
}

.kit-trust--dark .kit-trust-item {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

.kit-trust--dark .kit-trust-item strong {
    color: #FFFFFF;
}

.kit-trust--dark .kit-trust-item small {
    color: rgba(255, 255, 255, 0.72);
}

/* Ícones escuros → brancos no fundo escuro (color em <img> não funciona) */
.kit-trust--dark .kit-trust-icon {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.kit-includes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-top: var(--space-s);
}

.kit-include-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    padding: 0.85rem;
    background: #FFFFFF;
}

.kit-include-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}

.kit-include-card h3 {
    font-size: 0.92rem;
    margin-bottom: 0.25rem;
    color: var(--color-dark);
}

.kit-include-card p {
    font-size: 0.78rem;
    color: var(--color-text-dim);
    line-height: 1.45;
    margin: 0;
}

.kit-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--space-s);
}

.kit-step {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-border);
}

.kit-step:last-child {
    border-bottom: 0;
}

.kit-step-num {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--color-primary);
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 50%;
}

.kit-step h3 {
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
    color: var(--color-dark);
}

.kit-step p {
    font-size: 0.72rem;
    color: var(--color-text-dim);
    margin: 0;
    line-height: 1.45;
}

body[data-page="kit"] .section-alt .section-label {
    color: var(--color-primary);
}

.kit-audience-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: var(--space-s);
}

.kit-audience-tag {
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-dark);
    background: #FFFFFF;
}

.kit-compare {
    margin-top: var(--space-s);
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-dark);
}

.kit-compare a {
    color: var(--color-primary);
    font-weight: 700;
}

.kit-cta-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

body[data-page="kit"] .kit-cta-block .section-headline {
    color: #FFFFFF;
    margin-bottom: 0.5rem;
    transform: none;
    transform-origin: left;
}

body[data-page="kit"] .kit-cta-block .kit-cta-copy p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 42ch;
    margin: 0;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.6;
    font-weight: 500;
}

.kit-cta-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: stretch;
    width: 100%;
}

.kit-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-items: stretch;
    width: 100%;
}

.kit-cta-block .kit-trust {
    margin-bottom: 0;
}

.kit-cta-block .kit-trust--dark {
    grid-template-columns: 1fr;
}

/* Barra fixa — só mobile; visível via JS ao rolar (fora dos CTAs do hero/rodapé) */
.kit-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 0.55rem var(--space-s);
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 24px rgba(26, 31, 38, 0.08);
    backdrop-filter: blur(8px);
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.kit-sticky-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

.kit-sticky-cta[hidden] {
    display: block;
}

.kit-sticky-cta-btn {
    margin: 0;
    box-shadow: 0 8px 20px rgba(26, 31, 38, 0.12);
}

.kit-sticky-cta-btn img {
    filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
    body[data-page="kit"].kit-sticky-active {
        --kit-sticky-bar-height: 4.75rem;
    }

    body[data-page="kit"].kit-sticky-active main {
        padding-bottom: calc(var(--kit-sticky-bar-height) + env(safe-area-inset-bottom, 0px));
    }

    body[data-page="kit"].kit-sticky-active .footer {
        padding-bottom: calc(var(--space-m) + var(--kit-sticky-bar-height) + env(safe-area-inset-bottom, 0px));
    }

    /* Widget flutuante acima da barra de pedido */
    body[data-page="kit"] .a11y-widget {
        bottom: calc(var(--kit-sticky-bar-height) + 0.75rem + env(safe-area-inset-bottom, 0px));
        transition: bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    body[data-page="kit"] .a11y-widget.is-open .a11y-widget-panel {
        max-height: calc(100dvh - var(--kit-sticky-bar-height) - 5rem - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }
}

/* Animações hero (landing.css não cobre nova estrutura) */
.kit-hero-grid .kit-hero-label,
.kit-hero-grid .kit-hero-title,
.kit-hero-grid .kit-hero-sub,
.kit-hero-grid .kit-hero-visual {
    opacity: 0;
    animation: fadeInUp 0.7s ease forwards;
}

.kit-hero-grid .kit-hero-body {
    opacity: 1;
    animation: none;
}

.kit-hero-grid .kit-hero-title { animation-delay: 0.05s; }
.kit-hero-grid .kit-hero-sub { animation-delay: 0.1s; }
.kit-hero-grid .kit-hero-visual { animation-delay: 0.15s; }
.kit-hero-grid .kit-hero-body { animation-delay: 0.2s; }

@media (min-width: 480px) {
    .kit-btn-label-short {
        display: none;
    }

    .kit-btn-label-full {
        display: inline;
    }

    .kit-trust-item strong {
        font-size: 0.62rem;
    }

    .kit-trust-item small {
        font-size: 0.55rem;
    }
}

@media (min-width: 768px) {
    body[data-page="kit"] main {
        padding-bottom: 0;
    }

    .kit-sticky-cta {
        display: none !important;
    }

    body[data-page="kit"] .section-headline {
        font-size: clamp(2rem, 5vw, 3.25rem);
        transform: scaleX(1.05);
        transform-origin: left;
        margin: var(--space-s) 0 var(--space-m);
    }

    body[data-page="kit"] .kit-cta-block .section-headline {
        color: #FFFFFF;
        transform: none;
    }

    body[data-page="kit"] .kit-cta-block .kit-cta-copy p {
        font-size: 1rem;
        max-width: 48ch;
    }

    body[data-page="kit"] .section-padding,
    body[data-page="kit"] .section-alt,
    body[data-page="kit"] .kit-cta-block {
        padding: var(--space-l) 0;
    }

    body[data-page="kit"] .hero-lp-premium {
        padding-top: clamp(2rem, 8vh, 4rem);
        padding-bottom: var(--space-l);
    }

    body[data-page="kit"] .headline-lp {
        transform: scaleX(1.05);
        transform-origin: left;
    }

    body[data-page="kit"] .btn-cta-premium {
        max-width: 440px;
        padding: 1.35rem 2rem;
        font-size: 0.78rem;
    }

    body[data-page="kit"] .hero-action-group .kit-btn-outline {
        width: auto;
        max-width: 440px;
    }

    .kit-includes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-s);
        margin-top: var(--space-m);
    }

    .kit-include-card {
        padding: var(--space-m);
    }

    .kit-include-thumb {
        width: 56px;
        height: 56px;
    }

    .kit-trust {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
    }

    .kit-trust--compact .kit-trust-item {
        padding: 0.55rem 0.7rem;
    }

    .kit-trust-item img {
        width: 24px;
        height: 24px;
    }

    .kit-trust-item strong {
        font-size: 0.68rem;
    }

    .kit-trust-item small {
        font-size: 0.62rem;
    }

    .kit-cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .kit-cta-actions .btn-cta-premium {
        width: auto;
        max-width: none;
    }

    .kit-cta-block .kit-btn-ghost {
        width: auto;
    }

    .kit-cta-block .kit-trust--dark {
        grid-template-columns: repeat(3, 1fr);
    }

    .kit-hero-visual {
        aspect-ratio: auto;
    }

    .kit-hero-visual picture,
    .kit-hero-visual img {
        aspect-ratio: 3 / 2;
    }
}

@media (min-width: 992px) {
    body[data-page="kit"] .hero-lp-premium {
        padding-top: clamp(3rem, 8vh, 5rem);
        min-height: auto;
    }

    .kit-hero-grid:not(.kit-hero-grid--no-visual) {
        display: grid;
        grid-template-columns: 1fr minmax(240px, 360px);
        grid-template-areas:
            "label visual"
            "title visual"
            "sub visual"
            "body visual";
        align-items: start;
        column-gap: var(--space-l);
        row-gap: 0;
    }

    .kit-hero-grid:not(.kit-hero-grid--no-visual) .kit-hero-label { grid-area: label; }
    .kit-hero-grid:not(.kit-hero-grid--no-visual) .kit-hero-title { grid-area: title; }
    .kit-hero-grid:not(.kit-hero-grid--no-visual) .kit-hero-sub { grid-area: sub; margin-bottom: 0; }
    .kit-hero-grid:not(.kit-hero-grid--no-visual) .kit-hero-visual {
        grid-area: visual;
        margin: 0;
        align-self: center;
        max-width: 360px;
    }
    .kit-hero-grid:not(.kit-hero-grid--no-visual) .kit-hero-body { grid-area: body; margin-top: var(--space-m); }

    .kit-hero-grid--no-visual .kit-hero-body {
        margin-top: var(--space-s);
    }

    .kit-cta-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: var(--space-l);
    }
}

@media (max-width: 359px) {
    .kit-trust {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kit-hero-grid .kit-hero-label,
    .kit-hero-grid .kit-hero-title,
    .kit-hero-grid .kit-hero-sub,
    .kit-hero-grid .kit-hero-visual {
        opacity: 1;
        animation: none;
    }
}

/* Modo escuro / alto contraste (widget a11y) */
body.a11y-high-contrast[data-page="kit"] .kit-cta-block {
    background-color: var(--a11y-surface) !important;
}

body.a11y-high-contrast[data-page="kit"] .kit-cta-block .section-headline,
body.a11y-high-contrast[data-page="kit"] .kit-cta-block .kit-cta-copy p {
    color: var(--a11y-text) !important;
}

body.a11y-high-contrast[data-page="kit"] .kit-btn-outline,
body.a11y-high-contrast[data-page="kit"] .kit-cta-block .kit-btn-ghost {
    background: transparent !important;
    color: var(--a11y-text) !important;
    border-color: var(--a11y-border) !important;
}

body.a11y-high-contrast[data-page="kit"] .kit-btn-outline:hover,
body.a11y-high-contrast[data-page="kit"] .kit-cta-block .kit-btn-ghost:hover {
    color: var(--a11y-accent) !important;
    border-color: var(--a11y-accent) !important;
}

body.a11y-high-contrast[data-page="kit"] .kit-cta-block .btn-secondary {
    background-color: var(--a11y-accent) !important;
    color: var(--a11y-on-accent) !important;
    border-color: var(--a11y-accent) !important;
}

body.a11y-high-contrast[data-page="kit"] .kit-trust--dark .kit-trust-icon {
    filter: brightness(0) invert(1);
}

body.a11y-high-contrast[data-page="kit"] .kit-trust--dark .kit-trust-item strong {
    color: var(--a11y-text);
}

body.a11y-high-contrast[data-page="kit"] .kit-trust--dark .kit-trust-item small {
    color: var(--a11y-text-muted);
}