/* =========================================================
        VARIABLES
    ========================================================= */

    :root {
        --primary: #123b46;
        --primary-light: #1e5360;
        --secondary: #5ca892;
        --secondary-dark: #397d6b;
        --accent: #d6a85d;

        --background: #f7f7f2;
        --background-soft: #edf5f1;
        --background-blue: #edf4f7;

        --white: #ffffff;
        --text: #163641;
        --text-muted: #6b7d82;
        --border: rgba(18, 59, 70, 0.12);

        --title-font: "Outfit", sans-serif;
        --body-font: "Manrope", sans-serif;

        --container: 1200px;
        --header-height: 88px;

        --radius-small: 16px;
        --radius-medium: 26px;
        --radius-large: 42px;

        --shadow-small:
            0 14px 35px rgba(18, 59, 70, 0.08);

        --shadow-medium:
            0 24px 60px rgba(18, 59, 70, 0.13);

        --shadow-large:
            0 35px 100px rgba(18, 59, 70, 0.18);

        --transition:
            0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* =========================================================
        RESET
    ========================================================= */

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 110px;
    }

    body {
        margin: 0;
        overflow-x: hidden;

        color: var(--text);
        background: var(--background);

        font-family: var(--body-font);
        font-size: 16px;
        line-height: 1.7;
        font-weight:500;
    }

    body.menu-open {
        overflow: hidden;
    }

    img {
        display: block;
        max-width: 100%;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
    }

    button {
        cursor: pointer;
    }

    /* =========================================================
        GENERALES
    ========================================================= */

    .container {
        width: min(calc(100% - 40px), var(--container));
        margin-inline: auto;
    }

    .section {
        position: relative;
        padding: 120px 0;
    }

    .section-label {
        display: inline-flex;
        align-items: center;
        gap: 12px;

        color: var(--secondary-dark);

        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .section-label::before {
        content: "";

        width: 32px;
        height: 1px;

        background: var(--accent);
    }

    .section-heading {
        max-width: 760px;
        margin: 0 auto 60px;

        text-align: center;
    }

    .section-heading .section-label {
        justify-content: center;
    }

    .section-title {
        margin: 18px 0;

        color: var(--primary);

        font-family: var(--title-font);
        /*font-size: clamp(2.8rem, 5vw, 4.7rem);*/
        font-weight: 400;
        line-height: 1.02;
        letter-spacing: -0.035em;
        font-size: 50px;
    }

    .section-title--left {
        text-align: left;
    }

    .section-description {
        max-width: 660px;
        margin: 0 auto;

        color: var(--text-muted);
        font-size: 1rem;
    }

    .section-description--left {
        margin-left: 0;
        text-align: left;
    }

    /* =========================================================
        BOTONES
    ========================================================= */

    .button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;

        min-height: 56px;
        padding: 0 28px;

        overflow: hidden;

        border: 1px solid var(--secondary);
        border-radius: 999px;

        color: var(--white);

        background:
            linear-gradient(
                135deg,
                var(--secondary),
                var(--secondary-dark)
            );

        box-shadow:
            0 17px 35px rgba(57, 125, 107, 0.23);

        font-size: 0.91rem;
        font-weight: 800;

        transition:
            transform var(--transition),
            box-shadow var(--transition);
    }

    .button::before {
        content: "";

        position: absolute;
        top: 0;
        left: -100%;

        width: 70%;
        height: 100%;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.25),
                transparent
            );

        transform: skewX(-20deg);

        transition: left 0.7s ease;
    }

    .button:hover::before {
        left: 130%;
    }

    .button:hover {
        transform: translateY(-4px);

        box-shadow:
            0 23px 48px rgba(57, 125, 107, 0.3);
    }

    .button__arrow {
        font-size: 1.15rem;
        transition: transform var(--transition);
    }

    .button:hover .button__arrow {
        transform: translateX(5px);
    }

    .button--small {
        min-height: 46px;
        padding-inline: 22px;

        font-size: 0.84rem;
    }

    .button--secondary {
        border-color: rgba(57, 125, 107, 0.4);

        color: var(--secondary-dark);
        background: rgba(255, 255, 255, 0.42);
        box-shadow: none;

        backdrop-filter: blur(12px);
    }

    .button--secondary:hover {
        color: var(--white);
        background: var(--secondary-dark);
    }

    .button__play {
        display: grid;

        width: 29px;
        height: 29px;

        place-items: center;

        border-radius: 50%;

        color: var(--secondary-dark);
        background: var(--background-soft);

        font-size: 0.65rem;
    }

    /* =========================================================
        PROGRESO DE PÁGINA
    ========================================================= */

    .page-progress {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;

        width: 100%;
        height: 3px;

        pointer-events: none;
    }

    .page-progress span {
        display: block;

        width: 0;
        height: 100%;

        background:
            linear-gradient(
                90deg,
                var(--secondary),
                var(--accent)
            );
    }

    /* =========================================================
        HEADER
    ========================================================= */

    .header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;

        width: 100%;
        height: var(--header-height);

        border-bottom: 1px solid transparent;

        background: rgba(247, 247, 242, 0.76);

        backdrop-filter: blur(20px);

        transition:
            background var(--transition),
            box-shadow var(--transition),
            border-color var(--transition);
    }

    .header.scrolled {
        border-color: var(--border);

        background: rgba(247, 247, 242, 0.95);

        box-shadow:
            0 14px 40px rgba(18, 59, 70, 0.08);
    }

    .header__container {
        display: flex;
        align-items: center;
        justify-content: space-between;

        height: 100%;
    }

    /* =========================================================
        MARCA
    ========================================================= */

    .brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;

        flex-shrink: 0;
    }

    .brand__logo {
        display: grid;

        width: 56px;
        height: 56px;

        place-items: center;

        overflow: hidden;

        border: 1px solid rgba(92, 168, 146, 0.18);
        border-radius: 18px;

        background:
            linear-gradient(
                145deg,
                var(--background-soft),
                var(--background-blue)
            );
    }

    .brand__logo img {
        width: 100%;
        height: 100%;

        object-fit: contain;

        padding: 4px;
    }

    .brand__name {
        display: block;

        color: var(--primary);

        font-family: var(--title-font);
        font-size: 1.9rem;
        line-height: 0.9;
    }

    .brand__tagline {
        display: block;

        margin-top: 6px;

        color: var(--secondary-dark);

        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.04em;
    }

    /* =========================================================
        NAVEGACIÓN
    ========================================================= */

    .navigation {
        display: flex;
        align-items: center;
        gap: 29px;
    }

    .navigation__link {
        position: relative;

        padding: 30px 0 26px;

        color: var(--primary);

        font-size: 0.86rem;
        font-weight: 700;
    }

    .navigation__link::after {
        content: "";

        position: absolute;
        bottom: 20px;
        left: 0;

        width: 0;
        height: 2px;

        border-radius: 99px;
        background: var(--secondary);

        transition: width var(--transition);
    }

    .navigation__link:hover::after,
    .navigation__link.active::after {
        width: 100%;
    }

    .menu-toggle {
        display: none;

        width: 47px;
        height: 47px;
        padding: 10px;

        border: 0;
        border-radius: 15px;

        background: var(--white);
        box-shadow: var(--shadow-small);
    }

    .menu-toggle span {
        display: block;

        width: 100%;
        height: 2px;
        margin: 6px 0;

        border-radius: 99px;
        background: var(--primary);

        transition:
            transform var(--transition),
            opacity var(--transition);
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* =========================================================
        HERO
    ========================================================= */

    .hero {
        min-height: 900px;

        padding-top:
            calc(var(--header-height) + 50px);

        padding-bottom: 165px;

        overflow: hidden;

        background:
            radial-gradient(
                circle at 8% 15%,
                rgba(224, 238, 244, 0.96),
                transparent 28%
            ),
            radial-gradient(
                circle at 90% 27%,
                rgba(223, 241, 233, 0.98),
                transparent 31%
            ),
            var(--background);
    }

    .hero__container {
        display: grid;
        grid-template-columns: 0.92fr 1.08fr;
        align-items: center;

        gap: 85px;
    }

    .hero__content {
        position: relative;
        z-index: 3;
    }

    .hero__title {
        max-width: 700px;
        margin: 22px 0 25px;

        color: var(--primary);

        font-family: var(--title-font);
        /*font-size: clamp(4rem, 6.2vw, 6.6rem);*/
        font-weight: 400;
        line-height: 0.94;
        letter-spacing: -0.048em;
        font-size: 50px;
    }

    .hero__title span {
        display: block;
        color: var(--secondary-dark);
    }

    .hero__description {
        max-width: 600px;
        margin: 0;

        color: var(--text-muted);

        font-size: 1.08rem;
    }

    .hero__buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;

        margin-top: 36px;
    }

    .hero__benefits {
        display: flex;
        flex-wrap: wrap;
        gap: 25px;

        margin-top: 48px;
    }

    .hero-benefit {
        display: flex;
        align-items: center;
        gap: 11px;
    }

    .hero-benefit__icon {
        display: grid;

        width: 42px;
        height: 42px;

        place-items: center;

        border: 1px solid rgba(92, 168, 146, 0.24);
        border-radius: 14px;

        color: var(--secondary-dark);
        background: rgba(255, 255, 255, 0.75);

        font-size: 0.82rem;
        font-weight: 800;
    }

    .hero-benefit strong,
    .hero-benefit span {
        display: block;
    }

    .hero-benefit strong {
        color: var(--primary);
        font-size: 0.79rem;
    }

    .hero-benefit span {
        margin-top: 2px;

        color: var(--text-muted);
        font-size: 0.68rem;
    }

    .hero__visual {
        position: relative;
        min-height: 625px;
    }

    .hero__image-wrapper {
        position: absolute;
        inset: 0 20px 45px 0;

        overflow: hidden;

        border: 10px solid rgba(255, 255, 255, 0.65);

        border-radius:
            46% 54% 44% 56%
            / 42% 44% 56% 58%;

        background: var(--background-soft);
        box-shadow: var(--shadow-large);

        animation: heroFloat 7s ease-in-out infinite;
    }

    .hero__image {
        width: 100%;
        height: 100%;

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

        transition: transform 0.9s ease;
    }

    .hero__image-wrapper:hover .hero__image {
        transform: scale(1.045);
    }

    .hero__image-overlay {
        position: absolute;
        inset: 0;

        background:
            linear-gradient(
                to top,
                rgba(18, 59, 70, 0.23),
                transparent 45%
            );
    }

    .hero-card {
        position: absolute;
        z-index: 5;

        display: flex;
        align-items: center;
        gap: 14px;

        padding: 18px;

        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 22px;

        background: rgba(255, 255, 255, 0.88);
        box-shadow: var(--shadow-medium);

        backdrop-filter: blur(18px);

        transition: transform 0.25s ease;
    }

    .hero-card--rating {
        top: 56px;
        left: -48px;
    }

    .hero-card--main {
        right: -34px;
        bottom: 30px;

        width: 285px;
    }

    .hero-card__icon,
    .hero-card__rating-number {
        display: grid;

        min-width: 54px;
        height: 54px;

        place-items: center;

        border-radius: 18px;

        color: var(--secondary-dark);
        background: var(--background-soft);

        font-size: 1.25rem;
        font-weight: 800;
    }

    .hero-card span,
    .hero-card strong {
        display: block;
    }

    .hero-card span {
        color: var(--text-muted);
        font-size: 0.7rem;
    }

    .hero-card strong {
        margin-top: 3px;

        color: var(--primary);

        font-size: 0.82rem;
        line-height: 1.35;
    }

    .hero-card__stars {
        color: var(--accent) !important;
        letter-spacing: 0.05em;
    }

    .hero__decorative-circle {
        position: absolute;
        top: 78px;
        right: -22px;

        width: 110px;
        height: 110px;

        border: 1px solid rgba(92, 168, 146, 0.35);
        border-radius: 50%;
    }

    .hero__curve {
        position: absolute;
        bottom: -64px;
        left: -5%;

        width: 110%;
        height: 150px;

        border-radius: 50% 50% 0 0;

        background:
            linear-gradient(
                90deg,
                #d6e8f0,
                #e3f1ea
            );

        transform: rotate(-1.4deg);
    }

    /* =========================================================
        TRUST
    ========================================================= */

    .trust-bar {
        position: relative;
        z-index: 6;

        padding: 30px 0;
        background: var(--white);
    }

    .trust-bar__container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 35px;
    }

    .trust-bar p {
        margin: 0;

        color: var(--primary);

        font-family: var(--title-font);
        font-size: 1.35rem;
    }

    .trust-bar__items {
        display: flex;
        flex-wrap: wrap;
        gap: 18px 30px;

        color: var(--text-muted);

        font-size: 0.78rem;
        font-weight: 700;
    }

    .trust-bar__items span {
        position: relative;
    }

    .trust-bar__items span:not(:last-child)::after {
        content: "•";

        position: absolute;
        right: -18px;

        color: var(--secondary);
    }

    /* =========================================================
        SERVICIOS
    ========================================================= */

    .services {
        background: var(--white);
    }

    .services__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .service-card {
        position: relative;

        min-height: 390px;
        padding: 34px 30px;

        overflow: hidden;

        border: 1px solid var(--border);
        border-radius: var(--radius-medium);

        background:
            linear-gradient(
                160deg,
                #ffffff,
                #fafbf8
            );

        box-shadow: var(--shadow-small);

        transition:
            transform var(--transition),
            box-shadow var(--transition),
            border-color var(--transition);
    }

    .service-card::before {
        content: "";

        position: absolute;
        right: -75px;
        bottom: -75px;

        width: 190px;
        height: 190px;

        border-radius: 50%;

        background: var(--background-soft);

        opacity: 0;
        transform: scale(0.6);

        transition:
            opacity var(--transition),
            transform var(--transition);
    }

    .service-card:hover {
        transform: translateY(-12px);

        border-color: rgba(92, 168, 146, 0.32);
        box-shadow: var(--shadow-medium);
    }

    .service-card:hover::before {
        opacity: 1;
        transform: scale(1);
    }

    .service-card__number {
        position: absolute;
        top: 23px;
        right: 25px;

        color: rgba(18, 59, 70, 0.1);

        font-family: var(--title-font);
        font-size: 2.4rem;
    }

    .service-card__icon {
        display: grid;

        width: 74px;
        height: 74px;

        margin-bottom: 28px;

        place-items: center;

        border-radius: 23px;

        color: var(--secondary-dark);
        background: var(--background-soft);

        font-size: 1.8rem;
    }

    .service-card h3 {
        position: relative;
        z-index: 2;

        margin: 0 0 14px;

        color: var(--primary);

        font-family: var(--title-font);
        font-size: 1.75rem;
        font-weight: 400;
    }

    .service-card p {
        position: relative;
        z-index: 2;

        margin: 0;

        color: var(--text-muted);
        font-size: 0.86rem;
    }

    .service-card a {
        position: absolute;
        bottom: 30px;
        left: 30px;
        z-index: 2;

        color: var(--secondary-dark);

        font-size: 0.82rem;
        font-weight: 800;
    }

    .service-card a span {
        display: inline-block;

        margin-left: 5px;
        transition: transform var(--transition);
    }

    .service-card:hover a span {
        transform: translateX(6px);
    }

    /* =========================================================
        PROCESO
    ========================================================= */

    .process {
        overflow: hidden;

        background:
            radial-gradient(
                circle at 10% 75%,
                rgba(223, 241, 233, 0.9),
                transparent 28%
            ),
            linear-gradient(
                180deg,
                #f3f8f5,
                var(--background)
            );
    }

    .process__container {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        align-items: center;

        gap: 90px;
    }

    .process__steps {
        display: grid;
        gap: 24px;

        margin: 38px 0;
    }

    .process-step {
        display: grid;
        grid-template-columns: 58px 1fr;
        gap: 20px;
    }

    .process-step__number {
        display: grid;

        width: 58px;
        height: 58px;

        place-items: center;

        border: 1px solid rgba(92, 168, 146, 0.25);
        border-radius: 18px;

        color: var(--secondary-dark);
        background: rgba(255, 255, 255, 0.78);

        font-size: 0.76rem;
        font-weight: 800;
    }

    .process-step h3 {
        margin: 2px 0 5px;

        color: var(--primary);
        font-size: 1rem;
    }

    .process-step p {
        margin: 0;

        color: var(--text-muted);
        font-size: 0.86rem;
    }

    .process__visual {
        position: relative;

        min-height: 570px;
    }

    .dashboard {
        position: absolute;
        top: 25px;
        left: 0;

        width: 92%;
        padding: 22px;

        border: 1px solid rgba(18, 59, 70, 0.14);
        border-radius: 30px;

        background: rgba(255, 255, 255, 0.88);
        box-shadow: var(--shadow-large);

        backdrop-filter: blur(18px);

        transform:
            perspective(1200px)
            rotateY(-4deg)
            rotateX(2deg);
    }

    .dashboard__top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding-bottom: 19px;

        border-bottom: 1px solid var(--border);
    }

    .dashboard__dots {
        display: flex;
        gap: 7px;
    }

    .dashboard__dots span {
        width: 9px;
        height: 9px;

        border-radius: 50%;
        background: #ccd8dc;
    }

    .dashboard__search {
        width: 45%;
        height: 10px;

        border-radius: 99px;
        background: #e7edef;
    }

    .dashboard__welcome {
        margin-top: 25px;
    }

    .dashboard__welcome span {
        color: var(--text-muted);
        font-size: 0.72rem;
    }

    .dashboard__welcome h3 {
        margin: 4px 0 0;

        color: var(--primary);

        font-family: var(--title-font);
        font-size: 1.55rem;
        font-weight: 400;
    }

    .dashboard__cards {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 18px;

        margin-top: 23px;
    }

    .dashboard-card {
        padding: 20px;

        border: 1px solid var(--border);
        border-radius: 20px;

        background: var(--white);
        box-shadow: var(--shadow-small);
    }

    .dashboard-card small {
        color: var(--text-muted);
    }

    .dashboard-card h4 {
        margin: 12px 0 4px;

        color: var(--primary);
    }

    .dashboard-card p {
        margin: 0;

        color: var(--text-muted);
        font-size: 0.75rem;
    }

    .dashboard-card__date {
        display: flex;
        justify-content: space-between;

        margin-top: 18px;
        padding: 11px;

        border-radius: 12px;

        color: var(--primary);
        background: var(--background-soft);

        font-size: 0.7rem;
        font-weight: 700;
    }

    .progress-circle {
        display: grid;

        width: 100px;
        height: 100px;

        margin: 17px auto 8px;

        place-items: center;

        border-radius: 50%;

        background:
            conic-gradient(
                var(--secondary) 0 78%,
                #e5ece9 78% 100%
            );
    }

    .progress-circle::before {
        content: "";

        grid-area: 1 / 1;

        width: 75px;
        height: 75px;

        border-radius: 50%;
        background: var(--white);
    }

    .progress-circle strong {
        z-index: 2;
        grid-area: 1 / 1;

        color: var(--secondary-dark);
    }

    .mobile-chat {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 5;

        width: 220px;
        min-height: 420px;
        padding: 35px 14px 17px;

        border: 8px solid var(--primary);
        border-radius: 38px;

        background: #f8fbf9;
        box-shadow: var(--shadow-large);

        transform: rotate(2deg);
    }

    .mobile-chat::before {
        content: "";

        position: absolute;
        top: 7px;
        left: 50%;

        width: 70px;
        height: 14px;

        border-radius: 0 0 10px 10px;
        background: var(--primary);

        transform: translateX(-50%);
    }

    .mobile-chat__header {
        display: flex;
        justify-content: space-between;

        padding-bottom: 12px;

        border-bottom: 1px solid var(--border);

        color: var(--primary);
        font-size: 0.64rem;
        font-weight: 700;
    }

    .mobile-chat__profile {
        display: flex;
        align-items: center;
        gap: 9px;

        margin: 15px 0;
    }

    .mobile-chat__avatar {
        width: 36px;
        height: 36px;

        border-radius: 50%;

        background:
            linear-gradient(
                145deg,
                #c9e2da,
                #6ca792
            );
    }

    .mobile-chat__profile strong,
    .mobile-chat__profile span {
        display: block;
    }

    .mobile-chat__profile strong {
        color: var(--primary);
        font-size: 0.66rem;
    }

    .mobile-chat__profile span {
        color: var(--secondary-dark);
        font-size: 0.54rem;
    }

    .message {
        max-width: 87%;
        margin-bottom: 13px;
        padding: 10px;

        border-radius: 12px;

        font-size: 0.56rem;
        line-height: 1.5;
    }

    .message--received {
        border-bottom-left-radius: 4px;

        background: var(--white);
        box-shadow: 0 6px 18px rgba(18, 59, 70, 0.06);
    }

    .message--sent {
        margin-left: auto;

        border-bottom-right-radius: 4px;
        background: var(--background-soft);
    }

    /* =========================================================
        NOSOTROS
    ========================================================= */

    .about {
        background: var(--white);
    }

    .about__container {
        display: grid;
        grid-template-columns: 1fr 0.95fr;
        align-items: center;

        gap: 100px;
    }

    .about__visual {
        position: relative;
        max-width: 520px;
    }

    .about__image-wrapper {
        overflow: hidden;

        border-radius: 46% 46% 32px 32px;
        box-shadow: var(--shadow-large);
    }

    .about__image-wrapper img {
        width: 100%;
        height: 610px;

        object-fit: cover;

        transition: transform 0.8s ease;
    }

    .about__image-wrapper:hover img {
        transform: scale(1.04);
    }

    .about__experience {
        position: absolute;
        right: -45px;
        bottom: 38px;

        display: flex;
        align-items: center;
        gap: 13px;

        width: 220px;
        padding: 20px;

        border: 1px solid var(--border);
        border-radius: 21px;

        background: rgba(255, 255, 255, 0.93);
        box-shadow: var(--shadow-medium);

        backdrop-filter: blur(14px);
    }

    .about__experience strong {
        color: var(--secondary-dark);

        font-family: var(--title-font);
        font-size: 2.7rem;
        font-weight: 400;
        line-height: 1;
    }

    .about__experience span {
        color: var(--text-muted);

        font-size: 0.7rem;
        line-height: 1.45;
    }

    .about__features {
        display: grid;
        gap: 21px;

        margin: 34px 0;
    }

    .about-feature {
        display: grid;
        grid-template-columns: 42px 1fr;
        gap: 15px;
    }

    .about-feature__icon {
        display: grid;

        width: 39px;
        height: 39px;

        place-items: center;

        border-radius: 50%;

        color: var(--secondary-dark);
        background: var(--background-soft);

        font-size: 0.72rem;
        font-weight: 800;
    }

    .about-feature strong {
        color: var(--primary);
        font-size: 0.92rem;
    }

    .about-feature p {
        margin: 4px 0 0;

        color: var(--text-muted);
        font-size: 0.83rem;
    }



    /* =========================================================
        TESTIMONIO
    ========================================================= */

    .testimonial {
        background:
            linear-gradient(
                180deg,
                var(--background-soft),
                #f3f8f5
            );
    }

    .testimonial__card {
        max-width: 900px;
        margin: auto;

        text-align: center;
    }

    .testimonial__quote {
        height: 80px;

        color: rgba(57, 125, 107, 0.2);

        font-family: var(--title-font);
        font-size: 9rem;
        line-height: 0.8;
    }

    .testimonial blockquote {
        margin: 0 0 32px;

        color: var(--primary);

        font-family: var(--title-font);
        /*font-size: clamp(2rem, 3.5vw, 3.25rem);*/
        font-weight: 400;
        line-height: 1.25;
        font-size: 40px;
    }

    .testimonial__person {
        display: inline-flex;
        align-items: center;
        gap: 12px;

        text-align: left;
    }

    .testimonial__avatar {
        display: grid;

        width: 50px;
        height: 50px;

        place-items: center;

        border-radius: 50%;

        color: var(--white);
        background: var(--secondary);

        font-size: 0.77rem;
        font-weight: 800;
    }

    .testimonial__person strong,
    .testimonial__person span {
        display: block;
    }

    .testimonial__person strong {
        color: var(--primary);
        font-size: 0.86rem;
    }

    .testimonial__person span {
        color: var(--text-muted);
        font-size: 0.7rem;
    }

    /* =========================================================
        CONTACTO
    ========================================================= */

    .contact {
        background:
            radial-gradient(
                circle at 90% 20%,
                var(--background-blue),
                transparent 30%
            ),
            var(--background);
    }

    .contact__card {
        display: grid;
        grid-template-columns: 0.78fr 1.22fr;
        gap: 60px;

        padding: 60px;

        border: 1px solid var(--border);
        border-radius: var(--radius-large);

        background: rgba(255, 255, 255, 0.86);
        box-shadow: var(--shadow-medium);

        backdrop-filter: blur(16px);
    }

    .contact__information > p {
        color: var(--text-muted);
    }

    .contact__details {
        display: grid;
        gap: 18px;

        margin-top: 34px;
    }

    .contact-detail {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .contact-detail__icon {
        display: grid;

        width: 44px;
        height: 44px;

        place-items: center;

        border-radius: 15px;

        color: var(--secondary-dark);
        background: var(--background-soft);
    }

    .contact-detail small,
    .contact-detail strong {
        display: block;
    }

    .contact-detail small {
        color: var(--text-muted);
        font-size: 0.68rem;
    }

    .contact-detail strong {
        color: var(--primary);
        font-size: 0.84rem;
    }

    .contact-form {
        padding: 35px;

        border: 1px solid var(--border);
        border-radius: 27px;

        background: var(--white);
        box-shadow: var(--shadow-small);
    }

    .contact-form__row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;

        margin-bottom: 8px;

        color: var(--primary);

        font-size: 0.76rem;
        font-weight: 800;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;

        border: 1px solid var(--border);
        border-radius: 14px;

        outline: none;

        color: var(--primary);
        background: #fbfcfa;

        transition:
            border-color var(--transition),
            box-shadow var(--transition),
            background var(--transition);
    }

    .form-group input,
    .form-group select {
        height: 52px;
        padding: 0 15px;
    }

    .form-group textarea {
        min-height: 130px;
        padding: 15px;

        resize: vertical;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: var(--secondary);
        background: var(--white);

        box-shadow:
            0 0 0 4px rgba(92, 168, 146, 0.12);
    }

    .form-group.error input,
    .form-group.error select,
    .form-group.error textarea {
        border-color: #b65151;

        box-shadow:
            0 0 0 4px rgba(182, 81, 81, 0.08);
    }

    .contact-form__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .contact-form__footer p {
        margin: 0;

        color: var(--text-muted);
        font-size: 0.67rem;
    }

    .form-message {
        margin-top: 18px;

        font-size: 0.8rem;
        font-weight: 700;
    }

    /* =========================================================
        FOOTER
    ========================================================= */

    .footer {
        padding-top: 75px;

        color: rgba(255, 255, 255, 0.72);

        background:
            linear-gradient(
                145deg,
                #0e3039,
                #123f49
            );
    }

    .footer__container {
        display: grid;
        grid-template-columns: 1.6fr repeat(3, 1fr);
        gap: 55px;

        padding-bottom: 60px;
    }

    .footer .brand__name {
        color: var(--white);
    }

    .footer .brand__tagline {
        color: rgba(255, 255, 255, 0.55);
    }

    .footer__brand p {
        max-width: 360px;
        margin-top: 22px;

        font-size: 0.82rem;
    }

    .footer__column {
        display: flex;
        flex-direction: column;
        gap: 11px;
    }

    .footer__column h3 {
        margin: 0 0 9px;

        color: var(--white);

        font-size: 0.86rem;
    }

    .footer__column a,
    .footer__column span {
        font-size: 0.76rem;

        transition: color var(--transition);
    }

    .footer__column a:hover {
        color: var(--white);
    }

    .footer__bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;

        padding: 24px 0;

        border-top: 1px solid rgba(255, 255, 255, 0.11);

        font-size: 0.7rem;
    }

    .footer__bottom p {
        margin: 0;
    }

    .footer__bottom div {
        display: flex;
        gap: 20px;
    }

    /* =========================================================
        WHATSAPP
    ========================================================= */

    .whatsapp {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 90;

        display: grid;

        width: 58px;
        height: 58px;

        place-items: center;

        border: 4px solid rgba(255, 255, 255, 0.82);
        border-radius: 50%;

        color: var(--white);
        background: #25d366;

        box-shadow:
            0 14px 34px rgba(37, 211, 102, 0.3);

        font-size: 1.4rem;

        transition: transform var(--transition);
    }

    .whatsapp:hover {
        transform: translateY(-5px) scale(1.04);
    }

    /* =========================================================
        ANIMACIONES
    ========================================================= */

    .reveal {
        opacity: 0;

        transform: translateY(35px);

        transition:
            opacity 0.8s ease,
            transform 0.8s ease;
    }

    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal--delay {
        transition-delay: 0.15s;
    }

    @keyframes heroFloat {
        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-12px);
        }
    }

    /* =========================================================
        TABLET
    ========================================================= */

    @media (max-width: 1100px) {
        .pricing__grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .pricing-card:last-child {
            grid-column: 1 / -1;
            width: min(100%, 570px);
            margin-inline: auto;
        }

        .pricing-card--featured {
            transform: none;
        }

        .pricing-card--featured:hover {
            transform: translateY(-12px);
        }
        .navigation {
            gap: 18px;
        }

        .navigation__link {
            font-size: 0.8rem;
        }

        .hero__container {
            gap: 50px;
        }

        .hero__benefits {
            gap: 17px;
        }

        .services__grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .process__container,
        .about__container {
            gap: 60px;
        }
    }

    /* =========================================================
        MENÚ MÓVIL
    ========================================================= */

    @media (max-width: 900px) {
        :root {
            --header-height: 76px;
        }

        .menu-toggle {
            display: block;
        }

        .navigation {
            position: fixed;
            top: var(--header-height);
            right: 18px;
            left: 18px;

            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;

            max-height: 0;
            padding: 0 22px;

            overflow: hidden;

            border: 1px solid transparent;
            border-radius: 22px;

            background: rgba(255, 255, 255, 0.97);
            box-shadow: var(--shadow-large);

            opacity: 0;
            transform: translateY(-15px);

            transition:
                max-height 0.45s ease,
                padding 0.45s ease,
                opacity 0.3s ease,
                transform 0.3s ease,
                border-color 0.3s ease;
        }

        .navigation.open {
            max-height: 560px;
            padding: 17px 22px 23px;

            border-color: var(--border);

            opacity: 1;
            transform: translateY(0);
        }

        .navigation__link {
            padding: 14px 0;

            border-bottom: 1px solid var(--border);
        }

        .navigation__link::after {
            display: none;
        }

        .navigation .button {
            margin-top: 15px;
        }

        .hero {
            min-height: auto;

            padding-top:
                calc(var(--header-height) + 75px);
        }

        .hero__container,
        .process__container,
        .about__container,
        .contact__card {
            grid-template-columns: 1fr;
        }

        .hero__content {
            text-align: center;
        }

        .hero__title,
        .hero__description {
            margin-inline: auto;
        }

        .hero__title,
.section-title{
font-weight: 700;
letter-spacing: -0.05em;
}

        .hero__buttons,
        .hero__benefits {
            justify-content: center;
        }

        .hero__visual {
            min-height: 590px;
            margin-top: 25px;
        }

        .trust-bar__container {
            flex-direction: column;
            text-align: center;
        }

        .process__visual {
            margin-top: 20px;
        }

        .about__visual {
            margin-inline: auto;
        }

        .contact__card {
            padding: 40px;
        }

        .footer__container {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* =========================================================
        CELULAR
    ========================================================= */

    @media (max-width: 620px) {

        .pricing__grid {
            grid-template-columns: 1fr;
        }

        .pricing-card,
        .pricing-card:last-child {
            grid-column: auto;
            width: 100%;
            min-height: auto;
            padding: 32px 24px 25px;
        }

        .pricing-card--featured {
            order: -1;
        }

        .pricing-card__description {
            min-height: auto;
        }

        .pricing-card__price strong {
            font-size: 4rem;
        }

        .pricing-card__custom-price strong {
            font-size: 1.9rem;
        }

        .pricing__note {
            flex-direction: column;
            align-items: flex-start;

            padding: 22px;
        }

        .pricing__note a {
            white-space: normal;
        }
        .container {
            width: min(calc(100% - 28px), var(--container));
        }

        .section {
            padding: 85px 0;
        }

        .brand__logo {
            width: 48px;
            height: 48px;
        }

        .brand__name {
            font-size: 1.6rem;
        }

        .brand__tagline {
            font-size: 0.59rem;
        }

        .hero {
            padding-bottom: 120px;
        }

        .hero__title {
            font-size: clamp(3.2rem, 15vw, 4.6rem);
        }

        .hero__description {
            font-size: 0.96rem;
        }

        .hero__buttons {
            flex-direction: column;
            align-items: stretch;
        }

        .hero__buttons .button {
            width: 100%;
        }

        .hero__benefits {
            display: grid;
            grid-template-columns: 1fr;

            text-align: left;
        }

        .hero__visual {
            min-height: 490px;
        }

        .hero__image-wrapper {
            inset: 0 0 50px;
        }

        .hero-card--rating {
            top: 20px;
            left: 5px;
        }

        .hero-card--main {
            right: 5px;
            bottom: 8px;

            width: 245px;
        }

        .hero__decorative-circle {
            display: none;
        }

        .trust-bar__items {
            justify-content: center;
        }

        .trust-bar__items span::after {
            display: none;
        }

        .services__grid {
            grid-template-columns: 1fr;
        }

        .service-card {
            min-height: 360px;
        }

        .dashboard {
            width: 100%;

            transform: none;
        }

        .dashboard__cards {
            grid-template-columns: 1fr;
        }

        .dashboard__cards .dashboard-card:last-child {
            display: none;
        }

        .mobile-chat {
            display: none;
        }

        .process__visual {
            min-height: 430px;
        }

        .about__image-wrapper img {
            height: 480px;
        }

        .about__experience {
            right: 10px;
            bottom: 18px;
        }

        .statistics__container {
            grid-template-columns: repeat(2, 1fr);
            row-gap: 35px;
        }

        .statistic:nth-child(2)::after {
            display: none;
        }

        .statistic strong {
            font-size: 3rem;
        }

        .contact__card {
            gap: 35px;
            padding: 25px;

            border-radius: 28px;
        }

        .contact-form {
            padding: 24px;
        }

        .contact-form__row {
            grid-template-columns: 1fr;
            gap: 0;
        }

        .contact-form__footer {
            flex-direction: column;
            align-items: stretch;
        }

        .contact-form__footer .button {
            width: 100%;
        }

        .footer__container {
            grid-template-columns: 1fr;
        }

        .footer__bottom {
            flex-direction: column;
            align-items: flex-start;
        }

        .whatsapp {
            right: 15px;
            bottom: 15px;

            width: 53px;
            height: 53px;
        }
    }

    /* =========================================================
        REDUCIR MOVIMIENTO
    ========================================================= */

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }

        .reveal {
            opacity: 1;
            transform: none;
        }
    }




    /* =========================================================
    PRECIOS
========================================================= */

