:root {
    --accent-gradient: linear-gradient(135deg, hsl(84 81% 44%), hsl(90 75% 50%));
    --background: 0 0% 100%;
    --foreground: 215 25% 27%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --primary: 168 76% 36%;
    --success: 142 76% 36%;
    --valorame-gradient-glow: linear-gradient(135deg, hsl(168 76% 36% / .8), hsl(175 70% 45% / .6));
    --valorame-gradient-subtle: linear-gradient(135deg, hsl(164 41% 93%), hsl(0 0% 100%));
    --valorame-gradient-advanced: linear-gradient(135deg, hsl(168 76% 36%) 0%, hsl(175 70% 45%) 25%, hsl(180 65% 50%) 50%, hsl(175 70% 45%) 75%, hsl(168 76% 36%) 100%);
}

html {
    scroll-behavior: smooth;
}

.home-container {
    width: 90vw;
    max-width: 460px;
    font-family: 'Inter-Regular', sans-serif;
}

@media(width > 992px) {
    .home-container {
        max-width: 992px;
    }
}

/* Header */

header {
    position: fixed;
    left: 0;
    top: 1vh;
    z-index: 5;
}

header .home-container {
    background-color: hsla(0, 0%, 100%, .8);
    box-shadow: 0 0 16px #0000001f;
    border-radius: 20px;
}

header img {
    max-width: 22px;
}

header a {
    color: var(--green-700);
    font-size: 16px;
}

header .logo span {
    color: var(--dark-700);
}

@media (width < 992px) {
    header .home-container {
        padding: 6px 16px;
    }
}


@media (width > 992px) {
    header .home-container {
        padding: 8px 20px;
    }
}

/* Hero */

@media (width < 992px) {
    .app-hero {
        min-height: 100dvh;
        background-color: var(--gray-50);
        border-radius: 25px;
    }

    .app-hero h1 {
        font-size: 36px;
        text-align: center;
        line-height: 1;
        letter-spacing: -0.5px;
        margin: 7vh 0 0;
        max-width: 16ch;
    }

    .app-hero h2 {
        max-width: 20ch;
        font-size: 24px;
        line-height: 1.1;
        text-align: center;
    }

    .app-hero .valo {
        width: 45px;
        height: 45px;
        margin-block: 1vh 0;
    }

    .app-hero img {
        max-width: 100vw;
        margin: 10vh 0 5vh;
    }

    .app-hero .btn {
        height: 44px;
        margin: 0 0 1vh;
    }
}

@media (height > 750px) {
    .app-hero h1 {
        font-size: 40px;
    }

    .app-hero h2 {
        max-width: 20ch;
        font-size: 28px;
    }

    .app-hero .valo {
        width: 55px;
        height: 55px;
        margin-block: 2vh 0;
    }

    .app-hero img {
        margin: 4vh 0 3vh;
    }
}

@media (width > 992px) {
    .app-hero {
        min-height: 100vh;
        background-color: var(--gray-50);
        border-radius: 25px;
    }

    .app-hero h1 {
        font-size: 60px;
        text-align: center;
        line-height: 1;
        margin: 0;
        max-width: 16ch;
        margin-top: 5vh;
    }

    .app-hero h2 {
        max-width: 20ch;
        text-align: center;
        line-height: 1.1;
        font-size: 32px;
    }

    .app-hero .valo {
        width: 55px;
        height: 55px;
        margin-block: 3vh 0;
    }

    .app-hero img {
        max-width: 99vw;
        margin: 10vh 0 5vh;
    }

    .app-hero .btn {
        width: 190px;
        height: 50px;
        font-size: 20px;
    }
}

/* Features */

.app-features .description {
    color: var(--gray-600);
}

.app-features .features .icono {
    min-width: 48px;
    height: 48px;
    color: white;
    padding: 12px;
    background-color: var(--green-600);
    border-radius: 12px;

}

.app-features .features .icono span {
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 24px;
    height: 24px;
    filter: invert(1);
}

.app-features .icono.integration span {
    background-image: url('../images/integration.svg');
}

.app-features .icono.mail span {
    background-image: url('../images/mail.svg');
}

.app-features .icono.panel span {
    background-image: url('../images/panel.svg');
}

.app-features .icono.trend span {
    background-image: url('../images/trend.svg');
}

.app-features h4 {
    font-size: 32px;
    line-height: 1.25;
    margin-bottom: 6px;
    text-align: center;
    margin: 0;
}

