/* ============================================================
   SPEEDINFO - INTRO / LOADING
============================================================ */

.site-intro {
    position: fixed;
    inset: 0;

    z-index: 99999;
    pointer-events: none;

    width: 100%;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #000;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}


/* ============================================================
   VÍDEOS
============================================================ */

.site-intro video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    background: #000;
}


/* ============================================================
   MOBILE OCULTO POR PADRÃO
============================================================ */

#introMobile {
    display: none;
}


/* ============================================================
   ATÉ 1024px
============================================================ */

@media (max-width: 1024px) {

    #introDesktop {
        display: none;
    }

    #introMobile {
        display: block;
    }

}


/* ============================================================
   FINALIZAÇÃO
============================================================ */

.site-intro.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ============================================================
   REDUZIR ANIMAÇÕES
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .site-intro {
        display: none;
    }

}
/* Scroll reveals animate only opacity and transform, once per section. */
.section-reveal {
    transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1);
}
.section-reveal.reveal-pending {
    opacity: 0;
    transform: translateY(24px);
}
@media (prefers-reduced-motion: reduce) {
    .section-reveal, .section-reveal.reveal-pending {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
@media print {
    .section-reveal.reveal-pending { opacity: 1; transform: none; }
    .site-intro { display: none; }
}
/* Staggered reveals use independent translate, leaving hover transforms free. */
.detail-pending { opacity: 0; }
.detail-entering {
    animation: detail-arrive .58s cubic-bezier(.22,1,.36,1) var(--entry-delay, 0ms) both;
}
@keyframes detail-arrive {
    from { opacity: 0; translate: 0 18px; }
    to { opacity: 1; translate: 0 0; }
}
.speed-plans.motion-managed { animation: none; }
.speed-card, .solucao-item {
    transition: transform .28s cubic-bezier(.22,1,.36,1),
        box-shadow .28s ease, background-color .28s ease, color .28s ease;
}
.btn-yellow, .cep button, .clientArea, .social-media a {
    transition: transform .22s ease, background-color .22s ease, color .22s ease;
}
.dropdown-section summary {
    transition: color .22s ease, background-color .22s ease;
}
.dropdown-section details[open] > p {
    animation: faq-arrive .25s ease both;
}
@keyframes faq-arrive {
    from { opacity: 0; translate: 0 -5px; }
    to { opacity: 1; translate: 0 0; }
}
@media (hover: hover) and (pointer: fine) {
    .speed-card:hover, .speed-card:focus-within {
        transform: translateY(-6px);
        box-shadow: 0 12px 24px rgba(0,0,0,.18);
    }
    .solucao-item:hover { transform: translateY(-4px); }
    .btn-yellow:hover, .cep button:hover, .clientArea:hover, .social-media a:hover {
        transform: translateY(-2px);
    }
}
.btn-yellow:active, .cep button:active, .clientArea:active {
    transform: scale(.98);
}
:is(.btn-yellow, .cep button, .clientArea, .social-media a, .dropdown-section summary):focus-visible {
    outline: 3px solid var(--primary, #174a80);
    outline-offset: 4px;
}
.cep input:focus-visible {
    outline: 3px solid var(--primary, #174a80);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .detail-pending { opacity: 1; }
    .detail-entering, .dropdown-section details[open] > p {
        animation: none;
        translate: none;
    }
    .speed-card, .solucao-item, .btn-yellow, .cep button, .clientArea, .social-media a {
        transition: none;
        transform: none;
    }
    .speed-card:hover, .speed-card:focus-within, .solucao-item:hover,
    .btn-yellow:hover, .cep button:hover, .clientArea:hover, .social-media a:hover,
    .btn-yellow:active, .cep button:active, .clientArea:active { transform: none; }
}
@media print {
    .detail-pending { opacity: 1; }
    .detail-entering { animation: none; translate: none; }
}
/* Ambient accents keep the offers prominent without moving the layout. */
.planTitleMain::after,
#solucoes .section-title::after {
    content: "";
    display: block;
    width: 76px;
    height: 4px;
    margin: 16px auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
    background-size: 200% 100%;
    animation: offer-accent 7s ease-in-out infinite;
}

.conteudoDinamico.gradient {
    animation: gradient-animation 22s ease-in-out infinite;
}

.btn-yellow,
.assine .clientArea {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.btn-yellow::after,
.assine .clientArea::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
    transform: translateX(-130%);
    animation: offer-shine 8s ease-in-out infinite;
}
.speed-card:nth-child(2) .btn-yellow::after { animation-delay: 1.4s; }
.speed-card:nth-child(3) .btn-yellow::after { animation-delay: 2.8s; }
.speed-card:nth-child(4) .btn-yellow::after { animation-delay: 4.2s; }

.solucao-item img {
    animation: benefit-float 6s ease-in-out infinite;
}
.solucao-item:nth-child(2) img { animation-delay: -1.5s; }
.solucao-item:nth-child(3) img { animation-delay: -3s; }
.solucao-item:nth-child(4) img { animation-delay: -4.5s; }

.chatbot-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--primary);
    border-radius: inherit;
    pointer-events: none;
    animation: contact-beacon 6s ease-out infinite;
}
.chatbot-button { transition: transform .25s ease, box-shadow .25s ease; }
.homeSlideshow button { transition: background-color .25s ease, opacity .25s ease; }

@keyframes offer-shine {
    0%, 72% { transform: translateX(-130%); }
    92%, 100% { transform: translateX(130%); }
}
@keyframes benefit-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes offer-accent {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes contact-beacon {
    0%, 55% { transform: scale(1); opacity: 0; }
    60% { transform: scale(1); opacity: .5; }
    90%, 100% { transform: scale(1.35); opacity: 0; }
}

@media (hover: hover) and (pointer: fine) {
    .speed-card:hover .btn-yellow { background-color: #ffd16b; }
    .solucao-item:hover img { animation-play-state: paused; }
    .chatbot-button:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(39,127,157,.3); }
    .btn-yellow:hover::after,
    .assine .clientArea:hover::after { animation-play-state: paused; }
}

/* Pause ambient work outside the viewport and in background tabs. */
[data-ambient="paused"],
[data-ambient="paused"]::before,
[data-ambient="paused"]::after,
[data-ambient="paused"] .solucao-item img,
[data-ambient="paused"] .btn-yellow::after,
[data-ambient="paused"] .planTitleMain::after,
[data-ambient="paused"] .section-title::after,
html.motion-paused [data-ambient],
html.motion-paused [data-ambient]::before,
html.motion-paused [data-ambient]::after,
html.motion-paused [data-ambient] * ,
html.motion-paused [data-ambient] *::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce), print {
    .conteudoDinamico.gradient,
    .planTitleMain::after,
    #solucoes .section-title::after,
    .btn-yellow::after,
    .assine .clientArea::after,
    .solucao-item img,
    .chatbot-button::before { animation: none; }
    .btn-yellow::after,
    .assine .clientArea::after,
    .chatbot-button::before { display: none; }
}
/* Offer cards breathe through their accents while the text stays still. */
.speed-card,
.solucao-item {
    position: relative;
    isolation: isolate;
}
.speed-card::before,
.solucao-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 2px solid var(--secondary);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    animation: card-outline 9s ease-in-out var(--card-phase, 0s) infinite;
}
.speed-card:nth-child(2), .solucao-item:nth-child(2) { --card-phase: -2.25s; }
.speed-card:nth-child(3), .solucao-item:nth-child(3) { --card-phase: -4.5s; }
.speed-card:nth-child(4), .solucao-item:nth-child(4) { --card-phase: -6.75s; }
.solucao-item::before { border-color: var(--primary); }

