/* ===================================
   INSTITUCIONAL PAGE
   It! Wheel - Página Institucional
   =================================== */


/* =============================================
   BANNER HERO + 3-LINHAS WRAPPER
   ============================================= */
.inst-banner-wrapper {
    z-index: 1;
}

.inst-banner {
    position: relative;
    width: 100%;
    overflow: visible !important;
    top: -90px;
}

.inst-banner-img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

/* Overlays — same as home banner for header contrast */
.inst-banner::before,
.inst-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

/* Top gradient — darkens top for header readability */
.inst-banner::before {
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg, rgba(11, 11, 11, 0.97) 0%, rgba(11, 11, 11, 0) 100%);
}

/* Left gradient — adds depth on the left side */
/* Text overlay on the right */
.inst-banner-overlay {
    position: absolute;
    top: 0;
    left: -250px;
    top: -30px;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8%;
}

.inst-banner-text {
    max-width: 480px;
    text-align: left;
}

.inst-banner-text h1 {
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 400;
    font-size: 45px;
    line-height: 54px;
    color: #FFF;
    text-transform: uppercase;
    margin: 0 0 34px;
}

.inst-banner-text p {
    font-family: 'Exo', sans-serif !important;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: rgba(255,255,255,0.92);
    margin: 0;
}

/* 3-linhas — clip-path reveal animation (same pattern as home banner) */
.inst-banner-3linhas {
    position: absolute;
    right: 0px;
    bottom: -186px;
    width: auto;
    z-index: 115;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
   animation: clip-reveal-top-bottom 3.5s cubic-bezier(0.22, 1, 0.36, 1.5) 0.5s forwards;
}


/* =============================================
   BARRA INGRESSOS INSTITUCIONAL
   ============================================= */
.inst-ingresso-anchor {
    position: relative;
    z-index: 120;
    display: flex;
    justify-content: flex-end;
    margin-top: -280px;
    overflow: hidden;
}

/* Placeholder keeps layout space when bar is fixed */
.inst-ingresso-anchor.has-placeholder {
    min-height: 79px;
}

.inst-ingresso-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 30px 0 40px;
    width: 1109px;
    max-width: 100%;
    height: 79px;
    background: linear-gradient(180deg, #279BB1 0.15%, #005284 100.15%);
    border-top-left-radius: 200px;
    border-bottom-left-radius: 200px;
    /* Start off-screen to the right */
    transform: translateX(110%);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    pointer-events: none;
}

/* Entrance: slide from right (triggered by JS adding .is-visible) */
.inst-ingresso-bar.is-visible {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Stagger children: label + buttons appear sequentially */
.inst-ingresso-bar .sticky-ingresso-label,
.inst-ingresso-bar .sticky-ingresso-btn {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.inst-ingresso-bar.is-visible .sticky-ingresso-label {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}
.inst-ingresso-bar.is-visible .sticky-ingresso-btn:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.45s;
}
.inst-ingresso-bar.is-visible .sticky-ingresso-btn:nth-child(3) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.6s;
}
.inst-ingresso-bar.is-visible .sticky-ingresso-btn:nth-child(4) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.75s;
}

/* When stuck near top */
.inst-ingresso-bar.is-stuck {
    position: fixed;
    right: 0;
    z-index: 201;
    border-radius: 200px 0 0 200px;
    transform-origin: right center;
    transform: scaleX(0.82) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    will-change: transform, opacity;
}

.inst-ingresso-bar.is-stuck.is-stuck-active {
    transform: scaleX(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.inst-ingresso-bar.is-banner-hidden {
    transform-origin: right center;
    transform: scaleX(0.82) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.inst-ingresso-bar.is-stuck-top {
    top: 15px;
    bottom: auto;
}

.inst-ingresso-bar.is-stuck-bottom {
    top: auto;
    bottom: var(--inst-mobile-ingresso-bottom-gap, 16px);
}
.inst-ingresso-bar.is-stuck .sticky-ingresso-label,
.inst-ingresso-bar.is-stuck .sticky-ingresso-btn {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0s;
}

/* Scale down label & buttons slightly to match 1109x79 */
.inst-ingresso-bar .sticky-ingresso-label {
    font-size: 16px;
    margin-right: 12px;
    color: #fff;
}
.inst-ingresso-bar .sticky-ingresso-btn {
    font-size: 13px;
    padding: 9px 20px;
    width: 152px;
    height: 44px;
}
.inst-ingresso-bar .sticky-ingresso-btn img {
    width: 18px;
    height: 18px;
    margin-bottom: 4px;
    margin-left: -5px;
}
.inst-ingresso-bar .sticky-ingresso-btn span {
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 500 !important;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}



/* =============================================
   NUVENS FLUTUANTES
   ============================================= */
/* Clouds drift from right to left — same as home */
.inst-nuvens-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 110;
    pointer-events: none;
    overflow: hidden;
}

.inst-nuvens-top .nuvem-float {
    position: absolute;
    height: auto;
    will-change: transform;
}

/* Nuvem 1 — 918x612  near ingresso line, left side */
.inst-nuvens-top .nuvem1 {
    top: 19%;
    width: 918px;
    animation: instNuvemDrift1 160s linear infinite;
    animation-delay: -110s;
}

/* Nuvem 2 — 683x455  near ingresso line, right side */
.inst-nuvens-top .nuvem2 {
    top: 18%;
    width: 683px;
    animation: instNuvemDrift2 180s linear infinite;
    animation-delay: -70s;
}

/* Nuvem 3 — 953x635 at lugar section level */
.inst-nuvem-lugar {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}
.inst-nuvem-lugar .nuvem3 {
    position: absolute;
    top: 0;
    width: 953px;
    height: auto;
    will-change: transform;
    animation: instNuvemDrift3 200s linear infinite;
    animation-delay: -20s;
}

@keyframes instNuvemDrift1 {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-120%); }
}
@keyframes instNuvemDrift2 {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-120%); }
}
@keyframes instNuvemDrift3 {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-120%); }
}


/* =============================================
   PAGE BACKGROUND
   ============================================= */
body:not(.is-home) {
    background-color: #EEF7F8;
}


/* =============================================
   GRADIENT BACKGROUND WRAPPER
   Wraps banner → ingresso → lugar → coracao (like home .gradient-zone)
   ============================================= */