.app-features h5 {
    font-size: 16px;
    line-height: 1.25;
    margin-bottom: 6px;
}

.app-features .features .description {
    max-width: 45ch;
    font-size: 16px;
    line-height: 1.5;
}

.app-features .feature {
    margin-block: 32px 40px;
}

.app-features .feature p {
    color: var(--gray-600);
    line-height: 1.5;
}

@media(width < 992px) {
    .app-features {
        margin-block: 5vh;
    }

    .app-features h3 {
        font-size: 42px;
        line-height: 1.2;
    }

    .app-features .header p {
        font-size: 20px;
        margin-top: 20px;
        max-width: 30ch;
    }

    .app-features .stars {
        margin-block: 32px;
    }

    .app-features .stars img {
        width: 40px;
    }
}

@media(width > 992px) {
    .app-features {
        min-height: 100vh;
    }

    .app-features h3 {
        font-size: 58px;
        line-height: 1.4;
    }

    .app-features .header p {
        font-size: 24px;
    }

    .app-features .features-container {
        display: flex;
        justify-content: space-between;
    }

    .app-features .features {
        max-width: 45%;
    }

    .app-features .stars {
        margin-block: 32px;
    }

    .app-features .stars img {
        width: 50px;
    }
}


/* MockUp */

.mockup {
    position: relative;
}

.mockup .valoration {
    display: flex;
    flex-direction: column;
    top: 0;
    position: absolute;
}

.mockup .valoration:hover,
.mockup .valoration:active {
    z-index: 1;
}

.mockup .valoration.comment .site {
    background-image: url('../images/valoration-comment.jpg');
}

.mockup .valoration .valoration-container {
    filter: drop-shadow(0 25px 25px rgba(0, 0, 0, .15));
    opacity: 1;
    background-color: var(--white);
    border-color: var(--white);
    border-width: 6px;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 9/18;
}

.mockup .valoration .page {
    margin: 6px;
    height: -webkit-fill-available;
}

.mockup .valoration .site {
    background-image: url('../images/valoration.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 20px;
    height: -webkit-fill-available;
}

.mockup .valoration .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--gray-600);
    height: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding-inline: 8px;
}

.mockup .valoration .nav .icono {
    height: 16px;
    width: 20px;
    padding-inline: 1px;
}

.mockup .valoration .nav p {
    color: var(--gray-600);
    font-size: 10px;
}

.mockup .icono {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 16px;
    height: 16px;
}

.mockup .icono.signal {
    background-image: url('../images/signal.svg');
}

.mockup .icono.wifi {
    background-image: url('../images/wifi.svg');
}

.mockup .icono.battery {
    background-image: url('../images/battery.svg');
}

@media (width < 992px) {
    .mockup {
        width: 100%;
        height: 550px;
        max-width: 420px;
        margin-block: 58px 38px;
    }

    .mockup .valoration {
        left: 0%;
    }

    .mockup .valoration:active .valoration-container {
        width: 80vw;
        max-width: 360px;
    }

    .mockup .valoration .valoration-container {
        width: calc(270px);
        transition: all 0.3s;
    }

    .mockup .valoration.comment {
        top: -25px;
        left: unset;
        right: 0%;
    }
}

@media (width > 992px) {
    .mockup {
        width: 350px;
        height: 575px;
        margin-block: 58px 32px;
    }

    .mockup .valoration {
        left: -10%;
    }

    .mockup .valoration:hover .valoration-container {
        width: calc(250px + 3vw);
    }

    .mockup .valoration .valoration-container {
        width: calc(230px + 2vw);
        transition: all 0.7s;
    }

    .mockup .valoration.comment {
        top: -25px;
        left: unset;
        right: -20%;
    }
}


/* Funnel */

.app-funnel .btn {
    display: block;
    max-width: 110px;
    background-color: var(--dark-700);
    color: white;
    border-radius: 8px;
}

.app-funnel .btn:hover {
    background-color: var(--gray-900);
}

@media(width < 992px) {
    .app-funnel {
        background-color: var(--green-600);
        color: white;
        padding-block: 32px 36px;
    }

    .app-funnel h4 {
        font-size: 38px;
        line-height: 1.3;
        margin-bottom: 30px;
    }

    .app-funnel p {
        font-size: 24px;
        max-width: 20ch;
        margin: 0 auto;
    }

    .app-funnel .btn {
        width: 110px;
        margin: 24px auto 0;
        padding: 8px 12px;
    }

    .app-funnel .btn:hover {
        background-color: var(--gray-900);
    }
}