.speed-card .card-top {
    background: linear-gradient(110deg, var(--primary-plus), var(--primary), #369eb5, var(--primary-plus));
    background-size: 250% 100%;
    animation: card-header-flow 12s ease-in-out var(--card-phase, 0s) infinite;
}
.speed-card .mega {
    transition: color .3s ease, text-shadow .3s ease;
}
.speed-card .benefits i {
    color: var(--primary);
    display: inline-block;
    transition: transform .3s ease, color .3s ease;
}
.speed-card .btn-yellow {
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

@keyframes card-outline {
    0%, 15%, 65%, 100% { opacity: .08; }
    35%, 45% { opacity: .7; }
}
@keyframes card-header-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Keyboard focus gets the same offer emphasis as a pointer. */
.speed-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(39,127,157,.2);
}
.speed-card:focus-within::before {
    animation-play-state: paused;
    opacity: 1;
}
.speed-card:focus-within .btn-yellow {
    box-shadow: 0 4px 14px rgba(251,174,47,.35);
}
@media (hover: hover) and (pointer: fine) {
    .speed-card:hover { box-shadow: 0 14px 30px rgba(39,127,157,.2); }
    .speed-card:hover::before,
    .solucao-item:hover::before { animation: none; opacity: 1; }
    .speed-card:hover .mega { color: #d98c09; text-shadow: 0 2px 12px rgba(251,174,47,.2); }
    .speed-card:hover .benefits i { transform: scale(1.12); }
    .speed-card:hover .btn-yellow { box-shadow: 0 4px 14px rgba(251,174,47,.35); }
    .solucao-item:hover { box-shadow: 0 12px 28px rgba(39,127,157,.2); }
}
[data-ambient="paused"] .speed-card::before,
[data-ambient="paused"] .solucao-item::before,
[data-ambient="paused"] .card-top,
html.motion-paused .speed-card::before,
html.motion-paused .solucao-item::before { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce), print {
    .speed-card::before,
    .solucao-item::before,
    .speed-card .card-top { animation: none; }
    .speed-card::before,
    .solucao-item::before { opacity: .2; }
    .speed-card:focus-within,
    .speed-card:hover,
    .solucao-item:hover,
    .speed-card:hover .benefits i { transform: none; }
    .speed-card .mega,
    .speed-card .benefits i,
    .speed-card .btn-yellow { transition: none; }
}