.inst-gradient-wrapper {
    position: relative;
    background: linear-gradient(180deg, #C6EBF6 0%, #EEF7F8 50%, #9FE4F1 82%, #EEF7F8 100%);
    overflow: visible;
}


/* =============================================
   "UM LUGAR QUE ENCHE OS OLHOS" SECTION
   ============================================= */
.inst-lugar {
    position: relative;
    padding: 100px 0 0;
    background: transparent;
    overflow: visible;
}

.inst-lugar-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
}

.inst-lugar-heading {
    flex: 0 0 auto;
    max-width: 420px;
    margin-left: 135px;
    padding-top: 60px;
}

.inst-lugar-heading h2 {
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 500;
    font-size: 46px;
    line-height: 120%;
    letter-spacing: 0.05em;
    color: #EC6608;
    text-transform: uppercase;
    margin: 0;
}

.inst-lugar-body {
    flex: 0 0 420px;
    max-width: 420px;
    position: relative;
    padding-top: 110px;
    margin-right: 208px;
}


.inst-lugar-body p,
.inst-lugar-body div {
    font-family: 'Exo', sans-serif !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    
    color: #279BB1;
}
.inst-lugar-body strong {
    color: inherit;
}


/* =============================================
   O CORAÇÃO DE ITAPEMA — box + roda + astronauta
   ============================================= */
.inst-coracao {
    position: relative;
    padding: 0 0 0;
    overflow: visible;
}

.inst-coracao-inner {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-top: -90px;
}

/* Texto coração — sem card, título laranja + texto azul */
.inst-coracao-box {
    flex: 0 0 420px;
    max-width: 420px;
    margin-left: 135px;
}       

.inst-coracao-box h2 {
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 500;
    font-size: 46px;
    line-height: 120%;
    letter-spacing: 0.05em;
    color: #EC6608;
    text-transform: uppercase;
    margin: 0 0 60px;
}

.inst-coracao-box p {
    font-family: 'Exo', sans-serif !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #279BB1;
    margin: 0;
}
.inst-coracao-box strong {
    color: inherit;
}
/* Visual: roda gigante + astronauta flutuante */
.inst-coracao-visual {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 400px;
    top: 210px !important;
    margin-bottom: 210px;
}