@media(width > 992px) {
    .app-funnel {
        height: 50vh;
        background-color: var(--green-600);
        color: white;
    }

    .app-funnel h4 {
        font-size: 54px;
        line-height: 1.3;
        margin-bottom: 30px;
    }

    .app-funnel p {
        font-size: 30px;
    }

    .app-funnel .btn {
        width: 130px;
        margin: 24px auto 0;
        padding: 8px 16px;
        font-size: 18px;
    }
}


/* Footer */

.app-footer {
    background-color: var(--dark-700);
    color: var(--white);
    display: flex;
    justify-content: center;

    & h5 {
        font-family: 'Inter-Bold';
        font-size: 1.6rem;
    }

    & a:hover {
        color: var(--white);
        text-decoration: underline;
    }
}

.top-footer {
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    & h5 {
        font-size: 40px;
    }

    & a {
        font-size: 16px;
        color: var(--white);
    }
}

.main-footer {
    display: flex;
    justify-content: space-between;
    border-block: 1px solid rgba(255, 255, 255, .1);
    padding: 20px 16px 30px;

    & a {
        display: block;
        color: rgba(255, 255, 255, .6);
        margin-bottom: 7px;
        font-size: 13px;
        transition: color .2s ease-in-out;
    }

    & .title {
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        font-size: 18px;
        letter-spacing: -.015rem;
    }

    .social {

        & .accordion-content {
            display: flex;
            gap: 8px;
        }

        & .social-btn {
            display: inline-block;
            background-repeat: no-repeat;
            background-size: cover;
            cursor: pointer;
            border-radius: 100%;
            width: 42px;
            height: 42px;
            margin: 0;
        }

        & .linkedin {
            background-image: url('../images/linkedin.webp');
        }

        & .instagram {
            background-image: url('../images/instagram.webp');
        }
    }
}

.bottom-footer {
    padding-block: 8px;
    line-height: 1.3;

    & .flag {
        display: block;
        background-image: url('../images/argentina.svg');
        height: 44px;
        width: 44px;
    }

    a {
        color: var(--white);
        text-decoration: none;
        display: block;
    }
}

@media (width > 992px) {

    .top-footer {
        padding: 40px 32px;

        & img {
            width: 240px;
        }
    }

    .main-footer {
        padding: 40px 32px;

        & .accordion-plus {
            display: none;
        }

        & .accordion-content {
            max-height: unset;
        }
    }

    .bottom-footer {
        font-size: 12px;
    }
}

@media (width < 992px) {

    .top-footer {
        flex-direction: column;
        padding: 40px 0;

        & img {
            width: 200px;
        }
    }

    .main-footer {
        flex-direction: column;
        padding: 20px 0 30px;

        & .social {
            margin-top: 16px;

            & .title {
                display: none;
            }

            & .accordion-content {
                justify-content: center;
                margin-top: 8px;
                max-height: fit-content;
            }
        }
    }

    .bottom-footer {
        font-size: 12px;

        & .flag {
            height: 48px;
            width: 48px;
        }
    }
}

@media (width < 400px) {
    .bottom-footer {
        font-size: 11px;

        & .flag {
            height: 44px;
            width: 44px;
        }
    }
}

/* hero.css */