.pricing {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(223, 241, 233, 0.9),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(224, 238, 244, 0.85),
            transparent 27%
        ),
        var(--background);
}

.pricing::before {
    content: "";

    position: absolute;
    top: 110px;
    right: -110px;

    width: 280px;
    height: 280px;

    border: 1px solid rgba(92, 168, 146, 0.16);
    border-radius: 50%;

    pointer-events: none;
}

.pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 25px;
}

.pricing-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 650px;
    padding: 37px 32px 32px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius-medium);

    background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.97),
            rgba(250, 251, 248, 0.94)
        );

    box-shadow: var(--shadow-small);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.pricing-card::before {
    content: "";

    position: absolute;
    top: -105px;
    right: -105px;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    background: var(--background-soft);

    transition:
        transform var(--transition),
        opacity var(--transition);
}

.pricing-card:hover {
    transform: translateY(-12px);

    border-color: rgba(92, 168, 146, 0.35);
    box-shadow: var(--shadow-medium);
}

.pricing-card:hover::before {
    transform: scale(1.16);
}

.pricing-card--featured {
    border-color: rgba(92, 168, 146, 0.44);

    background:
        linear-gradient(
            155deg,
            #ffffff,
            #f1f8f5
        );

    box-shadow:
        0 30px 75px rgba(18, 59, 70, 0.16);

    transform: translateY(-15px);
}

