        :where(section[id], footer[id]) {
            scroll-margin-top: var(--looply-scroll-offset);
        }

        .hero {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: min(100dvh, 1024px);
            max-height: 1024px;
            width: 100%;
            padding: 188px 48px 40px;
            box-sizing: border-box;
            background: radial-gradient(circle at center, #F2558D 0%, #E0115F 50%, #E0115F 100%);
            text-align: center;
            color: #ffffff;
            overflow: hidden;
        }

        .hero-content {
            max-width: min(var(--looply-shell-width), 100%);
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 auto;
            padding-top: 0;
            position: relative;
            z-index: 1;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 18px 6px 10px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.25);
            font-weight: 500;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 24px;
            background: transparent;
        }

        .hero-badge .material-symbols-outlined {
            font-size: 20px;
        }

        .hero-headline {
            font-weight: 500;
            font-size: clamp(2rem, 5.5vw, 3.6rem);
            line-height: 1.2;
            letter-spacing: -0.02em;
            margin-bottom: 24px;
            max-width: min(var(--looply-shell-width), 100%);
            margin-left: auto;
            margin-right: auto;
            color: #ffffff;
        }

        .hero-subtitle {
            font-weight: 300;
            font-size: clamp(0.95rem, 1.2vw, 1.15rem);
            line-height: 1.6;
            max-width: min(var(--looply-shell-width), 100%);
            margin: 0 auto 40px;
            color: rgba(255, 255, 255, 0.65);
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }

        .hero-actions .btn {
            height: var(--looply-button-height);
            min-height: var(--looply-button-height);
            padding: 0 var(--looply-button-padding-x);
            font-size: 15px;
        }

        .hero-visual {
            width: min(100%, 460px);
            margin: 28px auto 0;
        }

        .hero-visual img {
            display: block;
            width: 100%;
            height: auto;
        }

        /* ============================================
                   CARROSSEL DE LOGOS (infinito)
                ============================================ */
        .logo-carousel {
            padding: 40px 0;
            background: #ffffff;
            overflow: hidden;
            position: relative;
        }

        .logo-carousel::before,
        .logo-carousel::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 80px;
            z-index: 2;
            pointer-events: none;
        }

        .logo-carousel::before {
            left: 0;
            background: linear-gradient(to right, #ffffff, transparent);
        }

        .logo-carousel::after {
            right: 0;
            background: linear-gradient(to left, #ffffff, transparent);
        }

        .logo-track {
            display: flex;
            gap: 56px;
            animation: scrollLogos 24s linear infinite;
            width: max-content;
        }

        .logo-track span {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 300;
            font-size: 14px;
            color: #5c5c5c;
            white-space: nowrap;
        }

        .logo-track .material-symbols-outlined {
            font-size: 28px;
            color: #E0115F;
        }

        .logo-carousel-inner {
            display: flex;
            width: 100%;
            overflow: hidden;
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }

        .section-cards {
            padding: 80px 48px;
            background: #ffffff;
            text-align: center;
        }

        .section-cards-header {
            max-width: 600px;
            margin: 0 auto 48px;
        }

        .section-cards-header h2 {
            font-weight: 500;
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            line-height: 1.12;
            letter-spacing: -0.02em;
            color: #1f1f1f;
            margin-bottom: 16px;
        }

        .section-cards-header p {
            font-weight: 300;
            font-size: clamp(0.95rem, 1.1vw, 1.05rem);
            line-height: 1.6;
            color: #5c5c5c;
        }

        .section-tabs {
            padding: 80px 48px;
            background: #ffffff;
        }

        .section-tabs-header {
            max-width: 600px;
            margin: 0 auto 48px;
            text-align: center;
        }

        .section-tabs-header h2 {
            font-weight: 500;
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            line-height: 1.12;
            letter-spacing: -0.02em;
            color: #1f1f1f;
            margin-bottom: 16px;
        }

        .section-tabs-header p {
            font-weight: 300;
            font-size: clamp(0.95rem, 1.1vw, 1.05rem);
            line-height: 1.6;
            color: #5c5c5c;
        }

        .tabs-wrapper {
            display: grid;
            grid-template-columns: 1fr;
            gap: 40px;
            max-width: 960px;
            margin: 0 auto;
            width: 100%;
            min-width: 0;
            overflow: hidden;
        }
        .section-team {
            padding: 80px 48px;
            background: #ffffff;
            text-align: center;
        }

        .section-team-header {
            max-width: 600px;
            margin: 0 auto 48px;
        }

        .section-team-header h2 {
            font-weight: 500;
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            line-height: 1.12;
            letter-spacing: -0.02em;
            color: #1f1f1f;
            margin-bottom: 16px;
        }

        .section-team-header p {
            font-weight: 300;
            font-size: clamp(0.95rem, 1.1vw, 1.05rem);
            line-height: 1.6;
            color: #5c5c5c;
        }

        .team-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 32px;
            max-width: 400px;
            margin: 0 auto;
        }
        .section-radial {
            padding: 80px 48px;
            height: 1024px;
            max-height: 100dvh;
            background: var(--looply-primary);
            color: #ffffff;
            text-align: center;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .section-radial-header {
            max-width: 600px;
            margin: 0 auto 48px;
        }

        .section-radial-header h2 {
            font-weight: 500;
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            line-height: 1.12;
            letter-spacing: -0.02em;
            color: #ffffff;
        }

        .section-radial-header p {
            margin-top: 16px;
            font-weight: 300;
            font-size: clamp(0.95rem, 1.1vw, 1.05rem);
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.82);
        }

        .feature-marquee {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            width: min(1120px, 100%);
            margin: 0 auto;
            align-items: stretch;
        }

        .feature-window {
            position: relative;
            height: 340px;
            overflow: hidden;
            mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
        }

        .feature-track {
            display: grid;
            gap: 18px;
            list-style: none;
            width: 100%;
            margin: 0;
            padding: 0;
            will-change: transform;
        }

        .feature-track.up {
            animation: featureScrollUp 60s linear infinite;
        }

        .feature-track.down {
            animation: featureScrollDown 60s linear infinite;
        }

        .section-plans {
            padding: 80px 48px;
            background: #ffffff;
            text-align: center;
        }

        .section-plans-header {
            max-width: 600px;
            margin: 0 auto 48px;
        }

        .section-plans-header h2 {
            font-weight: 500;
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            line-height: 1.12;
            letter-spacing: -0.02em;
            color: #1f1f1f;
            margin-bottom: 16px;
        }

        .section-plans-header p {
            font-weight: 300;
            font-size: clamp(0.95rem, 1.1vw, 1.05rem);
            line-height: 1.6;
            color: #5c5c5c;
        }

        .plans-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
            max-width: 400px;
            margin: 0 auto;
        }
        .section-bento {
            padding: 80px 48px;
            background: #ffffff;
            text-align: center;
        }

        .section-bento-header {
            max-width: 600px;
            margin: 0 auto 48px;
        }

        .section-bento-header h2 {
            font-weight: 500;
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            line-height: 1.12;
            letter-spacing: -0.02em;
            color: #1f1f1f;
            margin-bottom: 16px;
        }

        .section-bento-header p {
            font-weight: 300;
            font-size: clamp(0.95rem, 1.1vw, 1.05rem);
            line-height: 1.6;
            color: #5c5c5c;
        }

        .bento-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            max-width: 1120px;
            margin: 0 auto;
        }
        .section-testimonials {
            padding: 80px 48px;
            background: var(--looply-surface-alt);
            text-align: center;
            overflow: hidden;
        }

        .section-testimonials-header {
            max-width: 600px;
            margin: 0 auto 48px;
        }

        .section-testimonials-header h2 {
            font-weight: 500;
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            line-height: 1.12;
            letter-spacing: -0.02em;
            color: var(--looply-primary-strong);
            margin-bottom: 16px;
        }

        .section-testimonials-header p {
            font-weight: 300;
            font-size: clamp(0.95rem, 1.1vw, 1.05rem);
            line-height: 1.6;
            color: var(--looply-primary-strong);
        }

        .testimonials-track-wrapper {
            position: relative;
            overflow: hidden;
            width: 100vw;
            max-width: none;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
            mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        }

        .testimonials-track {
            display: flex;
            gap: 24px;
            width: max-content;
            padding: 8px 0;
        }

        .testimonials-track.left {
            animation: scrollLeft 35s linear infinite;
        }

        .testimonials-track.right {
            animation: scrollRight 35s linear infinite;
        }
        .section-faq {
            padding: 80px 48px;
            background: #ffffff;
        }

        .faq-wrapper {
            display: grid;
            grid-template-columns: 1fr;
            gap: 40px;
            max-width: 1120px;
            margin: 0 auto;
        }

        .faq-left {
            text-align: left;
        }

        .faq-left h2 {
            font-weight: 500;
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            line-height: 1.12;
            letter-spacing: -0.02em;
            color: #1f1f1f;
            margin-bottom: 16px;
        }

        .faq-left p {
            font-weight: 300;
            font-size: clamp(0.95rem, 1.1vw, 1.05rem);
            line-height: 1.6;
            color: #5c5c5c;
            max-width: 44ch;
        }

        .faq-right {
            display: grid;
            gap: 12px;
        }
        .section-banner {
            padding: 80px 48px;
            background: #ffffff;
            text-align: left;
        }