@media (width < 992px) {

    .hero {
        min-height: calc(100vh - 130px);
    }

    .hero .hero-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 5rem 1rem 0;
        max-width: 460px;
    }

    .hero .description {
        min-height: calc(92vh - 4rem);
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
        padding-block: 2vh;
    }

    .hero .badge {
        font-size: 10px;
        gap: 8px;
        padding: 4px 8px 4px 12px;
        margin-bottom: 5vh;
    }

    .hero .badge .flag {
        width: 14px;
        height: 14px;
    }

    .hero .badge .flag span {
        min-height: 24px;
        min-width: 24px;
    }

    .hero h1 {
        font-size: 56px;
        line-height: 0.5;
        margin-bottom: 3vh;
    }

    .hero p {
        font-size: 24px;
    }

    .hero .review {
        margin-block: 1vh;
        font-size: 16px;
    }

    .hero .review .star {
        margin-bottom: 2px;
    }

    .hero .integrations {
        padding-block: 0;
        font-size: 0.75rem;
    }

    .hero .integrations span {
        font-size: 14px;
    }

    .hero .control {
        flex-direction: column;
        gap: 12px;
        order: 3;
        width: 100%;
        margin-top: 1vh;
    }

    .hero .control .btn {
        justify-content: center;
        font-size: 18px;
        padding: 8px 32px;
        border-radius: 6px;
    }

    .hero .image-wrapper>div {
        border-radius: 16px;
    }

    .hero .floating-card {
        padding: 8px 12px;
        border-radius: 8px;
    }

    .hero .floating-card span {
        font-size: 10px;
    }

    .hero .floating-card.first {
        top: 2rem;
        right: 1rem;
        padding-block: 4px;
    }

    .hero .floating-card.second {
        bottom: 1rem;
        left: 1rem;
    }

    .hero .floating-card.small {
        top: 2rem;
        left: 1.5rem;
        padding: 8px;
    }

    .hero .text-xs {
        font-size: 10px;
    }

    .hero .text-sm {
        font-size: 12px;
    }

    .hero .text-md {
        font-size: 14px;
    }

    .hero .text-lg {
        font-size: 21px;
    }

    .hero .particle.lime {
        top: 13vh;
        right: 9vw;
    }

    .hero .particle.primary,
    .hero .particle.accent {
        display: none;
    }
}

@media (width < 400px) {

    .hero .hero-container {
        padding: 4rem 1rem 0;
    }

    .hero .description {
        padding-block: 2vh;
    }

    .hero h1 {
        font-size: 38px;
        margin-bottom: 2vh;
    }

    .hero .badge {
        margin-bottom: 4vh;
    }

    .hero .control {
        margin-top: 0;
    }

    .hero .control .btn {
        padding: 6px;
        font-size: 16px;
    }

    .hero .text-lg {
        font-size: 16px;
    }
}