.pricing-card--featured:hover {
    transform: translateY(-25px);
}

.pricing-card__badge {
    position: absolute;
    top: 0;
    right: 27px;
    z-index: 3;

    padding: 8px 17px;

    border-radius: 0 0 14px 14px;

    color: var(--white);
    background:
        linear-gradient(
            135deg,
            var(--secondary),
            var(--secondary-dark)
        );

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pricing-card__header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 23px;
}

.pricing-card__icon {
    display: grid;

    min-width: 65px;
    height: 65px;

    place-items: center;

    border: 1px solid rgba(92, 168, 146, 0.2);
    border-radius: 21px;

    color: var(--secondary-dark);
    background: var(--background-soft);

    font-size: 1.25rem;
    font-weight: 800;
}

.pricing-card__category {
    display: block;

    margin-bottom: 2px;

    color: var(--secondary-dark);

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-card h3 {
    margin: 0;

    color: var(--primary);

    font-family: var(--title-font);
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1.1;
}

.pricing-card__description {
    position: relative;
    z-index: 2;

    min-height: 83px;
    margin: 0 0 26px;

    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.7;
}

.pricing-card__price {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;

    min-height: 96px;
    margin-bottom: 25px;
    padding-bottom: 25px;

    border-bottom: 1px solid var(--border);
}

.pricing-card__currency {
    margin-top: 13px;
    margin-right: 6px;

    color: var(--secondary-dark);

    font-size: 1.05rem;
    font-weight: 800;
}

.pricing-card__price strong {
    color: var(--primary);

    font-family: var(--title-font);
    font-size: 4.8rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.06em;
}

.pricing-card__price div {
    display: flex;
    flex-direction: column;

    margin-top: 13px;
    margin-left: 5px;
}

.pricing-card__price div span {
    color: var(--primary);
    font-size: 0.96rem;
    font-weight: 800;
}

.pricing-card__price small {
    margin-top: 4px;

    color: var(--text-muted);
    font-size: 0.63rem;
    white-space: nowrap;
}

.pricing-card__custom-price {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 96px;
    margin-bottom: 25px;
    padding-bottom: 25px;

    border-bottom: 1px solid var(--border);
}

.pricing-card__custom-price strong {
    color: var(--primary);

    font-family: var(--title-font);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.1;
}

.pricing-card__custom-price span {
    margin-top: 8px;

    color: var(--text-muted);
    font-size: 0.72rem;
}

.pricing-card__features {
    position: relative;
    z-index: 2;

    display: grid;
    gap: 14px;

    margin: 0 0 32px;
    padding: 0;

    list-style: none;
}

.pricing-card__features li {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 10px;

    color: var(--text-muted);

    font-size: 0.78rem;
    line-height: 1.5;
}

.pricing-card__features li span {
    display: grid;

    width: 27px;
    height: 27px;

    place-items: center;

    border-radius: 50%;

    color: var(--secondary-dark);
    background: var(--background-soft);

    font-size: 0.63rem;
    font-weight: 800;
}

.pricing-card__button {
    width: 100%;
    margin-top: auto;
}

.pricing__note {
    display: flex;
    align-items: center;
    gap: 17px;

    margin-top: 45px;
    padding: 23px 28px;

    border: 1px solid rgba(92, 168, 146, 0.22);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow-small);

    backdrop-filter: blur(15px);
}

