@media (min-width: 900px) {

    .btn {
        cursor: pointer;
        outline: none;
        transition: background-color 0.4s;
        font-family: 'Inter', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: calc(15px * 0.7); /* 10.5px */
        border-radius: calc(20px * 0.7); /* 14px */
        padding: 0 calc(16px * 0.7); /* 11.2px */
        font-weight: 600;
        font-size: calc(14px * 0.7); /* 9.8px */
    }

        .btn span.icon {
            margin-right: calc(20px * 0.7); /* 14px */
            font-size: calc(155% * 0.7); /* 108.5% */
        }

        .btn:hover {
            background-color: #105A3B; /* Un tono más oscuro para el hover */
        }

    .btn-small {
        height: calc(32px * 0.7); /* 22.4px */
        padding: 0 calc(16px * 0.7); /* 11.2px */
        font-size: calc(12px * 0.7); /* 8.4px */
        font-weight: 600; /* Semicursiva */
        border-radius: calc(16px * 0.7); /* 11.2px */
        margin: 0px !important;
    }

    .btn-medium {
        height: calc(40px * 0.7); /* 28px */
        padding: 0 calc(16px * 0.7); /* 11.2px */
        font-size: calc(14px * 0.7); /* 9.8px */
        font-weight: 600;
        border-radius: calc(20px * 0.7); /* 14px */
    }

    .btn-large {
        height: calc(52px * 0.7); /* 36.4px */
        padding: 0 calc(24px * 0.7); /* 16.8px */
        font-size: calc(16px * 0.7); /* 11.2px */
        font-weight: 600;
        border-radius: calc(26px * 0.7); /* 18.2px */
    }

    .icon-small {
        font-size: calc(18px * 0.7); /* 12.6px */
    }

    .margin-small {
        margin-right: calc(4px * 0.7); /* 2.8px */
    }

    .icon-medium {
        font-size: calc(24px * 0.7); /* 16.8px */
    }

    .margin-medium {
        margin-right: calc(8px * 0.7); /* 5.6px */
    }

    .icon-large {
        font-size: calc(30px * 0.7); /* 21px */
    }

    .margin-large {
        margin-right: calc(12px * 0.7); /* 8.4px */
    }

    .btn-principal {
        background-color: var(--color-Principal); /* Verde Oscuro */
        color: white;
    }

        .btn-principal:hover {
            background-color: #013B28;
            color: white;
            box-shadow: 0 0 calc(2px * 0.7) calc(1px * 0.7) rgba(0, 150, 136, 0.5); /* 1.4px 0.7px */
        }

    .btn-secundario {
        background-color: var(--color-Secundario); /* Azul Oscuro */
        color: white;
    }

        .btn-secundario:hover {
            background-color: #003C5A;
            color: white;
            box-shadow: 0 0 calc(2px * 0.7) calc(1px * 0.7) rgba(#11161E); /* 1.4px 0.7px */
        }

    .btn-negativo {
        background-color: #780000; /* Rojo */
        color: white;
    }

        .btn-negativo:hover {
            background-color: var(--color-Negativo);
            color: white;
        }

    .btn-regresar {
        background-color: white; /* Fondo blanco */
        color: #105A3B; /* Texto verde oscuro */
        border: calc(2px * 0.7) solid #105A3B !important; /* 1.4px */
        cursor: pointer;
        outline: none; /* Elimina el contorno que aparece al enfocar el botón */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: calc(15px * 0.7); /* 10.5px */
        border-radius: calc(20px * 0.7); /* 14px */
        padding: 0 calc(16px * 0.7); /* 11.2px */
        font-weight: 600;
        font-size: calc(14px * 0.7); /* 9.8px */
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

        .btn-regresar:hover {
            background-color: var(--color-Principal);
            color: white; /* Texto blanco al pasar el mouse */
            border-color: #105A3B; /* Borde verde oscuro al pasar el mouse */
        }
}