/* Assembly: base (static) + wheel (rotates on scroll) */
.inst-roda-assembly {
    position: relative;
    width: 779px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.inst-roda-wheel {
    width: 100%;
    height: auto;
    display: block;
    will-change: transform;
    transition: transform 0.1s linear;
}

.inst-roda-base {
    position: absolute;
    bottom: -39px;
    left: 50.641%;
    transform: translateX(-50%);
    width: 50%;
    height: auto;
    display: block;
    z-index: 12;
}

.inst-astronauta-wrap {
    position: absolute;
    top: -50px;
    right: 15px;
    width: 273px;
    z-index: 3;
    pointer-events: none;
}

.inst-astronauta-float {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    animation: astronaut-bob 3s ease-in-out infinite;
}


/* =============================================
   FUNDO INSTITUCIONAL + FAMILIA + NUVENS
   ============================================= */
.inst-fundo {
    position: relative;
    overflow: visible;
    line-height: 0;
    margin-top: -150px;
    z-index: 100;
}

/* lines.png — decorativa lado esquerdo, clip-path top→bottom */
.inst-fundo-lines {
    position: absolute;
    left: -10px;
    top: 640px;
    width: 457px;
    height: auto;
    z-index: 5;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
}

.inst-fundo.in-view .inst-fundo-lines {
    animation: clip-reveal-top-bottom 3.5s cubic-bezier(0.22, 1, 0.36, 1.5) 1s forwards;
}

@keyframes clip-reveal-top-bottom {
    0%   { clip-path: inset(0 0 100% 0); }
    100% { clip-path: inset(0 0 0% 0); }
}

.inst-fundo-img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

/* Família — posicionada sobre o fundo */
.inst-familia-img {
    position: absolute;
    left: 5%;
    bottom: 19%;
    width: 735px;
    height: 585px;
    z-index: 3;
    pointer-events: none;
}

/* Nuvens — estáticas */
.inst-nuvem {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    line-height: 0;
}
.inst-nuvem img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Nuvem 1 — atrás da família (esquerda) */
.inst-nuvem-familia {
    width: 1023px;
    height: 682px;
    left: -5%;
    bottom: 50%;
    z-index: 2;
    will-change: transform;
}

/* Nuvem 2 — perto da roda gigante (direita) */
.inst-nuvem-roda {
    width: 843px;
    height: 562px;
    right: -2%;
    top: -15%;
    z-index: 2;
    will-change: transform;
}

/* Box laranja com texto */
.inst-fundo-box {
    position: absolute;
    right: 20%;
    bottom: 12%;
    width: 540px;
    height: 200px;
    border-radius: 20px;
    background: linear-gradient(180deg, #F29120 0%, #EC6608 100%);
    display: flex;
    align-items: center;
    padding: 30px 35px;
    z-index: 4;
    box-sizing: border-box;
}

.inst-fundo-box p {
    font-family: 'Exo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0;
    color: #fff;
    margin: 0;
}
.inst-fundo-box strong {
    color: #FFF;
}


/* Mobile picker — hidden by default on desktop */
.inst-ingresso-mobile-picker { display: none; }

/* =============================================
   INGRESSO SELECT DROPDOWN (mobile, inside bar)
   ============================================= */
.inst-ingresso-select-wrap {
    position: relative;
}
.inst-ingresso-select-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 284px;
    height: 46px;
    border-radius: 64px;
    background: linear-gradient(180deg, #F29120 0%, #EC6608 100%);
    border: none;
    outline: none;
    cursor: pointer;
    color: #fff;
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 20px;
}
.inst-ingresso-select-icon,
.inst-ingresso-dropdown-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.inst-ingresso-select-btn[data-inst-current-key="individual"] .inst-ingresso-select-icon,
.inst-ingresso-dropdown-item[data-key="individual"] .inst-ingresso-dropdown-icon {
    background-image: url('../img/home/individual.png');
}
.inst-ingresso-select-btn[data-inst-current-key="cabine"] .inst-ingresso-select-icon,
.inst-ingresso-dropdown-item[data-key="cabine"] .inst-ingresso-dropdown-icon {
    background-image: url('../img/home/cabine.webp');
}
.inst-ingresso-select-btn[data-inst-current-key="especial"] .inst-ingresso-select-icon,
.inst-ingresso-dropdown-item[data-key="especial"] .inst-ingresso-dropdown-icon {
    background-image: url('../img/home/especial.png');
}
.inst-ingresso-select-label {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.inst-ingresso-select-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
}
.inst-ingresso-select-wrap.is-open .inst-ingresso-select-arrow {
    transform: translateY(2px) rotate(-135deg);
}
.inst-ingresso-dropdown-list {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 284px;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    background: linear-gradient(180deg, #EEF7F8 0%, #9FE4F1 100%);
    border-radius: 24px;
    border: none;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    z-index: 310;
}
.inst-ingresso-select-wrap.is-open .inst-ingresso-dropdown-list {
    max-height: 220px;
    opacity: 1;
    pointer-events: auto;
    padding: 16px 14px;
}
.inst-ingresso-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 18px;
    margin-bottom: 8px;
    border-radius: 64px;
    color: #EC6608;
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease;
}
.inst-ingresso-dropdown-icon {
    filter: brightness(0) saturate(100%) invert(49%) sepia(94%) saturate(1910%) hue-rotate(357deg) brightness(96%) contrast(92%);
}
.inst-ingresso-dropdown-text {
    text-align: left;
}
.inst-ingresso-dropdown-item:last-child { margin-bottom: 0; }
.inst-ingresso-dropdown-item.is-active,
.inst-ingresso-dropdown-item:hover { background: rgba(236, 102, 8, 0.12); border-radius: 64px; }


/* =============================================
.inst-content {
    position: relative;
    background: #EEF7F8;
}

.inst-intro {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


/* (Old inst-astro-area removed — replaced by inst-coracao section above) */


/* (3-linhas rules are in the banner wrapper section above) */


/* =============================================
   VIDEO — A IT!WHEEL É PARA TODOS
   ============================================= */
.inst-video-section {
    padding: 80px 0 100px;
    background: #EEF7F8;
    overflow: visible;
    text-align: center;
}

.inst-video-title {
    font-family: 'ClashDisplay', sans-serif !important;
    font-weight: 500;
    font-size: 46px;
    line-height: 120%;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    color: #279BB1;
    margin: 0 0 20px;
}

.inst-video-subtitle {
    font-family: 'Exo', sans-serif !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;
    color: #279BB1;
    margin: 0 0 50px;
}

/* Video card */
.inst-video-card-wrap {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    z-index: 2;
}

.inst-video-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a2a3a 0%, #0d1b2a 100%);
    width: 100%;
    max-width: 1280px;
    aspect-ratio: 1280 / 720;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

/* Reuse play button styles from home (.video-play, .video-play-spinner, etc.) */

/* Video poster, iframe, overlay — inline embed like home */
.inst-video-card .video-poster {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}
.inst-video-card .video-poster-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inst-video-card .video-overlay-film {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1;
    pointer-events: none;
}
.inst-video-card .video-iframe-wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}
.inst-video-card .video-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
.inst-video-card.is-playing .video-poster { display: none; }
.inst-video-card.is-playing .video-iframe-wrap { display: block; }

/* line invertida — decorative with 3-phase clip-path reveal
   Phase 1: top horizontal (right→left)
   Phase 2: vertical (top→bottom)
   Phase 3: bottom horizontal (right→left)
*/
.inst-video-line-mobile {
    display: none;
}

.inst-video-line {
    position: absolute;
    top: 26%;
    left: 0;
  
    width: 100%;
    max-width: 1920px;
    height: auto;
    z-index: 1;
    pointer-events: none;
    line-height: 0;
    clip-path: inset(0 0 92% 100%);
}
.inst-video-line img {
    display: block;
    width: 100%;
    height: auto;
}

.inst-video-section.in-view .inst-video-line {
    animation: inst-line-3phase 3s linear 0.8s forwards;
}

@keyframes inst-line-3phase {
    0%   { clip-path: inset(0 0 92% 100%); }
    4%   { clip-path: inset(0 0 92% 93%); }
    4%   { clip-path: inset(0 0 92% 86%); }
    6%  { clip-path: inset(0 0 88% 86%); }
    12%  { clip-path: inset(0 0 78% 86%); }
    20%  { clip-path: inset(0 0 65% 86%); }
    30%  { clip-path: inset(0 0 52% 86%); }
    36%  { clip-path: inset(0 0 38% 86%); }
    42%  { clip-path: inset(0 0 24% 86%); }
    48%  { clip-path: inset(0 0 12% 86%); }
    54%  { clip-path: inset(0 0 3% 86%); }
    58%  { clip-path: inset(0 0 0% 82%); }
    65%  { clip-path: inset(0 0 0% 68%); }
    72%  { clip-path: inset(0 0 0% 52%); }
    79%  { clip-path: inset(0 0 0% 36%); }
    86%  { clip-path: inset(0 0 0% 22%); }
    93%  { clip-path: inset(0 0 0% 10%); }
    100% { clip-path: inset(0 0 0% 0%); }
}


/* =============================================
   WAYPOINT TRIGGER — closer to element
   Override smooth-scroll waypointPercShow for institucional
   ============================================= */


/* =============================================
   RESPONSIVE — NOTEBOOK (≤1440px)
   Escala 0.75 (1440 / 1920)
   ============================================= */
@media only screen and (max-width: 1440px) {

    /* --- Banner --- */

    .inst-banner-overlay {
        left: -188px;
        top: -23px;
    }
    .inst-banner-text {
        max-width: 360px;
    }
    .inst-banner-text h1 {
        font-size: 34px;
        line-height: 41px;
        margin-bottom: 26px;
    }
    .inst-banner-text p {
        font-size: 14px;
        line-height: 20px;
    }
    .inst-banner-3linhas {
        bottom: -96px;
        z-index: -2;
        
   width: 318px;
    height: 321px;
    }

    /* --- Barra Ingressos --- */
    .inst-ingresso-anchor {
        margin-top: -250px;
    }
    .inst-ingresso-anchor.has-placeholder {
        min-height: 65px;
    }
    .inst-ingresso-bar {
        width: 832px;
        height: 65px;
        gap: 9px;
        padding: 0 23px 0 30px;
    }
    .inst-ingresso-bar .sticky-ingresso-label {
        font-size: 14px;
        margin-right: 9px;
    }
    .inst-ingresso-bar .sticky-ingresso-btn {
        font-size: 12px;
        padding: 7px 15px;
        width: 108px;
        height: 31px;
    }
    .inst-ingresso-bar .sticky-ingresso-btn img {
        width: 15px;
        height: 15px;
        margin-bottom: 4px;
        margin-left: -7px;
    }
    .inst-ingresso-bar .sticky-ingresso-btn span {
        font-size: 10px;
        letter-spacing: 0.01em;
    }
    .inst-nuvem-lugar .nuvem3 { width: 715px; }

    /* --- Um lugar que enche os olhos --- */
    .inst-lugar {
        padding: 75px 0 0;
    }
    .inst-lugar-inner {
        gap: 45px;
    }
    .inst-lugar-heading {
        max-width: 315px;
        margin-left: 101px;
        padding-top: 45px;
    }
    .inst-lugar-heading h2 {
        font-size: 35px;
    }
    .inst-lugar-body {
        flex: 0 0 315px;
        max-width: 315px;
        padding-top: 83px;
        margin-right: 206px;
    }
    .inst-lugar-linhas {
        width: 110px;
        margin-bottom: 20px;
    }
    .inst-lugar-body p,
    .inst-lugar-body div {
        font-size: 14px;
    }

    /* --- O Coração de Itapema --- */
    .inst-coracao-inner {
        gap: 60px;
        margin-top: -68px;
    }
    .inst-coracao-box {
        flex: 0 0 315px;
        max-width: 315px;
        margin-left: 101px;
    }
    .inst-coracao-box h2 {
        font-size: 35px;
        margin-bottom: 45px;
    }
    .inst-coracao-box p {
        font-size: 14px;
    }
    .inst-coracao-visual {
        min-height: 300px;
        top: 158px !important;
        margin-bottom: 158px;
    }
    .inst-roda-assembly {
        width: 584px;
    }
    .inst-astronauta-wrap {
        width: 205px;
        top: -38px;
        right: 11px;
    }
    .inst-roda-base {
    position: absolute;
    bottom: -31px;
    left: 50.6%;
    transform: translateX(-50%);
    width: 50%;
    height: auto;
    display: block;
    z-index: 12;
}
    /* --- Fundo + Familia + Nuvens --- */
    .inst-fundo {
        margin-top: -113px;
    }
    .inst-fundo-lines {
        left: -8px;
        top: 456px;
        z-index: -2;
   width: 318px;
    height: 321px;
    }
    .inst-familia-img {
        width: 551px;
        height: 439px;
        margin-bottom: 18.5px;
    }
    .inst-nuvem-familia {
        width: 767px;
        height: 512px;
    }
    .inst-nuvem-roda {
        width: 632px;
        height: 422px;
    }
    .inst-fundo-box {
        width: 405px;
        height: 150px;
        border-radius: 15px;
        padding: 23px 26px;
    }
    .inst-fundo-box p {
        font-size: 14px;
    }

    /* --- Vídeo --- */
    .inst-video-section {
        padding: 60px 0 75px;
    }
    .inst-video-title {
        font-size: 35px;
    }
    .inst-video-subtitle {
        font-size: 14px;
        margin-bottom: 38px;
    }
    .inst-video-line {
        max-width: 1440px;
        margin-top: 55px;
      
    }
    .inst-video-card-wrap {
        max-width: 910px;
    }
    .inst-video-card {
        max-width: 960px;
        border-radius: 15px;
    }

    /* --- Conteúdo institucional --- */
    .inst-intro {
        max-width: 675px;
    }

}


/* =============================================
   RESPONSIVE — TABLET (≤1024px)
   Escala: 1024/1440 ≈ 0.711 (do notebook)
   ============================================= */
@media only screen and (max-width: 1024px) {

    /* ---- Banner ---- */
    .inst-banner-overlay {
        padding: 0 5%;
        left: 0;
    }
    .inst-banner-text {
        max-width: 320px;
    }
    .inst-banner-text h1 {
        font-size: 26px;
        line-height: 32px;
        margin-bottom: 14px;
    }
    .inst-banner-text p {
        font-size: 13px;
        line-height: 18px;
    }
    .inst-banner-3linhas {
        bottom: -60px;
        width: 240px;
        height: 242px;
    }
.inst-roda-base {
  
    bottom: -20px;
   
 
}
    /* ---- Ingresso bar ---- */
    .inst-ingresso-anchor {
        margin-top: -210px;
    }
    .inst-ingresso-anchor.has-placeholder {
        min-height: 55px;
    }
    .inst-ingresso-bar {
     width: 591px;
        height: 60px;
        gap: 8px;
        padding: 0 20px 0 25px;
    
    }
    .inst-ingresso-bar .sticky-ingresso-label {
        font-size: 13px;
        margin-right: 8px;
    }
    .inst-ingresso-bar .sticky-ingresso-btn {
        font-size: 11px;
        padding: 6px 14px;
        width: 100px;
        height: 28px;
    }
    .inst-ingresso-bar .sticky-ingresso-btn img {
        width: 13px;
        height: 13px;
        margin-bottom: 3px;
        margin-left: -5px;
    }
    .inst-ingresso-bar .sticky-ingresso-btn span {
        font-size: 9px;
    }

    /* ---- Nuvens ---- */
    .inst-nuvens-top .nuvem1 { width: 520px; }
    .inst-nuvens-top .nuvem2 { width: 385px; }
    .inst-nuvem-lugar .nuvem3 { width: 535px; }

    /* ---- Um lugar que enche os olhos ---- */
    .inst-lugar {
        padding: 50px 0 30px;
    }
    .inst-lugar-inner {
        flex-direction: column;
        gap: 25px;
    }
    .inst-lugar-heading {
        max-width: 100%;
        margin-left: 125px;
        padding-top: 25px;
    }
    .inst-lugar-heading h2 {
        font-size: 26px;
    }
    .inst-lugar-body {
        flex: none;
        max-width: 260px;
        padding-top: 0;
        margin-right: 25px;
        margin-left: 445px;
        margin-top: -50px;
    }
    .inst-lugar-linhas {
        width: 80px;
        margin-bottom: 14px;
    }
    .inst-lugar-body p,
    .inst-lugar-body div {
        font-size: 13px;
        line-height: 18px;
    }

    /* ---- O Coração de Itapema ---- */
    .inst-coracao {
        padding: 25px 0 35px;
    }
    .inst-coracao-inner {
        flex-direction: column;
        gap: 25px;
        align-items: center;
        margin-top: 0;
    }
    .inst-coracao-box {
        flex: none;
        max-width: 100%;
        width: 100%;
        margin-left: 25px;
        padding-right: 25px;
    }
    .inst-coracao-box h2 {
        font-size: 26px;
        margin-bottom: 35px;
        margin-left: 115px;
    }
    .inst-coracao-box p {
        font-size: 13px;
        max-width: 250px;
        margin-left: 115px;
    }
    .inst-coracao-visual {
        min-height: 260px;
        top: -220px !important;
        margin-bottom: 0;
        margin-right: -250px;
    }
    .inst-roda-assembly {
        max-width: 420px;
    }
    .inst-astronauta-wrap {
        width: 180px;
        top: -18px;
        margin-right: -50px;
    }

    /* ---- Fundo + Familia + Nuvens ---- */
    .inst-fundo {
        margin-top: -340px;
    }
    .inst-fundo-lines {
        top: 350px;
        width: 220px;
        height: auto;
    }
    .inst-familia-img {
        width: 360px;
        height: 288px;
    }
    .inst-nuvem-familia {
        width: 520px;
        height: 346px;
    }
    .inst-nuvem-roda {
        width: 425px;
        height: 283px;
    }
    .inst-fundo-box {
        width: 300px;
        height: 130px;
        border-radius: 12px;
        padding: 18px 22px;
    }
    .inst-fundo-box p {
        font-size: 10px;
        line-height: 17px;
    }

    /* ---- Vídeo ---- */
    .inst-video-section {
        padding: 45px 0 60px;
    }
    .inst-video-title {
        font-size: 28px;
    }
    .inst-video-subtitle {
        font-size: 13px;
        margin-bottom: 30px;
    }
    .inst-video-card-wrap {
        max-width: 100%;
        padding: 0 25px;
    }
    .inst-video-card {
        width: 682px;
        height: 384px;
        margin: 0 auto;
        border-radius: 12px;
    }
    .inst-video-line {
        max-width: 1024px;
        margin-top: 40px;
    }

    /* ---- Conteúdo institucional ---- */
    .inst-intro {
        max-width: 100%;
        padding: 0 25px;
    }

}


/* =============================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================= */
@media only screen and (max-width: 768px) {

    body {
        --home-mobile-fs-18: clamp(13px, 3.3333vw, 18px);
        --home-mobile-side-gap: clamp(23.111px, 5.9259vw, 32px);
        --home-mobile-content-width: min(476px, calc(100vw - (var(--home-mobile-side-gap) * 2)));
        --home-mobile-footer-width: clamp(277.667px, 88.1481vw, 476px);
        --home-mobile-footer-map-btn-width: clamp(109.083px, 34.6296vw, 187px);
        --home-mobile-footer-map-btn-height: clamp(28px, 8.8889vw, 48px);
        --home-mobile-partner-slot-width: clamp(104.333px, 26.7407vw, 144.406px);
        --home-mobile-partner-logo-width: clamp(57.778px, 14.8148vw, 80px);
        --home-mobile-partner-logo-height: clamp(47.667px, 12.2222vw, 66px);
        --home-mobile-lines-width: clamp(144.444px, 37.037vw, 200px);
        --home-mobile-lines-height: clamp(145.574px, 37.3055vw, 201.4499px);
        --inst-mobile-ingresso-bar-width: min(508px, 94.0741vw);
        --inst-mobile-ingresso-bar-height: clamp(57.056px, 14.6294vw, 79px);
        --inst-mobile-ingresso-select-width: min(284px, 52.5926vw);
        --inst-mobile-ingresso-select-height: clamp(33.351px, 8.5516vw, 46.179px);
        --inst-mobile-ingresso-bottom-gap: clamp(12px, 3.0769vw, 16px);
        --inst-mobile-text-box-inset: clamp(26px, 4.1026vw, 22px);
        --inst-mobile-text-box-width: calc(var(--home-mobile-content-width) - (var(--inst-mobile-text-box-inset) * 2));
        --inst-mobile-banner-text-width: calc(var(--home-mobile-content-width) - 24px);
        --inst-mobile-fundo-box-lift: clamp(0px, calc((100vw - 390px) * 1.25), 50px);
        --inst-mobile-fundo-line-lift: clamp(0px, calc((100vw - 390px) * 1.4), 56px);
    }

    .footer-redesign br.home-mobile-break {
        display: block;
    }

    br.inst-mobile-hide-break {
        display: none;
    }

    /* ---- Banner ---- */
    /* Mobile image loaded via <picture> <source media="(max-width:768px)"> */
    .inst-banner {
       /* mobile header is thinner — reset the -90px desktop offset */
        min-height: 939px;
    }

    .inst-banner-img {
        height: 939px;
        width: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .inst-banner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 70px var(--home-mobile-side-gap) 0;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }

    .inst-banner-text {
        width: fit-content;
        max-width: min(var(--inst-mobile-banner-text-width), 100%);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .inst-banner-text h1 {
        font-size: 28px;
        line-height: 1.2;
        margin-top: -314px;
        width: fit-content;
        max-width: min(372px, var(--inst-mobile-banner-text-width));
        margin-left: auto;
        margin-right: auto;
        text-wrap: balance;
    }

    .inst-banner-text p {
        font-size: 18px;
        line-height: 1.4;
        margin-top: 15px;
        width: fit-content;
        max-width: min(430px, var(--inst-mobile-banner-text-width));
        margin-left: auto;
        margin-right: auto;
        text-wrap: balance;
    }

    .inst-banner-3linhas {
        bottom: 50px;
        width: var(--home-mobile-lines-width);
        height: var(--home-mobile-lines-height);
    }

    /* ---- Nuvens (move clouds up) ---- */
    .inst-nuvens-top .nuvem1 {
        top: 39%;
        width: 320px;
    }
    .inst-nuvens-top .nuvem2 {
        top: 38%;
        width: 240px;
    }
    .inst-nuvem-lugar .nuvem3 { width: 320px; top: 28%; right: 150px; }

    /* ---- Ingresso anchor + bar ---- */
    .inst-ingresso-anchor {
        margin-top: -300px;
        overflow: visible;
    }
    .inst-ingresso-anchor.has-placeholder {
        min-height: var(--inst-mobile-ingresso-bar-height);
    }

    /* Bar: pill shape on the left, flush on the right */
    .inst-ingresso-bar {
        width: var(--inst-mobile-ingresso-bar-width);
        max-width: var(--inst-mobile-ingresso-bar-width);
        height: var(--inst-mobile-ingresso-bar-height);
        border-top-left-radius: 200px;
        border-bottom-left-radius: 200px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        padding: 0;
        gap: 0;
        margin-left: auto;
        justify-content: space-between;
        align-items: center;
    }

    .inst-ingresso-bar.is-stuck-bottom {
        bottom: var(--inst-mobile-ingresso-bottom-gap);
    }

    /* Hide desktop label + buttons */
    .inst-ingresso-bar .sticky-ingresso-label,
    .inst-ingresso-bar .sticky-ingresso-btn {
        display: none !important;
    }

    /* Show mobile picker */
    .inst-ingresso-mobile-picker {
        display: flex;
        align-items: center;
        width: 100%;
        gap: clamp(8px, 1.8519vw, 10px);
        padding: 0 clamp(10px, 2.5926vw, 14px) 0 clamp(19px, 4.8148vw, 26px);
    }

    .inst-ingresso-mobile-label {
        color: #fff;
        font-family: 'ClashDisplay', sans-serif !important;
        font-weight: 500;
        font-size: clamp(12px, 3.3333vw, 18px);
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: clamp(10px, 2.5926vw, 14px);
    }

    /* Push select button to the right */
    .inst-ingresso-select-wrap {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* Select button — responsivo para 390/430px */
    .inst-ingresso-select-btn {
        width: var(--inst-mobile-ingresso-select-width);
        height: var(--inst-mobile-ingresso-select-height);
        font-size: clamp(11px, 2.5926vw, 14px);
        padding: 0 clamp(12px, 3.3333vw, 18px);
        gap: clamp(8px, 2.2222vw, 12px);
    }

    /* Dropdown acompanha largura do botão */
    .inst-ingresso-dropdown-list {
        width: var(--inst-mobile-ingresso-select-width);
    }

    .inst-ingresso-dropdown-item {
        min-height: clamp(40px, 9.2593vw, 50px);
        font-size: clamp(11px, 2.5926vw, 14px);
        color: #858585;
    }

    .inst-ingresso-select-icon,
    .inst-ingresso-dropdown-icon {
        width: clamp(17px, 4.6296vw, 20px);
        height: clamp(17px, 4.6296vw, 20px);
        flex-basis: clamp(17px, 4.6296vw, 20px);
    }

    .inst-ingresso-dropdown-icon {
        filter: brightness(0) saturate(100%) invert(52%);
    }

    .inst-lugar .wrap.wide,
    .inst-coracao .wrap.wide,
    .inst-video-section .wrap.wide {
        width: 100%;
        max-width: 540px;
        margin: 0 auto;
        padding-left: var(--home-mobile-side-gap) !important;
        padding-right: var(--home-mobile-side-gap) !important;
        box-sizing: border-box;
        
    }


    .inst-lugar {
        padding: 200px 0 20px;
    }

    .inst-lugar-inner {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .inst-lugar-heading {
        max-width: var(--inst-mobile-text-box-width);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        text-align: center;
    }

    .inst-lugar-heading h2 {
        font-size: 28px;
        text-align: left;
        margin-bottom: 10px;
    }

    .inst-lugar-body {
        flex: none;
        max-width: var(--inst-mobile-text-box-width);
        width: 100%;
        padding: 0;
        /* Reset cascaded margins from tablet breakpoint */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        text-align: center;
    }

    .inst-lugar-body p,
    .inst-lugar-body div {
        font-size: 20px;
        line-height: 1.5;
        text-align:left;
    }

    /* ---- O Coração de Itapema ---- */
    .inst-coracao {
        padding: 20px 0 0;
    }

    .inst-coracao-inner {
        flex-direction: column;
        gap: 0;
        align-items: center;
        margin-top: 0;
    }

    .inst-coracao-box {
        flex: none;
        max-width: var(--inst-mobile-text-box-width);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        text-align: center;
    }

    .inst-coracao-box h2 {
        font-size: 28px;
        margin-bottom: 30px;
        /* Reset cascaded margins from tablet */
        margin-left: 0 !important;
        text-align: left;
        
    }

    .inst-coracao-box p {
        font-size: 20px;
        line-height: 1.5;
        /* Reset cascaded margins from tablet */
        margin-left: 0 !important;
        max-width: 100% !important;
        text-align: left;
        margin-bottom: 20px;
    }

    /* Roda gigante + astronauta visual */
    .inst-coracao-visual {
        width: 100%;
        min-height: 200px;
        top: 0 !important;
        
        margin-bottom: -75px;
        margin-right: 0 !important;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        overflow: visible;
        padding: 20px 0 10px;
    }

    .inst-roda-assembly {
        width: 300px;
        max-width: 300px;
    }

    .inst-roda-base {
        bottom: -16px;
    }

    .inst-astronauta-wrap {
        width: 100px;
        top: 0px;
        right: 80px;
    }

    /* ---- Fundo + Família + Nuvens + Box laranja ---- */
    .inst-fundo {
        margin-top: 0;
        overflow: visible;
    }

    .inst-fundo-lines {
        display: block;
        position: absolute;
        left: calc(-0.1 * var(--home-mobile-side-gap));
        
        top: auto;
        bottom: calc(-320px + var(--inst-mobile-fundo-line-lift));
        width: var(--home-mobile-lines-width);
        height: var(--home-mobile-lines-height);
        z-index: 1;
        clip-path: none !important;
        animation: none !important;
    }

    /* Família — centralizada horizontalmente */
    .inst-familia-img {
        position: absolute;
        left: 10%;
      
        width: 280px;
        height: auto;
        bottom: 18.5%;
        z-index: 3;
    }

    /* Nuvem atrás da família */
    .inst-nuvem-familia {
        width: 350px;
        height: auto;
        left: 5%;
        bottom: 65%;
    }

    /* Nuvem perto da roda */
    .inst-nuvem-roda {
        width: 240px;
        height: auto;
        right: 5%;
        top: -15%;
    }

    /* Box laranja — centralizada na tela, metade inferior */
    .inst-fundo-box {
        position: absolute;
        left: 12%;
       
        right: auto;
       
        bottom: calc(-61% + var(--inst-mobile-fundo-box-lift));
        width: var(--inst-mobile-text-box-width);
        max-width: var(--inst-mobile-text-box-width);
        height: auto;
        min-height: 100px;
        border-radius: 16px;
        box-sizing: border-box;
        padding: 32px 26px;
        z-index: 5;
    }

    .inst-fundo-box p {
        font-size: 17px;
        line-height: 1.5;
        margin: 0;
        text-align: center;
    }

    /* ---- Vídeo ---- */
    .inst-video-section {
        padding: 258px 0 72px;
        overflow: visible;
        padding-bottom: 100px;
    }

    .inst-video-title {
        font-size: 26px;
        width: 100%;
        max-width: var(--inst-mobile-text-box-width);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }

    .inst-video-subtitle {
        font-size: 20px;   
        width: 100%;
        max-width: var(--inst-mobile-text-box-width);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 150px;
        text-align: center;
    }

    .inst-video-line {
        display: none;
    }

    .inst-video-line-mobile {
        display: block;
        position: absolute;
        top: 77%;
        right: 0;
        width: 540px;
        height: 382px;
        transform: translateY(-50%);
        z-index: 1;
        pointer-events: none;
    }

    .inst-video-card-wrap {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-width: 0;
        padding: 18px 0 0 0;
        margin: 0 auto !important;
        margin-top: -70px !important;
    }

    .inst-video-section .wrap.wide {
        width: 100%;
        padding-left: var(--home-mobile-side-gap) !important;
        padding-right: var(--home-mobile-side-gap) !important;
    }

    .inst-video-card {
        width: var(--home-mobile-content-width) !important;
        max-width: var(--home-mobile-content-width);
        aspect-ratio: 476.69 / 268;
        height: auto !important;
        border-radius: 20px;
        overflow: hidden;
    }

    .inst-video-card .video-play {
        width: 110px;
        height: 110px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        overflow: visible;
    }

    .inst-video-card .video-play:active,
    .inst-video-card .video-play:focus-visible {
        transform: translate3d(-50%, -50%, 0);
    }

    .inst-video-card .video-play-spinner {
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        transform-origin: center center;
        backface-visibility: hidden;
    }

    .inst-video-card .video-play-spinner svg {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .inst-video-card .video-spin-text {
        font-size: clamp(10px, 2.5926vw, 14px);
        letter-spacing: 0.12em;
    }

    .inst-video-card .video-play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate3d(-50%, -50%, 0);
        backface-visibility: hidden;
    }

    .inst-video-card .video-play:hover .video-play-icon,
    .inst-video-card .video-play:active .video-play-icon,
    .inst-video-card .video-play:focus-visible .video-play-icon {
        transform: translate3d(-50%, -50%, 0);
    }

    .inst-video-card .video-play-icon svg {
        width: 26px;
        height: 26px;
    }
  body:not(.is-home) .section-parceiros {
      
        padding-bottom: 101px !important; /* 170px × 0.533 */
    }
}


/* =====================================================================
   RESPONSIVIDADE FLUIDA · 1280 → 1920 (institucional)
   ---------------------------------------------------------------------
   Mesma técnica da home: interpola linearmente entre o snapshot que
   cobre 1280 (@media max-width:1440) e o default de 1920, eliminando o
   "salto"/desproporção do intervalo. Fórmula:
       clamp(menor, calc(V1280 + (100vw - 1280px) * slope), maior)
       slope = (V1920 - V1280) / 640
   Em 1281px ≈ valor de 1280; em 1920px = valor default. Sem transform.
   ===================================================================== */
@media only screen and (min-width: 1281px) and (max-width: 1920px) {

    /* --- Banner --- */
    .inst-banner-overlay {
        left: clamp(-250px, calc(-188px - (100vw - 1280px) * 0.096875), -188px);
        top: clamp(-30px, calc(-23px - (100vw - 1280px) * 0.010938), -23px);
    }
    .inst-banner-text {
        max-width: clamp(360px, calc(360px + (100vw - 1280px) * 0.1875), 480px);
    }
    .inst-banner-text h1 {
        font-size: clamp(34px, calc(34px + (100vw - 1280px) * 0.017188), 45px);
        line-height: clamp(41px, calc(41px + (100vw - 1280px) * 0.020313), 54px);
        margin-bottom: clamp(26px, calc(26px + (100vw - 1280px) * 0.0125), 34px);
    }
    .inst-banner-text p {
        font-size: clamp(14px, calc(14px + (100vw - 1280px) * 0.00625), 18px);
        line-height: clamp(20px, calc(20px + (100vw - 1280px) * 0.009375), 26px);
    }
    .inst-banner-3linhas {
        bottom: clamp(-186px, calc(-96px - (100vw - 1280px) * 0.140625), -96px);
        width: clamp(318px, calc(318px + (100vw - 1280px) * 0.19375), 442px);
        height: clamp(321px, calc(321px + (100vw - 1280px) * 0.165625), 427px);
    }

    /* --- Barra de ingressos (desativada): preserva o espaçamento --- */
    .inst-ingresso-anchor {
        margin-top: clamp(-280px, calc(-250px - (100vw - 1280px) * 0.046875), -250px);
    }
    .inst-ingresso-bar {
        height: clamp(65px, calc(65px + (100vw - 1280px) * 0.021875), 79px);
    }

    /* --- Nuvem da seção "lugar" --- */
    .inst-nuvem-lugar .nuvem3 {
        width: clamp(715px, calc(715px + (100vw - 1280px) * 0.371875), 953px);
    }

    /* --- Um lugar que enche os olhos --- */
    .inst-lugar {
        padding-top: clamp(75px, calc(75px + (100vw - 1280px) * 0.039063), 100px);
    }
    .inst-lugar-inner {
        gap: clamp(45px, calc(45px + (100vw - 1280px) * 0.023438), 60px);
    }
    .inst-lugar-heading {
        max-width: clamp(315px, calc(315px + (100vw - 1280px) * 0.164063), 420px);
        margin-left: clamp(101px, calc(101px + (100vw - 1280px) * 0.053125), 135px);
        padding-top: clamp(45px, calc(45px + (100vw - 1280px) * 0.023438), 60px);
    }
    .inst-lugar-heading h2 {
        font-size: clamp(35px, calc(35px + (100vw - 1280px) * 0.017188), 46px);
    }
    .inst-lugar-body {
        flex-basis: clamp(315px, calc(315px + (100vw - 1280px) * 0.164063), 420px);
        max-width: clamp(315px, calc(315px + (100vw - 1280px) * 0.164063), 420px);
        padding-top: clamp(83px, calc(83px + (100vw - 1280px) * 0.042188), 110px);
        margin-right: clamp(206px, calc(206px + (100vw - 1280px) * 0.003125), 208px);
    }
    .inst-lugar-body p,
    .inst-lugar-body div {
        font-size: clamp(14px, calc(14px + (100vw - 1280px) * 0.003125), 16px);
    }

    /* --- O Coração de Itapema --- */
    .inst-coracao-inner {
        gap: clamp(60px, calc(60px + (100vw - 1280px) * 0.03125), 80px);
        margin-top: clamp(-90px, calc(-68px - (100vw - 1280px) * 0.034375), -68px);
    }
    .inst-coracao-box {
        flex-basis: clamp(315px, calc(315px + (100vw - 1280px) * 0.164063), 420px);
        max-width: clamp(315px, calc(315px + (100vw - 1280px) * 0.164063), 420px);
        margin-left: clamp(101px, calc(101px + (100vw - 1280px) * 0.053125), 135px);
    }
    .inst-coracao-box h2 {
        font-size: clamp(35px, calc(35px + (100vw - 1280px) * 0.017188), 46px);
        margin-bottom: clamp(45px, calc(45px + (100vw - 1280px) * 0.023438), 60px);
    }
    .inst-coracao-box p {
        font-size: clamp(14px, calc(14px + (100vw - 1280px) * 0.003125), 16px);
    }
    .inst-coracao-visual {
        min-height: clamp(300px, calc(300px + (100vw - 1280px) * 0.15625), 400px);
        top: clamp(158px, calc(158px + (100vw - 1280px) * 0.08125), 210px) !important;
        margin-bottom: clamp(158px, calc(158px + (100vw - 1280px) * 0.08125), 210px);
    }
    .inst-roda-assembly {
        width: clamp(584px, calc(584px + (100vw - 1280px) * 0.304688), 779px);
    }
    .inst-astronauta-wrap {
        width: clamp(205px, calc(205px + (100vw - 1280px) * 0.10625), 273px);
        top: clamp(-50px, calc(-38px - (100vw - 1280px) * 0.01875), -38px);
        right: clamp(11px, calc(11px + (100vw - 1280px) * 0.00625), 15px);
    }

    /* --- Fundo + Família + Nuvens + box laranja --- */
    .inst-fundo {
        margin-top: clamp(-150px, calc(-113px - (100vw - 1280px) * 0.057813), -113px);
    }
    .inst-fundo-lines {
        left: clamp(-10px, calc(-8px - (100vw - 1280px) * 0.003125), -8px);
        top: clamp(456px, calc(456px + (100vw - 1280px) * 0.2875), 640px);
        width: clamp(318px, calc(318px + (100vw - 1280px) * 0.217188), 457px);
    }
    .inst-familia-img {
        width: clamp(551px, calc(551px + (100vw - 1280px) * 0.2875), 735px);
        height: clamp(439px, calc(439px + (100vw - 1280px) * 0.228125), 585px);
        margin-bottom: clamp(0px, calc(18.5px - (100vw - 1280px) * 0.028906), 18.5px);
    }
    .inst-nuvem-familia {
        width: clamp(767px, calc(767px + (100vw - 1280px) * 0.4), 1023px);
        height: clamp(512px, calc(512px + (100vw - 1280px) * 0.265625), 682px);
    }
    .inst-nuvem-roda {
        width: clamp(632px, calc(632px + (100vw - 1280px) * 0.329688), 843px);
        height: clamp(422px, calc(422px + (100vw - 1280px) * 0.21875), 562px);
    }
    .inst-fundo-box {
        width: clamp(405px, calc(405px + (100vw - 1280px) * 0.210938), 540px);
        height: clamp(150px, calc(150px + (100vw - 1280px) * 0.078125), 200px);
        border-radius: clamp(15px, calc(15px + (100vw - 1280px) * 0.0078125), 20px);
        padding: clamp(23px, calc(23px + (100vw - 1280px) * 0.010938), 30px) clamp(26px, calc(26px + (100vw - 1280px) * 0.014063), 35px);
    }
    .inst-fundo-box p {
        font-size: clamp(14px, calc(14px + (100vw - 1280px) * 0.003125), 16px);
    }

    /* --- Vídeo --- */
    .inst-video-section {
        padding: clamp(60px, calc(60px + (100vw - 1280px) * 0.03125), 80px) 0 clamp(75px, calc(75px + (100vw - 1280px) * 0.039063), 100px);
    }
    .inst-video-title {
        font-size: clamp(35px, calc(35px + (100vw - 1280px) * 0.017188), 46px);
    }
    .inst-video-subtitle {
        font-size: clamp(14px, calc(14px + (100vw - 1280px) * 0.003125), 16px);
        margin-bottom: clamp(38px, calc(38px + (100vw - 1280px) * 0.01875), 50px);
    }
    .inst-video-line {
        max-width: clamp(1440px, calc(1440px + (100vw - 1280px) * 0.75), 1920px);
        margin-top: clamp(0px, calc(55px - (100vw - 1280px) * 0.085938), 55px);
    }
    .inst-video-card-wrap {
        max-width: clamp(910px, calc(910px + (100vw - 1280px) * 0.578125), 1280px);
    }
    .inst-video-card {
        max-width: clamp(960px, calc(960px + (100vw - 1280px) * 0.5), 1280px);
        border-radius: clamp(15px, calc(15px + (100vw - 1280px) * 0.0078125), 20px);
    }
}