.pricing__note-icon {
    display: grid;

    min-width: 45px;
    height: 45px;

    place-items: center;

    border-radius: 15px;

    color: var(--secondary-dark);
    background: var(--background-soft);

    font-weight: 800;
}

.pricing__note p {
    flex: 1;

    margin: 0;

    color: var(--text-muted);
    font-size: 0.79rem;
}

.pricing__note a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--secondary-dark);

    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.pricing__note a span {
    transition: transform var(--transition);
}

.pricing__note a:hover span {
    transform: translateX(5px);
}

/* =========================================================
   CORRECCIÓN DEFINITIVA DE PRECIOS EN MÓVIL
========================================================= */

@media screen and (max-width: 620px) {

    .pricing {
        overflow: hidden;
    }

    .pricing .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .pricing__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px;
        width: 100%;
    }

    .pricing-card,
    .pricing-card:last-child,
    .pricing-card--featured {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        min-width: 0;
        max-width: none;
        min-height: auto;

        margin: 0 !important;
        padding: 32px 24px 26px;

        transform: none !important;
    }

    .pricing-card:hover,
    .pricing-card--featured:hover {
        transform: translateY(-6px) !important;
    }

    .pricing-card--featured {
        order: -1;
    }

    .pricing-card__header {
        align-items: center;
    }

    .pricing-card__description {
        min-height: auto;
        margin-bottom: 24px;
    }

    .pricing-card__price {
        min-height: auto;
    }

    .pricing-card__price strong {
        font-size: clamp(3.8rem, 18vw, 4.8rem);
    }

    .pricing-card__custom-price {
        min-height: auto;
    }

    .pricing-card__custom-price strong {
        font-size: 2rem;
    }

    .pricing-card__features {
        gap: 13px;
    }

    .pricing-card__features li {
        grid-template-columns: 28px minmax(0, 1fr);
        font-size: 0.8rem;
    }

    .pricing-card__badge {
        right: 20px;
        max-width: calc(100% - 40px);

        padding: 8px 14px;

        font-size: 0.6rem;
        white-space: nowrap;
    }

    .pricing__note {
        flex-direction: column;
        align-items: flex-start;
        gap: 13px;

        padding: 22px;
    }

    .pricing__note a {
        white-space: normal;
    }
}