@media (width > 992px) {

    .hero {
        min-height: 100vh;
    }

    .hero .hero-container {
        padding: 6rem 1rem;
    }

    .hero .description {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }

    .hero .badge {
        font-size: 0.8rem;
        margin-bottom: 3rem;
        padding: 0.3rem 1rem;
        width: fit-content;
        gap: 8px;
        margin-bottom: 5vh;
    }

    .hero .badge .flag {
        width: 18px;
        height: 18px;
    }

    .hero .badge .flag span {
        min-height: 28px;
        min-width: 28px;
    }

    .hero h1 {
        line-height: 0.75;
        font-size: 4.9rem;
    }

    .hero p {
        max-width: 36rem;
        padding-block: 28px 12px;
    }

    .hero .review {
        padding-block: 16px 0;
    }

    .hero .integrations {
        padding-top: 1rem;
        font-size: 0.875rem;
    }

    .hero .integrations span {
        font-size: 16px;
    }

    .hero .control {
        gap: 16px;
        margin-top: 20px;
    }

    .hero .control .btn {
        font-size: 1.125rem;
        padding: 8px 32px;
        border-radius: 8px;
    }

    .hero .image-wrapper {
        grid-column: 2 / 3;
        grid-row: 1 / 5;
        display: flex;
        align-items: center;
        border-radius: 1.5rem;
    }

    .hero .image-wrapper>div {
        border-radius: 1.5rem;
    }

    .hero .image-wrapper>div :hover {
        transform: translateY(-6px);
    }

    .hero .floating-card {
        padding: 1rem;
        border-radius: 1rem;
    }

    .hero .floating-card.first {
        top: 2rem;
        right: 1.5rem;
    }

    .hero .floating-card.second {
        bottom: 1rem;
        left: 2.5rem;
    }

    .hero .floating-card.small {
        top: 50%;
        left: 1.25rem;
        padding: 0.75rem;
        border-radius: 0.75rem;
    }

    .hero .text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    .hero .text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .hero .text-md {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .hero .text-lg {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .hero .particle.lime {
        top: 10rem;
        right: 8rem;
    }

    .hero .particle.primary {
        bottom: 5rem;
        left: 33%;
    }

    .hero .particle.accent {
        top: 10vh;
        left: 7vw;
    }
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(to bottom right,
            var(--background),
            var(--valorame-gradient-subtle),
            var(--background));
}

.hero-container {
    position: relative;
    display: grid;
    align-items: center;
    max-width: 1400px;
}

.hero h1 {
    font-weight: 700;
    font-family: Poppins-Regular, sans-serif;
    color: hsl(215, 25%, 27%);
}

.hero h1 span {
    background: var(--valorame-gradient-advanced);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    line-height: 1.1;
}

.hero p {
    line-height: 1.3;
    color: hsl(var(--muted-foreground));
    font-weight: 400;
}

.hero .review .star {
    color: var(--yellow-300);
    padding-right: 8px;
    font-size: 20px;
    display: block;
    margin-bottom: 4px;
}

.hero .control .btn {
    min-width: 175px;
    transition: all 0.5s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-primary {
    background: var(--valorame-gradient-advanced);
    color: #fff;
    box-shadow: var(--shadow-valorame);
}

.hero .btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
    transform: translateY(-5px);
}

.hero .btn-outline {
    color: hsl(215, 25%, 27%);
    background: #ffffffaf;
    box-shadow: 0 0 4px #0000001f;
    transition: all .3s ease;
}

.hero .control .arrow {
    display: block;
    margin-top: 2px;
    background-image: url('../images/arrow.svg');
    width: 14px;
    height: 16px;
    filter: invert(1);
    transition: all 0.3s ease;
}

.hero .btn-primary:hover .arrow {
    transform: translateX(4px);
}

.hero .control .play {
    display: block;
    margin-top: 2px;
    background-image: url('../images/play.svg');
    width: 16px;
    height: 16px;
    opacity: 0.75;
}

.hero .badge {
    display: flex;
    align-items: center;
    border-radius: 100px;
    font-weight: 500;
    color: var(--green-600);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    border: none;
    width: fit-content;
}

.hero .badge .flag {
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}



.hero .badge .flag span {
    display: block;
    background-image: url('../images/argentina.svg');

}

.hero .bg-circle {
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
    animation: float 6s ease-in-out infinite;
    will-change: transform;
}

.hero .bg-circle.accent {
    top: -10rem;
    right: -10rem;
    width: 24rem;
    height: 24rem;
    background: var(--accent-gradient);
    opacity: 0.3;
}

.hero .bg-circle.glow {
    bottom: -10rem;
    left: -10rem;
    width: 120%;
    height: 24rem;
    background: var(--valorame-gradient-glow);
    opacity: 0.2;
    animation-delay: 3s;
}

.hero .bg-circle.advanced {
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%);
    background: var(--valorame-gradient-advanced);
    opacity: 0.05;
}

.hero .particle {
    position: absolute;
    border-radius: 9999px;
    animation: bounce-in 2s ease forwards;
    width: 0.75rem;
    height: 0.75rem;
    will-change: transform, opacity;
}

.hero .particle.lime {
    background: hsl(84 81% 44%);
    opacity: 0.4;
    animation-delay: 2s;
}

.hero .particle.primary {
    background: hsl(168, 76%, 36%);
    opacity: 0.4;
    animation-delay: 2s;
}

.hero .particle.accent {
    background: hsl(84, 81%, 44%);
    opacity: 0.5;
    animation-delay: 2.5s;
}

.hero .image-wrapper>div {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-valorame);
    transition: transform 0.3s ease;
}

.hero .image-wrapper>div img {
    width: 100%;
    height: auto;
    display: block;
}



.text-success {
    color: hsl(var(--success));
}

.hero .floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    animation: float 6s ease-in-out infinite;
    font-family: poppins-regular, sans-serif;
    color: hsl(var(--foreground));
    will-change: transform;
}

.hero .floating-card .star {
    color: var(--yellow-300);
}

.hero .floating-card.glow:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.hero .integrations {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
}

.hero .integrations span {
    font-weight: 600;
}

.glass-card {
    backdrop-filter: blur(25px);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 40px;
    background: rgba(255, 255, 255, 0.12);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.18);
    border-image: initial;
}

/* ===== Animations ===== */
@keyframes float {

    0%,
    to {
        transform: translateY(0) rotate(0)
    }

    33% {
        transform: translateY(-15px) rotate(1deg)
    }

    66% {
        transform: translateY(-5px) rotate(-1deg)
    }
}

@keyframes bounce-in {
    0% {
        transform: scale(.3);
        opacity: 0
    }

    50% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(.9)
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.text-primary {
    color: hsl(var(--primary));
}

.text-success {
    color: hsl(var(--success));
}

.interactive-card:hover {
    transform: translateY(-12px) rotateX(5deg);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 25px 50px;
}

.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 40px;
}

.interactive-card {
    cursor: pointer;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift {
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shadow-valorame {
    --tw-shadow: var(--valorame-shadow);
    --tw-shadow-colored: var(--valorame-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}