.brand__company {
    display: block;
    margin-top: 3px;

    color: var(--text-muted);

    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.footer .brand__company {
    color: rgba(255, 255, 255, 0.48);
}


/* =========================================================
   RESPALDO DE NÚCLEO SOFTWARE
========================================================= */

.company-backing {
    padding: 70px 0;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #1c5663
        );
}

.company-backing__container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 70px;
}

.company-backing__eyebrow {
    display: block;

    margin-bottom: 12px;

    color: rgba(255, 255, 255, 0.6);

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.company-backing__content h2 {
    max-width: 650px;
    margin: 0 0 20px;

    color: var(--white);

    font-family: var(--title-font);
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.company-backing__content p {
    max-width: 700px;
    margin: 0 0 14px;

    color: rgba(255, 255, 255, 0.68);
    font-size: 0.88rem;
}

.company-backing__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 15px;

    color: var(--white);

    font-size: 0.82rem;
    font-weight: 800;
}

.company-backing__link span {
    transition: transform var(--transition);
}

.company-backing__link:hover span {
    transform: translateX(5px);
}

.company-backing__brand {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 240px;
    padding: 38px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-medium);

    background: rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-medium);

    backdrop-filter: blur(16px);
}

.company-backing__brand span {
    color: rgba(255, 255, 255, 0.55);

    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.company-backing__brand strong {
    margin: 10px 0 5px;

    color: var(--white);

    font-family: var(--title-font);
    font-size: clamp(2.3rem, 4vw, 4rem);
    font-weight: 500;
    line-height: 1;
}

.company-backing__brand small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
}

@media (max-width: 900px) {

    .company-backing__container {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}

@media (max-width: 620px) {

    .company-backing {
        padding: 60px 0;
    }

    .company-backing__content {
        text-align: center;
    }

    .company-backing__content h2,
    .company-backing__content p {
        margin-inline: auto;
    }

    .company-backing__brand {
        min-height: 200px;
        padding: 30px 24px;
        text-align: center;
    }

}

.company-backing__logo{
    width: 260px;
    max-width:100%;

    margin:22px auto 18px;

    display:block;

    object-fit:contain;
}

.company-backing__features{
    margin:28px 0 0;
    padding:0;

    list-style:none;

    display:grid;
    gap:12px;
}

.company-backing__features li{

    display:flex;
    align-items:center;
    gap:10px;

    color:rgba(255,255,255,.78);

    font-size:.82rem;
}


/* =========================================================
   RESPALDO DE NÚCLEO SOFTWARE
========================================================= */

.company-backing {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(90px, 10vw, 145px) 0;
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(45, 164, 155, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(73, 115, 145, 0.14),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #082c32 0%,
            #0b333a 48%,
            #092930 100%
        );
}

.company-backing::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.2;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 55px 55px;
    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );
}

.company-backing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1180px, calc(100% - 40px));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.28),
        transparent
    );
}

/* LUCES DECORATIVAS */

.company-backing__glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(15px);
    pointer-events: none;
}

.company-backing__glow--one {
    top: -170px;
    right: -110px;
    width: 430px;
    height: 430px;
    background: rgba(76, 184, 168, 0.08);
}

.company-backing__glow--two {
    bottom: -220px;
    left: -150px;
    width: 480px;
    height: 480px;
    background: rgba(71, 136, 175, 0.08);
}

/* CONTENEDOR */

.company-backing__container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.8fr);
    align-items: center;
    gap: clamp(60px, 8vw, 110px);
}

/* CONTENIDO */

.company-backing__content {
    max-width: 680px;
}

.company-backing__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 9px 15px;
    border: 1px solid rgba(120, 215, 202, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: #9fe0d6;
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.company-backing__eyebrow-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(120, 215, 202, 0.13);
    color: #7bd2c5;
    font-size: 0.75rem;
}

.company-backing__content h2 {
    max-width: 650px;
    margin: 0 0 26px;
    color: #ffffff;
    font-size: clamp(2.35rem, 4.5vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.company-backing__content h2 span {
    color: #76d1c3;
}

.company-backing__content p {
    max-width: 650px;
    margin: 0 0 18px;
    color: rgba(231, 244, 243, 0.7);
    font-size: 1rem;
    line-height: 1.85;
}

.company-backing__content .company-backing__lead {
    color: rgba(242, 250, 249, 0.88);
    font-size: 1.07rem;
}

.company-backing__lead strong {
    color: #ffffff;
    font-weight: 700;
}

/* ACCIONES */

.company-backing__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 36px;
}

.company-backing__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 54px;
    padding: 0 22px;
    border: 1px solid rgba(137, 220, 208, 0.22);
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        #70cbbd,
        #57b3a8
    );
    color: #082b30;
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow:
        0 15px 40px rgba(39, 151, 138, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

.company-backing__link:hover {
    transform: translateY(-4px);
    filter: brightness(1.05);
    box-shadow:
        0 20px 45px rgba(39, 151, 138, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.company-backing__link-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(8, 43, 48, 0.1);
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.company-backing__link:hover .company-backing__link-icon {
    transform: translate(2px, -2px);
}

.company-backing__location {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(225, 241, 239, 0.65);
    font-size: 0.88rem;
    font-weight: 600;
}

.company-backing__location-icon {
    position: relative;
    color: #71d2b2;
    font-size: 0.6rem;
}

.company-backing__location-icon::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(113, 210, 178, 0.35);
    border-radius: 50%;
    animation: companyBackingPulse 2s infinite;
}

/* TARJETA DE MARCA */

.company-backing__brand {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.105),
            rgba(255, 255, 255, 0.045)
        );
    box-shadow:
        0 35px 80px rgba(0, 12, 17, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.company-backing__brand::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -100px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(116, 210, 196, 0.1);
    filter: blur(6px);
}

.company-backing__brand::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08),
        transparent 25%,
        transparent 75%,
        rgba(117, 209, 195, 0.05)
    );
}

.company-backing__brand-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 26px;
}

.company-backing__brand-label {
    color: rgba(220, 239, 237, 0.58);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.company-backing__brand-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid rgba(115, 215, 180, 0.16);
    border-radius: 999px;
    background: rgba(91, 191, 157, 0.08);
    color: #8ed8bd;
    font-size: 0.7rem;
    font-weight: 700;
}

.company-backing__brand-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #67d39e;
    box-shadow: 0 0 0 5px rgba(103, 211, 158, 0.1);
}

/* LOGO */

.company-backing__logo-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 125px;
    margin-bottom: 25px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.94);
}

.company-backing__logo {
    position: relative;
    z-index: 2;
    display: block;
    width: min(245px, 85%);
    max-height: 88px;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.company-backing__brand:hover .company-backing__logo {
    transform: scale(1.035);
}

.company-backing__logo-shine {
    position: absolute;
    top: -100%;
    left: -60%;
    width: 35%;
    height: 300%;
    transform: rotate(25deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.7),
        transparent
    );
    transition: left 0.8s ease;
}

.company-backing__brand:hover .company-backing__logo-shine {
    left: 130%;
}

/* INFORMACIÓN DE MARCA */

.company-backing__brand-copy {
    position: relative;
    z-index: 2;
    text-align: center;
}

.company-backing__brand-copy h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.company-backing__brand-copy p {
    margin: 0;
    color: rgba(221, 239, 237, 0.58);
    font-size: 0.85rem;
    line-height: 1.5;
}

.company-backing__divider {
    position: relative;
    z-index: 2;
    height: 1px;
    margin: 27px 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.14),
        transparent
    );
}

/* BENEFICIOS */

.company-backing__features {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
}

.company-backing__feature {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.company-backing__feature:hover {
    transform: translateX(4px);
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.045);
}

.company-backing__feature-icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(112, 210, 195, 0.17);
    border-radius: 10px;
    background: rgba(112, 210, 195, 0.1);
    color: #7fd7ca;
    font-size: 0.78rem;
    font-weight: 800;
}

.company-backing__feature div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.company-backing__feature strong {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 650;
}

.company-backing__feature small {
    color: rgba(217, 236, 233, 0.5);
    font-size: 0.72rem;
    line-height: 1.4;
}

/* PIE DE LA TARJETA */

.company-backing__brand-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 25px;
    color: rgba(218, 236, 234, 0.4);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.company-backing__brand-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

/* ANIMACIONES */

@keyframes companyBackingPulse {
    0% {
        opacity: 0.8;
        transform: scale(0.85);
    }

    70% {
        opacity: 0;
        transform: scale(1.5);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* RESPONSIVE */

@media (max-width: 1024px) {

    .company-backing__container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .company-backing__content {
        max-width: 760px;
    }

    .company-backing__brand {
        width: min(100%, 580px);
    }

}

@media (max-width: 680px) {

    .company-backing {
        padding: 80px 0;
    }

    .company-backing__container {
        gap: 45px;
    }

    .company-backing__content h2 {
        font-size: clamp(2.15rem, 10vw, 3rem);
    }

    .company-backing__content p,
    .company-backing__content .company-backing__lead {
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .company-backing__actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .company-backing__link {
        width: 100%;
    }

    .company-backing__brand {
        padding: 22px;
        border-radius: 24px;
    }

    .company-backing__brand-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .company-backing__logo-wrapper {
        min-height: 110px;
    }

}

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

    .company-backing__location-icon::after {
        animation: none;
    }

    .company-backing__logo-shine,
    .company-backing__logo,
    .company-backing__link,
    .company-backing__feature {
        transition: none;
    }

}

/* ==========================================================
   FOOTER - NÚCLEO SOFTWARE
========================================================== */

.footer__powered{

    /*margin-top:70px;
    margin-bottom:55px;*/

    text-align:center;

}

.footer__powered-line{

    width:100%;
    max-width:240px;
    height:1px;

    margin:0 auto 35px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.22),
        transparent
    );

}

.footer__powered-title{

    display:block;

    margin-bottom:22px;

    color:rgba(255,255,255,.55);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.footer__powered-logo{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    background:#ffffff;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.20);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.footer__powered-logo:hover{

    transform:translateY(-5px);

    box-shadow:
        0 22px 50px rgba(0,0,0,.28);

}

.footer__powered-logo img{

    display:block;

    width:170px;

    height:auto;

}

.footer__powered-text{

    max-width:520px;

    margin:24px auto 0;

    color:rgba(255,255,255,.62);

    font-size:.95rem;

    line-height:1.8;

}

/* Responsive */

@media (max-width:768px){

    .footer__powered{

        margin-top:55px;
        margin-bottom:45px;

    }

    .footer__powered-logo{

        width:100%;

        max-width:280px;

        padding:16px;

    }

    .footer__powered-logo img{

        width:150px;

    }

    .footer__powered-text{

        font-size:.90rem;

        line-height:1.7;

        padding:0 15px;

    }

}


/* ==========================================================
   RESPALDO NÚCLEO SOFTWARE EN FOOTER
========================================================== */

.footer__powered-container {
    /*padding-top: 44px;
    padding-bottom: 44px;*/
}

.footer__powered {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(220px, 420px);
    align-items: center;
    justify-content: center;
    gap: 28px;

    padding: 28px 34px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__powered-title {
    color: rgba(255, 255, 255, 0.5);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.14em;
    line-height: 1.5;
    text-transform: uppercase;
}

.footer__powered-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 20px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.footer__powered-logo:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.23);
}

.footer__powered-logo img {
    display: block;

    width: 135px;
    max-height: 52px;

    object-fit: contain;
}

.footer__powered-text {
    margin: 0;

    color: rgba(255, 255, 255, 0.55);

    font-size: 0.84rem;
    line-height: 1.7;
}

/* TABLET */

@media (max-width: 900px) {

    .footer__powered {
        grid-template-columns: 1fr;
        justify-items: center;

        gap: 18px;

        text-align: center;
    }

    .footer__powered-text {
        max-width: 440px;
    }

}

/* CELULAR */

@media (max-width: 600px) {

    .footer__powered-container {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .footer__powered {
        padding: 28px 10px;
    }

    .footer__powered-logo {
        padding: 12px 18px;
    }

    .footer__powered-logo img {
        width: 125px;
    }

}

/* =====================================================
   FORMULARIO DE CONTACTO
===================================================== */

.form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.form-group__help {
    display: block;

    margin-top: 8px;

    color: rgba(33, 53, 72, 0.55);

    font-size: 0.76rem;
    line-height: 1.5;
}

.contact-form__recaptcha {
    display: flex;
    align-items: center;

    margin-top: 4px;
    margin-bottom: 24px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;

    border-color: #56b9aa;

    box-shadow:
        0 0 0 4px rgba(86, 185, 170, 0.13);
}

.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown) {
    border-color: rgba(211, 71, 82, 0.5);
}

.contact-form input:valid:not(:placeholder-shown),
.contact-form textarea:valid:not(:placeholder-shown) {
    border-color: rgba(43, 155, 113, 0.45);
}

.contact-form .button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 430px) {

    .contact-form__recaptcha {
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .g-recaptcha {
        transform: scale(0.88);
        transform-origin: left center;
    }

}

.form-message {
    display: none;
    margin-top: 18px;
    padding: 13px 15px;

    border-radius: 12px;

    font-size: 0.86rem;
    line-height: 1.6;
}

.form-message--error {
    display: block;

    border: 1px solid rgba(211, 71, 82, 0.18);

    background: rgba(211, 71, 82, 0.08);
    color: #b52f3c;
}

/* =========================================================
   RESPONSIVIDAD GENERAL DEFINITIVA
   TABLET + CELULAR
   PEGAR AL FINAL DEL STYLE.CSS
========================================================= */

/* Evita desbordamientos causados por textos, grids e imágenes */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

.hero__content,
.hero__visual,
.process__content,
.process__visual,
.about__visual,
.about__content,
.contact__information,
.contact-form,
.company-backing__content,
.company-backing__brand,
.pricing-card,
.service-card {
    min-width: 0;
}

.hero__title,
.section-title,
.company-backing__content h2,
.testimonial blockquote,
.pricing-card h3 {
    overflow-wrap: break-word;
    word-break: normal;
}

/* =========================================================
   TABLET GRANDE
   901px - 1100px
========================================================= */

@media screen and (max-width: 1100px) {

    :root {
        --container: 960px;
    }

    .container {
        width: min(calc(100% - 48px), var(--container));
    }

    .section {
        padding: 100px 0;
    }

    .section-heading {
        margin-bottom: 48px;
    }

    .section-title {
        font-size: clamp(2.5rem, 5vw, 3.6rem);
    }

    /* HEADER */

    .navigation {
        gap: 16px;
    }

    .navigation__link {
        font-size: 0.76rem;
    }

    .navigation .button {
        padding-inline: 18px;
    }

    /* HERO */

    .hero {
        min-height: auto;
        padding-bottom: 135px;
    }

    .hero__container {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 45px;
    }

    .hero__title {
        font-size: clamp(2.9rem, 5.5vw, 4rem);
    }

    .hero__description {
        font-size: 1rem;
    }

    .hero__visual {
        min-height: 540px;
    }

    .hero-card--rating {
        left: -15px;
    }

    .hero-card--main {
        right: -5px;
    }

    /* SERVICIOS */

    .services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* PROCESO */

    .process__container {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 50px;
    }

    .process__visual {
        min-height: 530px;
    }

    .mobile-chat {
        width: 195px;
        min-height: 390px;
    }

    /* NOSOTROS */

    .about__container {
        gap: 55px;
    }

    .about__image-wrapper img {
        height: 550px;
    }

    .about__experience {
        right: -15px;
    }

    /* PRECIOS */

    .pricing__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-card {
        min-height: 620px;
    }

    .pricing-card:last-child {
        grid-column: 1 / -1;
        width: min(100%, 570px);
        margin-inline: auto;
    }

    .pricing-card--featured,
    .pricing-card--featured:hover {
        transform: none;
    }

    /* CONTACTO */

    .contact__card {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 40px;
        padding: 45px;
    }

    /* RESPALDO */

    .company-backing__container {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 0.78fr);
        gap: 55px;
    }

    /* FOOTER */

    .footer__container {
        grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
        gap: 35px;
    }
}

/* =========================================================
   TABLET
   Hasta 900px
========================================================= */

@media screen and (max-width: 900px) {

    :root {
        --header-height: 76px;
    }

    .container {
        width: min(calc(100% - 40px), var(--container));
    }

    .section {
        padding: 90px 0;
    }

    .section-heading {
        max-width: 680px;
        margin-bottom: 44px;
    }

    .section-title {
        margin-top: 14px;
        font-size: clamp(2.25rem, 6vw, 3.3rem);
        line-height: 1.08;
    }

    .section-description {
        font-size: 0.96rem;
    }

    /* HEADER Y MENÚ */

    .header__container {
        position: relative;
    }

    .menu-toggle {
        display: block;
        flex-shrink: 0;
    }

    .navigation {
        position: fixed;
        top: calc(var(--header-height) + 10px);
        right: 20px;
        left: 20px;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        width: auto;
        max-height: 0;
        padding: 0 22px;

        overflow: hidden;

        border: 1px solid transparent;
        border-radius: 22px;

        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow-large);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-14px);

        transition:
            max-height 0.45s ease,
            padding 0.45s ease,
            opacity 0.3s ease,
            visibility 0.3s ease,
            transform 0.3s ease;
    }

    .navigation.open {
        max-height: calc(100vh - var(--header-height) - 35px);
        padding: 16px 22px 22px;

        overflow-y: auto;

        border-color: var(--border);

        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .navigation__link {
        width: 100%;
        padding: 14px 2px;

        border-bottom: 1px solid var(--border);

        font-size: 0.88rem;
    }

    .navigation__link::after {
        display: none;
    }

    .navigation .button {
        width: 100%;
        margin-top: 16px;
    }

    /* HERO */

    .hero {
        min-height: auto;

        padding-top: calc(var(--header-height) + 65px);
        padding-bottom: 125px;
    }

    .hero__container {
        grid-template-columns: minmax(0, 1fr);
        gap: 50px;
    }

    .hero__content {
        max-width: 760px;
        margin-inline: auto;

        text-align: center;
    }

    .hero__title {
        max-width: 720px;
        margin-inline: auto;

        font-size: clamp(3rem, 8vw, 4.8rem);
        line-height: 0.98;
    }

    .hero__description {
        max-width: 650px;
        margin-inline: auto;
    }

    .hero__buttons,
    .hero__benefits {
        justify-content: center;
    }

    .hero__visual {
        width: min(100%, 680px);
        min-height: 570px;
        margin: 0 auto;
    }

    .hero__image-wrapper {
        inset: 0 25px 45px;
    }

    .hero-card--rating {
        top: 35px;
        left: 0;
    }

    .hero-card--main {
        right: 0;
        bottom: 15px;
    }

    /* TRUST */

    .trust-bar__container {
        flex-direction: column;
        gap: 20px;

        text-align: center;
    }

    .trust-bar__items {
        justify-content: center;
    }

    /* SERVICIOS */

    .services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-card {
        min-height: 365px;
    }

    /* PROCESO */

    .process__container {
        grid-template-columns: minmax(0, 1fr);
        gap: 45px;
    }

    .process__content {
        max-width: 720px;
    }

    .process__visual {
        width: min(100%, 700px);
        min-height: 560px;
        margin-inline: auto;
    }

    /* NOSOTROS */

    .about__container {
        grid-template-columns: minmax(0, 1fr);
        gap: 55px;
    }

    .about__visual {
        width: min(100%, 560px);
        max-width: none;
        margin-inline: auto;
    }

    .about__content {
        max-width: 720px;
    }

    /* TESTIMONIO */

    .testimonial blockquote {
        font-size: clamp(2rem, 5vw, 2.8rem);
    }

    /* PRECIOS */

    .pricing__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-card {
        min-height: auto;
    }

    .pricing-card:last-child {
        grid-column: 1 / -1;
        width: min(100%, 570px);
        margin-inline: auto;
    }

    .pricing-card--featured,
    .pricing-card--featured:hover {
        transform: none;
    }

    /* CONTACTO */

    .contact__card {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        padding: 40px;
    }

    .contact__information {
        max-width: 680px;
    }

    /* RESPALDO DE NÚCLEO */

    .company-backing {
        padding: 95px 0;
    }

    .company-backing__container {
        grid-template-columns: minmax(0, 1fr);
        gap: 45px;
    }

    .company-backing__content {
        max-width: 760px;
    }

    .company-backing__brand {
        width: min(100%, 620px);
        margin-inline: auto;
    }

    /* FOOTER */

    .footer__container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 45px 35px;
    }

    .footer__brand {
        grid-column: 1 / -1;
    }

    .footer__brand p {
        max-width: 600px;
    }

    .footer__powered {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;

        text-align: center;
    }

    .footer__powered-text {
        max-width: 520px;
    }
}

/* =========================================================
   TABLET PEQUEÑA
   Hasta 768px
========================================================= */

@media screen and (max-width: 768px) {

    .container {
        width: min(calc(100% - 32px), var(--container));
    }

    .section {
        padding: 80px 0;
    }

    .section-label {
        gap: 9px;
        font-size: 0.68rem;
    }

    .section-label::before {
        width: 24px;
    }

    .section-title {
        font-size: clamp(2.1rem, 7vw, 3rem);
    }

    /* MARCA */

    .brand {
        gap: 9px;
    }

    .brand__logo {
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }

    .brand__name {
        font-size: 1.65rem;
    }

    .brand__tagline {
        font-size: 0.59rem;
    }

    .brand__company {
        font-size: 0.52rem;
    }

    /* HERO */

    .hero {
        padding-bottom: 110px;
    }

    .hero__title {
        font-size: clamp(2.8rem, 10vw, 4.2rem);
    }

    .hero__visual {
        min-height: 520px;
    }

    .hero__image-wrapper {
        inset: 0 15px 45px;
    }

    .hero-card {
        padding: 14px;
        border-radius: 18px;
    }

    .hero-card__icon,
    .hero-card__rating-number {
        min-width: 47px;
        height: 47px;
        border-radius: 15px;
    }

    .hero-card--main {
        width: 255px;
    }

    /* SERVICIOS */

    .services__grid {
        gap: 20px;
    }

    .service-card {
        padding: 30px 25px;
    }

    /* DASHBOARD */

    .dashboard {
        width: calc(100% - 70px);
    }

    .mobile-chat {
        width: 190px;
        min-height: 380px;
    }

    /* ABOUT */

    .about__image-wrapper img {
        height: 520px;
    }

    /* CONTACTO */

    .contact__card {
        padding: 32px;
        border-radius: 30px;
    }

    .contact-form {
        padding: 28px;
    }

    /* FOOTER */

    .footer {
        padding-top: 60px;
    }

    .footer__container {
        padding-bottom: 45px;
    }
}

/* =========================================================
   CELULAR
   Hasta 620px
========================================================= */

@media screen and (max-width: 620px) {

    :root {
        --header-height: 70px;
        --radius-small: 13px;
        --radius-medium: 22px;
        --radius-large: 28px;
    }

    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .section {
        padding: 70px 0;
    }

    .section-heading {
        margin-bottom: 38px;
    }

    .section-title,
    .section-title--left {
        text-align: center;

        font-size: clamp(2rem, 10vw, 2.7rem);
        line-height: 1.08;
        letter-spacing: -0.035em;
    }

    .section-description,
    .section-description--left {
        margin-inline: auto;
        text-align: center;
        font-size: 0.92rem;
    }

    /* BOTONES */

    .button {
        min-height: 52px;
        padding-inline: 21px;
    }

    /* HEADER */

    .header {
        height: var(--header-height);
    }

    .navigation {
        top: calc(var(--header-height) + 8px);
        right: 14px;
        left: 14px;
    }

    .brand__logo {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .brand__name {
        font-size: 1.42rem;
    }

    .brand__tagline {
        margin-top: 4px;
        font-size: 0.53rem;
    }

    .brand__company {
        display: none;
    }

    .menu-toggle {
        width: 44px;
        height: 44px;
    }

    /* HERO */

    .hero {
        padding-top: calc(var(--header-height) + 52px);
        padding-bottom: 95px;
    }

    .hero__container {
        gap: 40px;
    }

    .hero__title {
        margin-top: 17px;
        margin-bottom: 20px;

        font-size: clamp(2.55rem, 12vw, 3.6rem);
        line-height: 1;
        letter-spacing: -0.045em;
    }

    .hero__description {
        font-size: 0.93rem;
        line-height: 1.7;
    }

    .hero__buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;

        margin-top: 28px;
    }

    .hero__buttons .button {
        width: 100%;
    }

    .hero__benefits {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;

        margin-top: 35px;

        text-align: left;
    }

    .hero-benefit {
        width: 100%;
        padding: 11px;

        border: 1px solid var(--border);
        border-radius: 15px;

        background: rgba(255, 255, 255, 0.52);
    }

    .hero__visual {
        width: 100%;
        min-height: 450px;
    }

    .hero__image-wrapper {
        inset: 0 0 55px;

        border-width: 6px;
        border-radius:
            38% 62% 37% 63%
            / 35% 40% 60% 65%;
    }

    .hero-card {
        gap: 10px;
        padding: 11px;
    }

    .hero-card span {
        font-size: 0.61rem;
    }

    .hero-card strong {
        font-size: 0.72rem;
    }

    .hero-card__icon,
    .hero-card__rating-number {
        min-width: 40px;
        height: 40px;

        border-radius: 12px;

        font-size: 1rem;
    }

    .hero-card--rating {
        top: 14px;
        left: 5px;
    }

    .hero-card--main {
        right: 4px;
        bottom: 10px;

        width: min(235px, calc(100% - 10px));
    }

    .hero__decorative-circle {
        display: none;
    }

    .hero__curve {
        bottom: -80px;
        height: 120px;
    }

    /* TRUST */

    .trust-bar {
        padding: 25px 0;
    }

    .trust-bar p {
        font-size: 1.12rem;
    }

    .trust-bar__items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        width: 100%;
        gap: 11px;
    }

    .trust-bar__items span {
        padding: 8px;

        border: 1px solid var(--border);
        border-radius: 10px;

        background: var(--background);
    }

    .trust-bar__items span::after {
        display: none;
    }

    /* SERVICIOS */

    .services__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .service-card {
        min-height: auto;
        padding: 28px 23px 75px;
    }

    .service-card__icon {
        width: 62px;
        height: 62px;

        margin-bottom: 22px;

        border-radius: 19px;

        font-size: 1.5rem;
    }

    .service-card h3 {
        font-size: 1.55rem;
    }

    .service-card a {
        bottom: 25px;
        left: 23px;
    }

    /* PROCESO */

    .process__steps {
        gap: 20px;
        margin: 30px 0;
    }

    .process-step {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 14px;
    }

    .process-step__number {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .process__visual {
        min-height: 400px;
    }

    .dashboard {
        top: 0;
        left: 0;

        width: 100%;
        padding: 15px;

        border-radius: 22px;

        transform: none;
    }

    .dashboard__welcome {
        margin-top: 18px;
    }

    .dashboard__welcome h3 {
        font-size: 1.25rem;
    }

    .dashboard__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .dashboard-card {
        padding: 15px;
    }

    .dashboard__cards .dashboard-card:last-child {
        display: none;
    }

    .mobile-chat {
        display: none;
    }

    /* NOSOTROS */

    .about__container {
        gap: 40px;
    }

    .about__image-wrapper {
        border-radius: 34% 34% 24px 24px;
    }

    .about__image-wrapper img {
        height: 440px;
    }

    .about__experience {
        right: 10px;
        bottom: 12px;

        width: min(210px, calc(100% - 20px));
        padding: 15px;
    }

    .about__experience strong {
        font-size: 2.15rem;
    }

    .about__features {
        gap: 18px;
    }

    .about-feature {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
    }

    /* TESTIMONIO */

    .testimonial__quote {
        height: 58px;
        font-size: 7rem;
    }

    .testimonial blockquote {
        margin-bottom: 26px;

        font-size: clamp(1.65rem, 8vw, 2.2rem);
        line-height: 1.3;
    }

    /* PRECIOS */

    .pricing::before {
        display: none;
    }

    .pricing__grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px;
    }

    .pricing-card,
    .pricing-card:last-child,
    .pricing-card--featured {
        grid-column: auto !important;

        width: 100% !important;
        min-width: 0;
        min-height: auto;

        margin: 0 !important;
        padding: 30px 22px 24px;

        transform: none !important;
    }

    .pricing-card--featured {
        order: -1;
    }

    .pricing-card:hover,
    .pricing-card--featured:hover {
        transform: translateY(-5px) !important;
    }

    .pricing-card__header {
        padding-right: 5px;
    }

    .pricing-card__icon {
        min-width: 56px;
        height: 56px;
        border-radius: 17px;
    }

    .pricing-card h3 {
        font-size: 1.6rem;
    }

    .pricing-card__description {
        min-height: auto;
        margin-bottom: 22px;
    }

    .pricing-card__price {
        align-items: flex-start;

        min-height: auto;
        margin-bottom: 22px;
        padding-bottom: 22px;
    }

    .pricing-card__price strong {
        font-size: clamp(3.3rem, 17vw, 4.2rem);
    }

    .pricing-card__price div {
        min-width: 0;
    }

    .pricing-card__price small {
        white-space: normal;
    }

    .pricing-card__custom-price {
        min-height: auto;
    }

    .pricing-card__custom-price strong {
        font-size: 1.85rem;
    }

    .pricing-card__features {
        gap: 12px;
    }

    .pricing-card__features li {
        grid-template-columns: 27px minmax(0, 1fr);
    }

    .pricing-card__badge {
        right: 17px;

        max-width: calc(100% - 34px);

        padding: 7px 12px;

        font-size: 0.56rem;
        white-space: normal;
        text-align: center;
    }

    .pricing__note {
        flex-direction: column;
        align-items: flex-start;
        gap: 13px;

        margin-top: 28px;
        padding: 20px;
    }

    .pricing__note a {
        white-space: normal;
    }

    /* CONTACTO */

    .contact__card {
        gap: 30px;
        padding: 22px;

        border-radius: 25px;
    }

    .contact__details {
        gap: 14px;
        margin-top: 28px;
    }

    .contact-detail {
        align-items: flex-start;
    }

    .contact-detail strong {
        overflow-wrap: anywhere;
    }

    .contact-form {
        padding: 21px;

        border-radius: 21px;
    }

    .contact-form__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .form-group {
        margin-bottom: 17px;
    }

    .form-group input,
    .form-group select {
        height: 50px;
    }

    .contact-form__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .contact-form__footer .button {
        width: 100%;
    }

    .contact-form__recaptcha {
        width: 100%;
        overflow-x: auto;
    }

    /* RESPALDO NÚCLEO SOFTWARE */

    .company-backing {
        padding: 75px 0;
    }

    .company-backing__container {
        gap: 35px;
    }

    .company-backing__content {
        text-align: center;
    }

    .company-backing__eyebrow {
        justify-content: center;
        margin-inline: auto;
    }

    .company-backing__content h2 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .company-backing__content p,
    .company-backing__content .company-backing__lead {
        font-size: 0.93rem;
        line-height: 1.75;
    }

    .company-backing__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .company-backing__link {
        width: 100%;
    }

    .company-backing__location {
        justify-content: center;
    }

    .company-backing__brand {
        min-height: auto;
        padding: 22px;

        border-radius: 23px;
    }

    .company-backing__brand-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .company-backing__logo-wrapper {
        min-height: 105px;
        padding-inline: 15px;
    }

    .company-backing__logo {
        width: min(230px, 100%);
    }

    .company-backing__features {
        grid-template-columns: minmax(0, 1fr);
    }

    /* FOOTER */

    .footer {
        padding-top: 55px;
    }

    .footer__container {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px;

        padding-bottom: 40px;
    }

    .footer__brand {
        grid-column: auto;
    }

    .footer__column {
        gap: 9px;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;

        padding: 20px 0;
    }

    .footer__bottom div {
        flex-wrap: wrap;
        gap: 10px 18px;
    }

    .footer__powered {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;

        padding: 25px 10px;
    }

    .footer__powered-logo {
        width: min(100%, 260px);
    }

    .footer__powered-text {
        padding: 0 5px;

        font-size: 0.84rem;
    }

    /* WHATSAPP */

    .whatsapp {
        right: 14px;
        bottom: 14px;

        width: 52px;
        height: 52px;

        border-width: 3px;
    }
}

/* =========================================================
   CELULARES PEQUEÑOS
   Hasta 430px
========================================================= */

@media screen and (max-width: 430px) {

    .container {
        width: min(calc(100% - 22px), var(--container));
    }

    .section {
        padding: 62px 0;
    }

    .section-title {
        font-size: clamp(1.85rem, 10vw, 2.35rem);
    }

    /* HEADER */

    .brand__logo {
        width: 41px;
        height: 41px;
    }

    .brand__name {
        font-size: 1.25rem;
    }

    .brand__tagline {
        max-width: 155px;
        font-size: 0.49rem;
        line-height: 1.25;
    }

    /* HERO */

    .hero {
        padding-top: calc(var(--header-height) + 42px);
        padding-bottom: 85px;
    }

    .hero__title {
        font-size: clamp(2.25rem, 12.5vw, 3rem);
    }

    .hero__description {
        font-size: 0.89rem;
    }

    .hero__visual {
        min-height: 390px;
    }

    .hero__image-wrapper {
        inset: 0 0 50px;
    }

    .hero-card--rating {
        max-width: 185px;
    }

    .hero-card--main {
        width: min(218px, calc(100% - 5px));
    }

    /* TRUST */

    .trust-bar__items {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ABOUT */

    .about__image-wrapper img {
        height: 380px;
    }

    .about__experience {
        position: relative;
        right: auto;
        bottom: auto;

        width: 100%;
        margin-top: 14px;
    }

    /* CONTACTO */

    .contact__card {
        padding: 16px;
    }

    .contact-form {
        padding: 17px;
    }

    .contact-detail {
        gap: 10px;
    }

    .contact-detail__icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    /* RECAPTCHA */

    .contact-form__recaptcha {
        overflow: visible;
    }

    .g-recaptcha {
        width: 304px;

        transform: scale(0.82);
        transform-origin: left top;
    }

    /* PRECIOS */

    .pricing-card,
    .pricing-card:last-child,
    .pricing-card--featured {
        padding: 28px 18px 22px;
    }

    .pricing-card__header {
        gap: 12px;
    }

    .pricing-card__icon {
        min-width: 50px;
        height: 50px;
    }

    .pricing-card__price strong {
        font-size: clamp(3rem, 18vw, 3.8rem);
    }

    /* RESPALDO */

    .company-backing__brand {
        padding: 18px;
    }

    .company-backing__feature {
        padding: 13px;
    }

    /* FOOTER */

    .footer__powered-logo img {
        width: 120px;
    }

    .footer__powered-title {
        font-size: 0.65rem;
    }
}

/* =========================================================
   CELULARES MUY PEQUEÑOS
   Hasta 360px
========================================================= */

@media screen and (max-width: 360px) {

    .brand__tagline {
        display: none;
    }

    .hero__title {
        font-size: 2.15rem;
    }

    .hero__visual {
        min-height: 360px;
    }

    .hero-card--rating {
        transform: scale(0.9);
        transform-origin: top left;
    }

    .hero-card--main {
        right: -5px;

        transform: scale(0.9);
        transform-origin: bottom right;
    }

    .contact-form {
        padding: 14px;
    }

    .g-recaptcha {
        transform: scale(0.75);
    }

    .pricing-card__price {
        flex-wrap: wrap;
    }

    .pricing-card__price strong {
        font-size: 3rem;
    }
}

/* =========================================================
   DISPOSITIVOS TÁCTILES
   Evita movimientos incómodos al tocar tarjetas
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .service-card:hover,
    .pricing-card:hover,
    .pricing-card--featured:hover,
    .company-backing__link:hover,
    .footer__powered-logo:hover,
    .button:hover {
        transform: none !important;
    }

    .hero__image-wrapper:hover .hero__image,
    .about__image-wrapper:hover img,
    .company-backing__brand:hover .company-backing__logo {
        transform: none;
    }
}